@wildmason/aegis 1.6.0 → 1.7.1
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/dist/fesm2022/wildmason-aegis.mjs +12 -12
- package/dist/fesm2022/wildmason-aegis.mjs.map +1 -1
- package/package.json +1 -1
- package/themes.css +508 -366
|
@@ -167,11 +167,11 @@ class WmSelect {
|
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmSelect, isStandalone: true, selector: "wm-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\r\n<div\r\n class=\"wm-select-host\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n <button\r\n type=\"button\"\r\n role=\"combobox\"\r\n class=\"wm-select-trigger\"\r\n [class.is-open]=\"isOpen()\"\r\n [class.is-disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label ?? placeholder() }}\r\n </span>\r\n <!-- Chevron icon \u2014 rotates when open -->\r\n <svg\r\n class=\"wm-select-chevron\"\r\n [class.is-open]=\"isOpen()\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" aria-hidden=\"true\"\r\n >\r\n <path d=\"M6 9l6 6 6-6\"\r\n stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n [cdkConnectedOverlayPositions]=\"positions\"\r\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n (detach)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"wm-select-panel\"\r\n role=\"listbox\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @for (opt of options(); track opt.value) {\r\n <button\r\n type=\"button\"\r\n role=\"option\"\r\n class=\"wm-select-option\"\r\n [class.is-selected]=\"opt.value === value()\"\r\n [class.is-disabled]=\"!!opt.disabled\"\r\n [attr.aria-selected]=\"opt.value === value()\"\r\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n [disabled]=\"opt.disabled || null\"\r\n (click)=\"selectOption(opt)\"\r\n >\r\n <span class=\"wm-select-option-label\">{{ opt.label }}</span>\r\n @if (opt.value === value()) {\r\n <!-- Checkmark for selected option -->\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <polyline points=\"20 6 9 17 4 12\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent)}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
|
|
170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmSelect, isStandalone: true, selector: "wm-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\r\n<div\r\n class=\"wm-select-host\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n <button\r\n type=\"button\"\r\n role=\"combobox\"\r\n class=\"wm-select-trigger\"\r\n [class.is-open]=\"isOpen()\"\r\n [class.is-disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label ?? placeholder() }}\r\n </span>\r\n <!-- Chevron icon \u2014 rotates when open -->\r\n <svg\r\n class=\"wm-select-chevron\"\r\n [class.is-open]=\"isOpen()\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" aria-hidden=\"true\"\r\n >\r\n <path d=\"M6 9l6 6 6-6\"\r\n stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n [cdkConnectedOverlayPositions]=\"positions\"\r\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n (detach)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"wm-select-panel\"\r\n role=\"listbox\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @for (opt of options(); track opt.value) {\r\n <button\r\n type=\"button\"\r\n role=\"option\"\r\n class=\"wm-select-option\"\r\n [class.is-selected]=\"opt.value === value()\"\r\n [class.is-disabled]=\"!!opt.disabled\"\r\n [attr.aria-selected]=\"opt.value === value()\"\r\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n [disabled]=\"opt.disabled || null\"\r\n (click)=\"selectOption(opt)\"\r\n >\r\n <span class=\"wm-select-option-label\">{{ opt.label }}</span>\r\n @if (opt.value === value()) {\r\n <!-- Checkmark for selected option -->\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <polyline points=\"20 6 9 17 4 12\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent-readable)}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
|
|
171
171
|
}
|
|
172
172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmSelect, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
|
-
args: [{ selector: 'wm-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\r\n<div\r\n class=\"wm-select-host\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n <button\r\n type=\"button\"\r\n role=\"combobox\"\r\n class=\"wm-select-trigger\"\r\n [class.is-open]=\"isOpen()\"\r\n [class.is-disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label ?? placeholder() }}\r\n </span>\r\n <!-- Chevron icon \u2014 rotates when open -->\r\n <svg\r\n class=\"wm-select-chevron\"\r\n [class.is-open]=\"isOpen()\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" aria-hidden=\"true\"\r\n >\r\n <path d=\"M6 9l6 6 6-6\"\r\n stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n [cdkConnectedOverlayPositions]=\"positions\"\r\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n (detach)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"wm-select-panel\"\r\n role=\"listbox\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @for (opt of options(); track opt.value) {\r\n <button\r\n type=\"button\"\r\n role=\"option\"\r\n class=\"wm-select-option\"\r\n [class.is-selected]=\"opt.value === value()\"\r\n [class.is-disabled]=\"!!opt.disabled\"\r\n [attr.aria-selected]=\"opt.value === value()\"\r\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n [disabled]=\"opt.disabled || null\"\r\n (click)=\"selectOption(opt)\"\r\n >\r\n <span class=\"wm-select-option-label\">{{ opt.label }}</span>\r\n @if (opt.value === value()) {\r\n <!-- Checkmark for selected option -->\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <polyline points=\"20 6 9 17 4 12\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent)}\n"] }]
|
|
174
|
+
args: [{ selector: 'wm-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\r\n<div\r\n class=\"wm-select-host\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n <button\r\n type=\"button\"\r\n role=\"combobox\"\r\n class=\"wm-select-trigger\"\r\n [class.is-open]=\"isOpen()\"\r\n [class.is-disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label ?? placeholder() }}\r\n </span>\r\n <!-- Chevron icon \u2014 rotates when open -->\r\n <svg\r\n class=\"wm-select-chevron\"\r\n [class.is-open]=\"isOpen()\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" aria-hidden=\"true\"\r\n >\r\n <path d=\"M6 9l6 6 6-6\"\r\n stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n [cdkConnectedOverlayPositions]=\"positions\"\r\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n (detach)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"wm-select-panel\"\r\n role=\"listbox\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @for (opt of options(); track opt.value) {\r\n <button\r\n type=\"button\"\r\n role=\"option\"\r\n class=\"wm-select-option\"\r\n [class.is-selected]=\"opt.value === value()\"\r\n [class.is-disabled]=\"!!opt.disabled\"\r\n [attr.aria-selected]=\"opt.value === value()\"\r\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n [disabled]=\"opt.disabled || null\"\r\n (click)=\"selectOption(opt)\"\r\n >\r\n <span class=\"wm-select-option-label\">{{ opt.label }}</span>\r\n @if (opt.value === value()) {\r\n <!-- Checkmark for selected option -->\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <polyline points=\"20 6 9 17 4 12\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent-readable)}\n"] }]
|
|
175
175
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
176
176
|
|
|
177
177
|
/**
|
|
@@ -386,11 +386,11 @@ class WmTabs {
|
|
|
386
386
|
}
|
|
387
387
|
}
|
|
388
388
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
389
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmTabs, isStandalone: true, selector: "wm-tabs", inputs: { activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: WmTab, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"wm-tabs\"\r\n [class.wm-tabs--line]=\"variant() === 'line'\"\r\n [class.wm-tabs--pill]=\"variant() === 'pill'\"\r\n role=\"tablist\"\r\n #container\r\n (keydown)=\"onKeyDown($event, container)\"\r\n>\r\n @for (tab of tabs(); track tab.value(); let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"wm-tab\"\r\n [id]=\"'wm-tab-' + tab.value()\"\r\n [attr.aria-selected]=\"activeValue() === tab.value()\"\r\n [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\r\n [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\r\n [class.is-active]=\"activeValue() === tab.value()\"\r\n (click)=\"selectTab(tab.value(), i)\"\r\n (focus)=\"focusedIndex.set(i)\"\r\n (blur)=\"onBlur()\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent);border-bottom-color:var(--wm-color-accent)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
389
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmTabs, isStandalone: true, selector: "wm-tabs", inputs: { activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: WmTab, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"wm-tabs\"\r\n [class.wm-tabs--line]=\"variant() === 'line'\"\r\n [class.wm-tabs--pill]=\"variant() === 'pill'\"\r\n role=\"tablist\"\r\n #container\r\n (keydown)=\"onKeyDown($event, container)\"\r\n>\r\n @for (tab of tabs(); track tab.value(); let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"wm-tab\"\r\n [id]=\"'wm-tab-' + tab.value()\"\r\n [attr.aria-selected]=\"activeValue() === tab.value()\"\r\n [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\r\n [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\r\n [class.is-active]=\"activeValue() === tab.value()\"\r\n (click)=\"selectTab(tab.value(), i)\"\r\n (focus)=\"focusedIndex.set(i)\"\r\n (blur)=\"onBlur()\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
390
390
|
}
|
|
391
391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTabs, decorators: [{
|
|
392
392
|
type: Component,
|
|
393
|
-
args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"wm-tabs\"\r\n [class.wm-tabs--line]=\"variant() === 'line'\"\r\n [class.wm-tabs--pill]=\"variant() === 'pill'\"\r\n role=\"tablist\"\r\n #container\r\n (keydown)=\"onKeyDown($event, container)\"\r\n>\r\n @for (tab of tabs(); track tab.value(); let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"wm-tab\"\r\n [id]=\"'wm-tab-' + tab.value()\"\r\n [attr.aria-selected]=\"activeValue() === tab.value()\"\r\n [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\r\n [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\r\n [class.is-active]=\"activeValue() === tab.value()\"\r\n (click)=\"selectTab(tab.value(), i)\"\r\n (focus)=\"focusedIndex.set(i)\"\r\n (blur)=\"onBlur()\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent);border-bottom-color:var(--wm-color-accent)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
|
|
393
|
+
args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"wm-tabs\"\r\n [class.wm-tabs--line]=\"variant() === 'line'\"\r\n [class.wm-tabs--pill]=\"variant() === 'pill'\"\r\n role=\"tablist\"\r\n #container\r\n (keydown)=\"onKeyDown($event, container)\"\r\n>\r\n @for (tab of tabs(); track tab.value(); let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"wm-tab\"\r\n [id]=\"'wm-tab-' + tab.value()\"\r\n [attr.aria-selected]=\"activeValue() === tab.value()\"\r\n [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\r\n [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\r\n [class.is-active]=\"activeValue() === tab.value()\"\r\n (click)=\"selectTab(tab.value(), i)\"\r\n (focus)=\"focusedIndex.set(i)\"\r\n (blur)=\"onBlur()\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
|
|
394
394
|
}], propDecorators: { activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WmTab), { isSignal: true }] }] } });
|
|
395
395
|
|
|
396
396
|
class WmButton {
|
|
@@ -460,11 +460,11 @@ class Checkbox {
|
|
|
460
460
|
}
|
|
461
461
|
}
|
|
462
462
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: Checkbox, isStandalone: true, selector: "wm-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\r\n <button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"wm-checkbox-box\"\r\n [class.is-checked]=\"checked()\"\r\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\r\n [attr.aria-checked]=\"ariaChecked()\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n >\r\n @if (indeterminate() && !checked()) {\r\n <!-- Dash for indeterminate (\"some selected\") state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\r\n stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\r\n </svg>\r\n } @else if (checked()) {\r\n <!-- Animated checkmark for selected state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (label()) {\r\n <span class=\"wm-checkbox-label\">{{ label() }}</span>\r\n }\r\n</label>\r\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] });
|
|
463
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: Checkbox, isStandalone: true, selector: "wm-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\r\n <button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"wm-checkbox-box\"\r\n [class.is-checked]=\"checked()\"\r\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\r\n [attr.aria-checked]=\"ariaChecked()\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n >\r\n @if (indeterminate() && !checked()) {\r\n <!-- Dash for indeterminate (\"some selected\") state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\r\n stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\r\n </svg>\r\n } @else if (checked()) {\r\n <!-- Animated checkmark for selected state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (label()) {\r\n <span class=\"wm-checkbox-label\">{{ label() }}</span>\r\n }\r\n</label>\r\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent-readable)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] });
|
|
464
464
|
}
|
|
465
465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Checkbox, decorators: [{
|
|
466
466
|
type: Component,
|
|
467
|
-
args: [{ selector: 'wm-checkbox', template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\r\n <button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"wm-checkbox-box\"\r\n [class.is-checked]=\"checked()\"\r\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\r\n [attr.aria-checked]=\"ariaChecked()\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n >\r\n @if (indeterminate() && !checked()) {\r\n <!-- Dash for indeterminate (\"some selected\") state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\r\n stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\r\n </svg>\r\n } @else if (checked()) {\r\n <!-- Animated checkmark for selected state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (label()) {\r\n <span class=\"wm-checkbox-label\">{{ label() }}</span>\r\n }\r\n</label>\r\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] }]
|
|
467
|
+
args: [{ selector: 'wm-checkbox', template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\r\n <button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"wm-checkbox-box\"\r\n [class.is-checked]=\"checked()\"\r\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\r\n [attr.aria-checked]=\"ariaChecked()\"\r\n [attr.aria-disabled]=\"disabled() ? true : null\"\r\n [disabled]=\"disabled() || null\"\r\n (click)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n >\r\n @if (indeterminate() && !checked()) {\r\n <!-- Dash for indeterminate (\"some selected\") state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\r\n stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\r\n </svg>\r\n } @else if (checked()) {\r\n <!-- Animated checkmark for selected state -->\r\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (label()) {\r\n <span class=\"wm-checkbox-label\">{{ label() }}</span>\r\n }\r\n</label>\r\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent-readable)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] }]
|
|
468
468
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
469
469
|
|
|
470
470
|
/**
|
|
@@ -791,11 +791,11 @@ class ComboboxPanel {
|
|
|
791
791
|
return segments;
|
|
792
792
|
}
|
|
793
793
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ComboboxPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
794
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ComboboxPanel, isStandalone: true, selector: "wm-combobox-panel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, highlightIndex: { classPropertyName: "highlightIndex", publicName: "highlightIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, filterQuery: { classPropertyName: "filterQuery", publicName: "filterQuery", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freeformHint: { classPropertyName: "freeformHint", publicName: "freeformHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionClicked: "optionClicked" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "@if (loading()) {\n <div class=\"wm-cb-loading\" aria-live=\"polite\">\n <svg\n class=\"wm-cb-spinner\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <circle\n cx=\"10\" cy=\"10\" r=\"8\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-dasharray=\"40 60\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span class=\"wm-cb-loading-text\">Loading\u2026</span>\n </div>\n} @else if (showEmpty()) {\n <div class=\"wm-cb-empty\" aria-live=\"polite\">{{ emptyText() }}</div>\n} @else {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeight()\"\n [style.height.px]=\"viewportHeight()\"\n class=\"wm-cb-viewport\"\n >\n <div\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n >\n <div\n *cdkVirtualFor=\"let opt of options(); let i = index\"\n role=\"option\"\n class=\"wm-cb-option\"\n [id]=\"optionIdAt(i)\"\n [class.is-highlighted]=\"i === highlightIndex()\"\n [class.is-selected]=\"isSelected(opt.value)\"\n [class.is-disabled]=\"!!opt.disabled\"\n [attr.aria-selected]=\"isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\n (mousedown)=\"onOptionMousedown($event, opt, i)\"\n >\n <span class=\"wm-cb-option-label\">\n @for (seg of segmentsAt(i); track $index) {\n @if (seg.match) {\n <b class=\"wm-cb-match\">{{ seg.text }}</b>\n } @else {\n {{ seg.text }}\n }\n }\n </span>\n @if (isSelected(opt.value)) {\n <svg\n class=\"wm-cb-check\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <polyline\n points=\"20 6 9 17 4 12\"\n stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n}\n", styles: [":host{display:block}.wm-cb-viewport{width:100%}.wm-cb-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast);-webkit-user-select:none;user-select:none}.wm-cb-option:hover:not(.is-disabled):not(.is-highlighted){background:var(--wm-bg-active)}.wm-cb-option.is-highlighted{background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent)}.wm-cb-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent);font-weight:500}.wm-cb-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-cb-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-match{font-weight:700;color:var(--wm-color-accent)}.wm-cb-check{flex-shrink:0;color:var(--wm-color-accent)}.wm-cb-empty{padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem;text-align:center}.wm-cb-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem}.wm-cb-spinner{animation:wm-cb-spin .8s linear infinite}@keyframes wm-cb-spin{to{transform:rotate(360deg)}}.wm-cb-loading-text{color:var(--wm-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ComboboxPanel, isStandalone: true, selector: "wm-combobox-panel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, highlightIndex: { classPropertyName: "highlightIndex", publicName: "highlightIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, filterQuery: { classPropertyName: "filterQuery", publicName: "filterQuery", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freeformHint: { classPropertyName: "freeformHint", publicName: "freeformHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionClicked: "optionClicked" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "@if (loading()) {\n <div class=\"wm-cb-loading\" aria-live=\"polite\">\n <svg\n class=\"wm-cb-spinner\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <circle\n cx=\"10\" cy=\"10\" r=\"8\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-dasharray=\"40 60\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span class=\"wm-cb-loading-text\">Loading\u2026</span>\n </div>\n} @else if (showEmpty()) {\n <div class=\"wm-cb-empty\" aria-live=\"polite\">{{ emptyText() }}</div>\n} @else {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeight()\"\n [style.height.px]=\"viewportHeight()\"\n class=\"wm-cb-viewport\"\n >\n <div\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n >\n <div\n *cdkVirtualFor=\"let opt of options(); let i = index\"\n role=\"option\"\n class=\"wm-cb-option\"\n [id]=\"optionIdAt(i)\"\n [class.is-highlighted]=\"i === highlightIndex()\"\n [class.is-selected]=\"isSelected(opt.value)\"\n [class.is-disabled]=\"!!opt.disabled\"\n [attr.aria-selected]=\"isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\n (mousedown)=\"onOptionMousedown($event, opt, i)\"\n >\n <span class=\"wm-cb-option-label\">\n @for (seg of segmentsAt(i); track $index) {\n @if (seg.match) {\n <b class=\"wm-cb-match\">{{ seg.text }}</b>\n } @else {\n {{ seg.text }}\n }\n }\n </span>\n @if (isSelected(opt.value)) {\n <svg\n class=\"wm-cb-check\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <polyline\n points=\"20 6 9 17 4 12\"\n stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n}\n", styles: [":host{display:block}.wm-cb-viewport{width:100%}.wm-cb-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast);-webkit-user-select:none;user-select:none}.wm-cb-option:hover:not(.is-disabled):not(.is-highlighted){background:var(--wm-bg-active)}.wm-cb-option.is-highlighted{background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent)}.wm-cb-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-cb-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-cb-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-match{font-weight:700;color:var(--wm-color-accent-readable)}.wm-cb-check{flex-shrink:0;color:var(--wm-color-accent-readable)}.wm-cb-empty{padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem;text-align:center}.wm-cb-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem}.wm-cb-spinner{animation:wm-cb-spin .8s linear infinite}@keyframes wm-cb-spin{to{transform:rotate(360deg)}}.wm-cb-loading-text{color:var(--wm-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
795
795
|
}
|
|
796
796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ComboboxPanel, decorators: [{
|
|
797
797
|
type: Component,
|
|
798
|
-
args: [{ selector: 'wm-combobox-panel', imports: [ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n <div class=\"wm-cb-loading\" aria-live=\"polite\">\n <svg\n class=\"wm-cb-spinner\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <circle\n cx=\"10\" cy=\"10\" r=\"8\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-dasharray=\"40 60\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span class=\"wm-cb-loading-text\">Loading\u2026</span>\n </div>\n} @else if (showEmpty()) {\n <div class=\"wm-cb-empty\" aria-live=\"polite\">{{ emptyText() }}</div>\n} @else {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeight()\"\n [style.height.px]=\"viewportHeight()\"\n class=\"wm-cb-viewport\"\n >\n <div\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n >\n <div\n *cdkVirtualFor=\"let opt of options(); let i = index\"\n role=\"option\"\n class=\"wm-cb-option\"\n [id]=\"optionIdAt(i)\"\n [class.is-highlighted]=\"i === highlightIndex()\"\n [class.is-selected]=\"isSelected(opt.value)\"\n [class.is-disabled]=\"!!opt.disabled\"\n [attr.aria-selected]=\"isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\n (mousedown)=\"onOptionMousedown($event, opt, i)\"\n >\n <span class=\"wm-cb-option-label\">\n @for (seg of segmentsAt(i); track $index) {\n @if (seg.match) {\n <b class=\"wm-cb-match\">{{ seg.text }}</b>\n } @else {\n {{ seg.text }}\n }\n }\n </span>\n @if (isSelected(opt.value)) {\n <svg\n class=\"wm-cb-check\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <polyline\n points=\"20 6 9 17 4 12\"\n stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n}\n", styles: [":host{display:block}.wm-cb-viewport{width:100%}.wm-cb-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast);-webkit-user-select:none;user-select:none}.wm-cb-option:hover:not(.is-disabled):not(.is-highlighted){background:var(--wm-bg-active)}.wm-cb-option.is-highlighted{background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent)}.wm-cb-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent);font-weight:500}.wm-cb-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-cb-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-match{font-weight:700;color:var(--wm-color-accent)}.wm-cb-check{flex-shrink:0;color:var(--wm-color-accent)}.wm-cb-empty{padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem;text-align:center}.wm-cb-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem}.wm-cb-spinner{animation:wm-cb-spin .8s linear infinite}@keyframes wm-cb-spin{to{transform:rotate(360deg)}}.wm-cb-loading-text{color:var(--wm-text-muted)}\n"] }]
|
|
798
|
+
args: [{ selector: 'wm-combobox-panel', imports: [ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n <div class=\"wm-cb-loading\" aria-live=\"polite\">\n <svg\n class=\"wm-cb-spinner\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <circle\n cx=\"10\" cy=\"10\" r=\"8\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-dasharray=\"40 60\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span class=\"wm-cb-loading-text\">Loading\u2026</span>\n </div>\n} @else if (showEmpty()) {\n <div class=\"wm-cb-empty\" aria-live=\"polite\">{{ emptyText() }}</div>\n} @else {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeight()\"\n [style.height.px]=\"viewportHeight()\"\n class=\"wm-cb-viewport\"\n >\n <div\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n >\n <div\n *cdkVirtualFor=\"let opt of options(); let i = index\"\n role=\"option\"\n class=\"wm-cb-option\"\n [id]=\"optionIdAt(i)\"\n [class.is-highlighted]=\"i === highlightIndex()\"\n [class.is-selected]=\"isSelected(opt.value)\"\n [class.is-disabled]=\"!!opt.disabled\"\n [attr.aria-selected]=\"isSelected(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled ? true : null\"\n (mousedown)=\"onOptionMousedown($event, opt, i)\"\n >\n <span class=\"wm-cb-option-label\">\n @for (seg of segmentsAt(i); track $index) {\n @if (seg.match) {\n <b class=\"wm-cb-match\">{{ seg.text }}</b>\n } @else {\n {{ seg.text }}\n }\n }\n </span>\n @if (isSelected(opt.value)) {\n <svg\n class=\"wm-cb-check\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <polyline\n points=\"20 6 9 17 4 12\"\n stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n}\n", styles: [":host{display:block}.wm-cb-viewport{width:100%}.wm-cb-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast);-webkit-user-select:none;user-select:none}.wm-cb-option:hover:not(.is-disabled):not(.is-highlighted){background:var(--wm-bg-active)}.wm-cb-option.is-highlighted{background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent)}.wm-cb-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-cb-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-cb-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-match{font-weight:700;color:var(--wm-color-accent-readable)}.wm-cb-check{flex-shrink:0;color:var(--wm-color-accent-readable)}.wm-cb-empty{padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem;text-align:center}.wm-cb-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem}.wm-cb-spinner{animation:wm-cb-spin .8s linear infinite}@keyframes wm-cb-spin{to{transform:rotate(360deg)}}.wm-cb-loading-text{color:var(--wm-text-muted)}\n"] }]
|
|
799
799
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], highlightIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightIndex", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], filterQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterQuery", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], freeformHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformHint", required: false }] }], optionClicked: [{ type: i0.Output, args: ["optionClicked"] }], viewport: [{
|
|
800
800
|
type: ViewChild,
|
|
801
801
|
args: [CdkVirtualScrollViewport]
|
|
@@ -1299,7 +1299,7 @@ class WmCombobox {
|
|
|
1299
1299
|
useExisting: forwardRef(() => WmCombobox),
|
|
1300
1300
|
multi: true,
|
|
1301
1301
|
},
|
|
1302
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ComboboxPanel, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n class=\"wm-cb-trigger\"\n [class.is-open]=\"isOpen()\"\n [class.is-disabled]=\"disabled()\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n (click)=\"onTriggerClick()\"\n>\n <!-- Multi-select chips -->\n @if (multiple()) {\n @for (chip of chips(); track chip.value) {\n <span class=\"wm-cb-chip\">\n <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n <button\n type=\"button\"\n class=\"wm-cb-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + chip.label\"\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </span>\n }\n }\n\n <!-- Text input -->\n <input\n #inputEl\n type=\"text\"\n class=\"wm-cb-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n [disabled]=\"disabled() || null\"\n [value]=\"inputText()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Chevron -->\n <svg\n class=\"wm-cb-chevron\"\n [class.is-open]=\"isOpen()\"\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <path d=\"M6 9l6 6 6-6\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n>\n <div class=\"wm-cb-panel\">\n <wm-combobox-panel\n [options]=\"filteredOptions()\"\n [highlightIndex]=\"highlightIndex()\"\n [selectedValues]=\"selectedValues()\"\n [multiple]=\"multiple()\"\n [itemHeight]=\"itemHeight()\"\n [maxHeight]=\"maxPanelHeight()\"\n [filterQuery]=\"inputText()\"\n [loading]=\"asyncLoading()\"\n [freeformHint]=\"freeformHint()\"\n (optionClicked)=\"onOptionClicked($event)\"\n />\n </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ComboboxPanel, selector: "wm-combobox-panel", inputs: ["options", "highlightIndex", "selectedValues", "multiple", "itemHeight", "maxHeight", "filterQuery", "loading", "freeformHint"], outputs: ["optionClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1302
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ComboboxPanel, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n class=\"wm-cb-trigger\"\n [class.is-open]=\"isOpen()\"\n [class.is-disabled]=\"disabled()\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n (click)=\"onTriggerClick()\"\n>\n <!-- Multi-select chips -->\n @if (multiple()) {\n @for (chip of chips(); track chip.value) {\n <span class=\"wm-cb-chip\">\n <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n <button\n type=\"button\"\n class=\"wm-cb-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + chip.label\"\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </span>\n }\n }\n\n <!-- Text input -->\n <input\n #inputEl\n type=\"text\"\n class=\"wm-cb-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n [disabled]=\"disabled() || null\"\n [value]=\"inputText()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Chevron -->\n <svg\n class=\"wm-cb-chevron\"\n [class.is-open]=\"isOpen()\"\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <path d=\"M6 9l6 6 6-6\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n>\n <div class=\"wm-cb-panel\">\n <wm-combobox-panel\n [options]=\"filteredOptions()\"\n [highlightIndex]=\"highlightIndex()\"\n [selectedValues]=\"selectedValues()\"\n [multiple]=\"multiple()\"\n [itemHeight]=\"itemHeight()\"\n [maxHeight]=\"maxPanelHeight()\"\n [filterQuery]=\"inputText()\"\n [loading]=\"asyncLoading()\"\n [freeformHint]=\"freeformHint()\"\n (optionClicked)=\"onOptionClicked($event)\"\n />\n </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ComboboxPanel, selector: "wm-combobox-panel", inputs: ["options", "highlightIndex", "selectedValues", "multiple", "itemHeight", "maxHeight", "filterQuery", "loading", "freeformHint"], outputs: ["optionClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1303
1303
|
}
|
|
1304
1304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmCombobox, decorators: [{
|
|
1305
1305
|
type: Component,
|
|
@@ -1309,7 +1309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1309
1309
|
useExisting: forwardRef(() => WmCombobox),
|
|
1310
1310
|
multi: true,
|
|
1311
1311
|
},
|
|
1312
|
-
], template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n class=\"wm-cb-trigger\"\n [class.is-open]=\"isOpen()\"\n [class.is-disabled]=\"disabled()\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n (click)=\"onTriggerClick()\"\n>\n <!-- Multi-select chips -->\n @if (multiple()) {\n @for (chip of chips(); track chip.value) {\n <span class=\"wm-cb-chip\">\n <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n <button\n type=\"button\"\n class=\"wm-cb-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + chip.label\"\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </span>\n }\n }\n\n <!-- Text input -->\n <input\n #inputEl\n type=\"text\"\n class=\"wm-cb-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n [disabled]=\"disabled() || null\"\n [value]=\"inputText()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Chevron -->\n <svg\n class=\"wm-cb-chevron\"\n [class.is-open]=\"isOpen()\"\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <path d=\"M6 9l6 6 6-6\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n>\n <div class=\"wm-cb-panel\">\n <wm-combobox-panel\n [options]=\"filteredOptions()\"\n [highlightIndex]=\"highlightIndex()\"\n [selectedValues]=\"selectedValues()\"\n [multiple]=\"multiple()\"\n [itemHeight]=\"itemHeight()\"\n [maxHeight]=\"maxPanelHeight()\"\n [filterQuery]=\"inputText()\"\n [loading]=\"asyncLoading()\"\n [freeformHint]=\"freeformHint()\"\n (optionClicked)=\"onOptionClicked($event)\"\n />\n </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
1312
|
+
], template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n class=\"wm-cb-trigger\"\n [class.is-open]=\"isOpen()\"\n [class.is-disabled]=\"disabled()\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n (click)=\"onTriggerClick()\"\n>\n <!-- Multi-select chips -->\n @if (multiple()) {\n @for (chip of chips(); track chip.value) {\n <span class=\"wm-cb-chip\">\n <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n <button\n type=\"button\"\n class=\"wm-cb-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + chip.label\"\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </span>\n }\n }\n\n <!-- Text input -->\n <input\n #inputEl\n type=\"text\"\n class=\"wm-cb-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n [disabled]=\"disabled() || null\"\n [value]=\"inputText()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Chevron -->\n <svg\n class=\"wm-cb-chevron\"\n [class.is-open]=\"isOpen()\"\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" aria-hidden=\"true\"\n >\n <path d=\"M6 9l6 6 6-6\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n>\n <div class=\"wm-cb-panel\">\n <wm-combobox-panel\n [options]=\"filteredOptions()\"\n [highlightIndex]=\"highlightIndex()\"\n [selectedValues]=\"selectedValues()\"\n [multiple]=\"multiple()\"\n [itemHeight]=\"itemHeight()\"\n [maxHeight]=\"maxPanelHeight()\"\n [filterQuery]=\"inputText()\"\n [loading]=\"asyncLoading()\"\n [freeformHint]=\"freeformHint()\"\n (optionClicked)=\"onOptionClicked($event)\"\n />\n </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
1313
1313
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowFreeform: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeform", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxPanelHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPanelHeight", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ComboboxPanel), { isSignal: true }] }] } });
|
|
1314
1314
|
|
|
1315
1315
|
let nextId = 0;
|
|
@@ -1406,11 +1406,11 @@ class WmToastContainer {
|
|
|
1406
1406
|
return `${mins}m ${secs.toString().padStart(2, '0')}s`;
|
|
1407
1407
|
}
|
|
1408
1408
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1409
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmToastContainer, isStandalone: true, selector: "wm-toast-container", ngImport: i0, template: "<div class=\"wm-toast-container\" role=\"log\" aria-live=\"polite\" aria-label=\"Notifications\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div [class]=\"typeClass(toast)\" role=\"status\">\n <!-- Success icon (check-circle) -->\n @if (toast.type === 'success') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\n </svg>\n }\n <!-- Error icon (x-circle) -->\n @if (toast.type === 'error') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n </svg>\n }\n <!-- Info icon -->\n @if (toast.type === 'info') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n </svg>\n }\n <!-- Progress spinner -->\n @if (toast.type === 'progress') {\n <span class=\"wm-toast-spinner\" aria-hidden=\"true\"></span>\n }\n\n <span class=\"wm-toast-message\">\n {{ toast.message }}\n @if (toast.type === 'progress' && toast.createdAt) {\n <span class=\"wm-toast-elapsed\"> ({{ elapsed(toast.createdAt) }})</span>\n }\n </span>\n\n <!-- Cancel button for progress toasts with an onCancel callback -->\n @if (toast.type === 'progress' && toast.onCancel) {\n <button class=\"wm-toast-cancel\" (click)=\"cancel(toast)\" aria-label=\"Cancel operation\">Cancel</button>\n }\n\n <!-- Dismiss button \u2014 always shown -->\n <button class=\"wm-toast-dismiss\" (click)=\"dismiss(toast.id)\" aria-label=\"Dismiss notification\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </svg>\n </button>\n </div>\n }\n</div>\n", styles: [".wm-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999;pointer-events:none}.wm-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .875rem;border-radius:var(--wm-radius-sm, 4px);box-shadow:var(--wm-shadow-md, 0 4px 12px rgba(0,0,0,.25));font-size:.8125rem;line-height:1.4;min-width:220px;max-width:360px;pointer-events:auto;animation:wm-toast-slide-in .15s ease-out both}.wm-toast--success{background:color-mix(in srgb,var(--wm-color-success) 20%,var(--wm-bg-raised));color:var(--wm-color-success);border:1px solid color-mix(in srgb,var(--wm-color-success) 40%,transparent)}.wm-toast--error{background:color-mix(in srgb,var(--wm-color-danger) 20%,var(--wm-bg-raised));color:var(--wm-color-danger);border:1px solid color-mix(in srgb,var(--wm-color-danger) 40%,transparent)}.wm-toast--info{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid var(--wm-border)}.wm-toast--progress{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid color-mix(in srgb,var(--wm-color-accent) 40%,transparent)}.wm-toast-icon{flex-shrink:0;margin-top:1px}.wm-toast-message{flex:1;line-height:1.4}.wm-toast-dismiss{flex-shrink:0;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;padding:0;margin-left:.25rem;transition:opacity .15s ease}.wm-toast-dismiss:hover{opacity:1}.wm-toast-spinner{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-top-color:var(--wm-color-accent);border-radius:50%;flex-shrink:0;margin-top:1px;animation:wm-toast-spin .7s linear infinite}.wm-toast-elapsed{opacity:.6;font-size:.75rem;font-variant-numeric:tabular-nums}.wm-toast-cancel{flex-shrink:0;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--wm-radius-sm, 4px);color:inherit;opacity:.7;cursor:pointer;padding:.125rem .5rem;font-size:.75rem;transition:opacity .15s ease,border-color .15s ease}.wm-toast-cancel:hover{opacity:1;border-color:currentColor}@keyframes wm-toast-spin{to{transform:rotate(360deg)}}@keyframes wm-toast-slide-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.wm-toast{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1409
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmToastContainer, isStandalone: true, selector: "wm-toast-container", ngImport: i0, template: "<div class=\"wm-toast-container\" role=\"log\" aria-live=\"polite\" aria-label=\"Notifications\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div [class]=\"typeClass(toast)\" role=\"status\">\n <!-- Success icon (check-circle) -->\n @if (toast.type === 'success') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\n </svg>\n }\n <!-- Error icon (x-circle) -->\n @if (toast.type === 'error') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n </svg>\n }\n <!-- Info icon -->\n @if (toast.type === 'info') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n </svg>\n }\n <!-- Progress spinner -->\n @if (toast.type === 'progress') {\n <span class=\"wm-toast-spinner\" aria-hidden=\"true\"></span>\n }\n\n <span class=\"wm-toast-message\">\n {{ toast.message }}\n @if (toast.type === 'progress' && toast.createdAt) {\n <span class=\"wm-toast-elapsed\"> ({{ elapsed(toast.createdAt) }})</span>\n }\n </span>\n\n <!-- Cancel button for progress toasts with an onCancel callback -->\n @if (toast.type === 'progress' && toast.onCancel) {\n <button class=\"wm-toast-cancel\" (click)=\"cancel(toast)\" aria-label=\"Cancel operation\">Cancel</button>\n }\n\n <!-- Dismiss button \u2014 always shown -->\n <button class=\"wm-toast-dismiss\" (click)=\"dismiss(toast.id)\" aria-label=\"Dismiss notification\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </svg>\n </button>\n </div>\n }\n</div>\n", styles: [".wm-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999;pointer-events:none}.wm-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .875rem;border-radius:var(--wm-radius-sm, 4px);box-shadow:var(--wm-shadow-md, 0 4px 12px rgba(0,0,0,.25));font-size:.8125rem;line-height:1.4;min-width:220px;max-width:360px;pointer-events:auto;animation:wm-toast-slide-in .15s ease-out both}.wm-toast--success{background:color-mix(in srgb,var(--wm-color-success) 20%,var(--wm-bg-raised));color:var(--wm-color-success);border:1px solid color-mix(in srgb,var(--wm-color-success) 40%,transparent)}.wm-toast--error{background:color-mix(in srgb,var(--wm-color-danger) 20%,var(--wm-bg-raised));color:var(--wm-color-danger);border:1px solid color-mix(in srgb,var(--wm-color-danger) 40%,transparent)}.wm-toast--info{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid var(--wm-border)}.wm-toast--progress{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid color-mix(in srgb,var(--wm-color-accent) 40%,transparent)}.wm-toast-icon{flex-shrink:0;margin-top:1px}.wm-toast-message{flex:1;line-height:1.4}.wm-toast-dismiss{flex-shrink:0;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;padding:0;margin-left:.25rem;transition:opacity .15s ease}.wm-toast-dismiss:hover{opacity:1}.wm-toast-spinner{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-top-color:var(--wm-color-accent-readable);border-radius:50%;flex-shrink:0;margin-top:1px;animation:wm-toast-spin .7s linear infinite}.wm-toast-elapsed{opacity:.6;font-size:.75rem;font-variant-numeric:tabular-nums}.wm-toast-cancel{flex-shrink:0;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--wm-radius-sm, 4px);color:inherit;opacity:.7;cursor:pointer;padding:.125rem .5rem;font-size:.75rem;transition:opacity .15s ease,border-color .15s ease}.wm-toast-cancel:hover{opacity:1;border-color:currentColor}@keyframes wm-toast-spin{to{transform:rotate(360deg)}}@keyframes wm-toast-slide-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.wm-toast{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1410
1410
|
}
|
|
1411
1411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastContainer, decorators: [{
|
|
1412
1412
|
type: Component,
|
|
1413
|
-
args: [{ selector: 'wm-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wm-toast-container\" role=\"log\" aria-live=\"polite\" aria-label=\"Notifications\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div [class]=\"typeClass(toast)\" role=\"status\">\n <!-- Success icon (check-circle) -->\n @if (toast.type === 'success') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\n </svg>\n }\n <!-- Error icon (x-circle) -->\n @if (toast.type === 'error') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n </svg>\n }\n <!-- Info icon -->\n @if (toast.type === 'info') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n </svg>\n }\n <!-- Progress spinner -->\n @if (toast.type === 'progress') {\n <span class=\"wm-toast-spinner\" aria-hidden=\"true\"></span>\n }\n\n <span class=\"wm-toast-message\">\n {{ toast.message }}\n @if (toast.type === 'progress' && toast.createdAt) {\n <span class=\"wm-toast-elapsed\"> ({{ elapsed(toast.createdAt) }})</span>\n }\n </span>\n\n <!-- Cancel button for progress toasts with an onCancel callback -->\n @if (toast.type === 'progress' && toast.onCancel) {\n <button class=\"wm-toast-cancel\" (click)=\"cancel(toast)\" aria-label=\"Cancel operation\">Cancel</button>\n }\n\n <!-- Dismiss button \u2014 always shown -->\n <button class=\"wm-toast-dismiss\" (click)=\"dismiss(toast.id)\" aria-label=\"Dismiss notification\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </svg>\n </button>\n </div>\n }\n</div>\n", styles: [".wm-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999;pointer-events:none}.wm-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .875rem;border-radius:var(--wm-radius-sm, 4px);box-shadow:var(--wm-shadow-md, 0 4px 12px rgba(0,0,0,.25));font-size:.8125rem;line-height:1.4;min-width:220px;max-width:360px;pointer-events:auto;animation:wm-toast-slide-in .15s ease-out both}.wm-toast--success{background:color-mix(in srgb,var(--wm-color-success) 20%,var(--wm-bg-raised));color:var(--wm-color-success);border:1px solid color-mix(in srgb,var(--wm-color-success) 40%,transparent)}.wm-toast--error{background:color-mix(in srgb,var(--wm-color-danger) 20%,var(--wm-bg-raised));color:var(--wm-color-danger);border:1px solid color-mix(in srgb,var(--wm-color-danger) 40%,transparent)}.wm-toast--info{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid var(--wm-border)}.wm-toast--progress{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid color-mix(in srgb,var(--wm-color-accent) 40%,transparent)}.wm-toast-icon{flex-shrink:0;margin-top:1px}.wm-toast-message{flex:1;line-height:1.4}.wm-toast-dismiss{flex-shrink:0;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;padding:0;margin-left:.25rem;transition:opacity .15s ease}.wm-toast-dismiss:hover{opacity:1}.wm-toast-spinner{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-top-color:var(--wm-color-accent);border-radius:50%;flex-shrink:0;margin-top:1px;animation:wm-toast-spin .7s linear infinite}.wm-toast-elapsed{opacity:.6;font-size:.75rem;font-variant-numeric:tabular-nums}.wm-toast-cancel{flex-shrink:0;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--wm-radius-sm, 4px);color:inherit;opacity:.7;cursor:pointer;padding:.125rem .5rem;font-size:.75rem;transition:opacity .15s ease,border-color .15s ease}.wm-toast-cancel:hover{opacity:1;border-color:currentColor}@keyframes wm-toast-spin{to{transform:rotate(360deg)}}@keyframes wm-toast-slide-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.wm-toast{animation:none}}\n"] }]
|
|
1413
|
+
args: [{ selector: 'wm-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wm-toast-container\" role=\"log\" aria-live=\"polite\" aria-label=\"Notifications\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div [class]=\"typeClass(toast)\" role=\"status\">\n <!-- Success icon (check-circle) -->\n @if (toast.type === 'success') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\n </svg>\n }\n <!-- Error icon (x-circle) -->\n @if (toast.type === 'error') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n </svg>\n }\n <!-- Info icon -->\n @if (toast.type === 'info') {\n <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n </svg>\n }\n <!-- Progress spinner -->\n @if (toast.type === 'progress') {\n <span class=\"wm-toast-spinner\" aria-hidden=\"true\"></span>\n }\n\n <span class=\"wm-toast-message\">\n {{ toast.message }}\n @if (toast.type === 'progress' && toast.createdAt) {\n <span class=\"wm-toast-elapsed\"> ({{ elapsed(toast.createdAt) }})</span>\n }\n </span>\n\n <!-- Cancel button for progress toasts with an onCancel callback -->\n @if (toast.type === 'progress' && toast.onCancel) {\n <button class=\"wm-toast-cancel\" (click)=\"cancel(toast)\" aria-label=\"Cancel operation\">Cancel</button>\n }\n\n <!-- Dismiss button \u2014 always shown -->\n <button class=\"wm-toast-dismiss\" (click)=\"dismiss(toast.id)\" aria-label=\"Dismiss notification\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </svg>\n </button>\n </div>\n }\n</div>\n", styles: [".wm-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999;pointer-events:none}.wm-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .875rem;border-radius:var(--wm-radius-sm, 4px);box-shadow:var(--wm-shadow-md, 0 4px 12px rgba(0,0,0,.25));font-size:.8125rem;line-height:1.4;min-width:220px;max-width:360px;pointer-events:auto;animation:wm-toast-slide-in .15s ease-out both}.wm-toast--success{background:color-mix(in srgb,var(--wm-color-success) 20%,var(--wm-bg-raised));color:var(--wm-color-success);border:1px solid color-mix(in srgb,var(--wm-color-success) 40%,transparent)}.wm-toast--error{background:color-mix(in srgb,var(--wm-color-danger) 20%,var(--wm-bg-raised));color:var(--wm-color-danger);border:1px solid color-mix(in srgb,var(--wm-color-danger) 40%,transparent)}.wm-toast--info{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid var(--wm-border)}.wm-toast--progress{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid color-mix(in srgb,var(--wm-color-accent) 40%,transparent)}.wm-toast-icon{flex-shrink:0;margin-top:1px}.wm-toast-message{flex:1;line-height:1.4}.wm-toast-dismiss{flex-shrink:0;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;padding:0;margin-left:.25rem;transition:opacity .15s ease}.wm-toast-dismiss:hover{opacity:1}.wm-toast-spinner{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-top-color:var(--wm-color-accent-readable);border-radius:50%;flex-shrink:0;margin-top:1px;animation:wm-toast-spin .7s linear infinite}.wm-toast-elapsed{opacity:.6;font-size:.75rem;font-variant-numeric:tabular-nums}.wm-toast-cancel{flex-shrink:0;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--wm-radius-sm, 4px);color:inherit;opacity:.7;cursor:pointer;padding:.125rem .5rem;font-size:.75rem;transition:opacity .15s ease,border-color .15s ease}.wm-toast-cancel:hover{opacity:1;border-color:currentColor}@keyframes wm-toast-spin{to{transform:rotate(360deg)}}@keyframes wm-toast-slide-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.wm-toast{animation:none}}\n"] }]
|
|
1414
1414
|
}] });
|
|
1415
1415
|
|
|
1416
1416
|
class WmLicenseService {
|