@educarehq/solaris-components 0.3.1 → 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.
|
@@ -1655,6 +1655,10 @@ class SolarisNotificationItemComponent {
|
|
|
1655
1655
|
return 'ph-info';
|
|
1656
1656
|
}
|
|
1657
1657
|
}, ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
|
|
1658
|
+
isCompactHeader = computed(() => {
|
|
1659
|
+
const hasDescription = Boolean(this.item().description?.trim().length);
|
|
1660
|
+
return !hasDescription && !this.item().expandable;
|
|
1661
|
+
}, ...(ngDevMode ? [{ debugName: "isCompactHeader" }] : []));
|
|
1658
1662
|
toggleExpanded() {
|
|
1659
1663
|
this.notificationService.toggleExpanded(this.item().id);
|
|
1660
1664
|
}
|
|
@@ -1693,11 +1697,11 @@ class SolarisNotificationItemComponent {
|
|
|
1693
1697
|
return action.label ?? '';
|
|
1694
1698
|
}
|
|
1695
1699
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1696
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\">\r\n <div class=\"sn__leading\">\r\n
|
|
1700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1697
1701
|
}
|
|
1698
1702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
|
|
1699
1703
|
type: Component,
|
|
1700
|
-
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\">\r\n <div class=\"sn__leading\">\r\n
|
|
1704
|
+
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
|
|
1701
1705
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1702
1706
|
|
|
1703
1707
|
class SolarisNotificationCenterComponent {
|
|
@@ -4579,14 +4583,11 @@ class SolarisSelect {
|
|
|
4579
4583
|
}
|
|
4580
4584
|
_rootNodes = signal([], ...(ngDevMode ? [{ debugName: "_rootNodes" }] : []));
|
|
4581
4585
|
set items(v) {
|
|
4582
|
-
console.count('[Select] items setter');
|
|
4583
|
-
console.log('[Select] items length:', (v ?? []).length);
|
|
4584
4586
|
this._rootNodes.set(v ?? []);
|
|
4585
4587
|
this.resetStack();
|
|
4586
4588
|
const cur = this._value();
|
|
4587
4589
|
const next = this.sanitizeValue(cur);
|
|
4588
4590
|
const changed = !this.sameCvaValue(cur, next);
|
|
4589
|
-
console.log('[Select] sanitize changed?', changed, 'cur:', cur, 'next:', next);
|
|
4590
4591
|
if (changed)
|
|
4591
4592
|
this._value.set(next);
|
|
4592
4593
|
}
|
|
@@ -4663,13 +4664,24 @@ class SolarisSelect {
|
|
|
4663
4664
|
const row = this.itemRows()[idx];
|
|
4664
4665
|
return row?.id ?? null;
|
|
4665
4666
|
}, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
|
|
4666
|
-
|
|
4667
|
+
inputPlaceholderKey = computed(() => {
|
|
4667
4668
|
if (this.selectedCount() > 0)
|
|
4668
4669
|
return '';
|
|
4669
4670
|
if (this.searchTerm().length > 0)
|
|
4670
4671
|
return '';
|
|
4671
|
-
return this.
|
|
4672
|
-
|
|
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" }] : []));
|
|
4673
4685
|
_value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
4674
4686
|
selectedItems = computed(() => {
|
|
4675
4687
|
const all = [];
|
|
@@ -4975,10 +4987,14 @@ class SolarisSelect {
|
|
|
4975
4987
|
else
|
|
4976
4988
|
arr.push(value);
|
|
4977
4989
|
this.setValue(arr);
|
|
4990
|
+
this.searchTerm.set('');
|
|
4991
|
+
this.activeIndex.set(0);
|
|
4992
|
+
this.scheduleFocusTrigger();
|
|
4978
4993
|
}
|
|
4979
4994
|
selectSingle(value) {
|
|
4980
4995
|
if (this.multiple)
|
|
4981
4996
|
return;
|
|
4997
|
+
this.searchTerm.set('');
|
|
4982
4998
|
this.setValue(value);
|
|
4983
4999
|
this.open.set(false);
|
|
4984
5000
|
}
|
|
@@ -4989,10 +5005,16 @@ class SolarisSelect {
|
|
|
4989
5005
|
this.enterChildren(item);
|
|
4990
5006
|
return;
|
|
4991
5007
|
}
|
|
4992
|
-
if (this.multiple)
|
|
5008
|
+
if (this.multiple) {
|
|
4993
5009
|
this.toggleItem(item.value);
|
|
4994
|
-
|
|
5010
|
+
this.searchTerm.set('');
|
|
5011
|
+
this.activeIndex.set(0);
|
|
5012
|
+
this.scheduleFocusTrigger();
|
|
5013
|
+
}
|
|
5014
|
+
else {
|
|
5015
|
+
this.searchTerm.set('');
|
|
4995
5016
|
this.selectSingle(item.value);
|
|
5017
|
+
}
|
|
4996
5018
|
}
|
|
4997
5019
|
openFromTrigger() {
|
|
4998
5020
|
if (this.disabled)
|
|
@@ -5202,7 +5224,7 @@ class SolarisSelect {
|
|
|
5202
5224
|
}
|
|
5203
5225
|
trackRow = (_, r) => r.key;
|
|
5204
5226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5205
|
-
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 });
|
|
5206
5228
|
}
|
|
5207
5229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, decorators: [{
|
|
5208
5230
|
type: Component,
|
|
@@ -5212,7 +5234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5212
5234
|
SolarisPopoverPanelDirective,
|
|
5213
5235
|
SolarisTranslationPipe,
|
|
5214
5236
|
NgOptimizedImage,
|
|
5215
|
-
], 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"] }]
|
|
5216
5238
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
5217
5239
|
type: Optional
|
|
5218
5240
|
}], tokenEl: [{
|