@educarehq/solaris-ui 2.0.6 → 2.0.8
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.
|
@@ -31556,7 +31556,6 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
31556
31556
|
activeOptionIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []);
|
|
31557
31557
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
31558
31558
|
optionsInitialized = signal(false, ...ngDevMode ? [{ debugName: "optionsInitialized" }] : /* istanbul ignore next */ []);
|
|
31559
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
31560
31559
|
onChange = () => void 0;
|
|
31561
31560
|
onTouched = () => void 0;
|
|
31562
31561
|
optionInteractionSubscriptions = [];
|
|
@@ -31681,10 +31680,10 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
31681
31680
|
}, ...ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []);
|
|
31682
31681
|
clearAriaLabel = computed(() => {
|
|
31683
31682
|
const key = this.clearLabelKey();
|
|
31684
|
-
if (key) return this.translateService
|
|
31683
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
31685
31684
|
const text = this.clearLabel();
|
|
31686
31685
|
if (text) return text;
|
|
31687
|
-
return this.translateService
|
|
31686
|
+
return this.translateService?.translate("solaris.select.clear") ?? "Clear selection";
|
|
31688
31687
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
31689
31688
|
ariaLabelText = computed(() => {
|
|
31690
31689
|
const key = this.ariaLabelKey();
|
|
@@ -31782,9 +31781,6 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
31782
31781
|
}
|
|
31783
31782
|
constructor() {
|
|
31784
31783
|
super();
|
|
31785
|
-
afterNextRender(() => {
|
|
31786
|
-
this.hydrated.set(true);
|
|
31787
|
-
});
|
|
31788
31784
|
effect(() => {
|
|
31789
31785
|
if (!this.optionsInitialized()) return;
|
|
31790
31786
|
this.internalValue();
|
|
@@ -32501,8 +32497,8 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
32501
32497
|
],
|
|
32502
32498
|
usesInheritance: true,
|
|
32503
32499
|
ngImport: i0,
|
|
32504
|
-
template: "<solaris-form-field\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width]=\"resolvedTriggerMinWidth()\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n
|
|
32505
|
-
styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"],
|
|
32500
|
+
template: "<solaris-form-field\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width]=\"resolvedTriggerMinWidth()\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n <span class=\"solaris-select__value-text\" [hidden]=\"!displayText()\">{{\n displayText()\n }}</span>\n <span class=\"solaris-select__placeholder\" [hidden]=\"!!displayText()\">{{\n placeholderText()\n }}</span>\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n <button\n type=\"button\"\n class=\"solaris-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-select__panel\"\n role=\"listbox\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (loading()) {\n <div class=\"solaris-select__loading\">\n <span class=\"solaris-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-select__no-results\">\n <span class=\"solaris-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-select__empty\">\n <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
32501
|
+
styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__value-text[hidden],.solaris-select__clear[hidden]{display:none}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"],
|
|
32506
32502
|
dependencies: [
|
|
32507
32503
|
{
|
|
32508
32504
|
kind: "component",
|
|
@@ -32657,8 +32653,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32657
32653
|
"[attr.aria-label]": "ariaLabelText() ?? null",
|
|
32658
32654
|
"[attr.data-has-value]": "hasValue() ? \"\" : null"
|
|
32659
32655
|
},
|
|
32660
|
-
template: "<solaris-form-field\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width]=\"resolvedTriggerMinWidth()\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n
|
|
32661
|
-
styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"]
|
|
32656
|
+
template: "<solaris-form-field\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width]=\"resolvedTriggerMinWidth()\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n <span class=\"solaris-select__value-text\" [hidden]=\"!displayText()\">{{\n displayText()\n }}</span>\n <span class=\"solaris-select__placeholder\" [hidden]=\"!!displayText()\">{{\n placeholderText()\n }}</span>\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n <button\n type=\"button\"\n class=\"solaris-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-select__panel\"\n role=\"listbox\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (loading()) {\n <div class=\"solaris-select__loading\">\n <span class=\"solaris-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-select__no-results\">\n <span class=\"solaris-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-select__empty\">\n <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
32657
|
+
styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__value-text[hidden],.solaris-select__clear[hidden]{display:none}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"]
|
|
32662
32658
|
}]
|
|
32663
32659
|
}],
|
|
32664
32660
|
ctorParameters: () => [],
|
|
@@ -33934,16 +33930,9 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33934
33930
|
month: (/* @__PURE__ */ new Date()).getMonth()
|
|
33935
33931
|
}, ...ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []);
|
|
33936
33932
|
describedBy = signal([], ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
33937
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
33938
|
-
constructor() {
|
|
33939
|
-
super();
|
|
33940
|
-
afterNextRender(() => {
|
|
33941
|
-
this.hydrated.set(true);
|
|
33942
|
-
});
|
|
33943
|
-
}
|
|
33944
33933
|
onChange = () => void 0;
|
|
33945
33934
|
onTouched = () => void 0;
|
|
33946
|
-
resolvedLocale = computed(() => this.locale() ?? this.translateService
|
|
33935
|
+
resolvedLocale = computed(() => this.locale() ?? this.translateService?.locale() ?? "en-US", ...ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []);
|
|
33947
33936
|
effectiveDensity = computed(() => this.density() ?? this.themeService.density, ...ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []);
|
|
33948
33937
|
isEffectivelyDisabled = computed(() => this.disabledInput() || this.disabledState(), ...ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []);
|
|
33949
33938
|
isEffectivelyReadonly = computed(() => this.readonlyInput(), ...ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []);
|
|
@@ -33966,7 +33955,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33966
33955
|
}, ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
|
|
33967
33956
|
startLabel = computed(() => this.translateService.translate("solaris.date-range-picker.start"), ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
|
|
33968
33957
|
endLabel = computed(() => this.translateService.translate("solaris.date-range-picker.end"), ...ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []);
|
|
33969
|
-
calendarLabel = computed(() => this.translateService
|
|
33958
|
+
calendarLabel = computed(() => this.translateService?.translate("solaris.date-picker.open-calendar") ?? "Open calendar", ...ngDevMode ? [{ debugName: "calendarLabel" }] : /* istanbul ignore next */ []);
|
|
33970
33959
|
previousMonthLabel = computed(() => this.translateService.translate("solaris.date-picker.previous-month"), ...ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []);
|
|
33971
33960
|
nextMonthLabel = computed(() => this.translateService.translate("solaris.date-picker.next-month"), ...ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []);
|
|
33972
33961
|
applyLabel = computed(() => this.translateService.translate("solaris.date-range-picker.apply"), ...ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []);
|
|
@@ -33981,13 +33970,13 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33981
33970
|
}, ...ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []);
|
|
33982
33971
|
clearAriaLabel = computed(() => {
|
|
33983
33972
|
const key = this.clearLabelKey();
|
|
33984
|
-
if (key) return this.translateService
|
|
33973
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
33985
33974
|
const text = this.clearLabel();
|
|
33986
33975
|
if (text) return text;
|
|
33987
|
-
return this.translateService
|
|
33976
|
+
return this.translateService?.translate("solaris.date-range-picker.clear") ?? "Clear";
|
|
33988
33977
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
33989
33978
|
presetsLabel = computed(() => this.translateService.translate("solaris.date-range-picker.presets"), ...ngDevMode ? [{ debugName: "presetsLabel" }] : /* istanbul ignore next */ []);
|
|
33990
|
-
placeholderText = computed(() => this.translateService
|
|
33979
|
+
placeholderText = computed(() => this.translateService?.translate("solaris.date-range-picker.placeholder") ?? "Select a date range", ...ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []);
|
|
33991
33980
|
customLabel = computed(() => this.translateService.translate("solaris.date-range-picker.custom"), ...ngDevMode ? [{ debugName: "customLabel" }] : /* istanbul ignore next */ []);
|
|
33992
33981
|
rangeDisplay = computed(() => {
|
|
33993
33982
|
const range = this.value();
|
|
@@ -34270,7 +34259,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
34270
34259
|
version: "22.2.3",
|
|
34271
34260
|
ngImport: i0,
|
|
34272
34261
|
type: SolarisDateRangePickerComponent,
|
|
34273
|
-
deps:
|
|
34262
|
+
deps: null,
|
|
34274
34263
|
target: i0.ɵɵFactoryTarget.Component
|
|
34275
34264
|
});
|
|
34276
34265
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
@@ -34563,8 +34552,8 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
34563
34552
|
}],
|
|
34564
34553
|
usesInheritance: true,
|
|
34565
34554
|
ngImport: i0,
|
|
34566
|
-
template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n <solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"rangePopover\"\n [solarisPopoverDisabled]=\"\n isEffectivelyDisabled() || isEffectivelyReadonly()\n \"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverFitContent]=\"true\"\n [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n >\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <button\n #triggerButton\n type=\"button\"\n class=\"solaris-date-range-picker__trigger\"\n [id]=\"id\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n >\n {{ rangeDisplay() || placeholderText() }}\n </button>\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-range-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-label]=\"calendarLabel()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n
|
|
34567
|
-
styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"],
|
|
34555
|
+
template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n <solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"rangePopover\"\n [solarisPopoverDisabled]=\"\n isEffectivelyDisabled() || isEffectivelyReadonly()\n \"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverFitContent]=\"true\"\n [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n >\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <button\n #triggerButton\n type=\"button\"\n class=\"solaris-date-range-picker__trigger\"\n [id]=\"id\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n >\n {{ rangeDisplay() || placeholderText() }}\n </button>\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-range-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-label]=\"calendarLabel()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-date-range-picker__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n <div\n [attr.role]=\"inline() ? 'group' : 'dialog'\"\n [attr.aria-label]=\"calendarLabel()\"\n class=\"solaris-date-range-picker__panel\"\n >\n <nav\n class=\"solaris-date-range-picker__presets\"\n [attr.aria-label]=\"presetsLabel()\"\n >\n @if (presets().length > 0) {\n @for (preset of presets(); track preset.id) {\n <button\n type=\"button\"\n class=\"solaris-date-range-picker__preset\"\n [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n (click)=\"selectPreset(preset)\"\n >\n {{ presetLabel(preset) }}\n </button>\n }\n }\n <button\n type=\"button\"\n class=\"solaris-date-range-picker__preset\"\n [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n (click)=\"selectCustom()\"\n >\n {{ customLabel() }}\n </button>\n </nav>\n <div class=\"solaris-date-range-picker__content\">\n <div class=\"solaris-date-range-picker__calendars\">\n <solaris-date-calendar\n [min]=\"min()\"\n [max]=\"max()\"\n [range]=\"pending()\"\n [month]=\"displayedMonth()\"\n [locale]=\"resolvedLocale()\"\n [disabledDates]=\"disabledDates()\"\n [weekStartsOn]=\"weekStartsOn()\"\n [disablePast]=\"disablePast()\"\n [disableFuture]=\"disableFuture()\"\n [nextMonthLabel]=\"nextMonthLabel()\"\n (selectedChange)=\"selectDate($event)\"\n (monthChange)=\"setDisplayedMonth($event)\"\n [previousMonthLabel]=\"previousMonthLabel()\"\n />\n <span\n class=\"solaris-date-range-picker__calendar-divider\"\n aria-hidden=\"true\"\n ></span>\n <solaris-date-calendar\n [min]=\"min()\"\n [max]=\"max()\"\n [range]=\"pending()\"\n [month]=\"nextMonth()\"\n [locale]=\"resolvedLocale()\"\n [disabledDates]=\"disabledDates()\"\n [weekStartsOn]=\"weekStartsOn()\"\n [disablePast]=\"disablePast()\"\n [disableFuture]=\"disableFuture()\"\n [nextMonthLabel]=\"nextMonthLabel()\"\n (selectedChange)=\"selectDate($event)\"\n (monthChange)=\"setDisplayedMonth($event)\"\n [previousMonthLabel]=\"previousMonthLabel()\"\n />\n </div>\n <footer class=\"solaris-date-range-picker__footer\">\n <div class=\"solaris-date-range-picker__inputs\">\n <input\n type=\"text\"\n solaris-input\n (blur)=\"onBlur()\"\n density=\"compact\"\n autocomplete=\"off\"\n [fullWidth]=\"false\"\n inputmode=\"numeric\"\n (focus)=\"onFocus()\"\n [value]=\"startDisplay()\"\n (click)=\"onInputClick($event)\"\n [attr.aria-label]=\"startLabel()\"\n [disabled]=\"isStartDisabled()\"\n [readonly]=\"isStartReadonly()\"\n [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n (input)=\"onInput('start', $event)\"\n (keydown)=\"onPanelInputKeydown($event)\"\n />\n <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n >-</span\n >\n <input\n type=\"text\"\n solaris-input\n (blur)=\"onBlur()\"\n density=\"compact\"\n [fullWidth]=\"false\"\n autocomplete=\"off\"\n (focus)=\"onFocus()\"\n inputmode=\"numeric\"\n [value]=\"endDisplay()\"\n [attr.aria-label]=\"endLabel()\"\n (click)=\"onInputClick($event)\"\n [disabled]=\"isEndDisabled()\"\n [readonly]=\"isEndReadonly()\"\n [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n (input)=\"onInput('end', $event)\"\n (keydown)=\"onPanelInputKeydown($event)\"\n />\n </div>\n <div class=\"solaris-date-range-picker__actions\">\n <button\n type=\"button\"\n solaris-button\n density=\"compact\"\n appearance=\"ghost\"\n data-density=\"compact\"\n (click)=\"clearPending()\"\n >\n {{ clearButtonLabel() }}\n </button>\n <button\n type=\"button\"\n solaris-button\n density=\"compact\"\n (click)=\"cancel()\"\n appearance=\"outline\"\n data-density=\"compact\"\n >\n {{ cancelLabel() }}\n </button>\n <button\n type=\"button\"\n solaris-button\n color=\"primary\"\n (click)=\"apply()\"\n density=\"compact\"\n data-density=\"compact\"\n >\n {{ applyLabel() }}\n </button>\n </div>\n </footer>\n </div>\n </div>\n</ng-template>\n",
|
|
34556
|
+
styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-date-range-picker__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"],
|
|
34568
34557
|
dependencies: [
|
|
34569
34558
|
{
|
|
34570
34559
|
kind: "directive",
|
|
@@ -34801,11 +34790,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
34801
34790
|
"[attr.data-density]": "effectiveDensity()",
|
|
34802
34791
|
"[attr.data-open]": "panelOpen() ? \"\" : null"
|
|
34803
34792
|
},
|
|
34804
|
-
template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n <solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"rangePopover\"\n [solarisPopoverDisabled]=\"\n isEffectivelyDisabled() || isEffectivelyReadonly()\n \"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverFitContent]=\"true\"\n [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n >\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <button\n #triggerButton\n type=\"button\"\n class=\"solaris-date-range-picker__trigger\"\n [id]=\"id\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n >\n {{ rangeDisplay() || placeholderText() }}\n </button>\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-range-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-label]=\"calendarLabel()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n
|
|
34805
|
-
styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"]
|
|
34793
|
+
template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n <solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"rangePopover\"\n [solarisPopoverDisabled]=\"\n isEffectivelyDisabled() || isEffectivelyReadonly()\n \"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverFitContent]=\"true\"\n [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n >\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <button\n #triggerButton\n type=\"button\"\n class=\"solaris-date-range-picker__trigger\"\n [id]=\"id\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n >\n {{ rangeDisplay() || placeholderText() }}\n </button>\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-range-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-label]=\"calendarLabel()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-date-range-picker__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n <div\n [attr.role]=\"inline() ? 'group' : 'dialog'\"\n [attr.aria-label]=\"calendarLabel()\"\n class=\"solaris-date-range-picker__panel\"\n >\n <nav\n class=\"solaris-date-range-picker__presets\"\n [attr.aria-label]=\"presetsLabel()\"\n >\n @if (presets().length > 0) {\n @for (preset of presets(); track preset.id) {\n <button\n type=\"button\"\n class=\"solaris-date-range-picker__preset\"\n [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n (click)=\"selectPreset(preset)\"\n >\n {{ presetLabel(preset) }}\n </button>\n }\n }\n <button\n type=\"button\"\n class=\"solaris-date-range-picker__preset\"\n [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n (click)=\"selectCustom()\"\n >\n {{ customLabel() }}\n </button>\n </nav>\n <div class=\"solaris-date-range-picker__content\">\n <div class=\"solaris-date-range-picker__calendars\">\n <solaris-date-calendar\n [min]=\"min()\"\n [max]=\"max()\"\n [range]=\"pending()\"\n [month]=\"displayedMonth()\"\n [locale]=\"resolvedLocale()\"\n [disabledDates]=\"disabledDates()\"\n [weekStartsOn]=\"weekStartsOn()\"\n [disablePast]=\"disablePast()\"\n [disableFuture]=\"disableFuture()\"\n [nextMonthLabel]=\"nextMonthLabel()\"\n (selectedChange)=\"selectDate($event)\"\n (monthChange)=\"setDisplayedMonth($event)\"\n [previousMonthLabel]=\"previousMonthLabel()\"\n />\n <span\n class=\"solaris-date-range-picker__calendar-divider\"\n aria-hidden=\"true\"\n ></span>\n <solaris-date-calendar\n [min]=\"min()\"\n [max]=\"max()\"\n [range]=\"pending()\"\n [month]=\"nextMonth()\"\n [locale]=\"resolvedLocale()\"\n [disabledDates]=\"disabledDates()\"\n [weekStartsOn]=\"weekStartsOn()\"\n [disablePast]=\"disablePast()\"\n [disableFuture]=\"disableFuture()\"\n [nextMonthLabel]=\"nextMonthLabel()\"\n (selectedChange)=\"selectDate($event)\"\n (monthChange)=\"setDisplayedMonth($event)\"\n [previousMonthLabel]=\"previousMonthLabel()\"\n />\n </div>\n <footer class=\"solaris-date-range-picker__footer\">\n <div class=\"solaris-date-range-picker__inputs\">\n <input\n type=\"text\"\n solaris-input\n (blur)=\"onBlur()\"\n density=\"compact\"\n autocomplete=\"off\"\n [fullWidth]=\"false\"\n inputmode=\"numeric\"\n (focus)=\"onFocus()\"\n [value]=\"startDisplay()\"\n (click)=\"onInputClick($event)\"\n [attr.aria-label]=\"startLabel()\"\n [disabled]=\"isStartDisabled()\"\n [readonly]=\"isStartReadonly()\"\n [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n (input)=\"onInput('start', $event)\"\n (keydown)=\"onPanelInputKeydown($event)\"\n />\n <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n >-</span\n >\n <input\n type=\"text\"\n solaris-input\n (blur)=\"onBlur()\"\n density=\"compact\"\n [fullWidth]=\"false\"\n autocomplete=\"off\"\n (focus)=\"onFocus()\"\n inputmode=\"numeric\"\n [value]=\"endDisplay()\"\n [attr.aria-label]=\"endLabel()\"\n (click)=\"onInputClick($event)\"\n [disabled]=\"isEndDisabled()\"\n [readonly]=\"isEndReadonly()\"\n [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n (input)=\"onInput('end', $event)\"\n (keydown)=\"onPanelInputKeydown($event)\"\n />\n </div>\n <div class=\"solaris-date-range-picker__actions\">\n <button\n type=\"button\"\n solaris-button\n density=\"compact\"\n appearance=\"ghost\"\n data-density=\"compact\"\n (click)=\"clearPending()\"\n >\n {{ clearButtonLabel() }}\n </button>\n <button\n type=\"button\"\n solaris-button\n density=\"compact\"\n (click)=\"cancel()\"\n appearance=\"outline\"\n data-density=\"compact\"\n >\n {{ cancelLabel() }}\n </button>\n <button\n type=\"button\"\n solaris-button\n color=\"primary\"\n (click)=\"apply()\"\n density=\"compact\"\n data-density=\"compact\"\n >\n {{ applyLabel() }}\n </button>\n </div>\n </footer>\n </div>\n </div>\n</ng-template>\n",
|
|
34794
|
+
styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-date-range-picker__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"]
|
|
34806
34795
|
}]
|
|
34807
34796
|
}],
|
|
34808
|
-
ctorParameters: () => [],
|
|
34809
34797
|
propDecorators: {
|
|
34810
34798
|
triggerButton: [{
|
|
34811
34799
|
type: i0.ViewChild,
|
|
@@ -42541,7 +42529,6 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42541
42529
|
activeOptionIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []);
|
|
42542
42530
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
42543
42531
|
optionsInitialized = signal(false, ...ngDevMode ? [{ debugName: "optionsInitialized" }] : /* istanbul ignore next */ []);
|
|
42544
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
42545
42532
|
triggerContentRef = viewChild("triggerContent", ...ngDevMode ? [{ debugName: "triggerContentRef" }] : /* istanbul ignore next */ []);
|
|
42546
42533
|
onChange = () => void 0;
|
|
42547
42534
|
onTouched = () => void 0;
|
|
@@ -42587,7 +42574,7 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42587
42574
|
return this.internalValue().length > 0;
|
|
42588
42575
|
}, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
|
|
42589
42576
|
showValue = computed(() => {
|
|
42590
|
-
return this.
|
|
42577
|
+
return this.hasValue();
|
|
42591
42578
|
}, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
|
|
42592
42579
|
canClear = computed(() => {
|
|
42593
42580
|
return this.clearable() && this.hasValue() && !this.isEffectivelyDisabled() && !this.isEffectivelyReadonly();
|
|
@@ -42745,10 +42732,10 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42745
42732
|
}, ...ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []);
|
|
42746
42733
|
clearAriaLabel = computed(() => {
|
|
42747
42734
|
const key = this.clearLabelKey();
|
|
42748
|
-
if (key) return this.translateService
|
|
42735
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
42749
42736
|
const text = this.clearLabel();
|
|
42750
42737
|
if (text) return text;
|
|
42751
|
-
return this.translateService
|
|
42738
|
+
return this.translateService?.translate("solaris.multiSelect.clear") ?? "Clear selection";
|
|
42752
42739
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
42753
42740
|
selectAllLabelText = computed(() => {
|
|
42754
42741
|
const key = this.selectAllLabelKey();
|
|
@@ -42884,9 +42871,6 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42884
42871
|
}
|
|
42885
42872
|
constructor() {
|
|
42886
42873
|
super();
|
|
42887
|
-
afterNextRender(() => {
|
|
42888
|
-
this.hydrated.set(true);
|
|
42889
|
-
});
|
|
42890
42874
|
effect(() => {
|
|
42891
42875
|
if (!this.optionsInitialized()) return;
|
|
42892
42876
|
this.internalValue();
|
|
@@ -43791,8 +43775,8 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
43791
43775
|
],
|
|
43792
43776
|
usesInheritance: true,
|
|
43793
43777
|
ngImport: i0,
|
|
43794
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width.px]=\"contentMinWidth() || null\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (showValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!showValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (showValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (hydrated() && canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
43795
|
-
styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"],
|
|
43778
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width.px]=\"contentMinWidth() || null\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [hidden]=\"!showValue() || !showCountOnly()\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n [hidden]=\"!showValue() || showCountOnly()\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [hidden]=\"!autoShowOverflow()\"\n [attr.aria-label]=\"\n '+ ' + autoOverflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n </div>\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n <span\n class=\"solaris-multi-select__value\"\n [hidden]=\"showValue() || (searchable() && panelOpen())\"\n >\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\" [hidden]=\"!showValue()\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [hidden]=\"!(overflowCount() > 0)\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\" [hidden]=\"!showValue()\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [hidden]=\"!showValue()\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n <span class=\"solaris-multi-select__value\" [hidden]=\"showValue()\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
43779
|
+
styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__chips[hidden],.solaris-multi-select__chip[hidden],.solaris-multi-select__clear[hidden]{display:none}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"],
|
|
43796
43780
|
dependencies: [
|
|
43797
43781
|
{
|
|
43798
43782
|
kind: "component",
|
|
@@ -43984,8 +43968,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
43984
43968
|
"[attr.aria-label]": "ariaLabelText() ?? null",
|
|
43985
43969
|
"[attr.data-has-value]": "hasValue() ? \"\" : null"
|
|
43986
43970
|
},
|
|
43987
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width.px]=\"contentMinWidth() || null\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (showValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!showValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (showValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (hydrated() && canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
43988
|
-
styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"]
|
|
43971
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width.px]=\"contentMinWidth() || null\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [hidden]=\"!showValue() || !showCountOnly()\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n [hidden]=\"!showValue() || showCountOnly()\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [hidden]=\"!autoShowOverflow()\"\n [attr.aria-label]=\"\n '+ ' + autoOverflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n </div>\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n <span\n class=\"solaris-multi-select__value\"\n [hidden]=\"showValue() || (searchable() && panelOpen())\"\n >\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\" [hidden]=\"!showValue()\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [hidden]=\"!(overflowCount() > 0)\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\" [hidden]=\"!showValue()\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [hidden]=\"!showValue()\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n <span class=\"solaris-multi-select__value\" [hidden]=\"showValue()\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
43972
|
+
styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__chips[hidden],.solaris-multi-select__chip[hidden],.solaris-multi-select__clear[hidden]{display:none}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"]
|
|
43989
43973
|
}]
|
|
43990
43974
|
}],
|
|
43991
43975
|
ctorParameters: () => [],
|
|
@@ -46836,18 +46820,11 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
46836
46820
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
46837
46821
|
parseError = signal(false, ...ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []);
|
|
46838
46822
|
panelOpen = signal(false, ...ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []);
|
|
46839
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
46840
46823
|
displayedMonth = signal(monthForSolarisDate(todaySolarisDate()) ?? {
|
|
46841
46824
|
year: (/* @__PURE__ */ new Date()).getFullYear(),
|
|
46842
46825
|
month: (/* @__PURE__ */ new Date()).getMonth()
|
|
46843
46826
|
}, ...ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []);
|
|
46844
46827
|
describedBy = signal([], ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
46845
|
-
constructor() {
|
|
46846
|
-
super();
|
|
46847
|
-
afterNextRender(() => {
|
|
46848
|
-
this.hydrated.set(true);
|
|
46849
|
-
});
|
|
46850
|
-
}
|
|
46851
46828
|
onChange = () => void 0;
|
|
46852
46829
|
onTouched = () => void 0;
|
|
46853
46830
|
resolvedLocale = computed(() => this.locale() ?? this.translateService.locale(), ...ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []);
|
|
@@ -46864,10 +46841,10 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
46864
46841
|
}, ...ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []);
|
|
46865
46842
|
clearAriaLabel = computed(() => {
|
|
46866
46843
|
const key = this.clearLabelKey();
|
|
46867
|
-
if (key) return this.translateService
|
|
46844
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
46868
46845
|
const text = this.clearLabel();
|
|
46869
46846
|
if (text) return text;
|
|
46870
|
-
return this.translateService
|
|
46847
|
+
return this.translateService?.translate("solaris.date-picker.clear") ?? "Clear date";
|
|
46871
46848
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
46872
46849
|
placeholderText = computed(() => this.resolveText(this.placeholder(), this.placeholderKey(), "solaris.date-picker.placeholder"), ...ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []);
|
|
46873
46850
|
labelText = computed(() => this.resolveText(this.label(), this.labelKey()), ...ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []);
|
|
@@ -47028,15 +47005,15 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
47028
47005
|
}
|
|
47029
47006
|
}
|
|
47030
47007
|
resolveText(value, key, fallback) {
|
|
47031
|
-
if (key) return this.translateService
|
|
47032
|
-
return value || (fallback ? this.translateService
|
|
47008
|
+
if (key) return this.translateService?.translate(key) || value || "";
|
|
47009
|
+
return value || (fallback ? this.translateService?.translate(fallback) ?? "" : "");
|
|
47033
47010
|
}
|
|
47034
47011
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
47035
47012
|
minVersion: "12.0.0",
|
|
47036
47013
|
version: "22.2.3",
|
|
47037
47014
|
ngImport: i0,
|
|
47038
47015
|
type: SolarisDatePickerComponent,
|
|
47039
|
-
deps:
|
|
47016
|
+
deps: null,
|
|
47040
47017
|
target: i0.ɵɵFactoryTarget.Component
|
|
47041
47018
|
});
|
|
47042
47019
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
@@ -47314,8 +47291,8 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
47314
47291
|
}],
|
|
47315
47292
|
usesInheritance: true,
|
|
47316
47293
|
ngImport: i0,
|
|
47317
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [radius]=\"radius()\"\n [hint]=\"hintText()\"\n [label]=\"labelText()\"\n [error]=\"errorText()\"\n solaris-popover-trigger\n [appearance]=\"appearance()\"\n [required]=\"requiredInput()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [solarisPopoverPadding]=\"'md'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverRadius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n [solarisPopoverTriggerFor]=\"calendarPopover\"\n [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <input\n [id]=\"id\"\n type=\"text\"\n #inputElement\n solaris-input\n autocomplete=\"off\"\n inputmode=\"numeric\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [value]=\"displayValue()\"\n (focus)=\"onInputFocus()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [attr.placeholder]=\"placeholderText()\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n />\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n
|
|
47318
|
-
styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"],
|
|
47294
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [radius]=\"radius()\"\n [hint]=\"hintText()\"\n [label]=\"labelText()\"\n [error]=\"errorText()\"\n solaris-popover-trigger\n [appearance]=\"appearance()\"\n [required]=\"requiredInput()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [solarisPopoverPadding]=\"'md'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverRadius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n [solarisPopoverTriggerFor]=\"calendarPopover\"\n [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <input\n [id]=\"id\"\n type=\"text\"\n #inputElement\n solaris-input\n autocomplete=\"off\"\n inputmode=\"numeric\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [value]=\"displayValue()\"\n (focus)=\"onInputFocus()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [attr.placeholder]=\"placeholderText()\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n />\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-date-picker__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n <div\n role=\"dialog\"\n class=\"solaris-date-picker__panel\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n >\n <solaris-date-calendar\n [min]=\"min()\"\n [max]=\"max()\"\n [selected]=\"value()\"\n [month]=\"displayedMonth()\"\n [locale]=\"resolvedLocale()\"\n [disabledDates]=\"disabledDates()\"\n [weekStartsOn]=\"weekStartsOn()\"\n [disablePast]=\"disablePast()\"\n [disableFuture]=\"disableFuture()\"\n [nextMonthLabel]=\"nextMonthLabel()\"\n (selectedChange)=\"selectDate($event)\"\n (monthChange)=\"setDisplayedMonth($event)\"\n [previousMonthLabel]=\"previousMonthLabel()\"\n />\n </div>\n</ng-template>\n",
|
|
47295
|
+
styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-date-picker__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"],
|
|
47319
47296
|
dependencies: [
|
|
47320
47297
|
{
|
|
47321
47298
|
kind: "component",
|
|
@@ -47517,11 +47494,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
47517
47494
|
"[attr.data-density]": "effectiveDensity()",
|
|
47518
47495
|
"[attr.data-open]": "panelOpen() ? \"\" : null"
|
|
47519
47496
|
},
|
|
47520
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [radius]=\"radius()\"\n [hint]=\"hintText()\"\n [label]=\"labelText()\"\n [error]=\"errorText()\"\n solaris-popover-trigger\n [appearance]=\"appearance()\"\n [required]=\"requiredInput()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [solarisPopoverPadding]=\"'md'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverRadius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n [solarisPopoverTriggerFor]=\"calendarPopover\"\n [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <input\n [id]=\"id\"\n type=\"text\"\n #inputElement\n solaris-input\n autocomplete=\"off\"\n inputmode=\"numeric\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [value]=\"displayValue()\"\n (focus)=\"onInputFocus()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [attr.placeholder]=\"placeholderText()\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n />\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n
|
|
47521
|
-
styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"]
|
|
47497
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [radius]=\"radius()\"\n [hint]=\"hintText()\"\n [label]=\"labelText()\"\n [error]=\"errorText()\"\n solaris-popover-trigger\n [appearance]=\"appearance()\"\n [required]=\"requiredInput()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [solarisPopoverPadding]=\"'md'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverRadius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n [solarisPopoverTriggerFor]=\"calendarPopover\"\n [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <input\n [id]=\"id\"\n type=\"text\"\n #inputElement\n solaris-input\n autocomplete=\"off\"\n inputmode=\"numeric\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [value]=\"displayValue()\"\n (focus)=\"onInputFocus()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [attr.placeholder]=\"placeholderText()\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n />\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-date-picker__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n <div\n role=\"dialog\"\n class=\"solaris-date-picker__panel\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n >\n <solaris-date-calendar\n [min]=\"min()\"\n [max]=\"max()\"\n [selected]=\"value()\"\n [month]=\"displayedMonth()\"\n [locale]=\"resolvedLocale()\"\n [disabledDates]=\"disabledDates()\"\n [weekStartsOn]=\"weekStartsOn()\"\n [disablePast]=\"disablePast()\"\n [disableFuture]=\"disableFuture()\"\n [nextMonthLabel]=\"nextMonthLabel()\"\n (selectedChange)=\"selectDate($event)\"\n (monthChange)=\"setDisplayedMonth($event)\"\n [previousMonthLabel]=\"previousMonthLabel()\"\n />\n </div>\n</ng-template>\n",
|
|
47498
|
+
styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-date-picker__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"]
|
|
47522
47499
|
}]
|
|
47523
47500
|
}],
|
|
47524
|
-
ctorParameters: () => [],
|
|
47525
47501
|
propDecorators: {
|
|
47526
47502
|
inputElement: [{
|
|
47527
47503
|
type: i0.ViewChild,
|
|
@@ -50245,7 +50221,6 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50245
50221
|
_visibleState = signal(false, ...ngDevMode ? [{ debugName: "_visibleState" }] : /* istanbul ignore next */ []);
|
|
50246
50222
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
50247
50223
|
dirty = signal(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
50248
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
50249
50224
|
onChange = () => {};
|
|
50250
50225
|
onTouched = () => {};
|
|
50251
50226
|
effectivePolicy = computed(() => {
|
|
@@ -50261,9 +50236,6 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50261
50236
|
}, ...ngDevMode ? [{ debugName: "effectivePolicy" }] : /* istanbul ignore next */ []);
|
|
50262
50237
|
constructor() {
|
|
50263
50238
|
super();
|
|
50264
|
-
afterNextRender(() => {
|
|
50265
|
-
this.hydrated.set(true);
|
|
50266
|
-
});
|
|
50267
50239
|
effect(() => {
|
|
50268
50240
|
this._visibleState.set(this.visible());
|
|
50269
50241
|
});
|
|
@@ -50766,8 +50738,8 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50766
50738
|
}],
|
|
50767
50739
|
usesInheritance: true,
|
|
50768
50740
|
ngImport: i0,
|
|
50769
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n solaris-form-suffix-action\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n
|
|
50770
|
-
styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"],
|
|
50741
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n solaris-form-suffix-action\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n<div\n class=\"solaris-password-field__strength\"\n [hidden]=\"!(showStrength() && internalValue().length > 0)\"\n [attr.data-level]=\"strengthLevel()\"\n role=\"status\"\n aria-live=\"polite\"\n>\n <div class=\"solaris-password-field__strength-bar\">\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() !== 'empty'\"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"\n strengthLevel() === 'medium' || strengthLevel() === 'strong'\n \"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() === 'strong'\"\n ></div>\n </div>\n <span class=\"solaris-password-field__strength-label\">\n {{ strengthLabelText() }}\n </span>\n</div>\n",
|
|
50742
|
+
styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength[hidden]{display:none}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"],
|
|
50771
50743
|
dependencies: [
|
|
50772
50744
|
{
|
|
50773
50745
|
kind: "ngmodule",
|
|
@@ -50888,8 +50860,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
50888
50860
|
"[attr.data-density]": "effectiveDensity()",
|
|
50889
50861
|
"[attr.data-full-width]": "fullWidth() || undefined"
|
|
50890
50862
|
},
|
|
50891
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n solaris-form-suffix-action\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n
|
|
50892
|
-
styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"]
|
|
50863
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n solaris-form-suffix-action\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n<div\n class=\"solaris-password-field__strength\"\n [hidden]=\"!(showStrength() && internalValue().length > 0)\"\n [attr.data-level]=\"strengthLevel()\"\n role=\"status\"\n aria-live=\"polite\"\n>\n <div class=\"solaris-password-field__strength-bar\">\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() !== 'empty'\"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"\n strengthLevel() === 'medium' || strengthLevel() === 'strong'\n \"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() === 'strong'\"\n ></div>\n </div>\n <span class=\"solaris-password-field__strength-label\">\n {{ strengthLabelText() }}\n </span>\n</div>\n",
|
|
50864
|
+
styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength[hidden]{display:none}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"]
|
|
50893
50865
|
}]
|
|
50894
50866
|
}],
|
|
50895
50867
|
ctorParameters: () => [],
|
|
@@ -51349,20 +51321,13 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51349
51321
|
if (key) return this.translateService.translate(key);
|
|
51350
51322
|
const text = this.clearLabel();
|
|
51351
51323
|
if (text) return text;
|
|
51352
|
-
return this.
|
|
51324
|
+
return this.translateWithDefault("solaris.email-field.clear", "Clear email");
|
|
51353
51325
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
51354
51326
|
internalValue = signal("", ...ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []);
|
|
51355
51327
|
internalDisabled = signal(false, ...ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []);
|
|
51356
51328
|
internalFocused = signal(false, ...ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []);
|
|
51357
51329
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
51358
51330
|
dirty = signal(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
51359
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
51360
|
-
constructor() {
|
|
51361
|
-
super();
|
|
51362
|
-
afterNextRender(() => {
|
|
51363
|
-
this.hydrated.set(true);
|
|
51364
|
-
});
|
|
51365
|
-
}
|
|
51366
51331
|
effectiveDensity = computed(() => {
|
|
51367
51332
|
return this.density() ?? this.themeService.density;
|
|
51368
51333
|
}, ...ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []);
|
|
@@ -51486,12 +51451,14 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51486
51451
|
this.onTouched();
|
|
51487
51452
|
}
|
|
51488
51453
|
translateWithDefault(key, defaultText, params) {
|
|
51489
|
-
const
|
|
51490
|
-
|
|
51454
|
+
const translated = this.translateService?.translate(key, params);
|
|
51455
|
+
if (translated === void 0 || translated === null) return defaultText;
|
|
51456
|
+
return translated !== key ? translated : defaultText;
|
|
51491
51457
|
}
|
|
51492
51458
|
translateKey(key) {
|
|
51493
51459
|
if (key) {
|
|
51494
|
-
const translated = this.translateService
|
|
51460
|
+
const translated = this.translateService?.translate(key);
|
|
51461
|
+
if (translated === void 0 || translated === null) return void 0;
|
|
51495
51462
|
return translated !== key ? translated : void 0;
|
|
51496
51463
|
}
|
|
51497
51464
|
}
|
|
@@ -51512,7 +51479,7 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51512
51479
|
version: "22.2.3",
|
|
51513
51480
|
ngImport: i0,
|
|
51514
51481
|
type: SolarisEmailFieldComponent,
|
|
51515
|
-
deps:
|
|
51482
|
+
deps: null,
|
|
51516
51483
|
target: i0.ɵɵFactoryTarget.Component
|
|
51517
51484
|
});
|
|
51518
51485
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
@@ -51855,8 +51822,8 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51855
51822
|
}],
|
|
51856
51823
|
usesInheritance: true,
|
|
51857
51824
|
ngImport: i0,
|
|
51858
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n
|
|
51859
|
-
styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"],
|
|
51825
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-email-field__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n",
|
|
51826
|
+
styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-email-field__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"],
|
|
51860
51827
|
dependencies: [
|
|
51861
51828
|
{
|
|
51862
51829
|
kind: "ngmodule",
|
|
@@ -51970,11 +51937,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
51970
51937
|
"[attr.data-size]": "size()",
|
|
51971
51938
|
"[attr.data-density]": "effectiveDensity()"
|
|
51972
51939
|
},
|
|
51973
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n
|
|
51974
|
-
styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"]
|
|
51940
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-email-field__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n",
|
|
51941
|
+
styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-email-field__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"]
|
|
51975
51942
|
}]
|
|
51976
51943
|
}],
|
|
51977
|
-
ctorParameters: () => [],
|
|
51978
51944
|
propDecorators: {
|
|
51979
51945
|
inputElementRef: [{
|
|
51980
51946
|
type: i0.ViewChild,
|
|
@@ -52799,14 +52765,13 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52799
52765
|
internalFocused = signal(false, ...ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []);
|
|
52800
52766
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
52801
52767
|
dirty = signal(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
52802
|
-
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
52803
52768
|
selectedCountry = signal(void 0, ...ngDevMode ? [{ debugName: "selectedCountry" }] : /* istanbul ignore next */ []);
|
|
52804
52769
|
panelOpen = signal(false, ...ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []);
|
|
52805
52770
|
onChange = () => {};
|
|
52806
52771
|
onTouched = () => {};
|
|
52807
52772
|
popoverSubscriptions = [];
|
|
52808
52773
|
allCountries = computed(() => {
|
|
52809
|
-
return this.countryListFactory(this.translateService
|
|
52774
|
+
return this.countryListFactory(this.translateService?.locale() ?? "en-US");
|
|
52810
52775
|
}, ...ngDevMode ? [{ debugName: "allCountries" }] : /* istanbul ignore next */ []);
|
|
52811
52776
|
countries = computed(() => {
|
|
52812
52777
|
const list = this.allCountries();
|
|
@@ -52843,7 +52808,7 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52843
52808
|
if (key) return this.translateService.translate(key);
|
|
52844
52809
|
const text = this.clearLabel();
|
|
52845
52810
|
if (text) return text;
|
|
52846
|
-
return this.
|
|
52811
|
+
return this.translateWithDefault("solaris.phone-field.clear", "Clear phone number");
|
|
52847
52812
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
52848
52813
|
isEffectivelyDisabled = computed(() => {
|
|
52849
52814
|
return this.disabledInput() || this.internalDisabled();
|
|
@@ -52960,9 +52925,6 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52960
52925
|
}, ...ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []);
|
|
52961
52926
|
constructor() {
|
|
52962
52927
|
super();
|
|
52963
|
-
afterNextRender(() => {
|
|
52964
|
-
this.hydrated.set(true);
|
|
52965
|
-
});
|
|
52966
52928
|
effect(() => {
|
|
52967
52929
|
const value = this.value();
|
|
52968
52930
|
if (value !== this.lastAppliedValue) {
|
|
@@ -53096,12 +53058,14 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
53096
53058
|
}
|
|
53097
53059
|
}
|
|
53098
53060
|
translateWithDefault(key, defaultText, params) {
|
|
53099
|
-
const
|
|
53100
|
-
|
|
53061
|
+
const translated = this.translateService?.translate(key, params);
|
|
53062
|
+
if (translated === void 0 || translated === null) return defaultText;
|
|
53063
|
+
return translated !== key ? translated : defaultText;
|
|
53101
53064
|
}
|
|
53102
53065
|
translateKey(key) {
|
|
53103
53066
|
if (key) {
|
|
53104
|
-
const translated = this.translateService
|
|
53067
|
+
const translated = this.translateService?.translate(key);
|
|
53068
|
+
if (translated === void 0 || translated === null) return void 0;
|
|
53105
53069
|
return translated !== key ? translated : void 0;
|
|
53106
53070
|
}
|
|
53107
53071
|
}
|
|
@@ -53495,8 +53459,8 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
53495
53459
|
}],
|
|
53496
53460
|
usesInheritance: true,
|
|
53497
53461
|
ngImport: i0,
|
|
53498
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"countryPopover\"\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"8\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n <button\n type=\"button\"\n class=\"solaris-phone-field__country\"\n solaris-form-prefix\n [attr.aria-label]=\"countryButtonLabelText()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [disabled]=\"!canOpen()\"\n (click)=\"onCountryToggle($event)\"\n >\n <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n <span\n class=\"solaris-phone-field__flag\"\n [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n ></span>\n <solaris-icon\n class=\"solaris-phone-field__chevron\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n\n <span class=\"solaris-phone-field__dial-code\"\n >+{{ selectedCallingCode() }}</span\n >\n\n <input\n type=\"tel\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"displayValue()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocapitalize]=\"'none'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n
|
|
53499
|
-
styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"],
|
|
53462
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"countryPopover\"\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"8\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n <button\n type=\"button\"\n class=\"solaris-phone-field__country\"\n solaris-form-prefix\n [attr.aria-label]=\"countryButtonLabelText()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [disabled]=\"!canOpen()\"\n (click)=\"onCountryToggle($event)\"\n >\n <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n <span\n class=\"solaris-phone-field__flag\"\n [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n ></span>\n <solaris-icon\n class=\"solaris-phone-field__chevron\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n\n <span class=\"solaris-phone-field__dial-code\"\n >+{{ selectedCallingCode() }}</span\n >\n\n <input\n type=\"tel\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"displayValue()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocapitalize]=\"'none'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-phone-field__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n <solaris-phone-country-list\n [countries]=\"countries()\"\n [selectedCode]=\"effectiveCountry()\"\n [searchable]=\"searchable()\"\n [searchPlaceholder]=\"searchPlaceholderText()\"\n [noResultsText]=\"noResultsTextValue()\"\n [emptyText]=\"emptyTextValue()\"\n [maxHeight]=\"panelMaxHeight()\"\n (countrySelected)=\"selectCountry($event)\"\n (closeRequest)=\"closeCountryPanel()\"\n />\n</ng-template>\n",
|
|
53463
|
+
styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-phone-field__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"],
|
|
53500
53464
|
dependencies: [
|
|
53501
53465
|
{
|
|
53502
53466
|
kind: "ngmodule",
|
|
@@ -53676,8 +53640,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
53676
53640
|
"[attr.data-open]": "panelOpen() ? \"\" : null",
|
|
53677
53641
|
"[attr.data-density]": "effectiveDensity()"
|
|
53678
53642
|
},
|
|
53679
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"countryPopover\"\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"8\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n <button\n type=\"button\"\n class=\"solaris-phone-field__country\"\n solaris-form-prefix\n [attr.aria-label]=\"countryButtonLabelText()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [disabled]=\"!canOpen()\"\n (click)=\"onCountryToggle($event)\"\n >\n <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n <span\n class=\"solaris-phone-field__flag\"\n [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n ></span>\n <solaris-icon\n class=\"solaris-phone-field__chevron\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n\n <span class=\"solaris-phone-field__dial-code\"\n >+{{ selectedCallingCode() }}</span\n >\n\n <input\n type=\"tel\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"displayValue()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocapitalize]=\"'none'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n
|
|
53680
|
-
styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"]
|
|
53643
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"countryPopover\"\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"8\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n <button\n type=\"button\"\n class=\"solaris-phone-field__country\"\n solaris-form-prefix\n [attr.aria-label]=\"countryButtonLabelText()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [disabled]=\"!canOpen()\"\n (click)=\"onCountryToggle($event)\"\n >\n <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n <span\n class=\"solaris-phone-field__flag\"\n [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n ></span>\n <solaris-icon\n class=\"solaris-phone-field__chevron\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n\n <span class=\"solaris-phone-field__dial-code\"\n >+{{ selectedCallingCode() }}</span\n >\n\n <input\n type=\"tel\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"displayValue()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocapitalize]=\"'none'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-phone-field__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [hidden]=\"!canClear() || loading()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n <solaris-phone-country-list\n [countries]=\"countries()\"\n [selectedCode]=\"effectiveCountry()\"\n [searchable]=\"searchable()\"\n [searchPlaceholder]=\"searchPlaceholderText()\"\n [noResultsText]=\"noResultsTextValue()\"\n [emptyText]=\"emptyTextValue()\"\n [maxHeight]=\"panelMaxHeight()\"\n (countrySelected)=\"selectCountry($event)\"\n (closeRequest)=\"closeCountryPanel()\"\n />\n</ng-template>\n",
|
|
53644
|
+
styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}.solaris-phone-field__clear[hidden]{display:none}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"]
|
|
53681
53645
|
}]
|
|
53682
53646
|
}],
|
|
53683
53647
|
ctorParameters: () => [],
|