@educarehq/solaris-ui 2.0.5 → 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.
|
@@ -31680,10 +31680,10 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
31680
31680
|
}, ...ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []);
|
|
31681
31681
|
clearAriaLabel = computed(() => {
|
|
31682
31682
|
const key = this.clearLabelKey();
|
|
31683
|
-
if (key) return this.translateService
|
|
31683
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
31684
31684
|
const text = this.clearLabel();
|
|
31685
31685
|
if (text) return text;
|
|
31686
|
-
return this.translateService
|
|
31686
|
+
return this.translateService?.translate("solaris.select.clear") ?? "Clear selection";
|
|
31687
31687
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
31688
31688
|
ariaLabelText = computed(() => {
|
|
31689
31689
|
const key = this.ariaLabelKey();
|
|
@@ -32497,8 +32497,8 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
32497
32497
|
],
|
|
32498
32498
|
usesInheritance: true,
|
|
32499
32499
|
ngImport: i0,
|
|
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
|
|
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__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"],
|
|
32502
32502
|
dependencies: [
|
|
32503
32503
|
{
|
|
32504
32504
|
kind: "component",
|
|
@@ -32653,8 +32653,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32653
32653
|
"[attr.aria-label]": "ariaLabelText() ?? null",
|
|
32654
32654
|
"[attr.data-has-value]": "hasValue() ? \"\" : null"
|
|
32655
32655
|
},
|
|
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
|
|
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__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"]
|
|
32658
32658
|
}]
|
|
32659
32659
|
}],
|
|
32660
32660
|
ctorParameters: () => [],
|
|
@@ -33932,7 +33932,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33932
33932
|
describedBy = signal([], ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
33933
33933
|
onChange = () => void 0;
|
|
33934
33934
|
onTouched = () => void 0;
|
|
33935
|
-
resolvedLocale = computed(() => this.locale() ?? this.translateService
|
|
33935
|
+
resolvedLocale = computed(() => this.locale() ?? this.translateService?.locale() ?? "en-US", ...ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []);
|
|
33936
33936
|
effectiveDensity = computed(() => this.density() ?? this.themeService.density, ...ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []);
|
|
33937
33937
|
isEffectivelyDisabled = computed(() => this.disabledInput() || this.disabledState(), ...ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []);
|
|
33938
33938
|
isEffectivelyReadonly = computed(() => this.readonlyInput(), ...ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []);
|
|
@@ -33955,7 +33955,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33955
33955
|
}, ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
|
|
33956
33956
|
startLabel = computed(() => this.translateService.translate("solaris.date-range-picker.start"), ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
|
|
33957
33957
|
endLabel = computed(() => this.translateService.translate("solaris.date-range-picker.end"), ...ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []);
|
|
33958
|
-
calendarLabel = computed(() => this.translateService
|
|
33958
|
+
calendarLabel = computed(() => this.translateService?.translate("solaris.date-picker.open-calendar") ?? "Open calendar", ...ngDevMode ? [{ debugName: "calendarLabel" }] : /* istanbul ignore next */ []);
|
|
33959
33959
|
previousMonthLabel = computed(() => this.translateService.translate("solaris.date-picker.previous-month"), ...ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []);
|
|
33960
33960
|
nextMonthLabel = computed(() => this.translateService.translate("solaris.date-picker.next-month"), ...ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []);
|
|
33961
33961
|
applyLabel = computed(() => this.translateService.translate("solaris.date-range-picker.apply"), ...ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []);
|
|
@@ -33970,13 +33970,13 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33970
33970
|
}, ...ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []);
|
|
33971
33971
|
clearAriaLabel = computed(() => {
|
|
33972
33972
|
const key = this.clearLabelKey();
|
|
33973
|
-
if (key) return this.translateService
|
|
33973
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
33974
33974
|
const text = this.clearLabel();
|
|
33975
33975
|
if (text) return text;
|
|
33976
|
-
return this.translateService
|
|
33976
|
+
return this.translateService?.translate("solaris.date-range-picker.clear") ?? "Clear";
|
|
33977
33977
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
33978
33978
|
presetsLabel = computed(() => this.translateService.translate("solaris.date-range-picker.presets"), ...ngDevMode ? [{ debugName: "presetsLabel" }] : /* istanbul ignore next */ []);
|
|
33979
|
-
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 */ []);
|
|
33980
33980
|
customLabel = computed(() => this.translateService.translate("solaris.date-range-picker.custom"), ...ngDevMode ? [{ debugName: "customLabel" }] : /* istanbul ignore next */ []);
|
|
33981
33981
|
rangeDisplay = computed(() => {
|
|
33982
33982
|
const range = this.value();
|
|
@@ -34552,8 +34552,8 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
34552
34552
|
}],
|
|
34553
34553
|
usesInheritance: true,
|
|
34554
34554
|
ngImport: i0,
|
|
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
|
|
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)}@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"],
|
|
34557
34557
|
dependencies: [
|
|
34558
34558
|
{
|
|
34559
34559
|
kind: "directive",
|
|
@@ -34790,8 +34790,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
34790
34790
|
"[attr.data-density]": "effectiveDensity()",
|
|
34791
34791
|
"[attr.data-open]": "panelOpen() ? \"\" : null"
|
|
34792
34792
|
},
|
|
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
|
|
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)}@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"]
|
|
34795
34795
|
}]
|
|
34796
34796
|
}],
|
|
34797
34797
|
propDecorators: {
|
|
@@ -42573,6 +42573,9 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42573
42573
|
hasValue = computed(() => {
|
|
42574
42574
|
return this.internalValue().length > 0;
|
|
42575
42575
|
}, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
|
|
42576
|
+
showValue = computed(() => {
|
|
42577
|
+
return this.hasValue();
|
|
42578
|
+
}, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
|
|
42576
42579
|
canClear = computed(() => {
|
|
42577
42580
|
return this.clearable() && this.hasValue() && !this.isEffectivelyDisabled() && !this.isEffectivelyReadonly();
|
|
42578
42581
|
}, ...ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []);
|
|
@@ -42729,10 +42732,10 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42729
42732
|
}, ...ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []);
|
|
42730
42733
|
clearAriaLabel = computed(() => {
|
|
42731
42734
|
const key = this.clearLabelKey();
|
|
42732
|
-
if (key) return this.translateService
|
|
42735
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
42733
42736
|
const text = this.clearLabel();
|
|
42734
42737
|
if (text) return text;
|
|
42735
|
-
return this.translateService
|
|
42738
|
+
return this.translateService?.translate("solaris.multiSelect.clear") ?? "Clear selection";
|
|
42736
42739
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
42737
42740
|
selectAllLabelText = computed(() => {
|
|
42738
42741
|
const key = this.selectAllLabelKey();
|
|
@@ -43772,8 +43775,8 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
43772
43775
|
],
|
|
43773
43776
|
usesInheritance: true,
|
|
43774
43777
|
ngImport: i0,
|
|
43775
|
-
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 (hasValue()) {\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 (!hasValue() && !(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 (hasValue()) {\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 (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",
|
|
43776
|
-
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"],
|
|
43777
43780
|
dependencies: [
|
|
43778
43781
|
{
|
|
43779
43782
|
kind: "component",
|
|
@@ -43965,8 +43968,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
43965
43968
|
"[attr.aria-label]": "ariaLabelText() ?? null",
|
|
43966
43969
|
"[attr.data-has-value]": "hasValue() ? \"\" : null"
|
|
43967
43970
|
},
|
|
43968
|
-
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 (hasValue()) {\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 (!hasValue() && !(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 (hasValue()) {\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 (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",
|
|
43969
|
-
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"]
|
|
43970
43973
|
}]
|
|
43971
43974
|
}],
|
|
43972
43975
|
ctorParameters: () => [],
|
|
@@ -46838,10 +46841,10 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
46838
46841
|
}, ...ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []);
|
|
46839
46842
|
clearAriaLabel = computed(() => {
|
|
46840
46843
|
const key = this.clearLabelKey();
|
|
46841
|
-
if (key) return this.translateService
|
|
46844
|
+
if (key) return this.translateService?.translate(key) ?? key;
|
|
46842
46845
|
const text = this.clearLabel();
|
|
46843
46846
|
if (text) return text;
|
|
46844
|
-
return this.translateService
|
|
46847
|
+
return this.translateService?.translate("solaris.date-picker.clear") ?? "Clear date";
|
|
46845
46848
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
46846
46849
|
placeholderText = computed(() => this.resolveText(this.placeholder(), this.placeholderKey(), "solaris.date-picker.placeholder"), ...ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []);
|
|
46847
46850
|
labelText = computed(() => this.resolveText(this.label(), this.labelKey()), ...ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []);
|
|
@@ -47002,8 +47005,8 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
47002
47005
|
}
|
|
47003
47006
|
}
|
|
47004
47007
|
resolveText(value, key, fallback) {
|
|
47005
|
-
if (key) return this.translateService
|
|
47006
|
-
return value || (fallback ? this.translateService
|
|
47008
|
+
if (key) return this.translateService?.translate(key) || value || "";
|
|
47009
|
+
return value || (fallback ? this.translateService?.translate(fallback) ?? "" : "");
|
|
47007
47010
|
}
|
|
47008
47011
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
47009
47012
|
minVersion: "12.0.0",
|
|
@@ -47288,8 +47291,8 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
47288
47291
|
}],
|
|
47289
47292
|
usesInheritance: true,
|
|
47290
47293
|
ngImport: i0,
|
|
47291
|
-
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
|
|
47292
|
-
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"],
|
|
47293
47296
|
dependencies: [
|
|
47294
47297
|
{
|
|
47295
47298
|
kind: "component",
|
|
@@ -47491,8 +47494,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
47491
47494
|
"[attr.data-density]": "effectiveDensity()",
|
|
47492
47495
|
"[attr.data-open]": "panelOpen() ? \"\" : null"
|
|
47493
47496
|
},
|
|
47494
|
-
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
|
|
47495
|
-
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"]
|
|
47496
47499
|
}]
|
|
47497
47500
|
}],
|
|
47498
47501
|
propDecorators: {
|
|
@@ -50374,8 +50377,8 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50374
50377
|
case "strong": return this.translateWithDefault("solaris.password-field.strength.strong", "Strong");
|
|
50375
50378
|
}
|
|
50376
50379
|
}, ...ngDevMode ? [{ debugName: "strengthLabelText" }] : /* istanbul ignore next */ []);
|
|
50377
|
-
writeValue(
|
|
50378
|
-
this.internalValue.set(
|
|
50380
|
+
writeValue(value) {
|
|
50381
|
+
this.internalValue.set(value ?? "");
|
|
50379
50382
|
}
|
|
50380
50383
|
registerOnChange(fn) {
|
|
50381
50384
|
this.onChange = fn;
|
|
@@ -50735,8 +50738,8 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50735
50738
|
}],
|
|
50736
50739
|
usesInheritance: true,
|
|
50737
50740
|
ngImport: i0,
|
|
50738
|
-
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
|
|
50739
|
-
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"],
|
|
50740
50743
|
dependencies: [
|
|
50741
50744
|
{
|
|
50742
50745
|
kind: "ngmodule",
|
|
@@ -50857,8 +50860,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
50857
50860
|
"[attr.data-density]": "effectiveDensity()",
|
|
50858
50861
|
"[attr.data-full-width]": "fullWidth() || undefined"
|
|
50859
50862
|
},
|
|
50860
|
-
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
|
|
50861
|
-
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"]
|
|
50862
50865
|
}]
|
|
50863
50866
|
}],
|
|
50864
50867
|
ctorParameters: () => [],
|
|
@@ -51318,7 +51321,7 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51318
51321
|
if (key) return this.translateService.translate(key);
|
|
51319
51322
|
const text = this.clearLabel();
|
|
51320
51323
|
if (text) return text;
|
|
51321
|
-
return this.
|
|
51324
|
+
return this.translateWithDefault("solaris.email-field.clear", "Clear email");
|
|
51322
51325
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
51323
51326
|
internalValue = signal("", ...ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []);
|
|
51324
51327
|
internalDisabled = signal(false, ...ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []);
|
|
@@ -51401,8 +51404,8 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51401
51404
|
if (!(this.touched() || this.dirty())) return false;
|
|
51402
51405
|
return !!this.computedError();
|
|
51403
51406
|
}, ...ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []);
|
|
51404
|
-
writeValue(
|
|
51405
|
-
this.internalValue.set(
|
|
51407
|
+
writeValue(value) {
|
|
51408
|
+
this.internalValue.set(value ?? "");
|
|
51406
51409
|
}
|
|
51407
51410
|
registerOnChange(fn) {
|
|
51408
51411
|
this.onChange = fn;
|
|
@@ -51448,12 +51451,14 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51448
51451
|
this.onTouched();
|
|
51449
51452
|
}
|
|
51450
51453
|
translateWithDefault(key, defaultText, params) {
|
|
51451
|
-
const
|
|
51452
|
-
|
|
51454
|
+
const translated = this.translateService?.translate(key, params);
|
|
51455
|
+
if (translated === void 0 || translated === null) return defaultText;
|
|
51456
|
+
return translated !== key ? translated : defaultText;
|
|
51453
51457
|
}
|
|
51454
51458
|
translateKey(key) {
|
|
51455
51459
|
if (key) {
|
|
51456
|
-
const translated = this.translateService
|
|
51460
|
+
const translated = this.translateService?.translate(key);
|
|
51461
|
+
if (translated === void 0 || translated === null) return void 0;
|
|
51457
51462
|
return translated !== key ? translated : void 0;
|
|
51458
51463
|
}
|
|
51459
51464
|
}
|
|
@@ -51817,8 +51822,8 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51817
51822
|
}],
|
|
51818
51823
|
usesInheritance: true,
|
|
51819
51824
|
ngImport: i0,
|
|
51820
|
-
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
|
|
51821
|
-
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"],
|
|
51822
51827
|
dependencies: [
|
|
51823
51828
|
{
|
|
51824
51829
|
kind: "ngmodule",
|
|
@@ -51932,8 +51937,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
51932
51937
|
"[attr.data-size]": "size()",
|
|
51933
51938
|
"[attr.data-density]": "effectiveDensity()"
|
|
51934
51939
|
},
|
|
51935
|
-
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
|
|
51936
|
-
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"]
|
|
51937
51942
|
}]
|
|
51938
51943
|
}],
|
|
51939
51944
|
propDecorators: {
|
|
@@ -52766,7 +52771,7 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52766
52771
|
onTouched = () => {};
|
|
52767
52772
|
popoverSubscriptions = [];
|
|
52768
52773
|
allCountries = computed(() => {
|
|
52769
|
-
return this.countryListFactory(this.translateService
|
|
52774
|
+
return this.countryListFactory(this.translateService?.locale() ?? "en-US");
|
|
52770
52775
|
}, ...ngDevMode ? [{ debugName: "allCountries" }] : /* istanbul ignore next */ []);
|
|
52771
52776
|
countries = computed(() => {
|
|
52772
52777
|
const list = this.allCountries();
|
|
@@ -52803,7 +52808,7 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52803
52808
|
if (key) return this.translateService.translate(key);
|
|
52804
52809
|
const text = this.clearLabel();
|
|
52805
52810
|
if (text) return text;
|
|
52806
|
-
return this.
|
|
52811
|
+
return this.translateWithDefault("solaris.phone-field.clear", "Clear phone number");
|
|
52807
52812
|
}, ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
|
|
52808
52813
|
isEffectivelyDisabled = computed(() => {
|
|
52809
52814
|
return this.disabledInput() || this.internalDisabled();
|
|
@@ -53053,12 +53058,14 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
53053
53058
|
}
|
|
53054
53059
|
}
|
|
53055
53060
|
translateWithDefault(key, defaultText, params) {
|
|
53056
|
-
const
|
|
53057
|
-
|
|
53061
|
+
const translated = this.translateService?.translate(key, params);
|
|
53062
|
+
if (translated === void 0 || translated === null) return defaultText;
|
|
53063
|
+
return translated !== key ? translated : defaultText;
|
|
53058
53064
|
}
|
|
53059
53065
|
translateKey(key) {
|
|
53060
53066
|
if (key) {
|
|
53061
|
-
const translated = this.translateService
|
|
53067
|
+
const translated = this.translateService?.translate(key);
|
|
53068
|
+
if (translated === void 0 || translated === null) return void 0;
|
|
53062
53069
|
return translated !== key ? translated : void 0;
|
|
53063
53070
|
}
|
|
53064
53071
|
}
|
|
@@ -53452,8 +53459,8 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
53452
53459
|
}],
|
|
53453
53460
|
usesInheritance: true,
|
|
53454
53461
|
ngImport: i0,
|
|
53455
|
-
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
|
|
53456
|
-
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"],
|
|
53457
53464
|
dependencies: [
|
|
53458
53465
|
{
|
|
53459
53466
|
kind: "ngmodule",
|
|
@@ -53633,8 +53640,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
53633
53640
|
"[attr.data-open]": "panelOpen() ? \"\" : null",
|
|
53634
53641
|
"[attr.data-density]": "effectiveDensity()"
|
|
53635
53642
|
},
|
|
53636
|
-
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
|
|
53637
|
-
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"]
|
|
53638
53645
|
}]
|
|
53639
53646
|
}],
|
|
53640
53647
|
ctorParameters: () => [],
|