@wildmason/aegis 1.15.0 → 1.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +120 -5
- package/dist/fesm2022/wildmason-aegis.mjs +489 -22
- package/dist/fesm2022/wildmason-aegis.mjs.map +1 -1
- package/dist/types/wildmason-aegis.d.ts +109 -1
- package/fonts/CascadiaCode-OFL.txt +94 -94
- package/inputs.css +66 -0
- package/package.json +65 -64
- package/themes.css +12 -12
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, forwardRef, ViewChild, Injectable, Injector, DestroyRef } from '@angular/core';
|
|
3
|
+
import { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, forwardRef, ViewChild, Injectable, Injector, DestroyRef, TemplateRef, contentChild } from '@angular/core';
|
|
4
4
|
import { CdkConnectedOverlay, CdkOverlayOrigin, createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } from '@angular/cdk/overlay';
|
|
5
5
|
import { NgTemplateOutlet } from '@angular/common';
|
|
6
6
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -61,11 +61,11 @@ class WmModal {
|
|
|
61
61
|
this.dismiss.emit();
|
|
62
62
|
}
|
|
63
63
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmModal, isStandalone: true, selector: "wm-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible()) {\
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmModal, isStandalone: true, selector: "wm-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible()) {\n <div [class]=\"align() === 'top'\n ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\n : 'fixed inset-0 flex items-center justify-center z-50'\"\n style=\"background: var(--wm-modal-backdrop)\"\n (click)=\"dismiss.emit()\">\n <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n cannot achieve that on projected content \u2014 see the class doc. -->\n <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content />\n </div>\n </div>\n}\n", dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
65
65
|
}
|
|
66
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmModal, decorators: [{
|
|
67
67
|
type: Component,
|
|
68
|
-
args: [{ selector: 'wm-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus], template: "@if (visible()) {\
|
|
68
|
+
args: [{ selector: 'wm-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus], template: "@if (visible()) {\n <div [class]=\"align() === 'top'\n ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\n : 'fixed inset-0 flex items-center justify-center z-50'\"\n style=\"background: var(--wm-modal-backdrop)\"\n (click)=\"dismiss.emit()\">\n <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n cannot achieve that on projected content \u2014 see the class doc. -->\n <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content />\n </div>\n </div>\n}\n" }]
|
|
69
69
|
}], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onEscape: [{
|
|
70
70
|
type: HostListener,
|
|
71
71
|
args: ['document:keydown.escape']
|
|
@@ -111,11 +111,11 @@ class WmDialog {
|
|
|
111
111
|
this.close();
|
|
112
112
|
}
|
|
113
113
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmDialog, isStandalone: true, selector: "wm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\
|
|
114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmDialog, isStandalone: true, selector: "wm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\n <!-- Backdrop \u2014 click to close -->\n <div class=\"wm-dialog-backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\n\n <!-- Panel -->\n <div\n class=\"wm-dialog\"\n [class]=\"'wm-dialog--' + size()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? 'wm-dialog-title' : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"wm-dialog-header\">\n <h2 class=\"wm-dialog-title\" id=\"wm-dialog-title\">{{ title() }}</h2>\n <button\n class=\"wm-dialog-close\"\n type=\"button\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" 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 class=\"wm-dialog-body\">\n <ng-content select=\"[body]\" />\n </div>\n </div>\n}\n", styles: [":host{display:contents}.wm-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,var(--wm-backdrop-opacity));z-index:100}.wm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:var(--wm-shadow-lg);width:var(--wm-dialog-width, 480px);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 4rem);display:flex;flex-direction:column;overflow:hidden;outline:none}.wm-dialog--sm{width:var(--wm-dialog-width, 360px)}.wm-dialog--lg{width:var(--wm-dialog-width, 640px)}.wm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.125rem 1.25rem;flex-shrink:0;background:var(--wm-bg-raised)}.wm-dialog-title{font-size:1rem;font-weight:600;color:var(--wm-text-primary);margin:0;line-height:1.3}.wm-dialog-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:var(--wm-radius-sm);border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;transition:background var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-dialog-close:hover{background:var(--wm-bg-hover);color:var(--wm-text-primary)}.wm-dialog-close:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:1px}.wm-dialog-body{flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;font-size:.875rem;color:var(--wm-text-secondary);line-height:1.6}@media(prefers-reduced-motion:reduce){.wm-dialog-close{transition:none}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
|
|
115
115
|
}
|
|
116
116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmDialog, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
|
-
args: [{ selector: 'wm-dialog', imports: [CdkTrapFocus], template: "@if (isOpen()) {\
|
|
118
|
+
args: [{ selector: 'wm-dialog', imports: [CdkTrapFocus], template: "@if (isOpen()) {\n <!-- Backdrop \u2014 click to close -->\n <div class=\"wm-dialog-backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\n\n <!-- Panel -->\n <div\n class=\"wm-dialog\"\n [class]=\"'wm-dialog--' + size()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? 'wm-dialog-title' : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"wm-dialog-header\">\n <h2 class=\"wm-dialog-title\" id=\"wm-dialog-title\">{{ title() }}</h2>\n <button\n class=\"wm-dialog-close\"\n type=\"button\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" 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 class=\"wm-dialog-body\">\n <ng-content select=\"[body]\" />\n </div>\n </div>\n}\n", styles: [":host{display:contents}.wm-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,var(--wm-backdrop-opacity));z-index:100}.wm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:var(--wm-shadow-lg);width:var(--wm-dialog-width, 480px);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 4rem);display:flex;flex-direction:column;overflow:hidden;outline:none}.wm-dialog--sm{width:var(--wm-dialog-width, 360px)}.wm-dialog--lg{width:var(--wm-dialog-width, 640px)}.wm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.125rem 1.25rem;flex-shrink:0;background:var(--wm-bg-raised)}.wm-dialog-title{font-size:1rem;font-weight:600;color:var(--wm-text-primary);margin:0;line-height:1.3}.wm-dialog-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:var(--wm-radius-sm);border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;transition:background var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-dialog-close:hover{background:var(--wm-bg-hover);color:var(--wm-text-primary)}.wm-dialog-close:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:1px}.wm-dialog-body{flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;font-size:.875rem;color:var(--wm-text-secondary);line-height:1.6}@media(prefers-reduced-motion:reduce){.wm-dialog-close{transition:none}}\n"] }]
|
|
119
119
|
}], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onEscape: [{
|
|
120
120
|
type: HostListener,
|
|
121
121
|
args: ['document:keydown.escape']
|
|
@@ -563,11 +563,11 @@ class WmTabs {
|
|
|
563
563
|
}
|
|
564
564
|
}
|
|
565
565
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
566
|
-
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\
|
|
566
|
+
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\n class=\"wm-tabs\"\n [class.wm-tabs--line]=\"variant() === 'line'\"\n [class.wm-tabs--pill]=\"variant() === 'pill'\"\n role=\"tablist\"\n #container\n (keydown)=\"onKeyDown($event, container)\"\n>\n @for (tab of tabs(); track tab.value(); let i = $index) {\n @if (tab.separatorBefore()) {\n <span\n class=\"wm-tab-separator\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n ></span>\n }\n <button\n type=\"button\"\n role=\"tab\"\n class=\"wm-tab\"\n [id]=\"'wm-tab-' + tab.value()\"\n [attr.aria-selected]=\"activeValue() === tab.value()\"\n [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n [class.is-active]=\"activeValue() === tab.value()\"\n [class.is-unavailable]=\"tab.unavailable()\"\n (click)=\"selectTab(tab, i)\"\n (focus)=\"focusedIndex.set(i)\"\n (blur)=\"onBlur()\"\n >\n <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n </button>\n }\n</div>\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-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.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)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@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 });
|
|
567
567
|
}
|
|
568
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTabs, decorators: [{
|
|
569
569
|
type: Component,
|
|
570
|
-
args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\
|
|
570
|
+
args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"wm-tabs\"\n [class.wm-tabs--line]=\"variant() === 'line'\"\n [class.wm-tabs--pill]=\"variant() === 'pill'\"\n role=\"tablist\"\n #container\n (keydown)=\"onKeyDown($event, container)\"\n>\n @for (tab of tabs(); track tab.value(); let i = $index) {\n @if (tab.separatorBefore()) {\n <span\n class=\"wm-tab-separator\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n ></span>\n }\n <button\n type=\"button\"\n role=\"tab\"\n class=\"wm-tab\"\n [id]=\"'wm-tab-' + tab.value()\"\n [attr.aria-selected]=\"activeValue() === tab.value()\"\n [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n [class.is-active]=\"activeValue() === tab.value()\"\n [class.is-unavailable]=\"tab.unavailable()\"\n (click)=\"selectTab(tab, i)\"\n (focus)=\"focusedIndex.set(i)\"\n (blur)=\"onBlur()\"\n >\n <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n </button>\n }\n</div>\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-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.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)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
|
|
571
571
|
}], 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 }] }] } });
|
|
572
572
|
|
|
573
573
|
class WmButton {
|
|
@@ -586,11 +586,11 @@ class WmButton {
|
|
|
586
586
|
return this.iconOnly() ? `${base} btn-icon-only` : base;
|
|
587
587
|
}, ...(ngDevMode ? [{ debugName: "btnClass" }] : []));
|
|
588
588
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: WmButton, isStandalone: true, selector: "wm-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, btnTitle: { classPropertyName: "btnTitle", publicName: "btnTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\
|
|
589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: WmButton, isStandalone: true, selector: "wm-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, btnTitle: { classPropertyName: "btnTitle", publicName: "btnTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n [class]=\"btnClass()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.title]=\"btnTitle() || null\"\n>\n <ng-content />\n</button>\n", styles: [":host{display:inline-flex}\n"] });
|
|
590
590
|
}
|
|
591
591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmButton, decorators: [{
|
|
592
592
|
type: Component,
|
|
593
|
-
args: [{ selector: 'wm-button', template: "<button\
|
|
593
|
+
args: [{ selector: 'wm-button', template: "<button\n [class]=\"btnClass()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.title]=\"btnTitle() || null\"\n>\n <ng-content />\n</button>\n", styles: [":host{display:inline-flex}\n"] }]
|
|
594
594
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], btnTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnTitle", required: false }] }] } });
|
|
595
595
|
|
|
596
596
|
/**
|
|
@@ -637,11 +637,11 @@ class Checkbox {
|
|
|
637
637
|
}
|
|
638
638
|
}
|
|
639
639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
640
|
-
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()\">\
|
|
640
|
+
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()\">\n <button\n type=\"button\"\n role=\"checkbox\"\n class=\"wm-checkbox-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-disabled]=\"disabled() ? true : null\"\n [disabled]=\"disabled() || null\"\n (click)=\"toggle()\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n >\n @if (indeterminate() && !checked()) {\n <!-- Dash for indeterminate (\"some selected\") state -->\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\n stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\n </svg>\n } @else if (checked()) {\n <!-- Animated checkmark for selected state -->\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\n fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </button>\n\n @if (label()) {\n <span class=\"wm-checkbox-label\">{{ label() }}</span>\n }\n</label>\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"] });
|
|
641
641
|
}
|
|
642
642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Checkbox, decorators: [{
|
|
643
643
|
type: Component,
|
|
644
|
-
args: [{ selector: 'wm-checkbox', template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\
|
|
644
|
+
args: [{ selector: 'wm-checkbox', template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\n <button\n type=\"button\"\n role=\"checkbox\"\n class=\"wm-checkbox-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-disabled]=\"disabled() ? true : null\"\n [disabled]=\"disabled() || null\"\n (click)=\"toggle()\"\n (keydown.space)=\"$event.preventDefault(); toggle()\"\n >\n @if (indeterminate() && !checked()) {\n <!-- Dash for indeterminate (\"some selected\") state -->\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\n stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\n </svg>\n } @else if (checked()) {\n <!-- Animated checkmark for selected state -->\n <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\n fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </button>\n\n @if (label()) {\n <span class=\"wm-checkbox-label\">{{ label() }}</span>\n }\n</label>\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"] }]
|
|
645
645
|
}], 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 }] }] } });
|
|
646
646
|
|
|
647
647
|
/**
|
|
@@ -738,7 +738,7 @@ class NumberInput {
|
|
|
738
738
|
useExisting: forwardRef(() => NumberInput),
|
|
739
739
|
multi: true,
|
|
740
740
|
},
|
|
741
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\
|
|
741
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Uses .wm-input-group and .wm-number-* classes from inputs.css.\n The input fills the group; the controls column sits at the trailing edge.\n-->\n<div\n class=\"wm-input-group wm-number-field\"\n [class.is-disabled]=\"disabled()\"\n>\n <input\n #inputEl\n type=\"number\"\n class=\"wm-input-bare wm-number-input\"\n [value]=\"internalValue() ?? ''\"\n [placeholder]=\"placeholder()\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [step]=\"step()\"\n [disabled]=\"disabled() || null\"\n (change)=\"onInputChange($event)\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouchedFn()\"\n />\n\n <div class=\"wm-number-controls\" aria-hidden=\"true\">\n <button\n type=\"button\"\n class=\"wm-number-btn\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || null\"\n (mousedown)=\"preventFocusSteal($event)\"\n (click)=\"increment()\"\n aria-label=\"Increment\"\n >\n <!-- chevron-up (lucide) -->\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"m18 15-6-6-6 6\"/>\n </svg>\n </button>\n <button\n type=\"button\"\n class=\"wm-number-btn\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || null\"\n (mousedown)=\"preventFocusSteal($event)\"\n (click)=\"decrement()\"\n aria-label=\"Decrement\"\n >\n <!-- chevron-down (lucide) -->\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.wm-number-field.is-disabled{opacity:.45;pointer-events:none}\n"] });
|
|
742
742
|
}
|
|
743
743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NumberInput, decorators: [{
|
|
744
744
|
type: Component,
|
|
@@ -748,7 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
748
748
|
useExisting: forwardRef(() => NumberInput),
|
|
749
749
|
multi: true,
|
|
750
750
|
},
|
|
751
|
-
], template: "<!--\
|
|
751
|
+
], template: "<!--\n Uses .wm-input-group and .wm-number-* classes from inputs.css.\n The input fills the group; the controls column sits at the trailing edge.\n-->\n<div\n class=\"wm-input-group wm-number-field\"\n [class.is-disabled]=\"disabled()\"\n>\n <input\n #inputEl\n type=\"number\"\n class=\"wm-input-bare wm-number-input\"\n [value]=\"internalValue() ?? ''\"\n [placeholder]=\"placeholder()\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [step]=\"step()\"\n [disabled]=\"disabled() || null\"\n (change)=\"onInputChange($event)\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouchedFn()\"\n />\n\n <div class=\"wm-number-controls\" aria-hidden=\"true\">\n <button\n type=\"button\"\n class=\"wm-number-btn\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || null\"\n (mousedown)=\"preventFocusSteal($event)\"\n (click)=\"increment()\"\n aria-label=\"Increment\"\n >\n <!-- chevron-up (lucide) -->\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"m18 15-6-6-6 6\"/>\n </svg>\n </button>\n <button\n type=\"button\"\n class=\"wm-number-btn\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || null\"\n (mousedown)=\"preventFocusSteal($event)\"\n (click)=\"decrement()\"\n aria-label=\"Decrement\"\n >\n <!-- chevron-down (lucide) -->\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.wm-number-field.is-disabled{opacity:.45;pointer-events:none}\n"] }]
|
|
752
752
|
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
|
|
753
753
|
|
|
754
754
|
/**
|
|
@@ -777,11 +777,11 @@ class Toggle {
|
|
|
777
777
|
}
|
|
778
778
|
}
|
|
779
779
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Toggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
780
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: Toggle, isStandalone: true, selector: "wm-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<button\
|
|
780
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: Toggle, isStandalone: true, selector: "wm-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<button\n type=\"button\"\n role=\"switch\"\n class=\"wm-toggle\"\n [class.is-on]=\"checked()\"\n [class.is-disabled]=\"disabled()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"disabled() ? true : null\"\n [disabled]=\"disabled() || null\"\n (click)=\"toggle()\"\n>\n <span class=\"wm-toggle-track\" aria-hidden=\"true\">\n <span class=\"wm-toggle-thumb\"></span>\n </span>\n</button>\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] });
|
|
781
781
|
}
|
|
782
782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Toggle, decorators: [{
|
|
783
783
|
type: Component,
|
|
784
|
-
args: [{ selector: 'wm-toggle', template: "<button\
|
|
784
|
+
args: [{ selector: 'wm-toggle', template: "<button\n type=\"button\"\n role=\"switch\"\n class=\"wm-toggle\"\n [class.is-on]=\"checked()\"\n [class.is-disabled]=\"disabled()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"disabled() ? true : null\"\n [disabled]=\"disabled() || null\"\n (click)=\"toggle()\"\n>\n <span class=\"wm-toggle-track\" aria-hidden=\"true\">\n <span class=\"wm-toggle-thumb\"></span>\n </span>\n</button>\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] }]
|
|
785
785
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
786
786
|
|
|
787
787
|
/**
|
|
@@ -832,11 +832,11 @@ class PageHeader {
|
|
|
832
832
|
subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
|
|
833
833
|
badgeLabel = input(...(ngDevMode ? [undefined, { debugName: "badgeLabel" }] : []));
|
|
834
834
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageHeader, isStandalone: true, selector: "wm-page-header", inputs: { flavourText: { classPropertyName: "flavourText", publicName: "flavourText", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"wm-page-header\">\
|
|
835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageHeader, isStandalone: true, selector: "wm-page-header", inputs: { flavourText: { classPropertyName: "flavourText", publicName: "flavourText", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"wm-page-header\">\n <div class=\"wm-page-header__left\">\n <div class=\"wm-page-header__eyebrow\">\n <ng-content select=\"[icon]\" />\n <span>{{ flavourText() }}</span>\n </div>\n <h2 class=\"wm-page-header__title\">{{ title() }}</h2>\n @if (subtitle()) {\n <p class=\"wm-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"wm-page-header__right\">\n <div class=\"wm-page-header__status\">\n @if (badgeLabel()) {\n <span class=\"wm-page-header__badge\">{{ badgeLabel() }}</span>\n }\n <ng-content select=\"[back]\" />\n </div>\n <div class=\"wm-page-header__actions\">\n <ng-content />\n </div>\n </div>\n</header>\n", styles: ["wm-page-header,.wm-page-header{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--wm-border-subtle);padding-bottom:1.5rem}.wm-page-header__left{display:flex;flex-direction:column;gap:4px}.wm-page-header__eyebrow{display:flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wm-text-muted)}.wm-page-header__eyebrow svg,.wm-page-header__eyebrow img{width:12px;height:12px;flex-shrink:0}.wm-page-header__title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--wm-text-primary)}.wm-page-header__subtitle{margin:0;font-size:.875rem;color:var(--wm-text-muted)}.wm-page-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.wm-page-header__status,.wm-page-header__actions{display:flex;align-items:center;gap:12px}.wm-page-header__actions:empty{display:none}.wm-page-header__badge{font-size:.6875rem;font-family:var(--wm-font-mono, monospace);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--wm-text-muted);background:var(--wm-bg-float);padding:4px 8px;border-radius:var(--wm-radius-sm);border:1px solid var(--wm-border-subtle);box-shadow:0 1px 2px #0000000d;white-space:nowrap}@media(max-width:767px){wm-page-header,.wm-page-header{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;border-bottom:none}.wm-page-header__right{align-items:flex-start}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
836
836
|
}
|
|
837
837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageHeader, decorators: [{
|
|
838
838
|
type: Component,
|
|
839
|
-
args: [{ selector: 'wm-page-header', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"wm-page-header\">\
|
|
839
|
+
args: [{ selector: 'wm-page-header', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"wm-page-header\">\n <div class=\"wm-page-header__left\">\n <div class=\"wm-page-header__eyebrow\">\n <ng-content select=\"[icon]\" />\n <span>{{ flavourText() }}</span>\n </div>\n <h2 class=\"wm-page-header__title\">{{ title() }}</h2>\n @if (subtitle()) {\n <p class=\"wm-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"wm-page-header__right\">\n <div class=\"wm-page-header__status\">\n @if (badgeLabel()) {\n <span class=\"wm-page-header__badge\">{{ badgeLabel() }}</span>\n }\n <ng-content select=\"[back]\" />\n </div>\n <div class=\"wm-page-header__actions\">\n <ng-content />\n </div>\n </div>\n</header>\n", styles: ["wm-page-header,.wm-page-header{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--wm-border-subtle);padding-bottom:1.5rem}.wm-page-header__left{display:flex;flex-direction:column;gap:4px}.wm-page-header__eyebrow{display:flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wm-text-muted)}.wm-page-header__eyebrow svg,.wm-page-header__eyebrow img{width:12px;height:12px;flex-shrink:0}.wm-page-header__title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--wm-text-primary)}.wm-page-header__subtitle{margin:0;font-size:.875rem;color:var(--wm-text-muted)}.wm-page-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.wm-page-header__status,.wm-page-header__actions{display:flex;align-items:center;gap:12px}.wm-page-header__actions:empty{display:none}.wm-page-header__badge{font-size:.6875rem;font-family:var(--wm-font-mono, monospace);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--wm-text-muted);background:var(--wm-bg-float);padding:4px 8px;border-radius:var(--wm-radius-sm);border:1px solid var(--wm-border-subtle);box-shadow:0 1px 2px #0000000d;white-space:nowrap}@media(max-width:767px){wm-page-header,.wm-page-header{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;border-bottom:none}.wm-page-header__right{align-items:flex-start}}\n"] }]
|
|
840
840
|
}], propDecorators: { flavourText: [{ type: i0.Input, args: [{ isSignal: true, alias: "flavourText", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }] } });
|
|
841
841
|
|
|
842
842
|
/** Module-level counter for unique panel instance IDs. */
|
|
@@ -1673,7 +1673,7 @@ class WmTooltipPanel {
|
|
|
1673
1673
|
[class.wm-tooltip-panel--visible]="visible()"
|
|
1674
1674
|
[id]="panelId()"
|
|
1675
1675
|
role="tooltip"
|
|
1676
|
-
>{{ text() }}</div>`, isInline: true, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1676
|
+
>{{ text() }}</div>`, isInline: true, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-rich-tooltip-panel{max-width:var(--wm-rich-tooltip-max-width, 320px);white-space:normal}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1677
1677
|
}
|
|
1678
1678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTooltipPanel, decorators: [{
|
|
1679
1679
|
type: Component,
|
|
@@ -1682,7 +1682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1682
1682
|
[class.wm-tooltip-panel--visible]="visible()"
|
|
1683
1683
|
[id]="panelId()"
|
|
1684
1684
|
role="tooltip"
|
|
1685
|
-
>{{ text() }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"] }]
|
|
1685
|
+
>{{ text() }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-rich-tooltip-panel{max-width:var(--wm-rich-tooltip-max-width, 320px);white-space:normal}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"] }]
|
|
1686
1686
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
|
|
1687
1687
|
|
|
1688
1688
|
/**
|
|
@@ -1731,7 +1731,7 @@ function withoutIdToken(value, id) {
|
|
|
1731
1731
|
}
|
|
1732
1732
|
|
|
1733
1733
|
/** Grace period before a pointer leaving the host closes the tooltip. */
|
|
1734
|
-
const HIDE_DELAY_MS = 120;
|
|
1734
|
+
const HIDE_DELAY_MS$1 = 120;
|
|
1735
1735
|
let nextId = 0;
|
|
1736
1736
|
/**
|
|
1737
1737
|
* WmTooltip — accessible floating explanation for any element.
|
|
@@ -1919,7 +1919,7 @@ class WmTooltip {
|
|
|
1919
1919
|
if (this.pointerOnHost || this.pointerOnPanel || this.hostFocused)
|
|
1920
1920
|
return;
|
|
1921
1921
|
this.hideNow();
|
|
1922
|
-
}, HIDE_DELAY_MS);
|
|
1922
|
+
}, HIDE_DELAY_MS$1);
|
|
1923
1923
|
}
|
|
1924
1924
|
clearTimer(which) {
|
|
1925
1925
|
const timer = which === 'show' ? this.showTimer : this.hideTimer;
|
|
@@ -2138,6 +2138,473 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
2138
2138
|
}]
|
|
2139
2139
|
}], ctorParameters: () => [], propDecorators: { wmTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltip", required: false }] }], wmTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipPosition", required: false }] }], wmTooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipDelay", required: false }] }], wmTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipDisabled", required: false }] }], wmTooltipRelation: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipRelation", required: false }] }], wmTooltipFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipFocusable", required: false }] }] } });
|
|
2140
2140
|
|
|
2141
|
+
/**
|
|
2142
|
+
* The floating surface a `wm-rich-tooltip` renders into.
|
|
2143
|
+
*
|
|
2144
|
+
* This is deliberately a separate panel from `WmTooltipPanel`: the latter's
|
|
2145
|
+
* text node owns `white-space: pre-line`, while this panel must leave the
|
|
2146
|
+
* projected template's markup and layout intact.
|
|
2147
|
+
*/
|
|
2148
|
+
class WmRichTooltipPanel {
|
|
2149
|
+
/** The caller-owned Angular template rendered as the tooltip body. */
|
|
2150
|
+
content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
2151
|
+
/** Id the trigger points at with aria-describedby / aria-labelledby. */
|
|
2152
|
+
panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : []));
|
|
2153
|
+
/** Drives the enter transition after the overlay has attached. */
|
|
2154
|
+
visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
2155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: WmRichTooltipPanel, isStandalone: true, selector: "wm-rich-tooltip-panel", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div
|
|
2157
|
+
class="wm-tooltip-panel wm-rich-tooltip-panel"
|
|
2158
|
+
[class.wm-tooltip-panel--visible]="visible()"
|
|
2159
|
+
[id]="panelId()"
|
|
2160
|
+
role="tooltip"
|
|
2161
|
+
>
|
|
2162
|
+
<ng-container [ngTemplateOutlet]="content()"></ng-container>
|
|
2163
|
+
</div>`, isInline: true, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-rich-tooltip-panel{max-width:var(--wm-rich-tooltip-max-width, 320px);white-space:normal}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2164
|
+
}
|
|
2165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltipPanel, decorators: [{
|
|
2166
|
+
type: Component,
|
|
2167
|
+
args: [{ selector: 'wm-rich-tooltip-panel', imports: [NgTemplateOutlet], template: `<div
|
|
2168
|
+
class="wm-tooltip-panel wm-rich-tooltip-panel"
|
|
2169
|
+
[class.wm-tooltip-panel--visible]="visible()"
|
|
2170
|
+
[id]="panelId()"
|
|
2171
|
+
role="tooltip"
|
|
2172
|
+
>
|
|
2173
|
+
<ng-container [ngTemplateOutlet]="content()"></ng-container>
|
|
2174
|
+
</div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-rich-tooltip-panel{max-width:var(--wm-rich-tooltip-max-width, 320px);white-space:normal}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"] }]
|
|
2175
|
+
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
|
|
2176
|
+
|
|
2177
|
+
/** Marks the projected element that owns a rich tooltip. */
|
|
2178
|
+
class WmRichTooltipTrigger {
|
|
2179
|
+
elementRef = inject((ElementRef));
|
|
2180
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2181
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: WmRichTooltipTrigger, isStandalone: true, selector: "[wmRichTooltipTrigger]", ngImport: i0 });
|
|
2182
|
+
}
|
|
2183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltipTrigger, decorators: [{
|
|
2184
|
+
type: Directive,
|
|
2185
|
+
args: [{
|
|
2186
|
+
selector: '[wmRichTooltipTrigger]',
|
|
2187
|
+
}]
|
|
2188
|
+
}] });
|
|
2189
|
+
/** Marks the projected Angular template used as a rich tooltip's body. */
|
|
2190
|
+
class WmRichTooltipContent {
|
|
2191
|
+
templateRef = inject((TemplateRef));
|
|
2192
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2193
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: WmRichTooltipContent, isStandalone: true, selector: "ng-template[wmRichTooltipContent]", ngImport: i0 });
|
|
2194
|
+
}
|
|
2195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltipContent, decorators: [{
|
|
2196
|
+
type: Directive,
|
|
2197
|
+
args: [{
|
|
2198
|
+
selector: 'ng-template[wmRichTooltipContent]',
|
|
2199
|
+
}]
|
|
2200
|
+
}] });
|
|
2201
|
+
let nextRichTooltipId = 0;
|
|
2202
|
+
const HIDE_DELAY_MS = 120;
|
|
2203
|
+
/**
|
|
2204
|
+
* `wm-rich-tooltip` — a tooltip-shaped CDK overlay with projected Angular
|
|
2205
|
+
* template content.
|
|
2206
|
+
*
|
|
2207
|
+
* ```html
|
|
2208
|
+
* <wm-rich-tooltip position="top">
|
|
2209
|
+
* <span wmRichTooltipTrigger>feature/checkout</span>
|
|
2210
|
+
* <ng-template wmRichTooltipContent>
|
|
2211
|
+
* <strong>feature/checkout</strong>
|
|
2212
|
+
* <div class="legend-row">
|
|
2213
|
+
* <span class="swatch" aria-hidden="true"></span>
|
|
2214
|
+
* <span>Pull request linked</span>
|
|
2215
|
+
* </div>
|
|
2216
|
+
* </ng-template>
|
|
2217
|
+
* </wm-rich-tooltip>
|
|
2218
|
+
* ```
|
|
2219
|
+
*
|
|
2220
|
+
* The body is an Angular `TemplateRef`, not an HTML string. Consumers can use
|
|
2221
|
+
* normal Angular markup, bindings, loops, and components; callers should not
|
|
2222
|
+
* use this as a path for unsanitized user HTML. If a caller explicitly uses
|
|
2223
|
+
* Angular's `[innerHTML]`, Angular's normal sanitizer remains the boundary.
|
|
2224
|
+
*
|
|
2225
|
+
* The interaction contract matches `WmTooltip`: hover and keyboard focus,
|
|
2226
|
+
* Escape dismissal, a hoverable panel, scroll/resize re-anchoring, clipping
|
|
2227
|
+
* detection, and an `aria-describedby` relationship by default. Rich tooltip
|
|
2228
|
+
* content should remain non-interactive; use `WmPopover` for menus, links,
|
|
2229
|
+
* forms, or other content that needs focus and interaction.
|
|
2230
|
+
*/
|
|
2231
|
+
class WmRichTooltip {
|
|
2232
|
+
/** Preferred side. Flips automatically when the viewport has no room. */
|
|
2233
|
+
position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
2234
|
+
/** Milliseconds a pointer must rest on the trigger before opening. */
|
|
2235
|
+
delay = input(250, ...(ngDevMode ? [{ debugName: "delay" }] : []));
|
|
2236
|
+
/** Suppress the tooltip without removing its projected content. */
|
|
2237
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2238
|
+
/** Whether the panel describes the trigger or names it. */
|
|
2239
|
+
relation = input('description', ...(ngDevMode ? [{ debugName: "relation" }] : []));
|
|
2240
|
+
/** Make a non-focusable projected trigger reachable by keyboard when needed. */
|
|
2241
|
+
focusable = input(false, ...(ngDevMode ? [{ debugName: "focusable" }] : []));
|
|
2242
|
+
injector = inject(Injector);
|
|
2243
|
+
renderer = inject(Renderer2);
|
|
2244
|
+
triggerQuery = contentChild(WmRichTooltipTrigger, ...(ngDevMode ? [{ debugName: "triggerQuery" }] : []));
|
|
2245
|
+
contentQuery = contentChild(WmRichTooltipContent, ...(ngDevMode ? [{ debugName: "contentQuery" }] : []));
|
|
2246
|
+
panelId = `wm-rich-tooltip-${nextRichTooltipId++}`;
|
|
2247
|
+
triggerElement = null;
|
|
2248
|
+
contentTemplate = null;
|
|
2249
|
+
triggerCleanups = [];
|
|
2250
|
+
addedTabIndex = false;
|
|
2251
|
+
overlayRef = null;
|
|
2252
|
+
panelRef = null;
|
|
2253
|
+
portal = null;
|
|
2254
|
+
positionChanges = null;
|
|
2255
|
+
showTimer = null;
|
|
2256
|
+
hideTimer = null;
|
|
2257
|
+
raiseFrame = null;
|
|
2258
|
+
pointerOnTrigger = false;
|
|
2259
|
+
pointerOnPanel = false;
|
|
2260
|
+
triggerFocused = false;
|
|
2261
|
+
detachDocumentListeners = null;
|
|
2262
|
+
clippingAncestors = [];
|
|
2263
|
+
constructor() {
|
|
2264
|
+
inject(DestroyRef).onDestroy(() => this.teardown());
|
|
2265
|
+
effect(() => {
|
|
2266
|
+
const trigger = this.triggerQuery();
|
|
2267
|
+
const content = this.contentQuery();
|
|
2268
|
+
const focusable = this.focusable();
|
|
2269
|
+
if (!trigger || !content) {
|
|
2270
|
+
this.hideNow();
|
|
2271
|
+
this.unbindTrigger();
|
|
2272
|
+
this.contentTemplate = null;
|
|
2273
|
+
return;
|
|
2274
|
+
}
|
|
2275
|
+
const element = trigger.elementRef.nativeElement;
|
|
2276
|
+
if (element !== this.triggerElement)
|
|
2277
|
+
this.bindTrigger(element);
|
|
2278
|
+
this.contentTemplate = content.templateRef;
|
|
2279
|
+
this.updateFocusable(element, focusable);
|
|
2280
|
+
if (this.panelRef) {
|
|
2281
|
+
this.panelRef.setInput('content', this.contentTemplate);
|
|
2282
|
+
this.panelRef.changeDetectorRef.detectChanges();
|
|
2283
|
+
}
|
|
2284
|
+
});
|
|
2285
|
+
effect(() => {
|
|
2286
|
+
if (this.disabled())
|
|
2287
|
+
this.hideNow();
|
|
2288
|
+
});
|
|
2289
|
+
}
|
|
2290
|
+
/** Open the rich tooltip immediately, bypassing the hover delay. */
|
|
2291
|
+
show() {
|
|
2292
|
+
this.clearTimer('show');
|
|
2293
|
+
this.clearTimer('hide');
|
|
2294
|
+
const trigger = this.triggerElement;
|
|
2295
|
+
const content = this.contentTemplate ?? this.contentQuery()?.templateRef ?? null;
|
|
2296
|
+
if (this.overlayRef?.hasAttached())
|
|
2297
|
+
return;
|
|
2298
|
+
if (!trigger || !content || this.disabled())
|
|
2299
|
+
return;
|
|
2300
|
+
const overlayRef = this.ensureOverlay(trigger);
|
|
2301
|
+
this.panelRef = overlayRef.attach(this.portal);
|
|
2302
|
+
this.panelRef.setInput('content', content);
|
|
2303
|
+
this.panelRef.setInput('panelId', this.panelId);
|
|
2304
|
+
this.panelRef.changeDetectorRef.detectChanges();
|
|
2305
|
+
this.linkTriggerToPanel(trigger);
|
|
2306
|
+
this.clippingAncestors = this.resolveClippingAncestors(trigger);
|
|
2307
|
+
this.attachDocumentListeners();
|
|
2308
|
+
this.raiseFrame = requestAnimationFrame(() => {
|
|
2309
|
+
this.raiseFrame = null;
|
|
2310
|
+
this.panelRef?.setInput('visible', true);
|
|
2311
|
+
this.panelRef?.changeDetectorRef.detectChanges();
|
|
2312
|
+
});
|
|
2313
|
+
}
|
|
2314
|
+
/** Close the rich tooltip immediately, without the pointer grace period. */
|
|
2315
|
+
hideNow() {
|
|
2316
|
+
this.clearTimer('show');
|
|
2317
|
+
this.clearTimer('hide');
|
|
2318
|
+
if (this.raiseFrame !== null) {
|
|
2319
|
+
cancelAnimationFrame(this.raiseFrame);
|
|
2320
|
+
this.raiseFrame = null;
|
|
2321
|
+
}
|
|
2322
|
+
this.releaseDocumentListeners();
|
|
2323
|
+
this.unlinkTriggerFromPanel();
|
|
2324
|
+
this.clippingAncestors = [];
|
|
2325
|
+
if (this.overlayRef?.hasAttached())
|
|
2326
|
+
this.overlayRef.detach();
|
|
2327
|
+
this.panelRef = null;
|
|
2328
|
+
}
|
|
2329
|
+
/** True while the rich tooltip panel is attached. */
|
|
2330
|
+
get isOpen() {
|
|
2331
|
+
return this.overlayRef?.hasAttached() === true;
|
|
2332
|
+
}
|
|
2333
|
+
bindTrigger(element) {
|
|
2334
|
+
if (this.triggerElement === element && this.triggerCleanups.length > 0)
|
|
2335
|
+
return;
|
|
2336
|
+
this.hideNow();
|
|
2337
|
+
this.unbindTrigger();
|
|
2338
|
+
this.triggerElement = element;
|
|
2339
|
+
this.triggerCleanups = [
|
|
2340
|
+
this.renderer.listen(element, 'mouseenter', () => this.onPointerEnterTrigger()),
|
|
2341
|
+
this.renderer.listen(element, 'mouseleave', () => this.onPointerLeaveTrigger()),
|
|
2342
|
+
this.renderer.listen(element, 'focusin', () => this.onFocusTrigger()),
|
|
2343
|
+
this.renderer.listen(element, 'focusout', () => this.onBlurTrigger()),
|
|
2344
|
+
this.renderer.listen(element, 'click', () => this.hideNow()),
|
|
2345
|
+
];
|
|
2346
|
+
}
|
|
2347
|
+
unbindTrigger() {
|
|
2348
|
+
for (const cleanup of this.triggerCleanups)
|
|
2349
|
+
cleanup();
|
|
2350
|
+
this.triggerCleanups = [];
|
|
2351
|
+
if (this.addedTabIndex && this.triggerElement?.getAttribute('tabindex') === '0') {
|
|
2352
|
+
this.renderer.removeAttribute(this.triggerElement, 'tabindex');
|
|
2353
|
+
}
|
|
2354
|
+
this.addedTabIndex = false;
|
|
2355
|
+
this.triggerElement = null;
|
|
2356
|
+
}
|
|
2357
|
+
updateFocusable(element, focusable) {
|
|
2358
|
+
if (focusable && !this.isNativelyFocusable(element)) {
|
|
2359
|
+
if (!element.hasAttribute('tabindex')) {
|
|
2360
|
+
this.renderer.setAttribute(element, 'tabindex', '0');
|
|
2361
|
+
this.addedTabIndex = true;
|
|
2362
|
+
}
|
|
2363
|
+
return;
|
|
2364
|
+
}
|
|
2365
|
+
if (this.addedTabIndex && element.getAttribute('tabindex') === '0') {
|
|
2366
|
+
this.renderer.removeAttribute(element, 'tabindex');
|
|
2367
|
+
this.addedTabIndex = false;
|
|
2368
|
+
}
|
|
2369
|
+
}
|
|
2370
|
+
onPointerEnterTrigger() {
|
|
2371
|
+
this.pointerOnTrigger = true;
|
|
2372
|
+
this.scheduleShow();
|
|
2373
|
+
}
|
|
2374
|
+
onPointerLeaveTrigger() {
|
|
2375
|
+
this.pointerOnTrigger = false;
|
|
2376
|
+
this.scheduleHide();
|
|
2377
|
+
}
|
|
2378
|
+
onFocusTrigger() {
|
|
2379
|
+
if (!this.matchesFocusVisible())
|
|
2380
|
+
return;
|
|
2381
|
+
this.triggerFocused = true;
|
|
2382
|
+
this.show();
|
|
2383
|
+
}
|
|
2384
|
+
onBlurTrigger() {
|
|
2385
|
+
this.triggerFocused = false;
|
|
2386
|
+
this.scheduleHide();
|
|
2387
|
+
}
|
|
2388
|
+
scheduleShow() {
|
|
2389
|
+
if (this.isOpen) {
|
|
2390
|
+
this.clearTimer('hide');
|
|
2391
|
+
return;
|
|
2392
|
+
}
|
|
2393
|
+
if (this.disabled() || !this.triggerElement || !this.contentTemplate)
|
|
2394
|
+
return;
|
|
2395
|
+
this.clearTimer('hide');
|
|
2396
|
+
this.clearTimer('show');
|
|
2397
|
+
const delay = Math.max(0, this.delay());
|
|
2398
|
+
this.showTimer = setTimeout(() => {
|
|
2399
|
+
this.showTimer = null;
|
|
2400
|
+
this.show();
|
|
2401
|
+
}, delay);
|
|
2402
|
+
}
|
|
2403
|
+
scheduleHide() {
|
|
2404
|
+
this.clearTimer('show');
|
|
2405
|
+
this.clearTimer('hide');
|
|
2406
|
+
this.hideTimer = setTimeout(() => {
|
|
2407
|
+
this.hideTimer = null;
|
|
2408
|
+
if (this.pointerOnTrigger || this.pointerOnPanel || this.triggerFocused)
|
|
2409
|
+
return;
|
|
2410
|
+
this.hideNow();
|
|
2411
|
+
}, HIDE_DELAY_MS);
|
|
2412
|
+
}
|
|
2413
|
+
clearTimer(which) {
|
|
2414
|
+
const timer = which === 'show' ? this.showTimer : this.hideTimer;
|
|
2415
|
+
if (timer === null)
|
|
2416
|
+
return;
|
|
2417
|
+
clearTimeout(timer);
|
|
2418
|
+
if (which === 'show')
|
|
2419
|
+
this.showTimer = null;
|
|
2420
|
+
else
|
|
2421
|
+
this.hideTimer = null;
|
|
2422
|
+
}
|
|
2423
|
+
ensureOverlay(trigger) {
|
|
2424
|
+
if (this.overlayRef)
|
|
2425
|
+
return this.overlayRef;
|
|
2426
|
+
const positionStrategy = createFlexibleConnectedPositionStrategy(this.injector, trigger)
|
|
2427
|
+
.withFlexibleDimensions(false)
|
|
2428
|
+
.withPush(true)
|
|
2429
|
+
.withPositions(this.positions());
|
|
2430
|
+
this.overlayRef = createOverlayRef(this.injector, {
|
|
2431
|
+
positionStrategy,
|
|
2432
|
+
scrollStrategy: createRepositionScrollStrategy(this.injector),
|
|
2433
|
+
panelClass: ['wm-tooltip-overlay', 'wm-rich-tooltip-overlay'],
|
|
2434
|
+
hasBackdrop: false,
|
|
2435
|
+
});
|
|
2436
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
2437
|
+
overlayEl.addEventListener('mouseenter', this.onPointerEnterPanel);
|
|
2438
|
+
overlayEl.addEventListener('mouseleave', this.onPointerLeavePanel);
|
|
2439
|
+
this.positionChanges = positionStrategy.positionChanges.subscribe((change) => {
|
|
2440
|
+
const above = change.connectionPair.overlayY === 'bottom';
|
|
2441
|
+
overlayEl.classList.toggle('wm-tooltip-above', above);
|
|
2442
|
+
});
|
|
2443
|
+
this.portal = new ComponentPortal(WmRichTooltipPanel, null, this.injector);
|
|
2444
|
+
return this.overlayRef;
|
|
2445
|
+
}
|
|
2446
|
+
positions() {
|
|
2447
|
+
const offset = 6;
|
|
2448
|
+
const below = {
|
|
2449
|
+
originX: 'center', originY: 'bottom',
|
|
2450
|
+
overlayX: 'center', overlayY: 'top', offsetY: offset,
|
|
2451
|
+
};
|
|
2452
|
+
const above = {
|
|
2453
|
+
originX: 'center', originY: 'top',
|
|
2454
|
+
overlayX: 'center', overlayY: 'bottom', offsetY: -offset,
|
|
2455
|
+
};
|
|
2456
|
+
const after = {
|
|
2457
|
+
originX: 'end', originY: 'center',
|
|
2458
|
+
overlayX: 'start', overlayY: 'center', offsetX: offset,
|
|
2459
|
+
};
|
|
2460
|
+
const before = {
|
|
2461
|
+
originX: 'start', originY: 'center',
|
|
2462
|
+
overlayX: 'end', overlayY: 'center', offsetX: -offset,
|
|
2463
|
+
};
|
|
2464
|
+
switch (this.position()) {
|
|
2465
|
+
case 'top': return [above, below, after, before];
|
|
2466
|
+
case 'left': return [before, after, above, below];
|
|
2467
|
+
case 'right': return [after, before, above, below];
|
|
2468
|
+
default: return [below, above, after, before];
|
|
2469
|
+
}
|
|
2470
|
+
}
|
|
2471
|
+
onPointerEnterPanel = () => {
|
|
2472
|
+
this.pointerOnPanel = true;
|
|
2473
|
+
this.clearTimer('hide');
|
|
2474
|
+
};
|
|
2475
|
+
onPointerLeavePanel = () => {
|
|
2476
|
+
this.pointerOnPanel = false;
|
|
2477
|
+
this.scheduleHide();
|
|
2478
|
+
};
|
|
2479
|
+
attachDocumentListeners() {
|
|
2480
|
+
if (this.detachDocumentListeners)
|
|
2481
|
+
return;
|
|
2482
|
+
const onKeydown = (event) => {
|
|
2483
|
+
if (event.key === 'Escape')
|
|
2484
|
+
this.hideNow();
|
|
2485
|
+
};
|
|
2486
|
+
const onPointerDown = () => this.hideNow();
|
|
2487
|
+
const stopFollowing = onViewportChange(() => this.reanchor());
|
|
2488
|
+
document.addEventListener('keydown', onKeydown, true);
|
|
2489
|
+
document.addEventListener('pointerdown', onPointerDown, true);
|
|
2490
|
+
this.detachDocumentListeners = () => {
|
|
2491
|
+
document.removeEventListener('keydown', onKeydown, true);
|
|
2492
|
+
document.removeEventListener('pointerdown', onPointerDown, true);
|
|
2493
|
+
stopFollowing();
|
|
2494
|
+
};
|
|
2495
|
+
}
|
|
2496
|
+
releaseDocumentListeners() {
|
|
2497
|
+
this.detachDocumentListeners?.();
|
|
2498
|
+
this.detachDocumentListeners = null;
|
|
2499
|
+
}
|
|
2500
|
+
reanchor() {
|
|
2501
|
+
if (!this.overlayRef?.hasAttached())
|
|
2502
|
+
return;
|
|
2503
|
+
if (this.isTriggerClipped()) {
|
|
2504
|
+
this.hideNow();
|
|
2505
|
+
return;
|
|
2506
|
+
}
|
|
2507
|
+
this.overlayRef.updatePosition();
|
|
2508
|
+
}
|
|
2509
|
+
resolveClippingAncestors(trigger) {
|
|
2510
|
+
const clipping = [];
|
|
2511
|
+
let node = trigger.parentElement;
|
|
2512
|
+
while (node) {
|
|
2513
|
+
const style = getComputedStyle(node);
|
|
2514
|
+
const clips = [style.overflow, style.overflowX, style.overflowY].some((value) => value === 'auto' || value === 'scroll' || value === 'hidden');
|
|
2515
|
+
if (clips)
|
|
2516
|
+
clipping.push(node);
|
|
2517
|
+
node = node.parentElement;
|
|
2518
|
+
}
|
|
2519
|
+
return clipping;
|
|
2520
|
+
}
|
|
2521
|
+
isTriggerClipped() {
|
|
2522
|
+
if (!this.triggerElement)
|
|
2523
|
+
return true;
|
|
2524
|
+
const trigger = this.triggerElement.getBoundingClientRect();
|
|
2525
|
+
const outside = (bounds) => trigger.bottom < bounds.top ||
|
|
2526
|
+
trigger.top > bounds.bottom ||
|
|
2527
|
+
trigger.right < bounds.left ||
|
|
2528
|
+
trigger.left > bounds.right;
|
|
2529
|
+
const viewport = {
|
|
2530
|
+
top: 0,
|
|
2531
|
+
left: 0,
|
|
2532
|
+
bottom: window.innerHeight || document.documentElement.clientHeight,
|
|
2533
|
+
right: window.innerWidth || document.documentElement.clientWidth,
|
|
2534
|
+
};
|
|
2535
|
+
if (outside(viewport))
|
|
2536
|
+
return true;
|
|
2537
|
+
return this.clippingAncestors.some((ancestor) => outside(ancestor.getBoundingClientRect()));
|
|
2538
|
+
}
|
|
2539
|
+
relationAttribute() {
|
|
2540
|
+
return this.relation() === 'label' ? 'aria-labelledby' : 'aria-describedby';
|
|
2541
|
+
}
|
|
2542
|
+
linkTriggerToPanel(trigger) {
|
|
2543
|
+
const attribute = this.relationAttribute();
|
|
2544
|
+
const next = withIdToken(trigger.getAttribute(attribute), this.panelId);
|
|
2545
|
+
this.renderer.setAttribute(trigger, attribute, next);
|
|
2546
|
+
}
|
|
2547
|
+
unlinkTriggerFromPanel() {
|
|
2548
|
+
if (!this.triggerElement)
|
|
2549
|
+
return;
|
|
2550
|
+
for (const attribute of ['aria-describedby', 'aria-labelledby']) {
|
|
2551
|
+
const current = this.triggerElement.getAttribute(attribute);
|
|
2552
|
+
if (current === null)
|
|
2553
|
+
continue;
|
|
2554
|
+
const next = withoutIdToken(current, this.panelId);
|
|
2555
|
+
if (next === null)
|
|
2556
|
+
this.renderer.removeAttribute(this.triggerElement, attribute);
|
|
2557
|
+
else if (next !== current)
|
|
2558
|
+
this.renderer.setAttribute(this.triggerElement, attribute, next);
|
|
2559
|
+
}
|
|
2560
|
+
}
|
|
2561
|
+
isNativelyFocusable(element) {
|
|
2562
|
+
if (element.hasAttribute('tabindex'))
|
|
2563
|
+
return true;
|
|
2564
|
+
return ['a', 'button', 'input', 'select', 'textarea', 'summary'].includes(element.tagName.toLowerCase());
|
|
2565
|
+
}
|
|
2566
|
+
matchesFocusVisible() {
|
|
2567
|
+
if (!this.triggerElement)
|
|
2568
|
+
return false;
|
|
2569
|
+
try {
|
|
2570
|
+
return this.triggerElement.matches(':focus-visible');
|
|
2571
|
+
}
|
|
2572
|
+
catch {
|
|
2573
|
+
return true;
|
|
2574
|
+
}
|
|
2575
|
+
}
|
|
2576
|
+
teardown() {
|
|
2577
|
+
this.hideNow();
|
|
2578
|
+
this.unbindTrigger();
|
|
2579
|
+
const overlayEl = this.overlayRef?.overlayElement;
|
|
2580
|
+
overlayEl?.removeEventListener('mouseenter', this.onPointerEnterPanel);
|
|
2581
|
+
overlayEl?.removeEventListener('mouseleave', this.onPointerLeavePanel);
|
|
2582
|
+
this.positionChanges?.unsubscribe();
|
|
2583
|
+
this.positionChanges = null;
|
|
2584
|
+
this.overlayRef?.dispose();
|
|
2585
|
+
this.overlayRef = null;
|
|
2586
|
+
this.portal = null;
|
|
2587
|
+
}
|
|
2588
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: WmRichTooltip, isStandalone: true, selector: "wm-rich-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, relation: { classPropertyName: "relation", publicName: "relation", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "triggerQuery", first: true, predicate: WmRichTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "contentQuery", first: true, predicate: WmRichTooltipContent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
2590
|
+
<ng-content select="[wmRichTooltipTrigger]"></ng-content>
|
|
2591
|
+
<ng-content select="ng-template[wmRichTooltipContent]"></ng-content>
|
|
2592
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2593
|
+
}
|
|
2594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmRichTooltip, decorators: [{
|
|
2595
|
+
type: Component,
|
|
2596
|
+
args: [{
|
|
2597
|
+
selector: 'wm-rich-tooltip',
|
|
2598
|
+
template: `
|
|
2599
|
+
<ng-content select="[wmRichTooltipTrigger]"></ng-content>
|
|
2600
|
+
<ng-content select="ng-template[wmRichTooltipContent]"></ng-content>
|
|
2601
|
+
`,
|
|
2602
|
+
host: { style: 'display: contents' },
|
|
2603
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2604
|
+
encapsulation: ViewEncapsulation.None,
|
|
2605
|
+
}]
|
|
2606
|
+
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], relation: [{ type: i0.Input, args: [{ isSignal: true, alias: "relation", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], triggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WmRichTooltipTrigger), { isSignal: true }] }], contentQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WmRichTooltipContent), { isSignal: true }] }] } });
|
|
2607
|
+
|
|
2141
2608
|
class WmLicenseService {
|
|
2142
2609
|
toast = inject(WmToastService);
|
|
2143
2610
|
license = signal(null, ...(ngDevMode ? [{ debugName: "license" }] : []));
|
|
@@ -2278,5 +2745,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
2278
2745
|
* Generated bundle index. Do not edit.
|
|
2279
2746
|
*/
|
|
2280
2747
|
|
|
2281
|
-
export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService, WmTooltip, onViewportChange };
|
|
2748
|
+
export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmRichTooltip, WmRichTooltipContent, WmRichTooltipTrigger, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService, WmTooltip, onViewportChange };
|
|
2282
2749
|
//# sourceMappingURL=wildmason-aegis.mjs.map
|