import { KbqTimezoneModule } from '@koobiq/components/timezone';

Selector: kbq-timezone-option

Properties
Name Description
arrow: boolean
availablePositions: { [key: string]: ConnectionPositionPair; }
closingActionsSubscription: Subscription
color: string
container: HTMLElement
content: string | TemplateRef
context: any
customClass: string
destroyRef: DestroyRef
detach: () => void
direction: Directionality
disabled: boolean
elementRef: ElementRef
enterDelay: number
focusMonitor: FocusMonitor
forDisabledComponent: InputSignal>> Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
hideWithTimeout: boolean Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
hostView: ViewContainerRef
hovered: BehaviorSubject Stream that emits when the popupTrigger is hovered.
ignoreTooltipPointerEvents: InputSignal Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
instance: any
isOpen: boolean
leaveDelay: number
listeners: Map
modifier: TooltipModifier
mouseEvent: MouseEvent
ngZone: NgZone
offset: number
onPositionChange: ($event: ConnectedOverlayPositionChange) => void
originSelector: string
overlay: Overlay
overlayConfig: OverlayConfig
overlayRef: OverlayRef
parentPopup: KbqParentPopup
placement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
placementChange: EventEmitter
placementPriority: string | string[]
portal: ComponentPortal
preventClose: boolean prevents closure by any event
relativeToPointer: boolean Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
scheduler: AsyncScheduler
scrollDispatcher: ScrollDispatcher
scrollStrategy: () => ScrollStrategy
scrollable: CdkScrollable
stickToWindow: "top" | "right" | "left" | "bottom"
strategy: FlexibleConnectedPositionStrategy
tooltipPlacement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
tooltipPlacementPriority: string | string[]
tooltipVisible: boolean
trigger: string
triggerName: string
visible: boolean
visibleChange: EventEmitter
Methods
applyRelativeToPointer
clearListeners
closingActions
createOverlay
Create the overlay config and position strategy
focus
getAdjustedPositions
Returns a list of positions that are aligned with the element's dimensions and offsets.
getMouseLeaveListener
getOverlayHandleComponentType
getPrioritizedPositions
getPriorityPlacementStrategy
hide
initListeners
keydownHandler
onMouseEnter
onMouseLeave
resetOrigin
show
showForElement
method allows to show the tooltip relative to the element Use this approach when it is not possible to define a trigger in the template. For example: const tooltip = new KbqTooltipTrigger(); tooltip.showForElement(element);
showForMouseEvent
method allows to show the tooltip relative to the given mouse event.
touchendHandler
updateClassMap
updateData
updatePlacement
updatePlacementPriority
updatePosition
Updates the position of the current popover.
updateVisible

Selector: kbq-timezone-option

Exported as: kbqTimezoneOption
Properties
Name Description
@Input()
highlightText: string
@Input()
timezone: KbqTimezoneZone
active: boolean Whether or not the option is currently active and ready to be selected. An active option displays styles as if it is focused, but the focus is actually retained somewhere else. This comes in handy for components like autocomplete where focus must remain on the input.
disabled: any
id: string
multiple: boolean Whether the wrapping component is in multiple selection mode.
onSelectionChange: EventEmitter> Event emitted when the option is selected or deselected.
selectable: boolean
selected: boolean
showCheckbox: boolean
stateChanges: Subject Emits when the state of the option changes and any parents have to be notified.
textElement: ElementRef
tooltipContent: ElementRef
tooltipContentWrapper: ElementRef
userSelect: boolean
value: any The form value of the option.
viewValue: string
Methods
deselect
emitSelectionChangeEvent
Emits the selection change event.
focus
getHostElement
getLabel
Gets the label to be used when determining whether the option should be focused.
getTabIndex
handleKeydown
Ensures the option is selected when activated from the keyboard.
select
selectViaInteraction
`Selects the option while indicating the selection came from the user. Used to determine if the select's view -> model callback should be invoked.`
setActiveStyles
This method sets display styles on the option to make it appear active. This is used by the ActiveDescendantKeyManager so key events will display the proper options as active on arrow key events.
setInactiveStyles
This method removes display styles on the option that made it appear active. This is used by the ActiveDescendantKeyManager so key events will display the proper options as active on arrow key events.

Selector: kbq-timezone-select-trigger

Selector: kbq-timezone-select

Exported as: kbqTimezoneSelect
Properties
Name Description
backdropClass: string Classes to be passed to the overlay backdrop.
beforeOpened: OutputEmitterRef Event emitted before the select panel starts opening.
calculateHiddenItems: () => void Calculates the number of hidden items in multiple selection mode. Updates the hiddenItems property and triggers change detection.
canShowCleaner: boolean Whether the cleaner (clear button) should be shown.
cdkVirtualForOf: CdkVirtualForOf Reference to the CDK virtual scroll directive for virtual scrolling support.
cleaner: KbqCleaner Reference to the optional cleaner element for clearing selection.
closedStream: Observable Event emitted when the select has been closed.
compareWith: (o1: any, o2: any) => boolean Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. Should return true if the values match. Defaults to strict equality comparison.
controlType: string A name for this control that can be used by `kbq-form-field`.
customMatcher: KbqSelectMatcher User-supplied matcher component for custom value matching logic.
customTagTemplateRef: TemplateRef Custom template reference for rendering tag content.
customTrigger: KbqTimezoneSelectTrigger
defaultErrorStateMatcher: ErrorStateMatcher
defaultOptions: Partial<{ panelWidth: KbqSelectPanelWidth; panelMinWidth: number; searchMinOptionsThreshold: number | "auto"; }>
disabled: boolean Whether the select is disabled. When disabled, the select cannot be opened and its value cannot be changed.
elementRef: ElementRef
empty: boolean Whether no option is currently selected.
errorState: boolean Whether the component is in an error state.
errorStateMatcher: ErrorStateMatcher Object used to control when error messages are shown.
firstFiltered: boolean Whether the first selected option is filtered (not visible in the list).
firstSelected: KbqOptionBase Returns the first selected option that is not disabled.
focused: boolean Whether the select is focused.
footer: ElementRef Reference to the optional footer element in the panel.
hasBackdrop: boolean Whether the overlay should have a backdrop. When true, clicking the backdrop will close the select.
hiddenItems: number
hiddenItemsText: string Template string for hidden items text. Supports {{ number }} placeholder.
id: string Unique identifier for the select component. Auto-generates an ID if not provided.
isBrowser: boolean
isEmptySearchResult: boolean Whether the search returned no results.
keyManager: ActiveDescendantKeyManager Manages keyboard events for options in the panel.
multiSelection: boolean Whether multiple choice is enabled. True if multiple or multiline mode is active.
multiline: boolean Whether to use a multiline matcher or not. Default is false. When true, allows multiple lines of text in the selected value display.
multiple: boolean Whether multiple options can be selected. Note: This cannot be changed dynamically after initialization.
ngControl: NgControl
noOptions: boolean Whether there are no options available.
offsetY: number The y-offset of the overlay panel in relation to the trigger's top start corner. This must be adjusted to align the selected option text over the trigger text when the panel opens. Will change based on the y-position of the selected option.
onChange: (value: any) => void `View -> model callback called when value changes`
onTouched: () => void `View -> model callback called when select has been touched`
openedChange: EventEmitter Event emitted when the select panel has been toggled. Emits true when opened, false when closed.
openedStream: Observable Event emitted when the select has been opened.
optionGroups: QueryList All of the defined groups of options.
optionSelectionChanges: Observable> Combined stream of all of the child options' change events.
options: QueryList All of the defined select options.
optionsContainer: ElementRef Reference to the container element that holds the options.
overlayDir: CdkConnectedOverlay Reference to the CDK connected overlay directive.
overlayMinWidth: string | number Minimum width of the overlay panel in pixels.
overlayOrigin: ElementRef | CdkOverlayOrigin Origin element for the overlay panel positioning.
overlayPanelClass: "kbq-select-overlay" Overlay panel class.
overlayWidth: string | number Width of the overlay panel in pixels or as a string.
panel: ElementRef Reference to the overlay panel element.
panelClass: string | string[] | Set | { [key: string]: any; } Classes to be passed to the select panel. Supports the same syntax as `ngClass`.
panelDoneAnimatingStream: Subject Emits when the panel element is finished transforming in.
panelMinWidth: number
panelOpen: boolean Whether the select panel is currently open.
panelWidth: KbqSelectPanelWidth
parentForm: NgForm
parentFormGroup: FormGroupDirective
placeholder: string Placeholder text to be shown when no value is selected. Displayed in the trigger when the select is closed and no value is selected.
positions: ConnectedPosition[] This position config ensures that the top "start" corner of the overlay is aligned with the top "start" of the origin by default (overlapping the trigger completely). If the panel cannot fit below the trigger, it will fall back to a position above the trigger.
previousSelectionModelSelected: KbqOptionBase[] Previously selected options before the current selection was made.
required: boolean Whether the select is required. Affects validation and display of placeholder.
scrollStrategy: any Strategy that will be used to handle scrolling while the select panel is open.
search: KbqSelectSearch Reference to the optional search component.
searchEmpty: KbqSelectSearchEmptyResult Reference to the optional empty search result component.
searchMinOptionsThreshold: number Controls when the search functionality is displayed based on the number of available options. Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
selectAllHandler: (event: KeyboardEvent, select: KbqSelect) => void Function for handling the Ctrl + A (select all) keyboard combination. By default, the internal handler selects all options.
selected: KbqOptionBase | KbqOptionBase[] Returns the currently selected option(s). Single value or array for multiple selection.
selectionChange: EventEmitter Event emitted when the selected value has been changed by the user.
selectionModel: SelectionModel Deals with the selection logic. Manages selected options and their states.
sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.
tags: QueryList Query list of tags displayed in multiple selection mode.
transformOrigin: string The value of the select panel's transform-origin property for animations.
trigger: ElementRef Trigger - is a clickable field to open select dropdown panel
triggerFontSize: number The cached font-size of the trigger element in pixels.
triggerRect: DOMRect The last measured value for the trigger's client bounding rect.
triggerValue: string Returns the display value for the trigger element.
triggerValues: KbqOptionBase[] Returns all selected options in display order.
value: any Value of the select control. Can be a single value or array of values for multiple selection.
withVirtualScroll: boolean Whether virtual scrolling is enabled for the options panel.
Methods
calculateOverlayOffsetX
clearValue
Clears the current selection.
close
Closes the overlay panel and focuses the host element.
focus
Focuses the select element.
getItemHeight
Gets the height of a single option item.
getOverlayRect
getPanelTheme
Returns the theme to be used on the panel based on parent form field color.
handleClick
Handles click events on the select. Closes the panel if click is inside the footer.
handleKeydown
Handles all keyboard events for the select. Delegates to appropriate handler based on panel state.
hiddenItemsTextFormatter
Formats the hidden items text with the number of hidden items.
isRtl
Checks if the current direction is RTL (right-to-left).
onAttached
Callback that is invoked when the overlay panel has been attached. Sets up position change subscription and closing actions.
onBlur
Calls the touched callback only if the panel is closed. Otherwise, the trigger will "blur" to the panel when it opens, causing a false positive.
onFocus
Handles focus event on the select element.
onRemoveMatcherItem
Handles removal of a matched item in the trigger.
open
Triggers the opening of the panel component. If the component is disabled or the panel is already open, the call is ignored. Otherwise, the (beforeOpened) event is emitted. When no options are available, the panel is opened after a short delay; if options exist, it opens immediately.
openPanel
Internal method to open the panel. Handles overlay positioning and sizing. Sets up the overlay dimensions based on trigger size and configured options.
resetOverlay
resetSearch
Resets the search component if present.
resolveSearchMinOptionsThreshold
setOverlayPosition
toggle
Toggles the overlay panel open or closed.
updateErrorState
Updates the error state based on the error state matcher.
Properties
Name Description
cities: string
city: string
countryCode: string
countryName: string
id: string
offset: string
Properties
Name Description
countryCode: string
countryName: string
zones: KbqTimezoneZone[]

Convert string timezone offset (formatted offset) to number (minutes)

const parseOffset: ;

Grouping timezones by countries

const getZonesGroupedByCountry: ;
const offset: ;
const offsetFormatter: ;
const offsetFormatterAsObject: ;

Comparator for timezone sorting. Sort by offset and country name

const timezonesSortComparator: ;

Filtering timezone cities by search string

const filterCitiesBySearchString: ;
const TOOLTIP_VISIBLE_ROWS_COUNT: number;
Вопросы и предложения по документации
Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.