Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Sidepanel 
import { KbqSidepanelModule } from '@koobiq/components/sidepanel';
Services
KbqSidepanelService
Properties
Name Description
openedSidepanels: KbqSidepanelRef[] Keeps track of the currently-open sidepanels.
Methods
closeAll
Closes all of the currently-open sidepanels.
getSidepanelById
Finds an open sidepanel by its id.
open
Directives
KbqSidepanelClose

Button that will close the current sidepanel.

Selector: button[kbq-sidepanel-close], button[kbqSidepanelClose]

Properties
Name Description
@Input()
kbqSidepanelClose: any
@Input('kbq-sidepanel-close')
sidepanelResult: any
sidepanelRef: KbqSidepanelRef
KbqSidepanelContainerComponent

Selector: kbq-sidepanel-container

Properties
Name Description
animationState: KbqSidepanelAnimationState The state of the sidepanel animations.
animationStateChanged: EventEmitter Emits whenever the state of the animation changes.
attachDomPortal: (portal: DomPortal) => any
id: string ID for the container DOM element.
portalOutlet: CdkPortalOutlet The portal outlet inside of this container into which the content will be loaded.
sidepanelConfig: KbqSidepanelConfig
withIndent: boolean
Methods
attach
attachComponentPortal
Attach a component portal as content to this sidepanel container.
attachTemplatePortal
Attach a template portal as content to this sidepanel container.
detach
Detaches a previously attached portal.
dispose
Permanently dispose of this portal host.
enter
Begin animation of the sidepanel entrance into view.
exit
Begin animation of the sidepanel exiting from view.
hasAttached
Whether this host has an attached portal.
KbqSidepanelHeader

Header of a sidepanel.

Selector: kbq-sidepanel-header

Properties
Name Description
@Input()
closeable: boolean 		Add button for close sidepanel. Default false
@Input()
truncateText: boolean 		Enables text truncation. Default true
KbqSidepanelBody

Scrollable content container of a sidepanel.

Selector: kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody

KbqSidepanelFooter

Footer of a sidepanel.

Selector: kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter

KbqSidepanelActions

Actions block of a sidepanel footer.

Selector: kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions

Classes
KbqSidepanelConfig
Properties
Name Description
backdropClass: string
data: D Data being injected into the child component.
disableClose: boolean Whether the user can use escape or clicking outside to close the sidepanel.
hasBackdrop: boolean Whether the sidepanel has a backdrop.
id: string ID for the sidepanel. If omitted, a unique one will be generated.
injector: Injector Injector used for the instantiation of the component to be attached. Allows to pass a custom injector to provide a dependency injection hierarchy for the sidepanel content.
overlayPanelClass: string | string[] Custom class for the overlay pane.
position: KbqSidepanelPosition
size: KbqSidepanelSize
trapFocus: boolean Whether the focus trap is active.
trapFocusAutoCapture: boolean capture focus on initialization. This option sets cdkTrapFocusAutoCapture.
Deprecated
requiredBackdrop: boolean 		When we open multiple sidepanels, backdrop appears only once, except cases then this flag is true.
KbqSidepanelRef
Properties
Name Description
bodyOverflow: WritableSignal<{ top: boolean; bottom: boolean; }> Vertical scroll overflow state of the sidepanel body. Updated on scroll and used for visual adjustments.
config: KbqSidepanelConfig
containerInstance: KbqSidepanelContainerComponent
id: string
instance: T Instance of the component making up the content of the sidepanel.
overlayRef: OverlayRef
Methods
afterClosed
Gets an observable that is notified when the sidepanel is finished closing.
afterOpened
Gets an observable that is notified when the sidepanel has opened and appeared.
beforeClosed
Gets an observable that is notified when the sidepanel is started closing.
close
Constants
KBQ_SIDEPANEL_DATA

Injection token that can be used to access the data that was passed in to a sidepanel.

const KBQ_SIDEPANEL_DATA: InjectionToken<any>;
KBQ_SIDEPANEL_DEFAULT_OPTIONS

Injection token that can be used to specify default sidepanel options.

const KBQ_SIDEPANEL_DEFAULT_OPTIONS: InjectionToken<KbqSidepanelConfig<any>>;
KBQ_SIDEPANEL_WITH_INDENT 
const KBQ_SIDEPANEL_WITH_INDENT: InjectionToken<boolean>;
KBQ_SIDEPANEL_WITH_SHADOW
Deprecated 
const KBQ_SIDEPANEL_WITH_SHADOW: InjectionToken<boolean>;
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.