@educarehq/solaris-components 0.3.2 → 0.3.4
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.
|
@@ -4583,14 +4583,11 @@ class SolarisSelect {
|
|
|
4583
4583
|
}
|
|
4584
4584
|
_rootNodes = signal([], ...(ngDevMode ? [{ debugName: "_rootNodes" }] : []));
|
|
4585
4585
|
set items(v) {
|
|
4586
|
-
console.count('[Select] items setter');
|
|
4587
|
-
console.log('[Select] items length:', (v ?? []).length);
|
|
4588
4586
|
this._rootNodes.set(v ?? []);
|
|
4589
4587
|
this.resetStack();
|
|
4590
4588
|
const cur = this._value();
|
|
4591
4589
|
const next = this.sanitizeValue(cur);
|
|
4592
4590
|
const changed = !this.sameCvaValue(cur, next);
|
|
4593
|
-
console.log('[Select] sanitize changed?', changed, 'cur:', cur, 'next:', next);
|
|
4594
4591
|
if (changed)
|
|
4595
4592
|
this._value.set(next);
|
|
4596
4593
|
}
|
|
@@ -4667,13 +4664,24 @@ class SolarisSelect {
|
|
|
4667
4664
|
const row = this.itemRows()[idx];
|
|
4668
4665
|
return row?.id ?? null;
|
|
4669
4666
|
}, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
|
|
4670
|
-
|
|
4667
|
+
inputPlaceholderKey = computed(() => {
|
|
4671
4668
|
if (this.selectedCount() > 0)
|
|
4672
4669
|
return '';
|
|
4673
4670
|
if (this.searchTerm().length > 0)
|
|
4674
4671
|
return '';
|
|
4675
|
-
return this.
|
|
4676
|
-
|
|
4672
|
+
return this.open() && this.searchable
|
|
4673
|
+
? (this.searchPlaceholderKey || this.placeholderKey || '')
|
|
4674
|
+
: (this.placeholderKey || '');
|
|
4675
|
+
}, ...(ngDevMode ? [{ debugName: "inputPlaceholderKey" }] : []));
|
|
4676
|
+
inputPlaceholderText = computed(() => {
|
|
4677
|
+
if (this.selectedCount() > 0)
|
|
4678
|
+
return '';
|
|
4679
|
+
if (this.searchTerm().length > 0)
|
|
4680
|
+
return '';
|
|
4681
|
+
return this.open() && this.searchable
|
|
4682
|
+
? (this.searchPlaceholder || this.placeholder || 'Search...')
|
|
4683
|
+
: (this.placeholder || '');
|
|
4684
|
+
}, ...(ngDevMode ? [{ debugName: "inputPlaceholderText" }] : []));
|
|
4677
4685
|
_value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
4678
4686
|
selectedItems = computed(() => {
|
|
4679
4687
|
const all = [];
|
|
@@ -4979,10 +4987,14 @@ class SolarisSelect {
|
|
|
4979
4987
|
else
|
|
4980
4988
|
arr.push(value);
|
|
4981
4989
|
this.setValue(arr);
|
|
4990
|
+
this.searchTerm.set('');
|
|
4991
|
+
this.activeIndex.set(0);
|
|
4992
|
+
this.scheduleFocusTrigger();
|
|
4982
4993
|
}
|
|
4983
4994
|
selectSingle(value) {
|
|
4984
4995
|
if (this.multiple)
|
|
4985
4996
|
return;
|
|
4997
|
+
this.searchTerm.set('');
|
|
4986
4998
|
this.setValue(value);
|
|
4987
4999
|
this.open.set(false);
|
|
4988
5000
|
}
|
|
@@ -4993,10 +5005,16 @@ class SolarisSelect {
|
|
|
4993
5005
|
this.enterChildren(item);
|
|
4994
5006
|
return;
|
|
4995
5007
|
}
|
|
4996
|
-
if (this.multiple)
|
|
5008
|
+
if (this.multiple) {
|
|
4997
5009
|
this.toggleItem(item.value);
|
|
4998
|
-
|
|
5010
|
+
this.searchTerm.set('');
|
|
5011
|
+
this.activeIndex.set(0);
|
|
5012
|
+
this.scheduleFocusTrigger();
|
|
5013
|
+
}
|
|
5014
|
+
else {
|
|
5015
|
+
this.searchTerm.set('');
|
|
4999
5016
|
this.selectSingle(item.value);
|
|
5017
|
+
}
|
|
5000
5018
|
}
|
|
5001
5019
|
openFromTrigger() {
|
|
5002
5020
|
if (this.disabled)
|
|
@@ -5206,7 +5224,7 @@ class SolarisSelect {
|
|
|
5206
5224
|
}
|
|
5207
5225
|
trackRow = (_, r) => r.key;
|
|
5208
5226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSelect, isStandalone: true, selector: "solaris-select", inputs: { items: "items", multiple: "multiple", valueKey: "valueKey", backKey: "backKey", placeholder: "placeholder", placeholderKey: "placeholderKey", searchable: "searchable", selectedCountKey: "selectedCountKey", selectedFirst: "selectedFirst", searchPlaceholder: "searchPlaceholder", selectedCountText: "selectedCountText", panelMaxHeight: "panelMaxHeight", searchPlaceholderKey: "searchPlaceholderKey", selectionSeparator: "selectionSeparator", compareWith: "compareWith", backText: "backText", selectionDisplay: "selectionDisplay", disabled: "disabled" }, host: { properties: { "attr.data-open": "this.dataOpen", "attr.data-compact": "this.dataCompact" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n @if (showToken()) {\r\n <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n @if (multiple && showCount()) {\r\n @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n @else { {{ selectedCountLabel() }} }\r\n } @else {\r\n {{ selectedText() }}\r\n }\r\n </span>\r\n }\r\n\r\n <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n [attr.placeholder]=\"inputPlaceholder()\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"\r\n [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\"/>\r\n\r\n <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n {{ selectedText() }}\r\n </span>\r\n </div>\r\n\r\n <ng-template solaris-popover-panel>\r\n <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n @if (canGoBack()) {\r\n <div class=\"solaris-select__nav\">\r\n <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n <i class=\"ph ph-arrow-left\"></i>\r\n <span>\r\n @if (backKey) { {{ backKey | translate }} }\r\n @else { {{ backText | translate }} }\r\n </span>\r\n </button>\r\n\r\n <div class=\"solaris-select__title\">\r\n @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n @else { {{ currentLevel().title ?? '' }} }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n [attr.aria-activedescendant]=\"activeOptionId()\">\r\n @for (row of rows(); track trackRow($index, row)) {\r\n @if (row.kind === 'group') {\r\n <div class=\"solaris-select__group\">\r\n @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n @else { {{ row.label }} }\r\n </div>\r\n }\r\n\r\n @if (row.kind === 'divider') {\r\n <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @if (row.kind === 'item') {\r\n <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n <span class=\"solaris-select__option-leading\">\r\n @if (multiple) {\r\n @if (!row.hasChildren) {\r\n <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n <i class=\"ph ph-check\"></i>\r\n </span>\r\n } @else {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n } @else {\r\n <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n }\r\n }\r\n }\r\n\r\n @if (!multiple) {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-main\">\r\n <span class=\"solaris-select__option-label\">\r\n @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n @else { {{ row.item.label }} }\r\n </span>\r\n\r\n @if (row.item.description || row.item.descriptionKey) {\r\n <span class=\"solaris-select__option-desc\">\r\n @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n @else { {{ row.item.description }} }\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-end\">\r\n @if (row.item.endTextKey) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n } @else if (row.item.endText) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n }\r\n\r\n @if (!multiple && row.selected) {\r\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (row.hasChildren) {\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n }\r\n </span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:1px;outline:none;min-width:6rem;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{transform:rotate(180deg);opacity:.95}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSelect, isStandalone: true, selector: "solaris-select", inputs: { items: "items", multiple: "multiple", valueKey: "valueKey", backKey: "backKey", placeholder: "placeholder", placeholderKey: "placeholderKey", searchable: "searchable", selectedCountKey: "selectedCountKey", selectedFirst: "selectedFirst", searchPlaceholder: "searchPlaceholder", selectedCountText: "selectedCountText", panelMaxHeight: "panelMaxHeight", searchPlaceholderKey: "searchPlaceholderKey", selectionSeparator: "selectionSeparator", compareWith: "compareWith", backText: "backText", selectionDisplay: "selectionDisplay", disabled: "disabled" }, host: { properties: { "attr.data-open": "this.dataOpen", "attr.data-compact": "this.dataCompact" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n @if (showToken()) {\r\n <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n @if (multiple && showCount()) {\r\n @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n @else { {{ selectedCountLabel() }} }\r\n } @else {\r\n {{ selectedText() }}\r\n }\r\n </span>\r\n }\r\n\r\n <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n [attr.placeholder]=\"inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\"\r\n [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"/>\r\n\r\n <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n {{ selectedText() }}\r\n </span>\r\n </div>\r\n\r\n <ng-template solaris-popover-panel>\r\n <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n @if (canGoBack()) {\r\n <div class=\"solaris-select__nav\">\r\n <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n <i class=\"ph ph-arrow-left\"></i>\r\n <span>\r\n @if (backKey) { {{ backKey | translate }} }\r\n @else { {{ backText | translate }} }\r\n </span>\r\n </button>\r\n\r\n <div class=\"solaris-select__title\">\r\n @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n @else { {{ currentLevel().title ?? '' }} }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n [attr.aria-activedescendant]=\"activeOptionId()\">\r\n @for (row of rows(); track trackRow($index, row)) {\r\n @if (row.kind === 'group') {\r\n <div class=\"solaris-select__group\">\r\n @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n @else { {{ row.label }} }\r\n </div>\r\n }\r\n\r\n @if (row.kind === 'divider') {\r\n <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @if (row.kind === 'item') {\r\n <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n <span class=\"solaris-select__option-leading\">\r\n @if (multiple) {\r\n @if (!row.hasChildren) {\r\n <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n <i class=\"ph ph-check\"></i>\r\n </span>\r\n } @else {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n } @else {\r\n <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n }\r\n }\r\n }\r\n\r\n @if (!multiple) {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-main\">\r\n <span class=\"solaris-select__option-label\">\r\n @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n @else { {{ row.item.label }} }\r\n </span>\r\n\r\n @if (row.item.description || row.item.descriptionKey) {\r\n <span class=\"solaris-select__option-desc\">\r\n @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n @else { {{ row.item.description }} }\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-end\">\r\n @if (row.item.endTextKey) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n } @else if (row.item.endText) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n }\r\n\r\n @if (!multiple && row.selected) {\r\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (row.hasChildren) {\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n }\r\n </span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{transform:rotate(180deg);opacity:.95}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5210
5228
|
}
|
|
5211
5229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, decorators: [{
|
|
5212
5230
|
type: Component,
|
|
@@ -5216,7 +5234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5216
5234
|
SolarisPopoverPanelDirective,
|
|
5217
5235
|
SolarisTranslationPipe,
|
|
5218
5236
|
NgOptimizedImage,
|
|
5219
|
-
], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n @if (showToken()) {\r\n <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n @if (multiple && showCount()) {\r\n @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n @else { {{ selectedCountLabel() }} }\r\n } @else {\r\n {{ selectedText() }}\r\n }\r\n </span>\r\n }\r\n\r\n <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n [attr.placeholder]=\"inputPlaceholder()\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"\r\n [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\"/>\r\n\r\n <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n {{ selectedText() }}\r\n </span>\r\n </div>\r\n\r\n <ng-template solaris-popover-panel>\r\n <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n @if (canGoBack()) {\r\n <div class=\"solaris-select__nav\">\r\n <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n <i class=\"ph ph-arrow-left\"></i>\r\n <span>\r\n @if (backKey) { {{ backKey | translate }} }\r\n @else { {{ backText | translate }} }\r\n </span>\r\n </button>\r\n\r\n <div class=\"solaris-select__title\">\r\n @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n @else { {{ currentLevel().title ?? '' }} }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n [attr.aria-activedescendant]=\"activeOptionId()\">\r\n @for (row of rows(); track trackRow($index, row)) {\r\n @if (row.kind === 'group') {\r\n <div class=\"solaris-select__group\">\r\n @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n @else { {{ row.label }} }\r\n </div>\r\n }\r\n\r\n @if (row.kind === 'divider') {\r\n <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @if (row.kind === 'item') {\r\n <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n <span class=\"solaris-select__option-leading\">\r\n @if (multiple) {\r\n @if (!row.hasChildren) {\r\n <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n <i class=\"ph ph-check\"></i>\r\n </span>\r\n } @else {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n } @else {\r\n <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n }\r\n }\r\n }\r\n\r\n @if (!multiple) {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-main\">\r\n <span class=\"solaris-select__option-label\">\r\n @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n @else { {{ row.item.label }} }\r\n </span>\r\n\r\n @if (row.item.description || row.item.descriptionKey) {\r\n <span class=\"solaris-select__option-desc\">\r\n @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n @else { {{ row.item.description }} }\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-end\">\r\n @if (row.item.endTextKey) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n } @else if (row.item.endText) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n }\r\n\r\n @if (!multiple && row.selected) {\r\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (row.hasChildren) {\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n }\r\n </span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:1px;outline:none;min-width:6rem;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{transform:rotate(180deg);opacity:.95}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
|
|
5237
|
+
], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n @if (showToken()) {\r\n <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n @if (multiple && showCount()) {\r\n @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n @else { {{ selectedCountLabel() }} }\r\n } @else {\r\n {{ selectedText() }}\r\n }\r\n </span>\r\n }\r\n\r\n <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n [attr.placeholder]=\"inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\"\r\n [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"/>\r\n\r\n <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n {{ selectedText() }}\r\n </span>\r\n </div>\r\n\r\n <ng-template solaris-popover-panel>\r\n <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n @if (canGoBack()) {\r\n <div class=\"solaris-select__nav\">\r\n <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n <i class=\"ph ph-arrow-left\"></i>\r\n <span>\r\n @if (backKey) { {{ backKey | translate }} }\r\n @else { {{ backText | translate }} }\r\n </span>\r\n </button>\r\n\r\n <div class=\"solaris-select__title\">\r\n @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n @else { {{ currentLevel().title ?? '' }} }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n [attr.aria-activedescendant]=\"activeOptionId()\">\r\n @for (row of rows(); track trackRow($index, row)) {\r\n @if (row.kind === 'group') {\r\n <div class=\"solaris-select__group\">\r\n @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n @else { {{ row.label }} }\r\n </div>\r\n }\r\n\r\n @if (row.kind === 'divider') {\r\n <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @if (row.kind === 'item') {\r\n <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n <span class=\"solaris-select__option-leading\">\r\n @if (multiple) {\r\n @if (!row.hasChildren) {\r\n <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n <i class=\"ph ph-check\"></i>\r\n </span>\r\n } @else {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n } @else {\r\n <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n }\r\n }\r\n }\r\n\r\n @if (!multiple) {\r\n @if (row.item.imageUrl) {\r\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n } @else if (row.item.icon) {\r\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-main\">\r\n <span class=\"solaris-select__option-label\">\r\n @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n @else { {{ row.item.label }} }\r\n </span>\r\n\r\n @if (row.item.description || row.item.descriptionKey) {\r\n <span class=\"solaris-select__option-desc\">\r\n @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n @else { {{ row.item.description }} }\r\n </span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-select__option-end\">\r\n @if (row.item.endTextKey) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n } @else if (row.item.endText) {\r\n <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n }\r\n\r\n @if (!multiple && row.selected) {\r\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (row.hasChildren) {\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n }\r\n </span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{transform:rotate(180deg);opacity:.95}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
|
|
5220
5238
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
5221
5239
|
type: Optional
|
|
5222
5240
|
}], tokenEl: [{
|