@educarehq/solaris-ui 2.0.4 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -31556,6 +31556,7 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
31556
31556
|
activeOptionIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []);
|
|
31557
31557
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
31558
31558
|
optionsInitialized = signal(false, ...ngDevMode ? [{ debugName: "optionsInitialized" }] : /* istanbul ignore next */ []);
|
|
31559
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
31559
31560
|
onChange = () => void 0;
|
|
31560
31561
|
onTouched = () => void 0;
|
|
31561
31562
|
optionInteractionSubscriptions = [];
|
|
@@ -31781,6 +31782,9 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
31781
31782
|
}
|
|
31782
31783
|
constructor() {
|
|
31783
31784
|
super();
|
|
31785
|
+
afterNextRender(() => {
|
|
31786
|
+
this.hydrated.set(true);
|
|
31787
|
+
});
|
|
31784
31788
|
effect(() => {
|
|
31785
31789
|
if (!this.optionsInitialized()) return;
|
|
31786
31790
|
this.internalValue();
|
|
@@ -32497,7 +32501,7 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
|
|
|
32497
32501
|
],
|
|
32498
32502
|
usesInheritance: true,
|
|
32499
32503
|
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 @if (displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-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-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",
|
|
32504
|
+
template: "<solaris-form-field\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width]=\"resolvedTriggerMinWidth()\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n @if (hydrated() && displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (hydrated() && canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-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-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
32505
|
styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"],
|
|
32502
32506
|
dependencies: [
|
|
32503
32507
|
{
|
|
@@ -32653,7 +32657,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32653
32657
|
"[attr.aria-label]": "ariaLabelText() ?? null",
|
|
32654
32658
|
"[attr.data-has-value]": "hasValue() ? \"\" : null"
|
|
32655
32659
|
},
|
|
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 @if (displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-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-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",
|
|
32660
|
+
template: "<solaris-form-field\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width]=\"resolvedTriggerMinWidth()\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n @if (hydrated() && displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (hydrated() && canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-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-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
32661
|
styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"]
|
|
32658
32662
|
}]
|
|
32659
32663
|
}],
|
|
@@ -33930,6 +33934,13 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
33930
33934
|
month: (/* @__PURE__ */ new Date()).getMonth()
|
|
33931
33935
|
}, ...ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []);
|
|
33932
33936
|
describedBy = signal([], ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
33937
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
33938
|
+
constructor() {
|
|
33939
|
+
super();
|
|
33940
|
+
afterNextRender(() => {
|
|
33941
|
+
this.hydrated.set(true);
|
|
33942
|
+
});
|
|
33943
|
+
}
|
|
33933
33944
|
onChange = () => void 0;
|
|
33934
33945
|
onTouched = () => void 0;
|
|
33935
33946
|
resolvedLocale = computed(() => this.locale() ?? this.translateService.locale(), ...ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []);
|
|
@@ -34259,7 +34270,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
34259
34270
|
version: "22.2.3",
|
|
34260
34271
|
ngImport: i0,
|
|
34261
34272
|
type: SolarisDateRangePickerComponent,
|
|
34262
|
-
deps:
|
|
34273
|
+
deps: [],
|
|
34263
34274
|
target: i0.ɵɵFactoryTarget.Component
|
|
34264
34275
|
});
|
|
34265
34276
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
@@ -34552,7 +34563,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
|
|
|
34552
34563
|
}],
|
|
34553
34564
|
usesInheritance: true,
|
|
34554
34565
|
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 @if (canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
34566
|
+
template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n <solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"rangePopover\"\n [solarisPopoverDisabled]=\"\n isEffectivelyDisabled() || isEffectivelyReadonly()\n \"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverFitContent]=\"true\"\n [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n >\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <button\n #triggerButton\n type=\"button\"\n class=\"solaris-date-range-picker__trigger\"\n [id]=\"id\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n >\n {{ rangeDisplay() || placeholderText() }}\n </button>\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-range-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-label]=\"calendarLabel()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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
34567
|
styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"],
|
|
34557
34568
|
dependencies: [
|
|
34558
34569
|
{
|
|
@@ -34790,10 +34801,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
34790
34801
|
"[attr.data-density]": "effectiveDensity()",
|
|
34791
34802
|
"[attr.data-open]": "panelOpen() ? \"\" : null"
|
|
34792
34803
|
},
|
|
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 @if (canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
34804
|
+
template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n <solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"rangePopover\"\n [solarisPopoverDisabled]=\"\n isEffectivelyDisabled() || isEffectivelyReadonly()\n \"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverFitContent]=\"true\"\n [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n >\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <button\n #triggerButton\n type=\"button\"\n class=\"solaris-date-range-picker__trigger\"\n [id]=\"id\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n >\n {{ rangeDisplay() || placeholderText() }}\n </button>\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-range-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n [attr.aria-label]=\"calendarLabel()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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
34805
|
styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"]
|
|
34795
34806
|
}]
|
|
34796
34807
|
}],
|
|
34808
|
+
ctorParameters: () => [],
|
|
34797
34809
|
propDecorators: {
|
|
34798
34810
|
triggerButton: [{
|
|
34799
34811
|
type: i0.ViewChild,
|
|
@@ -42529,6 +42541,7 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42529
42541
|
activeOptionIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []);
|
|
42530
42542
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
42531
42543
|
optionsInitialized = signal(false, ...ngDevMode ? [{ debugName: "optionsInitialized" }] : /* istanbul ignore next */ []);
|
|
42544
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
42532
42545
|
triggerContentRef = viewChild("triggerContent", ...ngDevMode ? [{ debugName: "triggerContentRef" }] : /* istanbul ignore next */ []);
|
|
42533
42546
|
onChange = () => void 0;
|
|
42534
42547
|
onTouched = () => void 0;
|
|
@@ -42573,6 +42586,9 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42573
42586
|
hasValue = computed(() => {
|
|
42574
42587
|
return this.internalValue().length > 0;
|
|
42575
42588
|
}, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
|
|
42589
|
+
showValue = computed(() => {
|
|
42590
|
+
return this.hydrated() && this.hasValue();
|
|
42591
|
+
}, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
|
|
42576
42592
|
canClear = computed(() => {
|
|
42577
42593
|
return this.clearable() && this.hasValue() && !this.isEffectivelyDisabled() && !this.isEffectivelyReadonly();
|
|
42578
42594
|
}, ...ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []);
|
|
@@ -42868,6 +42884,9 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
42868
42884
|
}
|
|
42869
42885
|
constructor() {
|
|
42870
42886
|
super();
|
|
42887
|
+
afterNextRender(() => {
|
|
42888
|
+
this.hydrated.set(true);
|
|
42889
|
+
});
|
|
42871
42890
|
effect(() => {
|
|
42872
42891
|
if (!this.optionsInitialized()) return;
|
|
42873
42892
|
this.internalValue();
|
|
@@ -43772,7 +43791,7 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
|
|
|
43772
43791
|
],
|
|
43773
43792
|
usesInheritance: true,
|
|
43774
43793
|
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",
|
|
43794
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width.px]=\"contentMinWidth() || null\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (showValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!showValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (showValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (hydrated() && canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
43776
43795
|
styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"],
|
|
43777
43796
|
dependencies: [
|
|
43778
43797
|
{
|
|
@@ -43965,7 +43984,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
43965
43984
|
"[attr.aria-label]": "ariaLabelText() ?? null",
|
|
43966
43985
|
"[attr.data-has-value]": "hasValue() ? \"\" : null"
|
|
43967
43986
|
},
|
|
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",
|
|
43987
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"!!prefix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n [style.min-width.px]=\"contentMinWidth() || null\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (showValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!showValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (showValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (hydrated() && canClear() && !loading()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n @if (!loading()) {\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n }\n </span>\n </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n",
|
|
43969
43988
|
styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"]
|
|
43970
43989
|
}]
|
|
43971
43990
|
}],
|
|
@@ -46817,11 +46836,18 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
46817
46836
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
46818
46837
|
parseError = signal(false, ...ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []);
|
|
46819
46838
|
panelOpen = signal(false, ...ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []);
|
|
46839
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
46820
46840
|
displayedMonth = signal(monthForSolarisDate(todaySolarisDate()) ?? {
|
|
46821
46841
|
year: (/* @__PURE__ */ new Date()).getFullYear(),
|
|
46822
46842
|
month: (/* @__PURE__ */ new Date()).getMonth()
|
|
46823
46843
|
}, ...ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []);
|
|
46824
46844
|
describedBy = signal([], ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
46845
|
+
constructor() {
|
|
46846
|
+
super();
|
|
46847
|
+
afterNextRender(() => {
|
|
46848
|
+
this.hydrated.set(true);
|
|
46849
|
+
});
|
|
46850
|
+
}
|
|
46825
46851
|
onChange = () => void 0;
|
|
46826
46852
|
onTouched = () => void 0;
|
|
46827
46853
|
resolvedLocale = computed(() => this.locale() ?? this.translateService.locale(), ...ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []);
|
|
@@ -47010,7 +47036,7 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
47010
47036
|
version: "22.2.3",
|
|
47011
47037
|
ngImport: i0,
|
|
47012
47038
|
type: SolarisDatePickerComponent,
|
|
47013
|
-
deps:
|
|
47039
|
+
deps: [],
|
|
47014
47040
|
target: i0.ɵɵFactoryTarget.Component
|
|
47015
47041
|
});
|
|
47016
47042
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
@@ -47288,7 +47314,7 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
|
|
|
47288
47314
|
}],
|
|
47289
47315
|
usesInheritance: true,
|
|
47290
47316
|
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 @if (canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
47317
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [radius]=\"radius()\"\n [hint]=\"hintText()\"\n [label]=\"labelText()\"\n [error]=\"errorText()\"\n solaris-popover-trigger\n [appearance]=\"appearance()\"\n [required]=\"requiredInput()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [solarisPopoverPadding]=\"'md'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverRadius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n [solarisPopoverTriggerFor]=\"calendarPopover\"\n [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <input\n [id]=\"id\"\n type=\"text\"\n #inputElement\n solaris-input\n autocomplete=\"off\"\n inputmode=\"numeric\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [value]=\"displayValue()\"\n (focus)=\"onInputFocus()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [attr.placeholder]=\"placeholderText()\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n />\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
47292
47318
|
styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"],
|
|
47293
47319
|
dependencies: [
|
|
47294
47320
|
{
|
|
@@ -47491,10 +47517,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
47491
47517
|
"[attr.data-density]": "effectiveDensity()",
|
|
47492
47518
|
"[attr.data-open]": "panelOpen() ? \"\" : null"
|
|
47493
47519
|
},
|
|
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 @if (canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
47520
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [radius]=\"radius()\"\n [hint]=\"hintText()\"\n [label]=\"labelText()\"\n [error]=\"errorText()\"\n solaris-popover-trigger\n [appearance]=\"appearance()\"\n [required]=\"requiredInput()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [solarisPopoverPadding]=\"'md'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverRadius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [loading]=\"loading()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAriaHasPopup]=\"'dialog'\"\n (solarisPopoverOpened)=\"onPanelOpened()\"\n (solarisPopoverClosed)=\"onPanelClosed()\"\n [solarisPopoverTriggerFor]=\"calendarPopover\"\n [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <input\n [id]=\"id\"\n type=\"text\"\n #inputElement\n solaris-input\n autocomplete=\"off\"\n inputmode=\"numeric\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [value]=\"displayValue()\"\n (focus)=\"onInputFocus()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [attr.placeholder]=\"placeholderText()\"\n [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n />\n\n <button\n type=\"button\"\n appearance=\"ghost\"\n solaris-icon-button\n solaris-form-suffix\n solaris-form-suffix-action\n class=\"solaris-date-picker__calendar-trigger\"\n [size]=\"size()\"\n [density]=\"effectiveDensity()\"\n [attr.aria-label]=\"calendarButtonLabelText()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n >\n <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n </button>\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
47495
47521
|
styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"]
|
|
47496
47522
|
}]
|
|
47497
47523
|
}],
|
|
47524
|
+
ctorParameters: () => [],
|
|
47498
47525
|
propDecorators: {
|
|
47499
47526
|
inputElement: [{
|
|
47500
47527
|
type: i0.ViewChild,
|
|
@@ -50218,6 +50245,7 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50218
50245
|
_visibleState = signal(false, ...ngDevMode ? [{ debugName: "_visibleState" }] : /* istanbul ignore next */ []);
|
|
50219
50246
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
50220
50247
|
dirty = signal(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
50248
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
50221
50249
|
onChange = () => {};
|
|
50222
50250
|
onTouched = () => {};
|
|
50223
50251
|
effectivePolicy = computed(() => {
|
|
@@ -50233,6 +50261,9 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50233
50261
|
}, ...ngDevMode ? [{ debugName: "effectivePolicy" }] : /* istanbul ignore next */ []);
|
|
50234
50262
|
constructor() {
|
|
50235
50263
|
super();
|
|
50264
|
+
afterNextRender(() => {
|
|
50265
|
+
this.hydrated.set(true);
|
|
50266
|
+
});
|
|
50236
50267
|
effect(() => {
|
|
50237
50268
|
this._visibleState.set(this.visible());
|
|
50238
50269
|
});
|
|
@@ -50374,8 +50405,8 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50374
50405
|
case "strong": return this.translateWithDefault("solaris.password-field.strength.strong", "Strong");
|
|
50375
50406
|
}
|
|
50376
50407
|
}, ...ngDevMode ? [{ debugName: "strengthLabelText" }] : /* istanbul ignore next */ []);
|
|
50377
|
-
writeValue(
|
|
50378
|
-
this.internalValue.set(
|
|
50408
|
+
writeValue(value) {
|
|
50409
|
+
this.internalValue.set(value ?? "");
|
|
50379
50410
|
}
|
|
50380
50411
|
registerOnChange(fn) {
|
|
50381
50412
|
this.onChange = fn;
|
|
@@ -50735,7 +50766,7 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
|
|
|
50735
50766
|
}],
|
|
50736
50767
|
usesInheritance: true,
|
|
50737
50768
|
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@if (showStrength() && internalValue().length > 0) {\n <div\n class=\"solaris-password-field__strength\"\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}\n",
|
|
50769
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n solaris-form-suffix-action\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n@if (showStrength() && hydrated() && internalValue().length > 0) {\n <div\n class=\"solaris-password-field__strength\"\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}\n",
|
|
50739
50770
|
styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"],
|
|
50740
50771
|
dependencies: [
|
|
50741
50772
|
{
|
|
@@ -50857,7 +50888,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
50857
50888
|
"[attr.data-density]": "effectiveDensity()",
|
|
50858
50889
|
"[attr.data-full-width]": "fullWidth() || undefined"
|
|
50859
50890
|
},
|
|
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@if (showStrength() && internalValue().length > 0) {\n <div\n class=\"solaris-password-field__strength\"\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}\n",
|
|
50891
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n solaris-form-suffix-action\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n@if (showStrength() && hydrated() && internalValue().length > 0) {\n <div\n class=\"solaris-password-field__strength\"\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}\n",
|
|
50861
50892
|
styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"]
|
|
50862
50893
|
}]
|
|
50863
50894
|
}],
|
|
@@ -51325,6 +51356,13 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51325
51356
|
internalFocused = signal(false, ...ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []);
|
|
51326
51357
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
51327
51358
|
dirty = signal(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
51359
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
51360
|
+
constructor() {
|
|
51361
|
+
super();
|
|
51362
|
+
afterNextRender(() => {
|
|
51363
|
+
this.hydrated.set(true);
|
|
51364
|
+
});
|
|
51365
|
+
}
|
|
51328
51366
|
effectiveDensity = computed(() => {
|
|
51329
51367
|
return this.density() ?? this.themeService.density;
|
|
51330
51368
|
}, ...ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []);
|
|
@@ -51401,8 +51439,8 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51401
51439
|
if (!(this.touched() || this.dirty())) return false;
|
|
51402
51440
|
return !!this.computedError();
|
|
51403
51441
|
}, ...ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []);
|
|
51404
|
-
writeValue(
|
|
51405
|
-
this.internalValue.set(
|
|
51442
|
+
writeValue(value) {
|
|
51443
|
+
this.internalValue.set(value ?? "");
|
|
51406
51444
|
}
|
|
51407
51445
|
registerOnChange(fn) {
|
|
51408
51446
|
this.onChange = fn;
|
|
@@ -51474,7 +51512,7 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51474
51512
|
version: "22.2.3",
|
|
51475
51513
|
ngImport: i0,
|
|
51476
51514
|
type: SolarisEmailFieldComponent,
|
|
51477
|
-
deps:
|
|
51515
|
+
deps: [],
|
|
51478
51516
|
target: i0.ɵɵFactoryTarget.Component
|
|
51479
51517
|
});
|
|
51480
51518
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
@@ -51817,7 +51855,7 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
|
|
|
51817
51855
|
}],
|
|
51818
51856
|
usesInheritance: true,
|
|
51819
51857
|
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 @if (canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n",
|
|
51858
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n",
|
|
51821
51859
|
styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"],
|
|
51822
51860
|
dependencies: [
|
|
51823
51861
|
{
|
|
@@ -51932,10 +51970,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
51932
51970
|
"[attr.data-size]": "size()",
|
|
51933
51971
|
"[attr.data-density]": "effectiveDensity()"
|
|
51934
51972
|
},
|
|
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 @if (canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n",
|
|
51973
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"readonlyInput()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonlyInput()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n</solaris-form-field>\n",
|
|
51936
51974
|
styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"]
|
|
51937
51975
|
}]
|
|
51938
51976
|
}],
|
|
51977
|
+
ctorParameters: () => [],
|
|
51939
51978
|
propDecorators: {
|
|
51940
51979
|
inputElementRef: [{
|
|
51941
51980
|
type: i0.ViewChild,
|
|
@@ -52658,7 +52697,7 @@ function getMaxNationalNumberLength(country) {
|
|
|
52658
52697
|
const metadata = new Metadata();
|
|
52659
52698
|
metadata.selectNumberingPlan(country);
|
|
52660
52699
|
const lengths = metadata.numberingPlan?.possibleLengths() ?? [];
|
|
52661
|
-
return lengths.length > 0 ? Math.max(...lengths) :
|
|
52700
|
+
return lengths.length > 0 ? Math.max(...lengths) : 15;
|
|
52662
52701
|
}
|
|
52663
52702
|
function formatAsYouType(value, country) {
|
|
52664
52703
|
return new AsYouType(country).input(value);
|
|
@@ -52760,6 +52799,7 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52760
52799
|
internalFocused = signal(false, ...ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []);
|
|
52761
52800
|
touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
52762
52801
|
dirty = signal(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
52802
|
+
hydrated = signal(false, ...ngDevMode ? [{ debugName: "hydrated" }] : /* istanbul ignore next */ []);
|
|
52763
52803
|
selectedCountry = signal(void 0, ...ngDevMode ? [{ debugName: "selectedCountry" }] : /* istanbul ignore next */ []);
|
|
52764
52804
|
panelOpen = signal(false, ...ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []);
|
|
52765
52805
|
onChange = () => {};
|
|
@@ -52863,6 +52903,13 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52863
52903
|
if (explicit !== void 0) return explicit;
|
|
52864
52904
|
return getMaxNationalNumberLength(this.effectiveCountry());
|
|
52865
52905
|
}, ...ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []);
|
|
52906
|
+
inputMaxLength = computed(() => {
|
|
52907
|
+
const max = this.effectiveMaxLength();
|
|
52908
|
+
if (!max || max <= 0) return null;
|
|
52909
|
+
const country = this.effectiveCountry();
|
|
52910
|
+
const formatted = formatAsYouType("9".repeat(max), country);
|
|
52911
|
+
return Math.max(formatted.length, max);
|
|
52912
|
+
}, ...ngDevMode ? [{ debugName: "inputMaxLength" }] : /* istanbul ignore next */ []);
|
|
52866
52913
|
placeholderText = computed(() => {
|
|
52867
52914
|
const key = this.placeholderKey();
|
|
52868
52915
|
if (key) return this.translateService.translate(key);
|
|
@@ -52913,6 +52960,9 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52913
52960
|
}, ...ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []);
|
|
52914
52961
|
constructor() {
|
|
52915
52962
|
super();
|
|
52963
|
+
afterNextRender(() => {
|
|
52964
|
+
this.hydrated.set(true);
|
|
52965
|
+
});
|
|
52916
52966
|
effect(() => {
|
|
52917
52967
|
const value = this.value();
|
|
52918
52968
|
if (value !== this.lastAppliedValue) {
|
|
@@ -53445,8 +53495,8 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
53445
53495
|
}],
|
|
53446
53496
|
usesInheritance: true,
|
|
53447
53497
|
ngImport: i0,
|
|
53448
|
-
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]=\"
|
|
53449
|
-
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-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-
|
|
53498
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"countryPopover\"\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"8\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n <button\n type=\"button\"\n class=\"solaris-phone-field__country\"\n solaris-form-prefix\n [attr.aria-label]=\"countryButtonLabelText()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [disabled]=\"!canOpen()\"\n (click)=\"onCountryToggle($event)\"\n >\n <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n <span\n class=\"solaris-phone-field__flag\"\n [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n ></span>\n <solaris-icon\n class=\"solaris-phone-field__chevron\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n\n <span class=\"solaris-phone-field__dial-code\"\n >+{{ selectedCallingCode() }}</span\n >\n\n <input\n type=\"tel\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"displayValue()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocapitalize]=\"'none'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
53499
|
+
styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"],
|
|
53450
53500
|
dependencies: [
|
|
53451
53501
|
{
|
|
53452
53502
|
kind: "ngmodule",
|
|
@@ -53626,8 +53676,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
53626
53676
|
"[attr.data-open]": "panelOpen() ? \"\" : null",
|
|
53627
53677
|
"[attr.data-density]": "effectiveDensity()"
|
|
53628
53678
|
},
|
|
53629
|
-
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]=\"
|
|
53630
|
-
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-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-
|
|
53679
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\n solaris-popover-trigger\n [solarisPopoverTriggerFor]=\"countryPopover\"\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"8\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\n />\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n <button\n type=\"button\"\n class=\"solaris-phone-field__country\"\n solaris-form-prefix\n [attr.aria-label]=\"countryButtonLabelText()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [disabled]=\"!canOpen()\"\n (click)=\"onCountryToggle($event)\"\n >\n <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n <span\n class=\"solaris-phone-field__flag\"\n [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n ></span>\n <solaris-icon\n class=\"solaris-phone-field__chevron\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n\n <span class=\"solaris-phone-field__dial-code\"\n >+{{ selectedCallingCode() }}</span\n >\n\n <input\n type=\"tel\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (input)=\"onInput($event)\"\n [value]=\"displayValue()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocapitalize]=\"'none'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n @if (hydrated() && canClear() && !loading()) {\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 (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\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",
|
|
53680
|
+
styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"]
|
|
53631
53681
|
}]
|
|
53632
53682
|
}],
|
|
53633
53683
|
ctorParameters: () => [],
|