platform-core-ng 22.3.0-rc.0 → 22.3.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9063,7 +9063,7 @@ class BsSelect {
|
|
|
9063
9063
|
useExisting: forwardRef(() => BsSelect),
|
|
9064
9064
|
multi: true,
|
|
9065
9065
|
},
|
|
9066
|
-
], viewQueries: [{ propertyName: "listBox", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "optionRefs", predicate: Option, descendants: true, isSignal: true }, { propertyName: "panelSearchInput", first: true, predicate: ["panelSearchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"bs-select\"\r\n [attr.aria-readonly]=\"!isTriggerSearchEnabled() ? 'true' : null\"\r\n [class.bs-select--searchable]=\"isTriggerSearchEnabled()\"\r\n [class.bs-select--searching]=\"hasSearchQuery()\"\r\n [class.bs-select--selected]=\"hasValue()\"\r\n [class.bs-select--disabled]=\"isDisabled()\"\r\n>\r\n <ng-template #selectLabel>\r\n <span class=\"bs-select__label\">\r\n @if (multiple() && selectedOptions().length) {\r\n <span class=\"bs-select__tags\">\r\n <button type=\"button\" class=\"bs-select__add\" [disabled]=\"isDisabled()\" (click)=\"openCombobox($event)\">\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"plusIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n <span>{{ placeholder() }}</span>\r\n </button>\r\n @for (option of visibleSelectedOptions(); track option.value) {\r\n <span class=\"bs-select__tag\">\r\n <span class=\"bs-select__tag-text\">{{ option.label }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__tag-remove\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\"\r\n (click)=\"removeSelectedValue(option.value, $event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"12\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n </span>\r\n }\r\n @if (hiddenSelectedCount()) {\r\n <span class=\"bs-select__tag bs-select__tag--ellipsis\" aria-hidden=\"true\">...</span>\r\n }\r\n </span>\r\n } @else {\r\n <span class=\"bs-select__label-text\">{{ displayValue() }}</span>\r\n }\r\n </span>\r\n </ng-template>\r\n\r\n @if (multiple()) {\r\n <div\r\n #origin\r\n class=\"bs-select__trigger\"\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n [(expanded)]=\"popupExpanded\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n @if (isPanelSearchEnabled()) {\r\n <label class=\"bs-select__panel-search\" role=\"search\">\r\n <svg\r\n class=\"bs-select__panel-search-icon\"\r\n aria-hidden=\"true\"\r\n [lucideIcon]=\"searchIcon\"\r\n [size]=\"15\"\r\n [strokeWidth]=\"1.9\"\r\n ></svg>\r\n <input\r\n #panelSearchInput\r\n type=\"search\"\r\n class=\"bs-select__panel-search-input\"\r\n data-platform-input=\"bare\"\r\n [attr.aria-label]=\"searchPlaceholder()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [value]=\"searchQuery()\"\r\n [disabled]=\"isDisabled()\"\r\n autocomplete=\"off\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n </label>\r\n }\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n } @else {\r\n <div #origin class=\"bs-select__trigger\" (click)=\"openCombobox($event)\">\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <input\r\n #triggerInput\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n type=\"search\"\r\n class=\"bs-select__input\"\r\n data-platform-input=\"bare\"\r\n [(expanded)]=\"popupExpanded\"\r\n [value]=\"triggerInputValue()\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n autocomplete=\"off\"\r\n (focus)=\"onTriggerInputFocus($event)\"\r\n (click)=\"onTriggerInputClick($event)\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n @if (hasValue()) {\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__clear\"\r\n aria-label=\"Clear selected option\"\r\n (click)=\"clearSelectedValue($event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n }\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n @if (isTriggerSearchEnabled()) {\r\n <svg class=\"bs-select__search-icon\" aria-hidden=\"true\" [lucideIcon]=\"searchIcon\" [size]=\"14\" [strokeWidth]=\"1.9\"></svg>\r\n }\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n }\r\n</div>\r\n", styles: [":host{display:inline-block;width:var(--bs-select-width, var(--platform-control-width, 10rem));min-width:var(--bs-select-min-width, var(--platform-control-width, 10rem));max-width:100%;--bs-select-height: var(--platform-control-height, 2rem);--bs-select-radius: var(--platform-control-radius, var(--radius-common-m));--bs-select-padding-x: var(--platform-control-padding-x, .625rem);--bs-select-indicator-offset: var(--platform-control-padding-x, .625rem);--bs-select-font-size: var(--platform-control-font-size, 13px);--bs-select-line-height: var(--platform-control-line-height, 20px);--bs-select-trigger-width: 100%;--bs-select-trigger-min-width: 0;--bs-select-popup-min-width: 100%}.bs-select{display:block}.bs-select__trigger{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--bs-select-trigger-width);min-width:var(--bs-select-trigger-min-width);height:var(--bs-select-height);min-height:var(--bs-select-height);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg, var(--color-surface));border:1px solid var(--platform-control-border, var(--color-border));border-radius:var(--bs-select-radius);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.bs-select__trigger:hover{background-color:var(--platform-control-bg-hover, var(--color-surface-soft))}.bs-select__trigger:focus-visible,.bs-select__trigger:has(.bs-select__input:focus-visible){border-color:var(--platform-control-focus, var(--color-primary));outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--disabled .bs-select__trigger{border-color:var(--platform-control-disabled-border, var(--input-disabled-border, var(--input-border)));background-color:var(--platform-control-disabled-bg, var(--input-disabled-bg, var(--input-disabled-bg)));color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}.bs-select.bs-select--disabled .bs-select__label-text,.bs-select.bs-select--disabled .bs-select__arrow{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select.bs-select--disabled .bs-select__arrow{border-top-color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__input{position:relative;z-index:0;width:100%;min-width:0;height:var(--bs-select-height);padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);border:0;outline:none;opacity:0;cursor:pointer;background:transparent;appearance:none}.bs-select--searchable:focus-within .bs-select__input,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__input{color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);opacity:1;cursor:text}.bs-select__input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}.bs-select__label{position:absolute;z-index:1;inset:0;display:flex;align-items:center;padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);pointer-events:none}.bs-select--searchable:focus-within .bs-select__label,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__label,.bs-select--searchable.bs-select--searching .bs-select__label{opacity:0}.bs-select__tags{display:flex;align-items:center;gap:4px;min-width:0;width:100%;overflow:hidden;pointer-events:auto}.bs-select__add,.bs-select__tag{display:inline-flex;align-items:center;flex:0 0 auto;min-width:0;max-width:8rem;height:calc(var(--bs-select-height) - 10px);min-height:20px;padding:0 8px;border:1px solid var(--color-border);border-radius:calc(var(--bs-select-radius) - 2px);background-color:var(--color-surface-soft);color:var(--platform-control-color, var(--color-text-primary));font-size:var(--bs-select-font-size);font-family:inherit;line-height:1;white-space:nowrap}.bs-select__add{max-width:6rem;color:var(--color-primary);background-color:var(--color-surface);gap:3px;cursor:pointer}.bs-select__tag-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-select__tag--ellipsis{flex:0 0 auto;width:28px;justify-content:center;padding:0;color:var(--color-text-muted)}.bs-select__tag-remove{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;margin-left:4px;padding:0;color:var(--color-text-muted);background:transparent;border:0;cursor:pointer;line-height:1;pointer-events:auto}.bs-select__tag-remove:hover{color:var(--color-text-primary)}.bs-select__label-text{overflow:hidden;color:var(--platform-control-placeholder, var(--color-text-placeholder));font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);text-overflow:ellipsis;white-space:nowrap}.bs-select.bs-select--selected .bs-select__label-text{color:var(--platform-control-color, var(--color-text-primary))}.bs-select.bs-select--disabled.bs-select--selected .bs-select__label-text{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__arrow{position:absolute;top:50%;z-index:2;right:var(--bs-select-indicator-offset);width:0;height:0;pointer-events:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--platform-control-placeholder, var(--color-text-placeholder));transition:opacity .12s ease,transform .15s ease-in-out;transform:translateY(-50%)}.bs-select__trigger[aria-expanded=true] .bs-select__arrow,.bs-select__input[aria-expanded=true]~.bs-select__arrow{transform:translateY(-50%) rotate(180deg)}.bs-select__search-icon{position:absolute;top:50%;right:var(--bs-select-indicator-offset);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--platform-control-placeholder, var(--color-text-placeholder));line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity .12s ease}.bs-select--searchable:focus-within .bs-select__arrow,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__arrow{opacity:0}.bs-select--searchable:focus-within .bs-select__search-icon,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__search-icon{opacity:1}.bs-select__clear{position:absolute;top:50%;right:calc(var(--bs-select-indicator-offset) - 5px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--platform-control-placeholder, var(--color-text-placeholder));background:transparent;border:0;border-radius:50%;cursor:pointer;line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:background-color .12s ease,color .12s ease,opacity .12s ease}.bs-select__clear:hover{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1}.bs-select__clear:focus-visible{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1;outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear,.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear:focus-visible{pointer-events:auto}.bs-select__clear:hover~.bs-select__arrow,.bs-select__clear:focus-visible~.bs-select__arrow,.bs-select__clear:hover~.bs-select__search-icon,.bs-select__clear:focus-visible~.bs-select__search-icon{opacity:0}.bs-select__popup{display:flex;flex-direction:column;width:100%;min-width:var(--bs-select-popup-min-width);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--bs-select-radius);background-color:var(--color-surface);box-shadow:var(--shadow-common-m);max-height:11rem;overflow:hidden;outline:none}.bs-select__panel-search{position:relative;display:flex;align-items:center;flex:0 0 auto;height:var(--bs-select-height);margin-bottom:var(--space-2);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));border-radius:var(--bs-select-radius)}.bs-select__panel-search-icon{position:absolute;left:var(--space-2);top:50%;width:15px;height:15px;pointer-events:none;transform:translateY(-50%)}.bs-select__panel-search-input{width:100%;min-width:0;height:100%;padding:0 var(--space-2) 0 calc(var(--space-2) + 1.35rem);color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);background:transparent;border:0;outline:none}.bs-select__panel-search-input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}[ngListbox]{display:flex;flex-direction:column;flex:1 1 auto;gap:2px;height:100%;min-height:0;overflow:auto}[ngOption]{display:flex;align-items:center;min-height:var(--bs-select-height);margin:1px;padding:0 var(--space-2);border-radius:var(--bs-select-radius);cursor:pointer;transition:background-color .15s ease,color .15s ease,outline-color .15s ease}[ngOption]:hover:not([aria-disabled=true]){background-color:var(--color-surface-soft)}[ngOption][data-active=true]{outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}[ngOption][aria-selected=true]{color:var(--color-primary);background-color:var(--color-primary-subtle)}[ngOption][aria-disabled=true]{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}[ngOption][aria-disabled=true] .bs-select__check{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__empty{display:flex;align-items:center;min-height:var(--bs-select-height);padding:0 var(--space-2);color:var(--color-text-muted);font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}.bs-select__option-text{flex:1;min-width:0;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}[ngOption]:not([aria-selected=true]) .bs-select__check{display:none}.bs-select__check{position:relative;width:1rem;height:1rem;display:inline-block;flex:0 0 1rem;align-self:center;color:var(--color-primary);line-height:0;vertical-align:middle}.bs-select__check:before{position:absolute;top:50%;left:50%;content:\"\";width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-73%) rotate(45deg);transform-origin:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9066
|
+
], viewQueries: [{ propertyName: "listBox", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "optionRefs", predicate: Option, descendants: true, isSignal: true }, { propertyName: "panelSearchInput", first: true, predicate: ["panelSearchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"bs-select\"\r\n [attr.aria-readonly]=\"!isTriggerSearchEnabled() ? 'true' : null\"\r\n [class.bs-select--searchable]=\"isTriggerSearchEnabled()\"\r\n [class.bs-select--searching]=\"hasSearchQuery()\"\r\n [class.bs-select--selected]=\"hasValue()\"\r\n [class.bs-select--disabled]=\"isDisabled()\"\r\n>\r\n <ng-template #selectLabel>\r\n <span class=\"bs-select__label\">\r\n @if (multiple() && selectedOptions().length) {\r\n <span class=\"bs-select__tags\">\r\n <button type=\"button\" class=\"bs-select__add\" [disabled]=\"isDisabled()\" (click)=\"openCombobox($event)\">\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"plusIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n <span>{{ placeholder() }}</span>\r\n </button>\r\n @for (option of visibleSelectedOptions(); track option.value) {\r\n <span class=\"bs-select__tag\">\r\n <span class=\"bs-select__tag-text\">{{ option.label }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__tag-remove\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\"\r\n (click)=\"removeSelectedValue(option.value, $event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"12\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n </span>\r\n }\r\n @if (hiddenSelectedCount()) {\r\n <span class=\"bs-select__tag bs-select__tag--ellipsis\" aria-hidden=\"true\">...</span>\r\n }\r\n </span>\r\n } @else {\r\n <span class=\"bs-select__label-text\">{{ displayValue() }}</span>\r\n }\r\n </span>\r\n </ng-template>\r\n\r\n @if (multiple()) {\r\n <div\r\n #origin\r\n class=\"bs-select__trigger\"\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n [(expanded)]=\"popupExpanded\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n @if (isPanelSearchEnabled()) {\r\n <label class=\"bs-select__panel-search\" role=\"search\">\r\n <svg\r\n class=\"bs-select__panel-search-icon\"\r\n aria-hidden=\"true\"\r\n [lucideIcon]=\"searchIcon\"\r\n [size]=\"15\"\r\n [strokeWidth]=\"1.9\"\r\n ></svg>\r\n <input\r\n #panelSearchInput\r\n type=\"search\"\r\n class=\"bs-select__panel-search-input\"\r\n data-platform-input=\"bare\"\r\n [attr.aria-label]=\"searchPlaceholder()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [value]=\"searchQuery()\"\r\n [disabled]=\"isDisabled()\"\r\n autocomplete=\"off\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n </label>\r\n }\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n } @else {\r\n <div #origin class=\"bs-select__trigger\" (click)=\"openCombobox($event)\">\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <input\r\n #triggerInput\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n type=\"search\"\r\n class=\"bs-select__input\"\r\n data-platform-input=\"bare\"\r\n [(expanded)]=\"popupExpanded\"\r\n [value]=\"triggerInputValue()\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n autocomplete=\"off\"\r\n (focus)=\"onTriggerInputFocus($event)\"\r\n (click)=\"onTriggerInputClick($event)\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n @if (hasValue()) {\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__clear\"\r\n aria-label=\"Clear selected option\"\r\n (click)=\"clearSelectedValue($event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n }\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n @if (isTriggerSearchEnabled()) {\r\n <svg class=\"bs-select__search-icon\" aria-hidden=\"true\" [lucideIcon]=\"searchIcon\" [size]=\"14\" [strokeWidth]=\"1.9\"></svg>\r\n }\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n }\r\n</div>\r\n", styles: [":host{display:inline-block;width:var(--bs-select-width, var(--platform-control-width, 10rem));min-width:var(--bs-select-min-width, var(--platform-control-width, 10rem));max-width:100%;--bs-select-height: var(--platform-control-height, 2rem);--bs-select-radius: var(--platform-control-radius, var(--radius-common-m));--bs-select-padding-x: var(--platform-control-padding-x, .625rem);--bs-select-indicator-offset: var(--platform-control-padding-x, .625rem);--bs-select-font-size: var(--platform-control-font-size, 13px);--bs-select-line-height: var(--platform-control-line-height, 20px);--bs-select-trigger-width: 100%;--bs-select-trigger-min-width: 0;--bs-select-popup-min-width: 100%}.bs-select{display:block}.bs-select__trigger{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--bs-select-trigger-width);min-width:var(--bs-select-trigger-min-width);height:var(--bs-select-height);min-height:var(--bs-select-height);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg, var(--color-surface));border:1px solid var(--platform-control-border, var(--color-border));border-radius:var(--bs-select-radius);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.bs-select__trigger:hover{background-color:var(--platform-control-bg-hover, var(--color-surface-soft))}.bs-select__trigger:focus-visible,.bs-select__trigger:has(.bs-select__input:focus-visible){border-color:var(--platform-control-focus, var(--color-primary));outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--disabled .bs-select__trigger{border-color:var(--platform-control-disabled-border, var(--input-disabled-border, var(--input-border)));background-color:var(--platform-control-disabled-bg, var(--input-disabled-bg, var(--input-disabled-bg)));color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}.bs-select.bs-select--disabled .bs-select__label-text,.bs-select.bs-select--disabled .bs-select__arrow{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select.bs-select--disabled .bs-select__arrow{border-top-color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__input{position:relative;z-index:0;width:100%;min-width:0;height:var(--bs-select-height);padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);border:0;outline:none;opacity:0;cursor:pointer;background:transparent;appearance:none}.bs-select--searchable:focus-within .bs-select__input,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__input{color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);opacity:1;cursor:text}.bs-select__input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}.bs-select__label{position:absolute;z-index:1;inset:0;display:flex;align-items:center;padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);pointer-events:none}.bs-select--searchable:focus-within .bs-select__label,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__label,.bs-select--searchable.bs-select--searching .bs-select__label{opacity:0}.bs-select__tags{display:flex;align-items:center;gap:4px;min-width:0;width:100%;overflow:hidden;pointer-events:auto}.bs-select__add,.bs-select__tag{display:inline-flex;align-items:center;flex:0 0 auto;min-width:0;max-width:8rem;height:calc(var(--bs-select-height) - 10px);min-height:20px;padding:0 8px;border:1px solid var(--color-border);border-radius:calc(var(--bs-select-radius) - 2px);background-color:var(--color-surface-soft);color:var(--platform-control-color, var(--color-text-primary));font-size:var(--bs-select-font-size);font-family:inherit;line-height:1;white-space:nowrap}.bs-select__add{max-width:6rem;color:var(--color-primary);background-color:var(--color-surface);gap:3px;cursor:pointer}.bs-select__tag-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-select__tag--ellipsis{flex:0 0 auto;width:28px;justify-content:center;padding:0;color:var(--color-text-muted)}.bs-select__tag-remove{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;margin-left:4px;padding:0;color:var(--color-text-muted);background:transparent;border:0;cursor:pointer;line-height:1;pointer-events:auto}.bs-select__tag-remove:hover{color:var(--color-text-primary)}.bs-select__label-text{overflow:hidden;color:var(--platform-control-placeholder, var(--color-text-placeholder));font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);text-overflow:ellipsis;white-space:nowrap}.bs-select.bs-select--selected .bs-select__label-text{color:var(--platform-control-color, var(--color-text-primary))}.bs-select.bs-select--disabled.bs-select--selected .bs-select__label-text{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__arrow{position:absolute;top:50%;z-index:2;right:var(--bs-select-indicator-offset);width:0;height:0;pointer-events:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--platform-control-placeholder, var(--color-text-placeholder));transition:opacity .12s ease,transform .15s ease-in-out;transform:translateY(-50%)}.bs-select__trigger[aria-expanded=true] .bs-select__arrow,.bs-select__input[aria-expanded=true]~.bs-select__arrow{transform:translateY(-50%) rotate(180deg)}.bs-select__search-icon{position:absolute;top:50%;right:var(--bs-select-indicator-offset);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--platform-control-placeholder, var(--color-text-placeholder));line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity .12s ease}.bs-select--searchable:focus-within .bs-select__arrow,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__arrow{opacity:0}.bs-select--searchable:focus-within .bs-select__search-icon,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__search-icon{opacity:1}.bs-select__clear{position:absolute;top:50%;right:calc(var(--bs-select-indicator-offset) - 5px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--platform-control-placeholder, var(--color-text-placeholder));background:transparent;border:0;border-radius:50%;cursor:pointer;line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:background-color .12s ease,color .12s ease,opacity .12s ease}.bs-select__clear:hover{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1}.bs-select__clear:focus-visible{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1;outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear,.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear:focus-visible{pointer-events:auto}.bs-select__clear:hover~.bs-select__arrow,.bs-select__clear:focus-visible~.bs-select__arrow,.bs-select__clear:hover~.bs-select__search-icon,.bs-select__clear:focus-visible~.bs-select__search-icon{opacity:0}.bs-select__popup{display:flex;flex-direction:column;width:100%;min-width:var(--bs-select-popup-min-width);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--bs-select-radius);background-color:var(--color-surface);box-shadow:var(--shadow-common-m);max-height:11rem;overflow:hidden;outline:none}.bs-select__panel-search{position:relative;display:flex;align-items:center;flex:0 0 auto;height:var(--bs-select-height);margin-bottom:var(--space-2);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));border-radius:var(--bs-select-radius)}.bs-select__panel-search-icon{position:absolute;left:var(--space-2);top:50%;width:15px;height:15px;pointer-events:none;transform:translateY(-50%)}.bs-select__panel-search-input{width:100%;min-width:0;height:100%;padding:0 var(--space-2) 0 calc(var(--space-2) + 1.35rem);color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);background:transparent;border:0;outline:none}.bs-select__panel-search-input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}[ngListbox]{display:flex;flex-direction:column;flex:1 1 auto;gap:2px;height:100%;min-height:0;overflow:auto}[ngOption]{display:flex;align-items:center;min-height:var(--bs-select-height);margin:1px;padding:0 var(--space-2);border-radius:var(--bs-select-radius);cursor:pointer;transition:background-color .15s ease,color .15s ease,outline-color .15s ease}[ngOption]:hover:not([aria-disabled=true]){background-color:var(--color-surface-soft)}[ngOption][data-active=true]{outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:calc(0px - var(--platform-focus-ring-width))}[ngOption][aria-selected=true]{color:var(--color-primary);background-color:var(--color-primary-subtle)}[ngOption][aria-disabled=true]{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}[ngOption][aria-disabled=true] .bs-select__check{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__empty{display:flex;align-items:center;min-height:var(--bs-select-height);padding:0 var(--space-2);color:var(--color-text-muted);font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}.bs-select__option-text{flex:1;min-width:0;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}[ngOption]:not([aria-selected=true]) .bs-select__check{display:none}.bs-select__check{position:relative;width:1rem;height:1rem;display:inline-block;flex:0 0 1rem;align-self:center;color:var(--color-primary);line-height:0;vertical-align:middle}.bs-select__check:before{position:absolute;top:50%;left:50%;content:\"\";width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-73%) rotate(45deg);transform-origin:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9067
9067
|
}
|
|
9068
9068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BsSelect, decorators: [{
|
|
9069
9069
|
type: Component,
|
|
@@ -9082,7 +9082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
9082
9082
|
useExisting: forwardRef(() => BsSelect),
|
|
9083
9083
|
multi: true,
|
|
9084
9084
|
},
|
|
9085
|
-
], template: "<div\r\n class=\"bs-select\"\r\n [attr.aria-readonly]=\"!isTriggerSearchEnabled() ? 'true' : null\"\r\n [class.bs-select--searchable]=\"isTriggerSearchEnabled()\"\r\n [class.bs-select--searching]=\"hasSearchQuery()\"\r\n [class.bs-select--selected]=\"hasValue()\"\r\n [class.bs-select--disabled]=\"isDisabled()\"\r\n>\r\n <ng-template #selectLabel>\r\n <span class=\"bs-select__label\">\r\n @if (multiple() && selectedOptions().length) {\r\n <span class=\"bs-select__tags\">\r\n <button type=\"button\" class=\"bs-select__add\" [disabled]=\"isDisabled()\" (click)=\"openCombobox($event)\">\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"plusIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n <span>{{ placeholder() }}</span>\r\n </button>\r\n @for (option of visibleSelectedOptions(); track option.value) {\r\n <span class=\"bs-select__tag\">\r\n <span class=\"bs-select__tag-text\">{{ option.label }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__tag-remove\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\"\r\n (click)=\"removeSelectedValue(option.value, $event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"12\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n </span>\r\n }\r\n @if (hiddenSelectedCount()) {\r\n <span class=\"bs-select__tag bs-select__tag--ellipsis\" aria-hidden=\"true\">...</span>\r\n }\r\n </span>\r\n } @else {\r\n <span class=\"bs-select__label-text\">{{ displayValue() }}</span>\r\n }\r\n </span>\r\n </ng-template>\r\n\r\n @if (multiple()) {\r\n <div\r\n #origin\r\n class=\"bs-select__trigger\"\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n [(expanded)]=\"popupExpanded\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n @if (isPanelSearchEnabled()) {\r\n <label class=\"bs-select__panel-search\" role=\"search\">\r\n <svg\r\n class=\"bs-select__panel-search-icon\"\r\n aria-hidden=\"true\"\r\n [lucideIcon]=\"searchIcon\"\r\n [size]=\"15\"\r\n [strokeWidth]=\"1.9\"\r\n ></svg>\r\n <input\r\n #panelSearchInput\r\n type=\"search\"\r\n class=\"bs-select__panel-search-input\"\r\n data-platform-input=\"bare\"\r\n [attr.aria-label]=\"searchPlaceholder()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [value]=\"searchQuery()\"\r\n [disabled]=\"isDisabled()\"\r\n autocomplete=\"off\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n </label>\r\n }\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n } @else {\r\n <div #origin class=\"bs-select__trigger\" (click)=\"openCombobox($event)\">\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <input\r\n #triggerInput\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n type=\"search\"\r\n class=\"bs-select__input\"\r\n data-platform-input=\"bare\"\r\n [(expanded)]=\"popupExpanded\"\r\n [value]=\"triggerInputValue()\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n autocomplete=\"off\"\r\n (focus)=\"onTriggerInputFocus($event)\"\r\n (click)=\"onTriggerInputClick($event)\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n @if (hasValue()) {\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__clear\"\r\n aria-label=\"Clear selected option\"\r\n (click)=\"clearSelectedValue($event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n }\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n @if (isTriggerSearchEnabled()) {\r\n <svg class=\"bs-select__search-icon\" aria-hidden=\"true\" [lucideIcon]=\"searchIcon\" [size]=\"14\" [strokeWidth]=\"1.9\"></svg>\r\n }\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n }\r\n</div>\r\n", styles: [":host{display:inline-block;width:var(--bs-select-width, var(--platform-control-width, 10rem));min-width:var(--bs-select-min-width, var(--platform-control-width, 10rem));max-width:100%;--bs-select-height: var(--platform-control-height, 2rem);--bs-select-radius: var(--platform-control-radius, var(--radius-common-m));--bs-select-padding-x: var(--platform-control-padding-x, .625rem);--bs-select-indicator-offset: var(--platform-control-padding-x, .625rem);--bs-select-font-size: var(--platform-control-font-size, 13px);--bs-select-line-height: var(--platform-control-line-height, 20px);--bs-select-trigger-width: 100%;--bs-select-trigger-min-width: 0;--bs-select-popup-min-width: 100%}.bs-select{display:block}.bs-select__trigger{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--bs-select-trigger-width);min-width:var(--bs-select-trigger-min-width);height:var(--bs-select-height);min-height:var(--bs-select-height);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg, var(--color-surface));border:1px solid var(--platform-control-border, var(--color-border));border-radius:var(--bs-select-radius);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.bs-select__trigger:hover{background-color:var(--platform-control-bg-hover, var(--color-surface-soft))}.bs-select__trigger:focus-visible,.bs-select__trigger:has(.bs-select__input:focus-visible){border-color:var(--platform-control-focus, var(--color-primary));outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--disabled .bs-select__trigger{border-color:var(--platform-control-disabled-border, var(--input-disabled-border, var(--input-border)));background-color:var(--platform-control-disabled-bg, var(--input-disabled-bg, var(--input-disabled-bg)));color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}.bs-select.bs-select--disabled .bs-select__label-text,.bs-select.bs-select--disabled .bs-select__arrow{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select.bs-select--disabled .bs-select__arrow{border-top-color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__input{position:relative;z-index:0;width:100%;min-width:0;height:var(--bs-select-height);padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);border:0;outline:none;opacity:0;cursor:pointer;background:transparent;appearance:none}.bs-select--searchable:focus-within .bs-select__input,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__input{color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);opacity:1;cursor:text}.bs-select__input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}.bs-select__label{position:absolute;z-index:1;inset:0;display:flex;align-items:center;padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);pointer-events:none}.bs-select--searchable:focus-within .bs-select__label,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__label,.bs-select--searchable.bs-select--searching .bs-select__label{opacity:0}.bs-select__tags{display:flex;align-items:center;gap:4px;min-width:0;width:100%;overflow:hidden;pointer-events:auto}.bs-select__add,.bs-select__tag{display:inline-flex;align-items:center;flex:0 0 auto;min-width:0;max-width:8rem;height:calc(var(--bs-select-height) - 10px);min-height:20px;padding:0 8px;border:1px solid var(--color-border);border-radius:calc(var(--bs-select-radius) - 2px);background-color:var(--color-surface-soft);color:var(--platform-control-color, var(--color-text-primary));font-size:var(--bs-select-font-size);font-family:inherit;line-height:1;white-space:nowrap}.bs-select__add{max-width:6rem;color:var(--color-primary);background-color:var(--color-surface);gap:3px;cursor:pointer}.bs-select__tag-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-select__tag--ellipsis{flex:0 0 auto;width:28px;justify-content:center;padding:0;color:var(--color-text-muted)}.bs-select__tag-remove{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;margin-left:4px;padding:0;color:var(--color-text-muted);background:transparent;border:0;cursor:pointer;line-height:1;pointer-events:auto}.bs-select__tag-remove:hover{color:var(--color-text-primary)}.bs-select__label-text{overflow:hidden;color:var(--platform-control-placeholder, var(--color-text-placeholder));font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);text-overflow:ellipsis;white-space:nowrap}.bs-select.bs-select--selected .bs-select__label-text{color:var(--platform-control-color, var(--color-text-primary))}.bs-select.bs-select--disabled.bs-select--selected .bs-select__label-text{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__arrow{position:absolute;top:50%;z-index:2;right:var(--bs-select-indicator-offset);width:0;height:0;pointer-events:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--platform-control-placeholder, var(--color-text-placeholder));transition:opacity .12s ease,transform .15s ease-in-out;transform:translateY(-50%)}.bs-select__trigger[aria-expanded=true] .bs-select__arrow,.bs-select__input[aria-expanded=true]~.bs-select__arrow{transform:translateY(-50%) rotate(180deg)}.bs-select__search-icon{position:absolute;top:50%;right:var(--bs-select-indicator-offset);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--platform-control-placeholder, var(--color-text-placeholder));line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity .12s ease}.bs-select--searchable:focus-within .bs-select__arrow,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__arrow{opacity:0}.bs-select--searchable:focus-within .bs-select__search-icon,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__search-icon{opacity:1}.bs-select__clear{position:absolute;top:50%;right:calc(var(--bs-select-indicator-offset) - 5px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--platform-control-placeholder, var(--color-text-placeholder));background:transparent;border:0;border-radius:50%;cursor:pointer;line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:background-color .12s ease,color .12s ease,opacity .12s ease}.bs-select__clear:hover{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1}.bs-select__clear:focus-visible{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1;outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear,.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear:focus-visible{pointer-events:auto}.bs-select__clear:hover~.bs-select__arrow,.bs-select__clear:focus-visible~.bs-select__arrow,.bs-select__clear:hover~.bs-select__search-icon,.bs-select__clear:focus-visible~.bs-select__search-icon{opacity:0}.bs-select__popup{display:flex;flex-direction:column;width:100%;min-width:var(--bs-select-popup-min-width);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--bs-select-radius);background-color:var(--color-surface);box-shadow:var(--shadow-common-m);max-height:11rem;overflow:hidden;outline:none}.bs-select__panel-search{position:relative;display:flex;align-items:center;flex:0 0 auto;height:var(--bs-select-height);margin-bottom:var(--space-2);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));border-radius:var(--bs-select-radius)}.bs-select__panel-search-icon{position:absolute;left:var(--space-2);top:50%;width:15px;height:15px;pointer-events:none;transform:translateY(-50%)}.bs-select__panel-search-input{width:100%;min-width:0;height:100%;padding:0 var(--space-2) 0 calc(var(--space-2) + 1.35rem);color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);background:transparent;border:0;outline:none}.bs-select__panel-search-input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}[ngListbox]{display:flex;flex-direction:column;flex:1 1 auto;gap:2px;height:100%;min-height:0;overflow:auto}[ngOption]{display:flex;align-items:center;min-height:var(--bs-select-height);margin:1px;padding:0 var(--space-2);border-radius:var(--bs-select-radius);cursor:pointer;transition:background-color .15s ease,color .15s ease,outline-color .15s ease}[ngOption]:hover:not([aria-disabled=true]){background-color:var(--color-surface-soft)}[ngOption][data-active=true]{outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}[ngOption][aria-selected=true]{color:var(--color-primary);background-color:var(--color-primary-subtle)}[ngOption][aria-disabled=true]{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}[ngOption][aria-disabled=true] .bs-select__check{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__empty{display:flex;align-items:center;min-height:var(--bs-select-height);padding:0 var(--space-2);color:var(--color-text-muted);font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}.bs-select__option-text{flex:1;min-width:0;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}[ngOption]:not([aria-selected=true]) .bs-select__check{display:none}.bs-select__check{position:relative;width:1rem;height:1rem;display:inline-block;flex:0 0 1rem;align-self:center;color:var(--color-primary);line-height:0;vertical-align:middle}.bs-select__check:before{position:absolute;top:50%;left:50%;content:\"\";width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-73%) rotate(45deg);transform-origin:center}\n"] }]
|
|
9085
|
+
], template: "<div\r\n class=\"bs-select\"\r\n [attr.aria-readonly]=\"!isTriggerSearchEnabled() ? 'true' : null\"\r\n [class.bs-select--searchable]=\"isTriggerSearchEnabled()\"\r\n [class.bs-select--searching]=\"hasSearchQuery()\"\r\n [class.bs-select--selected]=\"hasValue()\"\r\n [class.bs-select--disabled]=\"isDisabled()\"\r\n>\r\n <ng-template #selectLabel>\r\n <span class=\"bs-select__label\">\r\n @if (multiple() && selectedOptions().length) {\r\n <span class=\"bs-select__tags\">\r\n <button type=\"button\" class=\"bs-select__add\" [disabled]=\"isDisabled()\" (click)=\"openCombobox($event)\">\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"plusIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n <span>{{ placeholder() }}</span>\r\n </button>\r\n @for (option of visibleSelectedOptions(); track option.value) {\r\n <span class=\"bs-select__tag\">\r\n <span class=\"bs-select__tag-text\">{{ option.label }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__tag-remove\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\"\r\n (click)=\"removeSelectedValue(option.value, $event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"12\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n </span>\r\n }\r\n @if (hiddenSelectedCount()) {\r\n <span class=\"bs-select__tag bs-select__tag--ellipsis\" aria-hidden=\"true\">...</span>\r\n }\r\n </span>\r\n } @else {\r\n <span class=\"bs-select__label-text\">{{ displayValue() }}</span>\r\n }\r\n </span>\r\n </ng-template>\r\n\r\n @if (multiple()) {\r\n <div\r\n #origin\r\n class=\"bs-select__trigger\"\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n [(expanded)]=\"popupExpanded\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n @if (isPanelSearchEnabled()) {\r\n <label class=\"bs-select__panel-search\" role=\"search\">\r\n <svg\r\n class=\"bs-select__panel-search-icon\"\r\n aria-hidden=\"true\"\r\n [lucideIcon]=\"searchIcon\"\r\n [size]=\"15\"\r\n [strokeWidth]=\"1.9\"\r\n ></svg>\r\n <input\r\n #panelSearchInput\r\n type=\"search\"\r\n class=\"bs-select__panel-search-input\"\r\n data-platform-input=\"bare\"\r\n [attr.aria-label]=\"searchPlaceholder()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [value]=\"searchQuery()\"\r\n [disabled]=\"isDisabled()\"\r\n autocomplete=\"off\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n </label>\r\n }\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n } @else {\r\n <div #origin class=\"bs-select__trigger\" (click)=\"openCombobox($event)\">\r\n <ng-container [ngTemplateOutlet]=\"selectLabel\" />\r\n <input\r\n #triggerInput\r\n ngCombobox\r\n #selectCombobox=\"ngCombobox\"\r\n type=\"search\"\r\n class=\"bs-select__input\"\r\n data-platform-input=\"bare\"\r\n [(expanded)]=\"popupExpanded\"\r\n [value]=\"triggerInputValue()\"\r\n [preserveContent]=\"true\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n [disabled]=\"isDisabled()\"\r\n [tabindex]=\"isDisabled() ? -1 : 0\"\r\n autocomplete=\"off\"\r\n (focus)=\"onTriggerInputFocus($event)\"\r\n (click)=\"onTriggerInputClick($event)\"\r\n (input)=\"onSearchInput($event)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n @if (hasValue()) {\r\n <button\r\n type=\"button\"\r\n class=\"bs-select__clear\"\r\n aria-label=\"Clear selected option\"\r\n (click)=\"clearSelectedValue($event)\"\r\n >\r\n <svg aria-hidden=\"true\" [lucideIcon]=\"closeIcon\" [size]=\"13\" [strokeWidth]=\"2\"></svg>\r\n </button>\r\n }\r\n <span class=\"bs-select__arrow\" aria-hidden=\"true\"></span>\r\n @if (isTriggerSearchEnabled()) {\r\n <svg class=\"bs-select__search-icon\" aria-hidden=\"true\" [lucideIcon]=\"searchIcon\" [size]=\"14\" [strokeWidth]=\"1.9\"></svg>\r\n }\r\n </div>\r\n\r\n <ng-template\r\n #selectOverlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlay]=\"{ origin, usePopover: 'inline', matchWidth: matchTriggerWidth() }\"\r\n [cdkConnectedOverlayOpen]=\"popupExpanded()\"\r\n cdkAttachPopoverAsChild\r\n (overlayOutsideClick)=\"closePopup()\"\r\n (attach)=\"onOverlayAttached(selectOverlay)\"\r\n (detach)=\"onOverlayDetached()\"\r\n >\r\n <ng-template ngComboboxPopup [combobox]=\"selectCombobox\">\r\n <div\r\n class=\"bs-select__popup\"\r\n ngComboboxWidget\r\n [activeDescendant]=\"listbox.activeDescendant()\"\r\n [tabindex]=\"-1\"\r\n (keydown)=\"onPopupKeydown($event)\"\r\n >\r\n <div\r\n #listbox=\"ngListbox\"\r\n ngListbox\r\n [tabindex]=\"-1\"\r\n focusMode=\"activedescendant\"\r\n [value]=\"selectedValues()\"\r\n (valueChange)=\"onListboxValueChange($event)\"\r\n [multi]=\"multiple()\"\r\n selectionMode=\"explicit\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"onListboxCommit($event)\"\r\n (keydown.enter)=\"onListboxCommit($event)\"\r\n (keydown.space)=\"onListboxCommit($event)\"\r\n >\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n ngOption\r\n [value]=\"option.value\"\r\n [label]=\"option.label\"\r\n [disabled]=\"option.disabled ?? false\"\r\n (click)=\"onOptionClick(option)\"\r\n >\r\n <span class=\"bs-select__option-text\">{{ option.label }}</span>\r\n <span class=\"bs-select__check\" aria-hidden=\"true\"></span>\r\n </div>\r\n } @empty {\r\n <div class=\"bs-select__empty\" role=\"status\" aria-live=\"polite\">{{ emptyText() }}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n }\r\n</div>\r\n", styles: [":host{display:inline-block;width:var(--bs-select-width, var(--platform-control-width, 10rem));min-width:var(--bs-select-min-width, var(--platform-control-width, 10rem));max-width:100%;--bs-select-height: var(--platform-control-height, 2rem);--bs-select-radius: var(--platform-control-radius, var(--radius-common-m));--bs-select-padding-x: var(--platform-control-padding-x, .625rem);--bs-select-indicator-offset: var(--platform-control-padding-x, .625rem);--bs-select-font-size: var(--platform-control-font-size, 13px);--bs-select-line-height: var(--platform-control-line-height, 20px);--bs-select-trigger-width: 100%;--bs-select-trigger-min-width: 0;--bs-select-popup-min-width: 100%}.bs-select{display:block}.bs-select__trigger{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--bs-select-trigger-width);min-width:var(--bs-select-trigger-min-width);height:var(--bs-select-height);min-height:var(--bs-select-height);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg, var(--color-surface));border:1px solid var(--platform-control-border, var(--color-border));border-radius:var(--bs-select-radius);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.bs-select__trigger:hover{background-color:var(--platform-control-bg-hover, var(--color-surface-soft))}.bs-select__trigger:focus-visible,.bs-select__trigger:has(.bs-select__input:focus-visible){border-color:var(--platform-control-focus, var(--color-primary));outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--disabled .bs-select__trigger{border-color:var(--platform-control-disabled-border, var(--input-disabled-border, var(--input-border)));background-color:var(--platform-control-disabled-bg, var(--input-disabled-bg, var(--input-disabled-bg)));color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}.bs-select.bs-select--disabled .bs-select__label-text,.bs-select.bs-select--disabled .bs-select__arrow{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select.bs-select--disabled .bs-select__arrow{border-top-color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__input{position:relative;z-index:0;width:100%;min-width:0;height:var(--bs-select-height);padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);border:0;outline:none;opacity:0;cursor:pointer;background:transparent;appearance:none}.bs-select--searchable:focus-within .bs-select__input,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__input{color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);opacity:1;cursor:text}.bs-select__input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}.bs-select__label{position:absolute;z-index:1;inset:0;display:flex;align-items:center;padding:0 calc(var(--bs-select-indicator-offset) + 1.75rem) 0 var(--bs-select-padding-x);pointer-events:none}.bs-select--searchable:focus-within .bs-select__label,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__label,.bs-select--searchable.bs-select--searching .bs-select__label{opacity:0}.bs-select__tags{display:flex;align-items:center;gap:4px;min-width:0;width:100%;overflow:hidden;pointer-events:auto}.bs-select__add,.bs-select__tag{display:inline-flex;align-items:center;flex:0 0 auto;min-width:0;max-width:8rem;height:calc(var(--bs-select-height) - 10px);min-height:20px;padding:0 8px;border:1px solid var(--color-border);border-radius:calc(var(--bs-select-radius) - 2px);background-color:var(--color-surface-soft);color:var(--platform-control-color, var(--color-text-primary));font-size:var(--bs-select-font-size);font-family:inherit;line-height:1;white-space:nowrap}.bs-select__add{max-width:6rem;color:var(--color-primary);background-color:var(--color-surface);gap:3px;cursor:pointer}.bs-select__tag-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-select__tag--ellipsis{flex:0 0 auto;width:28px;justify-content:center;padding:0;color:var(--color-text-muted)}.bs-select__tag-remove{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;margin-left:4px;padding:0;color:var(--color-text-muted);background:transparent;border:0;cursor:pointer;line-height:1;pointer-events:auto}.bs-select__tag-remove:hover{color:var(--color-text-primary)}.bs-select__label-text{overflow:hidden;color:var(--platform-control-placeholder, var(--color-text-placeholder));font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);text-overflow:ellipsis;white-space:nowrap}.bs-select.bs-select--selected .bs-select__label-text{color:var(--platform-control-color, var(--color-text-primary))}.bs-select.bs-select--disabled.bs-select--selected .bs-select__label-text{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__arrow{position:absolute;top:50%;z-index:2;right:var(--bs-select-indicator-offset);width:0;height:0;pointer-events:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--platform-control-placeholder, var(--color-text-placeholder));transition:opacity .12s ease,transform .15s ease-in-out;transform:translateY(-50%)}.bs-select__trigger[aria-expanded=true] .bs-select__arrow,.bs-select__input[aria-expanded=true]~.bs-select__arrow{transform:translateY(-50%) rotate(180deg)}.bs-select__search-icon{position:absolute;top:50%;right:var(--bs-select-indicator-offset);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--platform-control-placeholder, var(--color-text-placeholder));line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity .12s ease}.bs-select--searchable:focus-within .bs-select__arrow,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__arrow{opacity:0}.bs-select--searchable:focus-within .bs-select__search-icon,.bs-select--searchable:has(.bs-select__input[aria-expanded=true]) .bs-select__search-icon{opacity:1}.bs-select__clear{position:absolute;top:50%;right:calc(var(--bs-select-indicator-offset) - 5px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--platform-control-placeholder, var(--color-text-placeholder));background:transparent;border:0;border-radius:50%;cursor:pointer;line-height:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:background-color .12s ease,color .12s ease,opacity .12s ease}.bs-select__clear:hover{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1}.bs-select__clear:focus-visible{color:var(--platform-control-color, var(--color-text-primary));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));opacity:1;outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:var(--platform-focus-ring-offset)}.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear,.bs-select.bs-select--selected:not(.bs-select--disabled) .bs-select__clear:focus-visible{pointer-events:auto}.bs-select__clear:hover~.bs-select__arrow,.bs-select__clear:focus-visible~.bs-select__arrow,.bs-select__clear:hover~.bs-select__search-icon,.bs-select__clear:focus-visible~.bs-select__search-icon{opacity:0}.bs-select__popup{display:flex;flex-direction:column;width:100%;min-width:var(--bs-select-popup-min-width);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--bs-select-radius);background-color:var(--color-surface);box-shadow:var(--shadow-common-m);max-height:11rem;overflow:hidden;outline:none}.bs-select__panel-search{position:relative;display:flex;align-items:center;flex:0 0 auto;height:var(--bs-select-height);margin-bottom:var(--space-2);color:var(--platform-control-placeholder, var(--color-text-placeholder));background-color:var(--platform-control-bg-hover, var(--color-surface-soft));border-radius:var(--bs-select-radius)}.bs-select__panel-search-icon{position:absolute;left:var(--space-2);top:50%;width:15px;height:15px;pointer-events:none;transform:translateY(-50%)}.bs-select__panel-search-input{width:100%;min-width:0;height:100%;padding:0 var(--space-2) 0 calc(var(--space-2) + 1.35rem);color:var(--platform-control-color, var(--color-text-primary));font:inherit;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height);background:transparent;border:0;outline:none}.bs-select__panel-search-input::placeholder{color:var(--platform-control-placeholder, var(--color-text-placeholder))}[ngListbox]{display:flex;flex-direction:column;flex:1 1 auto;gap:2px;height:100%;min-height:0;overflow:auto}[ngOption]{display:flex;align-items:center;min-height:var(--bs-select-height);margin:1px;padding:0 var(--space-2);border-radius:var(--bs-select-radius);cursor:pointer;transition:background-color .15s ease,color .15s ease,outline-color .15s ease}[ngOption]:hover:not([aria-disabled=true]){background-color:var(--color-surface-soft)}[ngOption][data-active=true]{outline:var(--platform-focus-ring-width) solid var(--platform-focus-ring-color);outline-offset:calc(0px - var(--platform-focus-ring-width))}[ngOption][aria-selected=true]{color:var(--color-primary);background-color:var(--color-primary-subtle)}[ngOption][aria-disabled=true]{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)));cursor:not-allowed}[ngOption][aria-disabled=true] .bs-select__check{color:var(--platform-control-disabled-color, var(--input-disabled-text, var(--input-disabled-text)))}.bs-select__empty{display:flex;align-items:center;min-height:var(--bs-select-height);padding:0 var(--space-2);color:var(--color-text-muted);font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}.bs-select__option-text{flex:1;min-width:0;font-size:var(--bs-select-font-size);line-height:var(--bs-select-line-height)}[ngOption]:not([aria-selected=true]) .bs-select__check{display:none}.bs-select__check{position:relative;width:1rem;height:1rem;display:inline-block;flex:0 0 1rem;align-self:center;color:var(--color-primary);line-height:0;vertical-align:middle}.bs-select__check:before{position:absolute;top:50%;left:50%;content:\"\";width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-73%) rotate(45deg);transform-origin:center}\n"] }]
|
|
9086
9086
|
}], ctorParameters: () => [], propDecorators: { listBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }], optionRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => Option), { isSignal: true }] }], panelSearchInput: [{ type: i0.ViewChild, args: ['panelSearchInput', { isSignal: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }] } });
|
|
9087
9087
|
|
|
9088
9088
|
class Card {
|