invensys-ng 21.4.3 → 21.5.0
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.
package/fesm2022/invensys-ng.mjs
CHANGED
|
@@ -8,6 +8,8 @@ import * as i2 from '@angular/router';
|
|
|
8
8
|
import { RouterLink, RouterLinkActive, NavigationEnd, RouterOutlet } from '@angular/router';
|
|
9
9
|
import { take, takeUntil, switchMap, map } from 'rxjs/operators';
|
|
10
10
|
import { Subject, BehaviorSubject, of, forkJoin, filter } from 'rxjs';
|
|
11
|
+
import * as i2$1 from '@angular/cdk/overlay';
|
|
12
|
+
import { OverlayModule } from '@angular/cdk/overlay';
|
|
11
13
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
12
14
|
import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
|
|
13
15
|
import { Chart, registerables } from 'chart.js';
|
|
@@ -1873,7 +1875,7 @@ class ICheckbox {
|
|
|
1873
1875
|
useExisting: forwardRef(() => ICheckbox),
|
|
1874
1876
|
multi: true,
|
|
1875
1877
|
},
|
|
1876
|
-
], ngImport: i0, template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n
|
|
1878
|
+
], ngImport: i0, template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n aria-hidden=\"true\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-checkbox-wrapper{cursor:pointer;border-radius:4px}.i-checkbox-wrapper:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-checkbox-wrapper.i-checkbox--disabled{cursor:not-allowed}@media(pointer:coarse){.i-checkbox-wrapper:not(.i-checkbox--readonly){min-height:44px;min-width:44px;justify-content:center}.i-checkbox-wrapper .i-checkbox{flex-shrink:0}}\n"] });
|
|
1877
1879
|
}
|
|
1878
1880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICheckbox, decorators: [{
|
|
1879
1881
|
type: Component,
|
|
@@ -1883,7 +1885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1883
1885
|
useExisting: forwardRef(() => ICheckbox),
|
|
1884
1886
|
multi: true,
|
|
1885
1887
|
},
|
|
1886
|
-
], template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n
|
|
1888
|
+
], template: "<div\n class=\"i-checkbox-wrapper\"\n [class.i-checkbox--disabled]=\"disabled\"\n [class.i-checkbox--readonly]=\"readonly\"\n [class.i-checkbox--small]=\"size === 'small'\"\n [class.i-checkbox--medium]=\"size === 'medium'\"\n [class.i-checkbox--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n (keydown.enter)=\"$event.preventDefault(); toggle()\"\n>\n <div\n class=\"i-checkbox\"\n [class.i-checkbox--checked]=\"checked\"\n aria-hidden=\"true\"\n >\n @if (!checked && indeterminate) {\n <i class=\"pi pi-minus i-checkbox-icon\"></i>\n }\n @if (!indeterminate) {\n <i\n class=\"pi pi-check i-checkbox-icon\"\n [style.opacity]=\"checked ? '1' : '0'\"\n ></i>\n }\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-checkbox-label\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-checkbox-wrapper{cursor:pointer;border-radius:4px}.i-checkbox-wrapper:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-checkbox-wrapper.i-checkbox--disabled{cursor:not-allowed}@media(pointer:coarse){.i-checkbox-wrapper:not(.i-checkbox--readonly){min-height:44px;min-width:44px;justify-content:center}.i-checkbox-wrapper .i-checkbox{flex-shrink:0}}\n"] }]
|
|
1887
1889
|
}], propDecorators: { label: [{
|
|
1888
1890
|
type: Input
|
|
1889
1891
|
}], id: [{
|
|
@@ -1987,11 +1989,11 @@ class IChip {
|
|
|
1987
1989
|
}
|
|
1988
1990
|
}
|
|
1989
1991
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button type=\"button\"\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n [attr.aria-label]=\"'Remove ' + label\"\n (click)=\"onRemoveClick($event)\"\n ></button>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:
|
|
1992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button type=\"button\"\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n [attr.aria-label]=\"'Remove ' + label\"\n (click)=\"onRemoveClick($event)\"\n ></button>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:min(150px,100%);box-sizing:border-box;min-height:32px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:0;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:2;pointer-events:auto;width:24px;height:24px;border-radius:50%}.i-chip .i-chip-remove-icon:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.i-chip .i-chip-remove-icon:hover{opacity:1}@media(pointer:coarse){.i-chip{min-height:40px;padding:4px 8px}.i-chip .i-chip-remove-icon{width:32px;height:32px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1991
1993
|
}
|
|
1992
1994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChip, decorators: [{
|
|
1993
1995
|
type: Component,
|
|
1994
|
-
args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button type=\"button\"\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n [attr.aria-label]=\"'Remove ' + label\"\n (click)=\"onRemoveClick($event)\"\n ></button>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:
|
|
1996
|
+
args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n @if (icon) {\n <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n }\n @if (image) {\n <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n }\n @if (label) {\n <span class=\"i-chip-text\">{{ label }}</span>\n }\n <ng-content></ng-content>\n @if (removable && !disabled) {\n <button type=\"button\"\n [class]=\"removeIcon\"\n class=\"i-chip-remove-icon\"\n [attr.aria-label]=\"'Remove ' + label\"\n (click)=\"onRemoveClick($event)\"\n ></button>\n }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:min(150px,100%);box-sizing:border-box;min-height:32px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:0;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:2;pointer-events:auto;width:24px;height:24px;border-radius:50%}.i-chip .i-chip-remove-icon:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.i-chip .i-chip-remove-icon:hover{opacity:1}@media(pointer:coarse){.i-chip{min-height:40px;padding:4px 8px}.i-chip .i-chip-remove-icon{width:32px;height:32px}}\n"] }]
|
|
1995
1997
|
}], propDecorators: { label: [{
|
|
1996
1998
|
type: Input
|
|
1997
1999
|
}], icon: [{
|
|
@@ -2021,9 +2023,9 @@ class IChipsComponent {
|
|
|
2021
2023
|
/** Render chips inside a boxed input-like container */
|
|
2022
2024
|
boxed = false;
|
|
2023
2025
|
allowCloseAll = false;
|
|
2024
|
-
/**
|
|
2026
|
+
/** Accessible name for the chip collection (not a visible field label). */
|
|
2025
2027
|
label;
|
|
2026
|
-
/**
|
|
2028
|
+
/** @deprecated Chips are a collection, so no floating label is rendered. */
|
|
2027
2029
|
useFloatLabel = false;
|
|
2028
2030
|
/** Show error state styling */
|
|
2029
2031
|
showError = false;
|
|
@@ -2049,7 +2051,7 @@ class IChipsComponent {
|
|
|
2049
2051
|
this.teardownOverflowHandling();
|
|
2050
2052
|
}
|
|
2051
2053
|
}
|
|
2052
|
-
if (changes['chips']) {
|
|
2054
|
+
if (changes['chips'] || changes['allowCloseAll'] || changes['boxed'] || changes['removable'] || changes['disabled']) {
|
|
2053
2055
|
this.queueOverflowCheck();
|
|
2054
2056
|
}
|
|
2055
2057
|
}
|
|
@@ -2107,9 +2109,8 @@ class IChipsComponent {
|
|
|
2107
2109
|
return;
|
|
2108
2110
|
if (!this.chipsViewportRef?.nativeElement)
|
|
2109
2111
|
return;
|
|
2110
|
-
if (this.overflowRafId)
|
|
2111
|
-
|
|
2112
|
-
}
|
|
2112
|
+
if (this.overflowRafId)
|
|
2113
|
+
return;
|
|
2113
2114
|
this.ngZone.runOutsideAngular(() => {
|
|
2114
2115
|
this.overflowRafId = requestAnimationFrame(() => {
|
|
2115
2116
|
this.overflowRafId = undefined;
|
|
@@ -2139,15 +2140,17 @@ class IChipsComponent {
|
|
|
2139
2140
|
/** Handle click on the internal close-all button. */
|
|
2140
2141
|
onCloseAllClicked(event) {
|
|
2141
2142
|
event.stopPropagation();
|
|
2143
|
+
if (this.disabled)
|
|
2144
|
+
return;
|
|
2142
2145
|
// Emit a single event for parents to clear their data source
|
|
2143
2146
|
this.closedAll.emit();
|
|
2144
2147
|
}
|
|
2145
2148
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div
|
|
2149
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-chips-wrapper\" [class.i-chips-wrapper--error]=\"showError\" [attr.id]=\"componentId\">\n <div class=\"i-chips-container\" [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\" [class.i-chips--empty]=\"!chips.length\"\n role=\"group\" [attr.aria-label]=\"label || 'Selected items'\">\n <div class=\"i-chips-viewport\" #chipsViewport\n [class.i-chips-viewport--collapse]=\"collapseOnOverflow\"\n [class.i-chips-viewport--overflow]=\"collapseOnOverflow && chipsOverflow\">\n <div class=\"i-chips-list\" #chipsList>\n @for (chip of chips; track trackByValue($index, chip)) {\n <i-chip [label]=\"chip.label\" [icon]=\"chip.icon\"\n [removable]=\"chip.removable ?? removable\" [disabled]=\"disabled || !!chip.disabled\"\n (onRemove)=\"onChipRemove(chip, $event)\"></i-chip>\n }\n </div>\n @if (collapseOnOverflow && chipsOverflow) {\n <span class=\"i-chips-summary\">{{ overflowText }}</span>\n }\n </div>\n @if (allowCloseAll && chips.length > 0) {\n <button type=\"button\" class=\"i-chips-clear\" aria-label=\"Clear all selected items\"\n [disabled]=\"disabled\" (click)=\"onCloseAllClicked($event)\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%;min-width:0;max-width:100%}.i-chips-wrapper{width:100%;min-width:0}.i-chips-container{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.i-chips-viewport{position:relative;flex:1;min-width:0}.i-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.i-chips-list i-chip{min-width:0;max-width:100%}.i-chips-viewport--collapse{overflow:hidden}.i-chips-viewport--collapse .i-chips-list{flex-wrap:nowrap}.i-chips-viewport--collapse .i-chips-list i-chip{flex-shrink:0}.i-chips-viewport--overflow .i-chips-list{visibility:hidden}.i-chips-summary{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.i-chips-clear{position:relative;z-index:2;flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;color:var(--color-text-secondary);background:transparent;cursor:pointer;pointer-events:auto}.i-chips-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-chips-clear:disabled{opacity:.5;cursor:not-allowed}.i-chips-box{padding:6px 8px;border-radius:4px}@media(pointer:coarse){.i-chips-clear{flex-basis:44px;width:44px;height:44px}}\n"], dependencies: [{ kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2147
2150
|
}
|
|
2148
2151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChipsComponent, decorators: [{
|
|
2149
2152
|
type: Component,
|
|
2150
|
-
args: [{ selector: 'i-chips', standalone: true, imports: [IChip
|
|
2153
|
+
args: [{ selector: 'i-chips', standalone: true, imports: [IChip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chips-wrapper\" [class.i-chips-wrapper--error]=\"showError\" [attr.id]=\"componentId\">\n <div class=\"i-chips-container\" [class.i-chips-box]=\"boxed\"\n [class.i-chips--disabled]=\"disabled\" [class.i-chips--empty]=\"!chips.length\"\n role=\"group\" [attr.aria-label]=\"label || 'Selected items'\">\n <div class=\"i-chips-viewport\" #chipsViewport\n [class.i-chips-viewport--collapse]=\"collapseOnOverflow\"\n [class.i-chips-viewport--overflow]=\"collapseOnOverflow && chipsOverflow\">\n <div class=\"i-chips-list\" #chipsList>\n @for (chip of chips; track trackByValue($index, chip)) {\n <i-chip [label]=\"chip.label\" [icon]=\"chip.icon\"\n [removable]=\"chip.removable ?? removable\" [disabled]=\"disabled || !!chip.disabled\"\n (onRemove)=\"onChipRemove(chip, $event)\"></i-chip>\n }\n </div>\n @if (collapseOnOverflow && chipsOverflow) {\n <span class=\"i-chips-summary\">{{ overflowText }}</span>\n }\n </div>\n @if (allowCloseAll && chips.length > 0) {\n <button type=\"button\" class=\"i-chips-clear\" aria-label=\"Clear all selected items\"\n [disabled]=\"disabled\" (click)=\"onCloseAllClicked($event)\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%;min-width:0;max-width:100%}.i-chips-wrapper{width:100%;min-width:0}.i-chips-container{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.i-chips-viewport{position:relative;flex:1;min-width:0}.i-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.i-chips-list i-chip{min-width:0;max-width:100%}.i-chips-viewport--collapse{overflow:hidden}.i-chips-viewport--collapse .i-chips-list{flex-wrap:nowrap}.i-chips-viewport--collapse .i-chips-list i-chip{flex-shrink:0}.i-chips-viewport--overflow .i-chips-list{visibility:hidden}.i-chips-summary{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.i-chips-clear{position:relative;z-index:2;flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;color:var(--color-text-secondary);background:transparent;cursor:pointer;pointer-events:auto}.i-chips-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-chips-clear:disabled{opacity:.5;cursor:not-allowed}.i-chips-box{padding:6px 8px;border-radius:4px}@media(pointer:coarse){.i-chips-clear{flex-basis:44px;width:44px;height:44px}}\n"] }]
|
|
2151
2154
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chips: [{
|
|
2152
2155
|
type: Input
|
|
2153
2156
|
}], removable: [{
|
|
@@ -4540,6 +4543,8 @@ class IListbox {
|
|
|
4540
4543
|
return option[this.optionIcon] || null;
|
|
4541
4544
|
}
|
|
4542
4545
|
toggleOption(option) {
|
|
4546
|
+
if (this.disabled)
|
|
4547
|
+
return;
|
|
4543
4548
|
const optionValue = this.getOptionValue(option);
|
|
4544
4549
|
if (this.multiple) {
|
|
4545
4550
|
const currentValues = Array.isArray(this.value) ? [...this.value] : [];
|
|
@@ -4694,6 +4699,8 @@ class IListbox {
|
|
|
4694
4699
|
(this.multiple ? 'Select options' : 'Select an option'));
|
|
4695
4700
|
}
|
|
4696
4701
|
onChipRemove(event) {
|
|
4702
|
+
if (this.disabled)
|
|
4703
|
+
return;
|
|
4697
4704
|
this.removeSelectedItem(event.chip.value, event.originalEvent);
|
|
4698
4705
|
}
|
|
4699
4706
|
onDocumentClick(event) {
|
|
@@ -4763,17 +4770,17 @@ class IListbox {
|
|
|
4763
4770
|
useExisting: forwardRef(() => IListbox),
|
|
4764
4771
|
multi: true,
|
|
4765
4772
|
},
|
|
4766
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n [class.i-listbox--menu]=\"displayAsMenu\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n </div>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n [label]=\"'Search ' + title\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (getOptionIcon(option) && !displayAsMenu) {\n <i\n [class]=\"getOptionIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right chevron for menu mode -->\n @if (displayAsMenu) {\n <i\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </div>\n }\n @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}@media(max-width:768px){.i-listbox-wrapper .i-listbox-options{max-height:min(320px,50dvh)}}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
4773
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n [class.i-listbox--menu]=\"displayAsMenu\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n </div>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n [label]=\"'Search ' + title\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <button type=\"button\" [disabled]=\"disabled\"\n class=\"i-listbox-option\"\n [attr.aria-pressed]=\"isOptionSelected(option)\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <span aria-hidden=\"true\" class=\"pi i-listbox-checkbox\"\n [class.pi-check-square]=\"isOptionSelected(option)\"\n [class.pi-stop]=\"!isOptionSelected(option)\"></span>\n }\n\n <!-- Left icon -->\n @if (getOptionIcon(option) && !displayAsMenu) {\n <i\n [class]=\"getOptionIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right chevron for menu mode -->\n @if (displayAsMenu) {\n <i\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </button>\n }\n @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}@media(max-width:768px){.i-listbox-wrapper .i-listbox-options{max-height:min(320px,50dvh)}}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}.i-listbox-wrapper .i-listbox-options .i-listbox-option{width:100%;box-sizing:border-box;text-align:left;font-family:inherit;color:inherit;background:transparent;border:0}.i-listbox-wrapper .i-listbox-options .i-listbox-option:focus-visible{outline:2px solid currentColor;outline-offset:-2px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "ariaLabel", "ariaExpanded", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
4767
4774
|
}
|
|
4768
4775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IListbox, decorators: [{
|
|
4769
4776
|
type: Component,
|
|
4770
|
-
args: [{ selector: 'i-listbox', standalone: true, imports: [FormsModule, IChipsComponent,
|
|
4777
|
+
args: [{ selector: 'i-listbox', standalone: true, imports: [FormsModule, IChipsComponent, IInputText, IButton], providers: [
|
|
4771
4778
|
{
|
|
4772
4779
|
provide: NG_VALUE_ACCESSOR,
|
|
4773
4780
|
useExisting: forwardRef(() => IListbox),
|
|
4774
4781
|
multi: true,
|
|
4775
4782
|
},
|
|
4776
|
-
], template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n [class.i-listbox--menu]=\"displayAsMenu\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n </div>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n [label]=\"'Search ' + title\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <div\n class=\"i-listbox-option\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-listbox-checkbox\"\n ></i-checkbox>\n }\n\n <!-- Left icon -->\n @if (getOptionIcon(option) && !displayAsMenu) {\n <i\n [class]=\"getOptionIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right chevron for menu mode -->\n @if (displayAsMenu) {\n <i\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </div>\n }\n @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}@media(max-width:768px){.i-listbox-wrapper .i-listbox-options{max-height:min(320px,50dvh)}}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}\n"] }]
|
|
4783
|
+
], template: "<div\n class=\"i-listbox-wrapper\"\n [class.i-listbox--fluid]=\"fluid\"\n [class.i-listbox--disabled]=\"disabled\"\n [class.i-listbox--invalid]=\"showErrors\"\n [class.i-listbox--menu]=\"displayAsMenu\"\n #dropdown\n>\n <!-- Header -->\n <div class=\"i-listbox-header\">\n <div class=\"i-listbox-header-content\">\n <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n @if (actionIcon) {\n <i-button\n [text]=\"true\"\n [size]=\"'small'\"\n [severity]=\"'contrast'\"\n [icon]=\"actionIcon\"\n [disabled]=\"disabled\"\n (clicked)=\"onActionClick($event)\"\n [attr.title]=\"actionTooltip\"\n ></i-button>\n }\n </div>\n\n <!-- Chips area for multiselect mode -->\n @if (multiple && showChips) {\n <div class=\"i-listbox-chips-wrapper\">\n <i-chips\n class=\"i-listbox-chips\"\n [chips]=\"getSelectedChipItems()\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\"\n [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"\n ></i-chips>\n </div>\n }\n </div>\n\n <!-- Dropdown content -->\n <div class=\"i-listbox-dropdown\">\n @if (filter) {\n <div class=\"i-listbox-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n [label]=\"'Search ' + title\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-listbox-options\">\n @for (option of filteredOptions(); track getOptionValue(option)) {\n <button type=\"button\" [disabled]=\"disabled\"\n class=\"i-listbox-option\"\n [attr.aria-pressed]=\"isOptionSelected(option)\"\n [class.selected]=\"isOptionSelected(option)\"\n [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n (click)=\"toggleOption(option)\"\n >\n <!-- Checkbox only in multiple mode -->\n @if (multiple) {\n <span aria-hidden=\"true\" class=\"pi i-listbox-checkbox\"\n [class.pi-check-square]=\"isOptionSelected(option)\"\n [class.pi-stop]=\"!isOptionSelected(option)\"></span>\n }\n\n <!-- Left icon -->\n @if (getOptionIcon(option) && !displayAsMenu) {\n <i\n [class]=\"getOptionIcon(option)\"\n class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n ></i>\n }\n\n <span class=\"i-listbox-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n\n <!-- Right chevron for menu mode -->\n @if (displayAsMenu) {\n <i\n class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n ></i>\n }\n </button>\n }\n @if (filteredOptions().length === 0) {\n <div class=\"i-listbox-no-options\">No options found</div>\n }\n </div>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-listbox-error\">\n {{ getErrorMessage() }}\n </div>\n }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}@media(max-width:768px){.i-listbox-wrapper .i-listbox-options{max-height:min(320px,50dvh)}}@media(pointer:coarse){.i-listbox-wrapper .i-listbox-options .i-listbox-option{min-height:44px;box-sizing:border-box}}.i-listbox-wrapper .i-listbox-options .i-listbox-option{width:100%;box-sizing:border-box;text-align:left;font-family:inherit;color:inherit;background:transparent;border:0}.i-listbox-wrapper .i-listbox-options .i-listbox-option:focus-visible{outline:2px solid currentColor;outline-offset:-2px}\n"] }]
|
|
4777
4784
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
|
|
4778
4785
|
type: Input
|
|
4779
4786
|
}], label: [{
|
|
@@ -5085,7 +5092,7 @@ class IRadioButton {
|
|
|
5085
5092
|
useExisting: forwardRef(() => IRadioButton),
|
|
5086
5093
|
multi: true,
|
|
5087
5094
|
},
|
|
5088
|
-
], ngImport: i0, template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n
|
|
5095
|
+
], ngImport: i0, template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n aria-hidden=\"true\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-radio-button-wrapper{cursor:pointer;border-radius:4px}.i-radio-button-wrapper:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-radio-button-wrapper.i-radio-button--disabled{cursor:not-allowed}@media(pointer:coarse){.i-radio-button-wrapper{min-height:44px;min-width:44px;justify-content:center}.i-radio-button-wrapper .i-radio-button{flex-shrink:0}}\n"] });
|
|
5089
5096
|
}
|
|
5090
5097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRadioButton, decorators: [{
|
|
5091
5098
|
type: Component,
|
|
@@ -5095,7 +5102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5095
5102
|
useExisting: forwardRef(() => IRadioButton),
|
|
5096
5103
|
multi: true,
|
|
5097
5104
|
},
|
|
5098
|
-
], template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n
|
|
5105
|
+
], template: "<div\n class=\"i-radio-button-wrapper\"\n [class.i-radio-button--disabled]=\"disabled\"\n [class.i-radio-button--fluid]=\"fluid\"\n (click)=\"select()\"\n [attr.id]=\"effectiveInputId\"\n role=\"radio\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <div\n class=\"i-radio-button\"\n [class.i-radio-button--checked]=\"checked\"\n aria-hidden=\"true\"\n >\n <span class=\"i-radio-button-icon\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"effectiveInputId + '-label'\"\n class=\"i-radio-button-label\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-radio-button-wrapper{cursor:pointer;border-radius:4px}.i-radio-button-wrapper:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-radio-button-wrapper.i-radio-button--disabled{cursor:not-allowed}@media(pointer:coarse){.i-radio-button-wrapper{min-height:44px;min-width:44px;justify-content:center}.i-radio-button-wrapper .i-radio-button{flex-shrink:0}}\n"] }]
|
|
5099
5106
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { label: [{
|
|
5100
5107
|
type: Input
|
|
5101
5108
|
}], value: [{
|
|
@@ -5112,6 +5119,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5112
5119
|
type: Output
|
|
5113
5120
|
}] } });
|
|
5114
5121
|
|
|
5122
|
+
const OPTION_OVERLAY_POSITIONS = [
|
|
5123
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
|
|
5124
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
|
|
5125
|
+
];
|
|
5126
|
+
function handleOptionKeys(event, panel, close) {
|
|
5127
|
+
if (event.key === 'Escape') {
|
|
5128
|
+
event.preventDefault();
|
|
5129
|
+
event.stopPropagation();
|
|
5130
|
+
close(true);
|
|
5131
|
+
return;
|
|
5132
|
+
}
|
|
5133
|
+
if (event.key === 'Tab') {
|
|
5134
|
+
// Restore the trigger before the browser advances focus out of the picker.
|
|
5135
|
+
close(true);
|
|
5136
|
+
return;
|
|
5137
|
+
}
|
|
5138
|
+
if (!panel || !['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
|
|
5139
|
+
return;
|
|
5140
|
+
if (event.target instanceof HTMLInputElement && ['Home', 'End'].includes(event.key))
|
|
5141
|
+
return;
|
|
5142
|
+
const options = Array.from(panel.querySelectorAll('[role="option"]'));
|
|
5143
|
+
if (!options.length)
|
|
5144
|
+
return;
|
|
5145
|
+
event.preventDefault();
|
|
5146
|
+
const current = options.indexOf(event.target);
|
|
5147
|
+
let next = event.key === 'ArrowUp' ? current - 1 : current + 1;
|
|
5148
|
+
if (event.key === 'Home')
|
|
5149
|
+
next = 0;
|
|
5150
|
+
if (event.key === 'End' || (current < 0 && event.key === 'ArrowUp'))
|
|
5151
|
+
next = options.length - 1;
|
|
5152
|
+
options[(next + options.length) % options.length].focus();
|
|
5153
|
+
}
|
|
5154
|
+
|
|
5115
5155
|
/**
|
|
5116
5156
|
* Multi-Select Component
|
|
5117
5157
|
*
|
|
@@ -5233,6 +5273,7 @@ class IMultiSelect {
|
|
|
5233
5273
|
* @default true
|
|
5234
5274
|
*/
|
|
5235
5275
|
readonly = true;
|
|
5276
|
+
useFloatLabel = true;
|
|
5236
5277
|
/** Use the platform multiple-option picker on small touch screens. */
|
|
5237
5278
|
nativeOnMobile = true;
|
|
5238
5279
|
onNativeChange(event) {
|
|
@@ -5271,6 +5312,41 @@ class IMultiSelect {
|
|
|
5271
5312
|
* @internal
|
|
5272
5313
|
*/
|
|
5273
5314
|
isOpen = false;
|
|
5315
|
+
overlayPositions = OPTION_OVERLAY_POSITIONS;
|
|
5316
|
+
triggerRef;
|
|
5317
|
+
panelRef;
|
|
5318
|
+
openDropdown() {
|
|
5319
|
+
if (this.disabled)
|
|
5320
|
+
return;
|
|
5321
|
+
this.filterValue.set('');
|
|
5322
|
+
this.isOpen = true;
|
|
5323
|
+
}
|
|
5324
|
+
closeDropdown(restoreFocus = false) {
|
|
5325
|
+
this.isOpen = false;
|
|
5326
|
+
this.filterValue.set('');
|
|
5327
|
+
if (restoreFocus)
|
|
5328
|
+
this.focusControl();
|
|
5329
|
+
}
|
|
5330
|
+
focusControl() {
|
|
5331
|
+
const native = this.dropdownRef?.nativeElement.querySelector('.i-native-select');
|
|
5332
|
+
if (native?.getClientRects().length)
|
|
5333
|
+
native.focus();
|
|
5334
|
+
else
|
|
5335
|
+
this.triggerRef?.nativeElement.focus();
|
|
5336
|
+
}
|
|
5337
|
+
focusOptions() {
|
|
5338
|
+
setTimeout(() => {
|
|
5339
|
+
if (!this.isOpen)
|
|
5340
|
+
return;
|
|
5341
|
+
if (this.filter)
|
|
5342
|
+
this.searchInputRef?.nativeElement.focus();
|
|
5343
|
+
else
|
|
5344
|
+
this.panelRef?.nativeElement.querySelector('[role="option"]')?.focus();
|
|
5345
|
+
});
|
|
5346
|
+
}
|
|
5347
|
+
onPanelKeydown(event) {
|
|
5348
|
+
handleOptionKeys(event, this.panelRef?.nativeElement, restore => this.closeDropdown(restore));
|
|
5349
|
+
}
|
|
5274
5350
|
/**
|
|
5275
5351
|
* Current filter/search value
|
|
5276
5352
|
* @internal
|
|
@@ -5308,7 +5384,6 @@ class IMultiSelect {
|
|
|
5308
5384
|
return {
|
|
5309
5385
|
label,
|
|
5310
5386
|
value: val,
|
|
5311
|
-
removable: !this.disabled,
|
|
5312
5387
|
};
|
|
5313
5388
|
});
|
|
5314
5389
|
}, ...(ngDevMode ? [{ debugName: "selectedChips" }] : /* istanbul ignore next */ []));
|
|
@@ -5364,17 +5439,10 @@ class IMultiSelect {
|
|
|
5364
5439
|
toggleDropdown() {
|
|
5365
5440
|
if (this.disabled)
|
|
5366
5441
|
return;
|
|
5367
|
-
|
|
5368
|
-
|
|
5369
|
-
|
|
5370
|
-
|
|
5371
|
-
if (this.filter &&
|
|
5372
|
-
this.searchInputRef &&
|
|
5373
|
-
this.searchInputRef.nativeElement) {
|
|
5374
|
-
this.searchInputRef.nativeElement.focus();
|
|
5375
|
-
}
|
|
5376
|
-
});
|
|
5377
|
-
}
|
|
5442
|
+
if (this.isOpen)
|
|
5443
|
+
this.closeDropdown();
|
|
5444
|
+
else
|
|
5445
|
+
this.openDropdown();
|
|
5378
5446
|
}
|
|
5379
5447
|
/**
|
|
5380
5448
|
* Toggles selection state of an option
|
|
@@ -5413,9 +5481,11 @@ class IMultiSelect {
|
|
|
5413
5481
|
if (this.disabled)
|
|
5414
5482
|
return;
|
|
5415
5483
|
this.value = [];
|
|
5484
|
+
this.onChange.emit([]);
|
|
5416
5485
|
this.onClear.emit();
|
|
5417
5486
|
this.onChangeCallback([]);
|
|
5418
5487
|
this.onTouchedCallback();
|
|
5488
|
+
this.focusControl();
|
|
5419
5489
|
}
|
|
5420
5490
|
/**
|
|
5421
5491
|
* Removes a specific selected item from chips
|
|
@@ -5423,6 +5493,8 @@ class IMultiSelect {
|
|
|
5423
5493
|
*/
|
|
5424
5494
|
onChipRemove(event) {
|
|
5425
5495
|
event.originalEvent.stopPropagation();
|
|
5496
|
+
if (this.disabled)
|
|
5497
|
+
return;
|
|
5426
5498
|
const currentValues = [...this.value];
|
|
5427
5499
|
const index = currentValues.findIndex((val) => JSON.stringify(val) === JSON.stringify(event.chip.value));
|
|
5428
5500
|
if (index > -1) {
|
|
@@ -5503,7 +5575,8 @@ class IMultiSelect {
|
|
|
5503
5575
|
onDocumentClick(event) {
|
|
5504
5576
|
if (this.isOpen &&
|
|
5505
5577
|
this.dropdownRef &&
|
|
5506
|
-
!this.dropdownRef.nativeElement.contains(event.target)
|
|
5578
|
+
!this.dropdownRef.nativeElement.contains(event.target) &&
|
|
5579
|
+
!this.panelRef?.nativeElement.contains(event.target)) {
|
|
5507
5580
|
this.isOpen = false;
|
|
5508
5581
|
this.filterValue.set('');
|
|
5509
5582
|
}
|
|
@@ -5551,7 +5624,7 @@ class IMultiSelect {
|
|
|
5551
5624
|
*/
|
|
5552
5625
|
get showErrors() {
|
|
5553
5626
|
const c = this.control;
|
|
5554
|
-
return !!(c && c.invalid && c.dirty);
|
|
5627
|
+
return !!(c && c.invalid && (c.dirty || c.touched));
|
|
5555
5628
|
}
|
|
5556
5629
|
/**
|
|
5557
5630
|
* Gets the first validation error key
|
|
@@ -5591,23 +5664,23 @@ class IMultiSelect {
|
|
|
5591
5664
|
}
|
|
5592
5665
|
}
|
|
5593
5666
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMultiSelect, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMultiSelect, isStandalone: true, selector: "i-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, nativeOnMobile: { classPropertyName: "nativeOnMobile", publicName: "nativeOnMobile", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "
|
|
5667
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMultiSelect, isStandalone: true, selector: "i-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, useFloatLabel: { classPropertyName: "useFloatLabel", publicName: "useFloatLabel", isSignal: false, isRequired: false, transformFunction: null }, nativeOnMobile: { classPropertyName: "nativeOnMobile", publicName: "nativeOnMobile", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "window:resize": "closeDropdown()" } }, providers: [
|
|
5595
5668
|
{
|
|
5596
5669
|
provide: NG_VALUE_ACCESSOR,
|
|
5597
5670
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5598
5671
|
multi: true,
|
|
5599
5672
|
},
|
|
5600
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n #dropdown\n>\n <!-- Input container with click handler -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n multiple size=\"1\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value.length > 0) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-multi-select-input-container,.native-on-mobile .i-multi-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
5673
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["optionsPanel"], descendants: true }], ngImport: i0, template: "<div class=\"i-option-field\" [class.i-option-field--open]=\"isOpen\" [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\" [class.i-option-field--filled]=\"value.length > 0\"\n [class.i-option-field--disabled]=\"disabled\" [class.i-option-field--invalid]=\"showErrors\" #dropdown>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n @if (value.length > 0 && value.length <= maxSelectedLabels) {\n <i-chips [chips]=\"selectedChips()\" [removable]=\"!disabled\" [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\" [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"></i-chips>\n } @else {\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"!value.length\">{{ getDisplayLabel() || (useFloatLabel ? '' : placeholder) }}</span>\n }\n </div>\n <button #trigger type=\"button\" class=\"i-option-trigger\" [id]=\"id || componentId\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label + ': ' + (getDisplayLabel() || placeholder)\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\" [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\" (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\" (blur)=\"touch()\">\n </button>\n @if (nativeOnMobile) {\n <select class=\"i-native-select\" [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label\" [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n multiple size=\"1\"\n (pointerdown)=\"closeDropdown()\" (change)=\"onNativeChange($event)\" (blur)=\"touch()\">\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value.length > 0) {\n <button type=\"button\" class=\"i-option-clear\" [disabled]=\"disabled\" [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">{{ getErrorMessage() }}</div>\n }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\" [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.getBoundingClientRect().width\"\n [cdkConnectedOverlayViewportMargin]=\"12\" [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\" (attach)=\"focusOptions()\" (detach)=\"closeDropdown()\">\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input #searchInput type=\"search\" class=\"i-option-search\" placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\" [ngModel]=\"filterValue()\" (ngModelChange)=\"filterValue.set($event)\" />\n </div>\n }\n <div class=\"i-option-list\" role=\"listbox\" [id]=\"componentId + '-options'\" [attr.aria-label]=\"label\" aria-multiselectable=\"true\">\n @for (option of filteredOptions(); track $index) {\n <button type=\"button\" class=\"i-option\" role=\"option\" [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\" (click)=\"toggleOption(option)\">\n <span class=\"i-option-check\" aria-hidden=\"true\"><i [class]=\"isOptionSelected(option) ? 'pi pi-check-square' : 'pi pi-stop'\"></i></span>\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) { <div class=\"i-option-empty\">No options found</div> }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
|
|
5601
5674
|
}
|
|
5602
5675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMultiSelect, decorators: [{
|
|
5603
5676
|
type: Component,
|
|
5604
|
-
args: [{ selector: 'i-multi-select', standalone: true, imports: [FormsModule, IChipsComponent,
|
|
5677
|
+
args: [{ selector: 'i-multi-select', standalone: true, imports: [FormsModule, IChipsComponent, OverlayModule], providers: [
|
|
5605
5678
|
{
|
|
5606
5679
|
provide: NG_VALUE_ACCESSOR,
|
|
5607
5680
|
useExisting: forwardRef(() => IMultiSelect),
|
|
5608
5681
|
multi: true,
|
|
5609
5682
|
},
|
|
5610
|
-
], template: "<div\n class=\"i-multi-select-wrapper\"\n [class.i-multi-select--fluid]=\"fluid\"\n [class.native-on-mobile]=\"nativeOnMobile\"\n #dropdown\n>\n <!-- Input container with click handler -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n multiple size=\"1\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value.length > 0) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n\n <!-- Chips component with float label -->\n <i-chips\n [chips]=\"selectedChips()\"\n [boxed]=\"true\"\n [collapseOnOverflow]=\"true\"\n [removable]=\"!disabled\"\n [disabled]=\"disabled\"\n [allowCloseAll]=\"showClear && value && value.length > 0\"\n [useFloatLabel]=\"true\"\n [label]=\"label\"\n [showError]=\"showErrors\"\n (removeChip)=\"onChipRemove($event)\"\n (closedAll)=\"onChipsCloseAll()\"\n class=\"i-multi-select-chips\"\n ></i-chips>\n\n <!-- Icons overlay -->\n <div class=\"i-multi-select-icons-overlay\">\n <span class=\"i-multi-select-arrow-wrapper\">\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </span>\n </div>\n\n <!-- Error message -->\n @if (showErrors) {\n <div class=\"i-multi-select-error\">\n {{ getErrorMessage() }}\n </div>\n }\n </div>\n\n @if (isOpen) {\n <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n @if (filter) {\n <div class=\"i-multi-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-multi-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-multi-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n <i-checkbox\n [checked]=\"isOptionSelected(option)\"\n [readonly]=\"true\"\n size=\"small\"\n class=\"i-multi-select-checkbox\"\n ></i-checkbox>\n <span class=\"i-multi-select-option-label\">\n {{ getOptionLabel(option) }}\n </span>\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-multi-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-multi-select-input-container,.native-on-mobile .i-multi-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{display:flow-root;position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:calc(1.5em + 21px);transform:translateY(-50%);right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
5683
|
+
], template: "<div class=\"i-option-field\" [class.i-option-field--open]=\"isOpen\" [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\" [class.i-option-field--filled]=\"value.length > 0\"\n [class.i-option-field--disabled]=\"disabled\" [class.i-option-field--invalid]=\"showErrors\" #dropdown>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n @if (value.length > 0 && value.length <= maxSelectedLabels) {\n <i-chips [chips]=\"selectedChips()\" [removable]=\"!disabled\" [disabled]=\"disabled\"\n [collapseOnOverflow]=\"true\" [overflowLabel]=\"getDisplayLabel()\"\n (removeChip)=\"onChipRemove($event)\"></i-chips>\n } @else {\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"!value.length\">{{ getDisplayLabel() || (useFloatLabel ? '' : placeholder) }}</span>\n }\n </div>\n <button #trigger type=\"button\" class=\"i-option-trigger\" [id]=\"id || componentId\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label + ': ' + (getDisplayLabel() || placeholder)\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\" [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\" (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\" (blur)=\"touch()\">\n </button>\n @if (nativeOnMobile) {\n <select class=\"i-native-select\" [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label\" [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n multiple size=\"1\"\n (pointerdown)=\"closeDropdown()\" (change)=\"onNativeChange($event)\" (blur)=\"touch()\">\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value.length > 0) {\n <button type=\"button\" class=\"i-option-clear\" [disabled]=\"disabled\" [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">{{ getErrorMessage() }}</div>\n }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\" [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.getBoundingClientRect().width\"\n [cdkConnectedOverlayViewportMargin]=\"12\" [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\" (attach)=\"focusOptions()\" (detach)=\"closeDropdown()\">\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input #searchInput type=\"search\" class=\"i-option-search\" placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\" [ngModel]=\"filterValue()\" (ngModelChange)=\"filterValue.set($event)\" />\n </div>\n }\n <div class=\"i-option-list\" role=\"listbox\" [id]=\"componentId + '-options'\" [attr.aria-label]=\"label\" aria-multiselectable=\"true\">\n @for (option of filteredOptions(); track $index) {\n <button type=\"button\" class=\"i-option\" role=\"option\" [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\" (click)=\"toggleOption(option)\">\n <span class=\"i-option-check\" aria-hidden=\"true\"><i [class]=\"isOptionSelected(option) ? 'pi pi-check-square' : 'pi pi-stop'\"></i></span>\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) { <div class=\"i-option-empty\">No options found</div> }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"] }]
|
|
5611
5684
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
5612
5685
|
type: Input
|
|
5613
5686
|
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
@@ -5635,6 +5708,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5635
5708
|
type: Input
|
|
5636
5709
|
}], readonly: [{
|
|
5637
5710
|
type: Input
|
|
5711
|
+
}], useFloatLabel: [{
|
|
5712
|
+
type: Input
|
|
5638
5713
|
}], nativeOnMobile: [{
|
|
5639
5714
|
type: Input
|
|
5640
5715
|
}], onChange: [{
|
|
@@ -5647,9 +5722,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5647
5722
|
}], searchInputRef: [{
|
|
5648
5723
|
type: ViewChild,
|
|
5649
5724
|
args: ['searchInput', { static: false }]
|
|
5650
|
-
}],
|
|
5725
|
+
}], triggerRef: [{
|
|
5726
|
+
type: ViewChild,
|
|
5727
|
+
args: ['trigger']
|
|
5728
|
+
}], panelRef: [{
|
|
5729
|
+
type: ViewChild,
|
|
5730
|
+
args: ['optionsPanel']
|
|
5731
|
+
}], closeDropdown: [{
|
|
5651
5732
|
type: HostListener,
|
|
5652
|
-
args: ['
|
|
5733
|
+
args: ['window:resize']
|
|
5653
5734
|
}] } });
|
|
5654
5735
|
|
|
5655
5736
|
function ZIndexUtils() {
|
|
@@ -6257,6 +6338,41 @@ class ISelect {
|
|
|
6257
6338
|
* @internal
|
|
6258
6339
|
*/
|
|
6259
6340
|
isOpen = false;
|
|
6341
|
+
overlayPositions = OPTION_OVERLAY_POSITIONS;
|
|
6342
|
+
triggerRef;
|
|
6343
|
+
panelRef;
|
|
6344
|
+
openDropdown() {
|
|
6345
|
+
if (this.disabled)
|
|
6346
|
+
return;
|
|
6347
|
+
this.filterValue.set('');
|
|
6348
|
+
this.isOpen = true;
|
|
6349
|
+
}
|
|
6350
|
+
closeDropdown(restoreFocus = false) {
|
|
6351
|
+
this.isOpen = false;
|
|
6352
|
+
this.filterValue.set('');
|
|
6353
|
+
if (restoreFocus)
|
|
6354
|
+
this.focusControl();
|
|
6355
|
+
}
|
|
6356
|
+
focusControl() {
|
|
6357
|
+
const native = this.dropdownRef?.nativeElement.querySelector('.i-native-select');
|
|
6358
|
+
if (native?.getClientRects().length)
|
|
6359
|
+
native.focus();
|
|
6360
|
+
else
|
|
6361
|
+
this.triggerRef?.nativeElement.focus();
|
|
6362
|
+
}
|
|
6363
|
+
focusOptions() {
|
|
6364
|
+
setTimeout(() => {
|
|
6365
|
+
if (!this.isOpen)
|
|
6366
|
+
return;
|
|
6367
|
+
if (this.filter)
|
|
6368
|
+
this.searchInputRef?.nativeElement.focus();
|
|
6369
|
+
else
|
|
6370
|
+
this.panelRef?.nativeElement.querySelector('[role="option"]')?.focus();
|
|
6371
|
+
});
|
|
6372
|
+
}
|
|
6373
|
+
onPanelKeydown(event) {
|
|
6374
|
+
handleOptionKeys(event, this.panelRef?.nativeElement, restore => this.closeDropdown(restore));
|
|
6375
|
+
}
|
|
6260
6376
|
/**
|
|
6261
6377
|
* Current filter/search value
|
|
6262
6378
|
* @internal
|
|
@@ -6348,17 +6464,10 @@ class ISelect {
|
|
|
6348
6464
|
toggleDropdown() {
|
|
6349
6465
|
if (this.disabled)
|
|
6350
6466
|
return;
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
|
|
6355
|
-
if (this.filter &&
|
|
6356
|
-
this.searchInputRef &&
|
|
6357
|
-
this.searchInputRef.nativeElement) {
|
|
6358
|
-
this.searchInputRef.nativeElement.focus();
|
|
6359
|
-
}
|
|
6360
|
-
});
|
|
6361
|
-
}
|
|
6467
|
+
if (this.isOpen)
|
|
6468
|
+
this.closeDropdown();
|
|
6469
|
+
else
|
|
6470
|
+
this.openDropdown();
|
|
6362
6471
|
}
|
|
6363
6472
|
/**
|
|
6364
6473
|
* Selects an option from the dropdown
|
|
@@ -6372,8 +6481,7 @@ class ISelect {
|
|
|
6372
6481
|
this.onChange.emit(newValue);
|
|
6373
6482
|
this.onChangeCallback(newValue);
|
|
6374
6483
|
this.onTouchedCallback();
|
|
6375
|
-
this.
|
|
6376
|
-
this.filterValue.set('');
|
|
6484
|
+
this.closeDropdown(true);
|
|
6377
6485
|
}
|
|
6378
6486
|
/**
|
|
6379
6487
|
* Clears the current selection
|
|
@@ -6383,9 +6491,11 @@ class ISelect {
|
|
|
6383
6491
|
if (this.disabled)
|
|
6384
6492
|
return;
|
|
6385
6493
|
this.value = null;
|
|
6494
|
+
this.onChange.emit(null);
|
|
6386
6495
|
this.onClear.emit();
|
|
6387
6496
|
this.onChangeCallback(null);
|
|
6388
6497
|
this.onTouchedCallback();
|
|
6498
|
+
this.focusControl();
|
|
6389
6499
|
}
|
|
6390
6500
|
/**
|
|
6391
6501
|
* Gets the display label for an option
|
|
@@ -6445,7 +6555,8 @@ class ISelect {
|
|
|
6445
6555
|
onDocumentClick(event) {
|
|
6446
6556
|
if (this.isOpen &&
|
|
6447
6557
|
this.dropdownRef &&
|
|
6448
|
-
!this.dropdownRef.nativeElement.contains(event.target)
|
|
6558
|
+
!this.dropdownRef.nativeElement.contains(event.target) &&
|
|
6559
|
+
!this.panelRef?.nativeElement.contains(event.target)) {
|
|
6449
6560
|
this.isOpen = false;
|
|
6450
6561
|
this.filterValue.set('');
|
|
6451
6562
|
}
|
|
@@ -6496,7 +6607,7 @@ class ISelect {
|
|
|
6496
6607
|
*/
|
|
6497
6608
|
get showErrors() {
|
|
6498
6609
|
const c = this.control;
|
|
6499
|
-
return !!(c && c.invalid && c.dirty);
|
|
6610
|
+
return !!(c && c.invalid && (c.dirty || c.touched));
|
|
6500
6611
|
}
|
|
6501
6612
|
/**
|
|
6502
6613
|
* Gets the first validation error key
|
|
@@ -6530,23 +6641,23 @@ class ISelect {
|
|
|
6530
6641
|
}
|
|
6531
6642
|
}
|
|
6532
6643
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ISelect, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
6533
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ISelect, isStandalone: true, selector: "i-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, useFloatLabel: { classPropertyName: "useFloatLabel", publicName: "useFloatLabel", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, nativeOnMobile: { classPropertyName: "nativeOnMobile", publicName: "nativeOnMobile", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "
|
|
6644
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ISelect, isStandalone: true, selector: "i-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, useFloatLabel: { classPropertyName: "useFloatLabel", publicName: "useFloatLabel", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, nativeOnMobile: { classPropertyName: "nativeOnMobile", publicName: "nativeOnMobile", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear" }, host: { listeners: { "window:resize": "closeDropdown()" } }, providers: [
|
|
6534
6645
|
{
|
|
6535
6646
|
provide: NG_VALUE_ACCESSOR,
|
|
6536
6647
|
useExisting: forwardRef(() => ISelect),
|
|
6537
6648
|
multi: true,
|
|
6538
6649
|
},
|
|
6539
|
-
], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" [class.native-on-mobile]=\"nativeOnMobile\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">{{ placeholder }}</option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value != null) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <button type=\"button\" [disabled]=\"disabled\" aria-label=\"Clear selection\"\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></button>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-select-input-container,.native-on-mobile .i-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{border:0;padding:4px;background:transparent;color:inherit;font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
|
|
6650
|
+
], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["optionsPanel"], descendants: true }], ngImport: i0, template: "<div class=\"i-option-field\" [class.i-option-field--open]=\"isOpen\" [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\" [class.i-option-field--filled]=\"value != null\"\n [class.i-option-field--disabled]=\"disabled\" [class.i-option-field--invalid]=\"showErrors\" #dropdown>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"value == null\">{{ getSelectedLabel() || (useFloatLabel ? '' : placeholder) }}</span>\n </div>\n <button #trigger type=\"button\" class=\"i-option-trigger\" [id]=\"id || componentId\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label + ': ' + (getSelectedLabel() || placeholder)\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\" [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\" (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\" (blur)=\"touch()\">\n </button>\n @if (nativeOnMobile) {\n <select class=\"i-native-select\" [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label\" [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (pointerdown)=\"closeDropdown()\" (change)=\"onNativeChange($event)\" (blur)=\"touch()\">\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">{{ placeholder }}</option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value != null) {\n <button type=\"button\" class=\"i-option-clear\" [disabled]=\"disabled\" [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">{{ getErrorMessage() }}</div>\n }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\" [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.getBoundingClientRect().width\"\n [cdkConnectedOverlayViewportMargin]=\"12\" [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\" (attach)=\"focusOptions()\" (detach)=\"closeDropdown()\">\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input #searchInput type=\"search\" class=\"i-option-search\" placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\" [ngModel]=\"filterValue()\" (ngModelChange)=\"filterValue.set($event)\" />\n </div>\n }\n <div class=\"i-option-list\" role=\"listbox\" [id]=\"componentId + '-options'\" [attr.aria-label]=\"label\">\n @for (option of filteredOptions(); track $index) {\n <button type=\"button\" class=\"i-option\" role=\"option\" [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\" (click)=\"selectOption(option)\">\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) { <div class=\"i-option-empty\">No options found</div> }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
|
|
6540
6651
|
}
|
|
6541
6652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ISelect, decorators: [{
|
|
6542
6653
|
type: Component,
|
|
6543
|
-
args: [{ selector: 'i-select', standalone: true, imports: [FormsModule,
|
|
6654
|
+
args: [{ selector: 'i-select', standalone: true, imports: [FormsModule, OverlayModule], providers: [
|
|
6544
6655
|
{
|
|
6545
6656
|
provide: NG_VALUE_ACCESSOR,
|
|
6546
6657
|
useExisting: forwardRef(() => ISelect),
|
|
6547
6658
|
multi: true,
|
|
6548
6659
|
},
|
|
6549
|
-
], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" [class.native-on-mobile]=\"nativeOnMobile\" #dropdown>\n <!-- Reuse the input-text component for consistent styling and form integration -->\n @if (nativeOnMobile) {\n <div class=\"i-native-field\">\n <label [for]=\"(id || componentId) + '-native'\">{{ label }}</label>\n <div class=\"i-native-row\">\n <select\n class=\"i-native-select\"\n [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-native-error' : null\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"touch()\"\n >\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">{{ placeholder }}</option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n @if (showClear && value != null) {\n <button class=\"i-native-clear\" type=\"button\" [disabled]=\"disabled\"\n aria-label=\"Clear selection\" (click)=\"clearSelection()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n @if (showErrors) {\n <span class=\"i-native-error\" [id]=\"componentId + '-native-error'\" role=\"alert\">{{ getErrorMessage() }}</span>\n }\n </div>\n }\n <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n\n <i-input-text\n #inputText\n [label]=\"label\"\n [useFloatLabel]=\"useFloatLabel\"\n [id]=\"id\"\n [fluid]=\"fluid\"\n [errorMessages]=\"errorMessages\"\n [(ngModel)]=\"inputValue\"\n [type]=\"'text'\"\n [externalInvalid]=\"showErrors\"\n [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n >\n <!-- Icons overlay on the input -->\n <div class=\"i-select-icons\">\n @if (showClear && value !== null && value !== undefined) {\n <button type=\"button\" [disabled]=\"disabled\" aria-label=\"Clear selection\"\n class=\"pi pi-times i-select-clear\"\n (click)=\"clearSelection(); $event.stopPropagation()\"\n ></button>\n }\n <i\n class=\"pi pi-chevron-down i-multi-select-arrow\"\n [class.flipped]=\"isOpen\"\n ></i>\n </div>\n </i-input-text>\n </div>\n\n <!-- Dropdown overlay -->\n @if (isOpen) {\n <div class=\"i-select-dropdown\">\n @if (filter) {\n <div class=\"i-select-filter\">\n <i-input-text\n #searchInput\n [useFloatLabel]=\"false\"\n placeholder=\"Search...\"\n [ngModel]=\"filterValue()\"\n (ngModelChange)=\"filterValue.set($event)\"\n [fluid]=\"true\"\n [icon]=\"'pi pi-search'\"\n >\n </i-input-text>\n </div>\n }\n\n <div class=\"i-select-options\">\n @for (option of filteredOptions(); track option) {\n <div\n class=\"i-select-option\"\n [class.selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n >\n {{ getOptionLabel(option) }}\n </div>\n }\n\n @if (filteredOptions().length === 0) {\n <div class=\"i-select-no-options\">No options found</div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".i-native-field{display:none}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-select-input-container,.native-on-mobile .i-select-dropdown{display:none}.native-on-mobile .i-native-field{display:flex;flex-direction:column;gap:6px}.i-native-field label{font-size:.875rem;color:var(--color-text-primary)}.i-native-row{display:flex;align-items:center;gap:4px;min-width:0}.i-native-select{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--surface-border);border-radius:6px;color:var(--color-text-primary);background:var(--color-component-background)}.i-native-select[aria-invalid=true]{border-color:var(--color-danger)}.i-native-select:disabled{opacity:.6}.i-native-clear{flex:0 0 44px;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-primary)}.i-native-error{color:var(--color-danger);font-size:.875rem}.i-native-select:focus-visible,.i-native-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}}.i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{border:0;padding:4px;background:transparent;color:inherit;font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
|
|
6660
|
+
], template: "<div class=\"i-option-field\" [class.i-option-field--open]=\"isOpen\" [class.native-on-mobile]=\"nativeOnMobile\"\n [class.i-option-field--float]=\"useFloatLabel\" [class.i-option-field--filled]=\"value != null\"\n [class.i-option-field--disabled]=\"disabled\" [class.i-option-field--invalid]=\"showErrors\" #dropdown>\n <div class=\"i-option-control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <div class=\"i-option-value\">\n <span class=\"i-option-text\" [class.i-option-placeholder]=\"value == null\">{{ getSelectedLabel() || (useFloatLabel ? '' : placeholder) }}</span>\n </div>\n <button #trigger type=\"button\" class=\"i-option-trigger\" [id]=\"id || componentId\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label + ': ' + (getSelectedLabel() || placeholder)\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? componentId + '-options' : null\"\n [attr.aria-invalid]=\"showErrors\" [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (click)=\"toggleDropdown()\" (keydown.arrowdown)=\"$event.preventDefault(); openDropdown()\" (blur)=\"touch()\">\n </button>\n @if (nativeOnMobile) {\n <select class=\"i-native-select\" [id]=\"(id || componentId) + '-native'\"\n [disabled]=\"disabled\" [attr.aria-label]=\"label\" [attr.aria-invalid]=\"showErrors\"\n [attr.aria-describedby]=\"showErrors ? componentId + '-error' : null\"\n (pointerdown)=\"closeDropdown()\" (change)=\"onNativeChange($event)\" (blur)=\"touch()\">\n <option value=\"-1\" disabled [selected]=\"nativeSelectedIndex === '-1'\">{{ placeholder }}</option>\n @for (option of options() || []; track $index) {\n <option [value]=\"$index\" [selected]=\"isOptionSelected(option)\">{{ getOptionLabel(option) }}</option>\n }\n </select>\n }\n <div class=\"i-option-actions\">\n @if (showClear && value != null) {\n <button type=\"button\" class=\"i-option-clear\" [disabled]=\"disabled\" [attr.aria-label]=\"'Clear ' + label\"\n (click)=\"clearSelection(); $event.stopPropagation()\">\n <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n </button>\n }\n <span class=\"i-option-arrow\" aria-hidden=\"true\"><i class=\"pi pi-chevron-down\" [class.flipped]=\"isOpen\"></i></span>\n </div>\n </div>\n @if (label && useFloatLabel) {\n <label class=\"i-option-label\" [for]=\"id || componentId\">{{ label }}</label>\n }\n @if (showErrors) {\n <div class=\"i-option-error\" [id]=\"componentId + '-error'\" role=\"alert\">{{ getErrorMessage() }}</div>\n }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen && !disabled\" [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.getBoundingClientRect().width\"\n [cdkConnectedOverlayViewportMargin]=\"12\" [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"onDocumentClick($event)\" (attach)=\"focusOptions()\" (detach)=\"closeDropdown()\">\n <div class=\"i-option-panel\" #optionsPanel (keydown)=\"onPanelKeydown($event)\">\n @if (filter) {\n <div class=\"i-option-filter\">\n <input #searchInput type=\"search\" class=\"i-option-search\" placeholder=\"Search...\"\n [attr.aria-label]=\"'Search ' + label\" [ngModel]=\"filterValue()\" (ngModelChange)=\"filterValue.set($event)\" />\n </div>\n }\n <div class=\"i-option-list\" role=\"listbox\" [id]=\"componentId + '-options'\" [attr.aria-label]=\"label\">\n @for (option of filteredOptions(); track $index) {\n <button type=\"button\" class=\"i-option\" role=\"option\" [class.selected]=\"isOptionSelected(option)\"\n [attr.aria-selected]=\"isOptionSelected(option)\" (click)=\"selectOption(option)\">\n <span>{{ getOptionLabel(option) }}</span>\n </button>\n }\n @if (!filteredOptions().length) { <div class=\"i-option-empty\">No options found</div> }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%}.i-option-field{position:relative;width:100%}.i-option-field--float{margin-top:1.5em}.i-option-control{position:relative;display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--surface-border);border-radius:4px;color:var(--color-text-primary);background:var(--color-component-background)}.i-option-control:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-option-value{flex:1;min-width:0;padding:4px 0 4px 12px;pointer-events:none}.i-option-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-option-placeholder{color:var(--color-text-secondary)}.i-option-trigger,.i-native-select{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1}.i-option-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-native-select{display:none;opacity:0;font-size:16px}.i-option-actions{display:flex;align-items:center;flex-shrink:0;pointer-events:none}.i-option-clear{position:relative;z-index:2;pointer-events:auto;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;flex-shrink:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--color-text-secondary);cursor:pointer}.i-option-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-arrow{width:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.i-option-arrow i{transition:transform .15s ease}.i-option-arrow .flipped{transform:rotate(180deg)}.i-option-label{padding:0;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;background:transparent;transition:top .15s ease,left .15s ease,transform .15s ease,font-size .15s ease;position:absolute;top:21px;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}.i-option-field--open .i-option-label,.i-option-field--filled .i-option-label,.i-option-field:focus-within .i-option-label{top:-4px;left:12px;transform:translateY(-100%);font-size:.85em}.i-option-field--invalid .i-option-control{border-color:var(--color-danger)}.i-option-field--invalid .i-option-label{color:var(--color-danger)}.i-option-field--disabled .i-option-control{background:var(--color-disabled-background);color:var(--color-text-disabled)}.i-option-field--disabled .i-option-trigger,.i-option-field--disabled .i-native-select{cursor:not-allowed}.i-option-error{margin-top:4px;font-size:12px;color:var(--color-danger)}.i-option-panel{width:100%;min-width:0;box-sizing:border-box;max-height:min(360px,100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--surface-border);border-radius:4px;background:var(--color-component-background);color:var(--color-text-primary);box-shadow:0 4px 12px #00000026}.i-option-filter{padding:8px;flex-shrink:0}.i-option-search{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px;font:inherit;border:1px solid var(--surface-border);border-radius:4px;color:inherit;background:var(--color-component-background)}.i-option-search:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-list{overflow:auto;min-height:0;overscroll-behavior:contain}.i-option{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:0;font:inherit;text-align:left;overflow-wrap:anywhere;background:transparent;color:inherit;cursor:pointer}.i-option:hover,.i-option.selected{background:var(--surface-hover)}.i-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.i-option-check{flex-shrink:0;color:var(--color-primary)}.i-option-empty{padding:12px;color:var(--color-text-secondary)}@media(pointer:coarse){.i-option-control,.i-option{min-height:44px}.i-option-clear{width:44px;height:44px}.i-option-search{min-height:44px;font-size:16px}}@media(max-width:991px)and (pointer:coarse){.native-on-mobile .i-option-trigger{display:none}.native-on-mobile .i-native-select{display:block}}\n"] }]
|
|
6550
6661
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
|
|
6551
6662
|
type: Input
|
|
6552
6663
|
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
|
|
@@ -6587,9 +6698,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
6587
6698
|
}], searchInputRef: [{
|
|
6588
6699
|
type: ViewChild,
|
|
6589
6700
|
args: ['searchInput', { static: false }]
|
|
6590
|
-
}],
|
|
6701
|
+
}], triggerRef: [{
|
|
6702
|
+
type: ViewChild,
|
|
6703
|
+
args: ['trigger']
|
|
6704
|
+
}], panelRef: [{
|
|
6705
|
+
type: ViewChild,
|
|
6706
|
+
args: ['optionsPanel']
|
|
6707
|
+
}], closeDropdown: [{
|
|
6591
6708
|
type: HostListener,
|
|
6592
|
-
args: ['
|
|
6709
|
+
args: ['window:resize']
|
|
6593
6710
|
}] } });
|
|
6594
6711
|
|
|
6595
6712
|
/** A single step rendered inside an {@link IStepper}. */
|
|
@@ -7020,11 +7137,11 @@ class ITabs {
|
|
|
7020
7137
|
tabElement?.focus();
|
|
7021
7138
|
}
|
|
7022
7139
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </
|
|
7140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <div class=\"i-tabs__tab-item\" role=\"presentation\">\n <button type=\"button\"\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n </button>\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab-item{display:flex;align-items:center;flex-shrink:0}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}:host,.i-tabs,.i-tabs__panels{min-width:0;max-width:100%}.i-tabs .i-tabs__tab{flex-shrink:0}@media(pointer:coarse){.i-tabs .i-tabs__tab{min-height:44px}.i-tabs .i-tabs__tab-close{width:32px;height:32px;margin-left:4px;flex-shrink:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
7024
7141
|
}
|
|
7025
7142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITabs, decorators: [{
|
|
7026
7143
|
type: Component,
|
|
7027
|
-
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <button\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </
|
|
7144
|
+
args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n <!-- Tab Headers -->\n <div class=\"i-tabs__header\" role=\"tablist\">\n @for (tab of tabs; track $index) {\n <div class=\"i-tabs__tab-item\" role=\"presentation\">\n <button type=\"button\"\n [attr.id]=\"componentId + '-tab-' + $index\"\n class=\"i-tabs__tab\"\n [ngClass]=\"{\n 'i-tabs__tab--active': activeIndex === $index,\n 'i-tabs__tab--disabled': tab.disabled,\n 'i-tabs__tab--icon-only': tab.icon && !tab.header,\n }\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex === $index\"\n [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab($event, $index)\"\n (keydown)=\"onKeyDown($event, $index)\"\n >\n @if (tab.icon) {\n <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n }\n @if (tab.header) {\n <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n }\n </button>\n @if (tab.closable && !tab.disabled) {\n <button\n class=\"i-tabs__tab-close\"\n type=\"button\"\n aria-label=\"Close tab\"\n (click)=\"closeTab($event, $index)\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n }\n </div>\n }\n </div>\n\n <!-- Tab Panels -->\n <div class=\"i-tabs__panels\">\n @for (tab of tabs; track $index) {\n <div\n [attr.id]=\"componentId + '-panel-' + $index\"\n class=\"i-tabs__panel\"\n [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n [attr.hidden]=\"activeIndex !== $index || null\"\n >\n @if (activeIndex === $index) {\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab-item{display:flex;align-items:center;flex-shrink:0}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}:host,.i-tabs,.i-tabs__panels{min-width:0;max-width:100%}.i-tabs .i-tabs__tab{flex-shrink:0}@media(pointer:coarse){.i-tabs .i-tabs__tab{min-height:44px}.i-tabs .i-tabs__tab-close{width:32px;height:32px;margin-left:4px;flex-shrink:0}}\n"] }]
|
|
7028
7145
|
}], propDecorators: { activeIndex: [{
|
|
7029
7146
|
type: Input
|
|
7030
7147
|
}], activeIndexChange: [{
|
|
@@ -7194,7 +7311,7 @@ class IToggle {
|
|
|
7194
7311
|
useExisting: forwardRef(() => IToggle),
|
|
7195
7312
|
multi: true,
|
|
7196
7313
|
},
|
|
7197
|
-
], ngImport: i0, template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n
|
|
7314
|
+
], ngImport: i0, template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n>\n <div\n class=\"i-toggle\"\n [class.i-toggle--checked]=\"checked\"\n aria-hidden=\"true\"\n >\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-toggle-label\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-toggle-wrapper{cursor:pointer;border-radius:4px}.i-toggle-wrapper:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-toggle-wrapper.i-toggle--disabled{cursor:not-allowed}@media(pointer:coarse){.i-toggle-wrapper:not(.i-toggle--readonly){min-height:44px;min-width:44px;justify-content:center}.i-toggle-wrapper .i-toggle{flex-shrink:0}}\n"] });
|
|
7198
7315
|
}
|
|
7199
7316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IToggle, decorators: [{
|
|
7200
7317
|
type: Component,
|
|
@@ -7204,7 +7321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
7204
7321
|
useExisting: forwardRef(() => IToggle),
|
|
7205
7322
|
multi: true,
|
|
7206
7323
|
},
|
|
7207
|
-
], template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n
|
|
7324
|
+
], template: "<div\n class=\"i-toggle-wrapper\"\n [class.i-toggle--disabled]=\"disabled\"\n [class.i-toggle--readonly]=\"readonly\"\n [class.i-toggle--small]=\"size === 'small'\"\n [class.i-toggle--medium]=\"size === 'medium'\"\n [class.i-toggle--large]=\"size === 'large'\"\n (click)=\"toggle()\"\n [attr.id]=\"id || componentId\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\n (keydown.space)=\"handleKeydown($event)\"\n (keydown.enter)=\"handleKeydown($event)\"\n>\n <div\n class=\"i-toggle\"\n [class.i-toggle--checked]=\"checked\"\n aria-hidden=\"true\"\n >\n <span class=\"i-toggle-thumb\"></span>\n </div>\n @if (label) {\n <label\n [id]=\"(id || componentId) + '-label'\"\n class=\"i-toggle-label\"\n >\n {{ label }}\n </label>\n }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}.i-toggle-wrapper{cursor:pointer;border-radius:4px}.i-toggle-wrapper:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-toggle-wrapper.i-toggle--disabled{cursor:not-allowed}@media(pointer:coarse){.i-toggle-wrapper:not(.i-toggle--readonly){min-height:44px;min-width:44px;justify-content:center}.i-toggle-wrapper .i-toggle{flex-shrink:0}}\n"] }]
|
|
7208
7325
|
}], propDecorators: { label: [{
|
|
7209
7326
|
type: Input
|
|
7210
7327
|
}], id: [{
|