@ethlete/components 1.0.0-next.19 → 1.0.0-next.20
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 +29 -0
- package/fesm2022/ethlete-components.mjs +118 -112
- package/fesm2022/ethlete-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ethlete-components.d.ts +12 -12
|
@@ -14,11 +14,11 @@ import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/ro
|
|
|
14
14
|
|
|
15
15
|
class ButtonPropertiesStylesComponent {
|
|
16
16
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonPropertiesStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ButtonPropertiesStylesComponent, isStandalone: true, selector: "et-button-properties-styles", ngImport: i0, template: '', isInline: true, styles: ["@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-track-color: transparent;--et-spinner-duration: .7s}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ButtonPropertiesStylesComponent, isStandalone: true, selector: "et-button-properties-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-track-color: transparent;--et-spinner-duration: .7s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18
18
|
}
|
|
19
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonPropertiesStylesComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
|
-
args: [{ selector: 'et-button-properties-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-track-color: transparent;--et-spinner-duration: .7s}\n"] }]
|
|
21
|
+
args: [{ selector: 'et-button-properties-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-track-color: transparent;--et-spinner-duration: .7s}}\n"] }]
|
|
22
22
|
}] });
|
|
23
23
|
|
|
24
24
|
class ButtonStylesDirective {
|
|
@@ -38,11 +38,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
38
38
|
|
|
39
39
|
class FocusRingStylesComponent {
|
|
40
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FocusRingStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: FocusRingStylesComponent, isStandalone: true, selector: "et-focus-ring-styles", ngImport: i0, template: '', isInline: true, styles: [".et-focus-ring{--_et-focus-ring-offset: 3px;--_et-focus-ring-width: 2px;--_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);outline:var(--_et-focus-ring-width) solid transparent;outline-offset:var(--_et-focus-ring-offset)}.et-focus-ring:focus-visible{outline-color:var(--_et-focus-ring-color)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: FocusRingStylesComponent, isStandalone: true, selector: "et-focus-ring-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{.et-focus-ring{--_et-focus-ring-offset: 3px;--_et-focus-ring-width: 2px;--_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);outline:var(--_et-focus-ring-width) solid transparent;outline-offset:var(--_et-focus-ring-offset)}.et-focus-ring:focus-visible{outline-color:var(--_et-focus-ring-color)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
42
42
|
}
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FocusRingStylesComponent, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
|
-
args: [{ selector: 'et-focus-ring-styles', template: '', encapsulation: ViewEncapsulation.None, styles: [".et-focus-ring{--_et-focus-ring-offset: 3px;--_et-focus-ring-width: 2px;--_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);outline:var(--_et-focus-ring-width) solid transparent;outline-offset:var(--_et-focus-ring-offset)}.et-focus-ring:focus-visible{outline-color:var(--_et-focus-ring-color)}\n"] }]
|
|
45
|
+
args: [{ selector: 'et-focus-ring-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-focus-ring{--_et-focus-ring-offset: 3px;--_et-focus-ring-width: 2px;--_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);outline:var(--_et-focus-ring-width) solid transparent;outline-offset:var(--_et-focus-ring-offset)}.et-focus-ring:focus-visible{outline-color:var(--_et-focus-ring-color)}}\n"] }]
|
|
46
46
|
}] });
|
|
47
47
|
|
|
48
48
|
class FocusRingDirective {
|
|
@@ -108,7 +108,7 @@ class BrandLoaderComponent {
|
|
|
108
108
|
|
|
109
109
|
<path [attr.d]="PATH" [attr.clip-path]="fillClip" class="et-brand-loader__fill" />
|
|
110
110
|
</svg>
|
|
111
|
-
`, isInline: true, styles: ["@keyframes et-brand-loader-outline{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}45%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}90%{opacity:0}to{stroke-dashoffset:0;opacity:0}}@keyframes et-brand-loader-fill-sweep{0%,48%{width:0}75%{width:26.4369px}to{width:26.4369px}}@keyframes et-brand-loader-fill-fade{0%,48%{opacity:0}58%{opacity:1}80%{opacity:1}90%{opacity:0}to{opacity:0}}@keyframes et-brand-loader-ghost-pulse{0%,to{opacity:.12}50%{opacity:.2}}.et-brand-loader{--_et-brand-loader-accent: var(--et-brand-loader-accent, #00ffa1);--_et-brand-loader-ghost: var( --et-brand-loader-ghost, color-mix(in srgb, var(--_et-brand-loader-accent) 14%, currentColor) );--_et-brand-loader-glow: var( --et-brand-loader-glow, color-mix(in srgb, var(--_et-brand-loader-accent) 25%, transparent) );--_et-brand-loader-duration: var(--et-brand-loader-duration, 3.2s);--_et-brand-loader-size: var(--et-brand-loader-size, 10rem);display:inline-flex;width:var(--_et-brand-loader-size);aspect-ratio:26.4369 / 20}.et-brand-loader__svg{display:block;width:100%;height:100%;overflow:visible}.et-brand-loader__ghost{fill:var(--_et-brand-loader-ghost);animation:et-brand-loader-ghost-pulse var(--_et-brand-loader-duration) ease-in-out infinite}.et-brand-loader__outline{fill:none;stroke:var(--_et-brand-loader-accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px var(--_et-brand-loader-glow));animation:et-brand-loader-outline var(--_et-brand-loader-duration) cubic-bezier(.4,0,.2,1) infinite}.et-brand-loader__fill{fill:var(--_et-brand-loader-accent);animation:et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite}.et-brand-loader__fill-clip-rect{animation:et-brand-loader-fill-sweep var(--_et-brand-loader-duration) cubic-bezier(.22,1,.36,1) infinite}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
111
|
+
`, isInline: true, styles: ["@layer components{@keyframes et-brand-loader-outline{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}45%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}90%{opacity:0}to{stroke-dashoffset:0;opacity:0}}@keyframes et-brand-loader-fill-sweep{0%,48%{width:0}75%{width:26.4369px}to{width:26.4369px}}@keyframes et-brand-loader-fill-fade{0%,48%{opacity:0}58%{opacity:1}80%{opacity:1}90%{opacity:0}to{opacity:0}}@keyframes et-brand-loader-ghost-pulse{0%,to{opacity:.12}50%{opacity:.2}}.et-brand-loader{--_et-brand-loader-accent: var(--et-brand-loader-accent, #00ffa1);--_et-brand-loader-ghost: var( --et-brand-loader-ghost, color-mix(in srgb, var(--_et-brand-loader-accent) 14%, currentColor) );--_et-brand-loader-glow: var( --et-brand-loader-glow, color-mix(in srgb, var(--_et-brand-loader-accent) 25%, transparent) );--_et-brand-loader-duration: var(--et-brand-loader-duration, 3.2s);--_et-brand-loader-size: var(--et-brand-loader-size, 10rem);display:inline-flex;width:var(--_et-brand-loader-size);aspect-ratio:26.4369 / 20}.et-brand-loader__svg{display:block;width:100%;height:100%;overflow:visible}.et-brand-loader__ghost{fill:var(--_et-brand-loader-ghost);animation:et-brand-loader-ghost-pulse var(--_et-brand-loader-duration) ease-in-out infinite}.et-brand-loader__outline{fill:none;stroke:var(--_et-brand-loader-accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px var(--_et-brand-loader-glow));animation:et-brand-loader-outline var(--_et-brand-loader-duration) cubic-bezier(.4,0,.2,1) infinite}.et-brand-loader__fill{fill:var(--_et-brand-loader-accent);animation:et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite}.et-brand-loader__fill-clip-rect{animation:et-brand-loader-fill-sweep var(--_et-brand-loader-duration) cubic-bezier(.22,1,.36,1) infinite}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
112
112
|
}
|
|
113
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandLoaderComponent, decorators: [{
|
|
114
114
|
type: Component,
|
|
@@ -134,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
134
134
|
class: 'et-brand-loader',
|
|
135
135
|
role: 'progressbar',
|
|
136
136
|
'aria-label': 'Loading',
|
|
137
|
-
}, styles: ["@keyframes et-brand-loader-outline{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}45%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}90%{opacity:0}to{stroke-dashoffset:0;opacity:0}}@keyframes et-brand-loader-fill-sweep{0%,48%{width:0}75%{width:26.4369px}to{width:26.4369px}}@keyframes et-brand-loader-fill-fade{0%,48%{opacity:0}58%{opacity:1}80%{opacity:1}90%{opacity:0}to{opacity:0}}@keyframes et-brand-loader-ghost-pulse{0%,to{opacity:.12}50%{opacity:.2}}.et-brand-loader{--_et-brand-loader-accent: var(--et-brand-loader-accent, #00ffa1);--_et-brand-loader-ghost: var( --et-brand-loader-ghost, color-mix(in srgb, var(--_et-brand-loader-accent) 14%, currentColor) );--_et-brand-loader-glow: var( --et-brand-loader-glow, color-mix(in srgb, var(--_et-brand-loader-accent) 25%, transparent) );--_et-brand-loader-duration: var(--et-brand-loader-duration, 3.2s);--_et-brand-loader-size: var(--et-brand-loader-size, 10rem);display:inline-flex;width:var(--_et-brand-loader-size);aspect-ratio:26.4369 / 20}.et-brand-loader__svg{display:block;width:100%;height:100%;overflow:visible}.et-brand-loader__ghost{fill:var(--_et-brand-loader-ghost);animation:et-brand-loader-ghost-pulse var(--_et-brand-loader-duration) ease-in-out infinite}.et-brand-loader__outline{fill:none;stroke:var(--_et-brand-loader-accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px var(--_et-brand-loader-glow));animation:et-brand-loader-outline var(--_et-brand-loader-duration) cubic-bezier(.4,0,.2,1) infinite}.et-brand-loader__fill{fill:var(--_et-brand-loader-accent);animation:et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite}.et-brand-loader__fill-clip-rect{animation:et-brand-loader-fill-sweep var(--_et-brand-loader-duration) cubic-bezier(.22,1,.36,1) infinite}\n"] }]
|
|
137
|
+
}, styles: ["@layer components{@keyframes et-brand-loader-outline{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}45%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}90%{opacity:0}to{stroke-dashoffset:0;opacity:0}}@keyframes et-brand-loader-fill-sweep{0%,48%{width:0}75%{width:26.4369px}to{width:26.4369px}}@keyframes et-brand-loader-fill-fade{0%,48%{opacity:0}58%{opacity:1}80%{opacity:1}90%{opacity:0}to{opacity:0}}@keyframes et-brand-loader-ghost-pulse{0%,to{opacity:.12}50%{opacity:.2}}.et-brand-loader{--_et-brand-loader-accent: var(--et-brand-loader-accent, #00ffa1);--_et-brand-loader-ghost: var( --et-brand-loader-ghost, color-mix(in srgb, var(--_et-brand-loader-accent) 14%, currentColor) );--_et-brand-loader-glow: var( --et-brand-loader-glow, color-mix(in srgb, var(--_et-brand-loader-accent) 25%, transparent) );--_et-brand-loader-duration: var(--et-brand-loader-duration, 3.2s);--_et-brand-loader-size: var(--et-brand-loader-size, 10rem);display:inline-flex;width:var(--_et-brand-loader-size);aspect-ratio:26.4369 / 20}.et-brand-loader__svg{display:block;width:100%;height:100%;overflow:visible}.et-brand-loader__ghost{fill:var(--_et-brand-loader-ghost);animation:et-brand-loader-ghost-pulse var(--_et-brand-loader-duration) ease-in-out infinite}.et-brand-loader__outline{fill:none;stroke:var(--_et-brand-loader-accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px var(--_et-brand-loader-glow));animation:et-brand-loader-outline var(--_et-brand-loader-duration) cubic-bezier(.4,0,.2,1) infinite}.et-brand-loader__fill{fill:var(--_et-brand-loader-accent);animation:et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite}.et-brand-loader__fill-clip-rect{animation:et-brand-loader-fill-sweep var(--_et-brand-loader-duration) cubic-bezier(.22,1,.36,1) infinite}}\n"] }]
|
|
138
138
|
}], ctorParameters: () => [] });
|
|
139
139
|
|
|
140
140
|
class ProgressBarComponent {
|
|
@@ -157,7 +157,7 @@ class ProgressBarComponent {
|
|
|
157
157
|
<span class="et-progress-bar__bar-inner"></span>
|
|
158
158
|
</div>
|
|
159
159
|
</div>
|
|
160
|
-
`, isInline: true, styles: ["@property --et-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var(--et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent));--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
160
|
+
`, isInline: true, styles: ["@layer components{@property --et-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var( --et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent) );--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
161
161
|
}
|
|
162
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
163
163
|
type: Component,
|
|
@@ -180,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
180
180
|
'[attr.aria-valuenow]': 'indeterminate() ? null : clampedValue()',
|
|
181
181
|
'[attr.aria-valuemin]': 'indeterminate() ? null : 0',
|
|
182
182
|
'[attr.aria-valuemax]': 'indeterminate() ? null : 100',
|
|
183
|
-
}, styles: ["@property --et-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var(--et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent));--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}\n"] }]
|
|
183
|
+
}, styles: ["@layer components{@property --et-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var( --et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent) );--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}}\n"] }]
|
|
184
184
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
|
|
185
185
|
|
|
186
186
|
const BASE_STROKE_WIDTH = 10;
|
|
@@ -285,7 +285,7 @@ class SpinnerComponent {
|
|
|
285
285
|
</div>
|
|
286
286
|
</div>
|
|
287
287
|
}
|
|
288
|
-
`, isInline: true, styles: ["@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-track-color{syntax: \"<color>\"; inherits: true; initial-value: transparent;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 14%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
288
|
+
`, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-track-color{syntax: \"<color>\"; inherits: true; initial-value: transparent;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 14%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
289
289
|
}
|
|
290
290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
291
291
|
type: Component,
|
|
@@ -370,7 +370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
370
370
|
'[attr.aria-valuenow]': 'determinate() ? clampedValue() : null',
|
|
371
371
|
'[attr.aria-valuemin]': 'determinate() ? 0 : null',
|
|
372
372
|
'[attr.aria-valuemax]': 'determinate() ? 100 : null',
|
|
373
|
-
}, styles: ["@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-track-color{syntax: \"<color>\"; inherits: true; initial-value: transparent;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 14%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}\n"] }]
|
|
373
|
+
}, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-track-color{syntax: \"<color>\"; inherits: true; initial-value: transparent;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 14%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}}\n"] }]
|
|
374
374
|
}], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], determinate: [{ type: i0.Input, args: [{ isSignal: true, alias: "determinate", required: false }] }] } });
|
|
375
375
|
|
|
376
376
|
const BUTTON_TYPES = {
|
|
@@ -608,7 +608,7 @@ class ButtonComponent {
|
|
|
608
608
|
<ng-template #iconTpl>
|
|
609
609
|
<ng-content select="[etIcon]" />
|
|
610
610
|
</ng-template>
|
|
611
|
-
`, isInline: true, styles: [".et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button[data-muted-until-pressed]:not([data-pressed=true]){--_et-button-color: currentColor}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 40%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 44%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 48%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){--_et-button-background: transparent;--_et-button-border-color: var(--et-surface-interaction-solid)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 24%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 28%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){--_et-button-background: transparent;--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
611
|
+
`, isInline: true, styles: ["@layer components{.et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button[data-muted-until-pressed]:not([data-pressed=true]){--_et-button-color: currentColor}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 40%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 44%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 48%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){--_et-button-background: transparent;--_et-button-border-color: var(--et-surface-interaction-solid)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 24%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 28%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){--_et-button-background: transparent;--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
612
612
|
}
|
|
613
613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
614
614
|
type: Component,
|
|
@@ -661,7 +661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
661
661
|
'[attr.data-size]': 'size()',
|
|
662
662
|
'[attr.data-pressed-variant]': 'pressedVariant()',
|
|
663
663
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
664
|
-
}, styles: [".et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button[data-muted-until-pressed]:not([data-pressed=true]){--_et-button-color: currentColor}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 40%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 44%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 48%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){--_et-button-background: transparent;--_et-button-border-color: var(--et-surface-interaction-solid)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 24%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 28%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){--_et-button-background: transparent;--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
|
|
664
|
+
}, styles: ["@layer components{.et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button[data-muted-until-pressed]:not([data-pressed=true]){--_et-button-color: currentColor}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 40%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 44%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 48%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){--_et-button-background: transparent;--_et-button-border-color: var(--et-surface-interaction-solid)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 24%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 28%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){--_et-button-background: transparent;--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}}\n"] }]
|
|
665
665
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlignment", required: false }] }] } });
|
|
666
666
|
|
|
667
667
|
class FabComponent {
|
|
@@ -709,7 +709,7 @@ class FabComponent {
|
|
|
709
709
|
<ng-template #iconTpl>
|
|
710
710
|
<ng-content select="[etIcon]" />
|
|
711
711
|
</ng-template>
|
|
712
|
-
`, isInline: true, styles: [".et-fab{--_et-fab-expand-duration: .38s;--_et-fab-expand-easing: cubic-bezier(.22, .9, .3, 1);--_et-fab-collapse-duration: .22s;--_et-fab-collapse-easing: cubic-bezier(.4, 0, .2, 1);--_et-fab-label-fade-duration: .18s;--_et-fab-label-fade-expand-delay: 40ms;--_et-fab-contents-padding: 0 var(--_et-fab-contents-gap) 0 0;--et-button-shadow: 0 .3rem .8rem rgb(0 0 0 / .2), 0 .1rem .3rem rgb(0 0 0 / .12);display:inline-flex;position:relative;align-items:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-on-primary);border:none;border-radius:9999px;padding:0;overflow:hidden;height:var(--_et-fab-size, 4rem);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);box-shadow:var(--et-button-shadow);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap;flex-shrink:0}.et-fab[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease}.et-fab:after{content:\"\";position:absolute;inset:0;box-sizing:border-box;border:0 solid transparent;border-radius:inherit;pointer-events:none;transition:background .12s ease}.et-fab:where([data-variant=filled]):hover:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .08)}.et-fab:where([data-variant=filled]):focus-visible:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .12)}.et-fab:where([data-variant=filled]):active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-variant=filled]):focus-visible:active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-size=xs]){--_et-fab-size: 2.4rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.4rem;--_et-fab-contents-gap: .5rem}.et-fab:where([data-size=sm]){--_et-fab-size: 3.1rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.8rem;--_et-fab-contents-gap: .6rem}.et-fab:where([data-size=md]){--_et-fab-size: 3.9rem;--_et-fab-label-font-size: 1.3rem;--_et-fab-icon-size: 2rem;--_et-fab-contents-gap: .8rem}.et-fab:where([data-size=lg]){--_et-fab-size: 4.6rem;--_et-fab-label-font-size: 1.4rem;--_et-fab-icon-size: 2.4rem;--_et-fab-contents-gap: 1rem}.et-fab:where([data-size=xl]){--_et-fab-size: 5.7rem;--_et-fab-label-font-size: 1.6rem;--_et-fab-icon-size: 2.8rem;--_et-fab-contents-gap: 1.2rem}.et-fab:hover{--et-button-shadow: 0 .6rem 1.2rem rgb(0 0 0 / .22), 0 .2rem .4rem rgb(0 0 0 / .14)}.et-fab:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:focus-visible:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:where([disabled]),.et-fab:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-fab:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):after{border-width:var(--et-button-border-width, .1rem);border-color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-fab:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible:active{--et-button-shadow: none}.et-fab[data-icon-alignment=end]{--_et-fab-contents-padding: 0 0 0 var(--_et-fab-contents-gap)}.et-fab .et-fab-icon{display:flex;align-items:center;justify-content:center;width:var(--_et-fab-size, 4rem);height:var(--_et-fab-size, 4rem);transition:opacity .12s ease}.et-fab .et-fab-icon .et-icon{width:var(--_et-fab-icon-size);height:var(--_et-fab-icon-size)}.et-fab .et-fab-contents{display:inline-grid;grid-template-columns:1fr;padding:var(--_et-fab-contents-padding);transition:opacity .12s ease,grid-template-columns var(--_et-fab-expand-duration) var(--_et-fab-expand-easing),padding var(--_et-fab-expand-duration) var(--_et-fab-expand-easing)}.et-fab .et-fab-contents .et-fab-contents-inner{min-width:0;opacity:1;white-space:nowrap;font-size:var(--_et-fab-label-font-size);transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-expand-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents{grid-template-columns:0fr;padding:0;pointer-events:none;transition:opacity .12s ease,grid-template-columns var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing),padding var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents-inner{opacity:0;transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-collapse-easing)}.et-fab[data-loading=true] .et-fab-icon,.et-fab[data-loading=true] .et-fab-contents{opacity:0}.et-fab[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
712
|
+
`, isInline: true, styles: ["@layer components{.et-fab{--_et-fab-expand-duration: .38s;--_et-fab-expand-easing: cubic-bezier(.22, .9, .3, 1);--_et-fab-collapse-duration: .22s;--_et-fab-collapse-easing: cubic-bezier(.4, 0, .2, 1);--_et-fab-label-fade-duration: .18s;--_et-fab-label-fade-expand-delay: 40ms;--_et-fab-contents-padding: 0 var(--_et-fab-contents-gap) 0 0;--et-button-shadow: 0 .3rem .8rem rgb(0 0 0 / .2), 0 .1rem .3rem rgb(0 0 0 / .12);display:inline-flex;position:relative;align-items:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-on-primary);border:none;border-radius:9999px;padding:0;overflow:hidden;height:var(--_et-fab-size, 4rem);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);box-shadow:var(--et-button-shadow);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap;flex-shrink:0}.et-fab[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease}.et-fab:after{content:\"\";position:absolute;inset:0;box-sizing:border-box;border:0 solid transparent;border-radius:inherit;pointer-events:none;transition:background .12s ease}.et-fab:where([data-variant=filled]):hover:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .08)}.et-fab:where([data-variant=filled]):focus-visible:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .12)}.et-fab:where([data-variant=filled]):active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-variant=filled]):focus-visible:active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-size=xs]){--_et-fab-size: 2.4rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.4rem;--_et-fab-contents-gap: .5rem}.et-fab:where([data-size=sm]){--_et-fab-size: 3.1rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.8rem;--_et-fab-contents-gap: .6rem}.et-fab:where([data-size=md]){--_et-fab-size: 3.9rem;--_et-fab-label-font-size: 1.3rem;--_et-fab-icon-size: 2rem;--_et-fab-contents-gap: .8rem}.et-fab:where([data-size=lg]){--_et-fab-size: 4.6rem;--_et-fab-label-font-size: 1.4rem;--_et-fab-icon-size: 2.4rem;--_et-fab-contents-gap: 1rem}.et-fab:where([data-size=xl]){--_et-fab-size: 5.7rem;--_et-fab-label-font-size: 1.6rem;--_et-fab-icon-size: 2.8rem;--_et-fab-contents-gap: 1.2rem}.et-fab:hover{--et-button-shadow: 0 .6rem 1.2rem rgb(0 0 0 / .22), 0 .2rem .4rem rgb(0 0 0 / .14)}.et-fab:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:focus-visible:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:where([disabled]),.et-fab:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-fab:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):after{border-width:var(--et-button-border-width, .1rem);border-color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-fab:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible:active{--et-button-shadow: none}.et-fab[data-icon-alignment=end]{--_et-fab-contents-padding: 0 0 0 var(--_et-fab-contents-gap)}.et-fab .et-fab-icon{display:flex;align-items:center;justify-content:center;width:var(--_et-fab-size, 4rem);height:var(--_et-fab-size, 4rem);transition:opacity .12s ease}.et-fab .et-fab-icon .et-icon{width:var(--_et-fab-icon-size);height:var(--_et-fab-icon-size)}.et-fab .et-fab-contents{display:inline-grid;grid-template-columns:1fr;padding:var(--_et-fab-contents-padding);transition:opacity .12s ease,grid-template-columns var(--_et-fab-expand-duration) var(--_et-fab-expand-easing),padding var(--_et-fab-expand-duration) var(--_et-fab-expand-easing)}.et-fab .et-fab-contents .et-fab-contents-inner{min-width:0;opacity:1;white-space:nowrap;font-size:var(--_et-fab-label-font-size);transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-expand-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents{grid-template-columns:0fr;padding:0;pointer-events:none;transition:opacity .12s ease,grid-template-columns var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing),padding var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents-inner{opacity:0;transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-collapse-easing)}.et-fab[data-loading=true] .et-fab-icon,.et-fab[data-loading=true] .et-fab-contents{opacity:0}.et-fab[data-loading=true] .et-button-loader{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
713
713
|
}
|
|
714
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FabComponent, decorators: [{
|
|
715
715
|
type: Component,
|
|
@@ -759,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
759
759
|
'[attr.data-expanded]': 'expandedAttr()',
|
|
760
760
|
'[attr.data-icon-alignment]': 'iconAlignment()',
|
|
761
761
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
762
|
-
}, styles: [".et-fab{--_et-fab-expand-duration: .38s;--_et-fab-expand-easing: cubic-bezier(.22, .9, .3, 1);--_et-fab-collapse-duration: .22s;--_et-fab-collapse-easing: cubic-bezier(.4, 0, .2, 1);--_et-fab-label-fade-duration: .18s;--_et-fab-label-fade-expand-delay: 40ms;--_et-fab-contents-padding: 0 var(--_et-fab-contents-gap) 0 0;--et-button-shadow: 0 .3rem .8rem rgb(0 0 0 / .2), 0 .1rem .3rem rgb(0 0 0 / .12);display:inline-flex;position:relative;align-items:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-on-primary);border:none;border-radius:9999px;padding:0;overflow:hidden;height:var(--_et-fab-size, 4rem);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);box-shadow:var(--et-button-shadow);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap;flex-shrink:0}.et-fab[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease}.et-fab:after{content:\"\";position:absolute;inset:0;box-sizing:border-box;border:0 solid transparent;border-radius:inherit;pointer-events:none;transition:background .12s ease}.et-fab:where([data-variant=filled]):hover:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .08)}.et-fab:where([data-variant=filled]):focus-visible:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .12)}.et-fab:where([data-variant=filled]):active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-variant=filled]):focus-visible:active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-size=xs]){--_et-fab-size: 2.4rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.4rem;--_et-fab-contents-gap: .5rem}.et-fab:where([data-size=sm]){--_et-fab-size: 3.1rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.8rem;--_et-fab-contents-gap: .6rem}.et-fab:where([data-size=md]){--_et-fab-size: 3.9rem;--_et-fab-label-font-size: 1.3rem;--_et-fab-icon-size: 2rem;--_et-fab-contents-gap: .8rem}.et-fab:where([data-size=lg]){--_et-fab-size: 4.6rem;--_et-fab-label-font-size: 1.4rem;--_et-fab-icon-size: 2.4rem;--_et-fab-contents-gap: 1rem}.et-fab:where([data-size=xl]){--_et-fab-size: 5.7rem;--_et-fab-label-font-size: 1.6rem;--_et-fab-icon-size: 2.8rem;--_et-fab-contents-gap: 1.2rem}.et-fab:hover{--et-button-shadow: 0 .6rem 1.2rem rgb(0 0 0 / .22), 0 .2rem .4rem rgb(0 0 0 / .14)}.et-fab:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:focus-visible:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:where([disabled]),.et-fab:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-fab:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):after{border-width:var(--et-button-border-width, .1rem);border-color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-fab:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible:active{--et-button-shadow: none}.et-fab[data-icon-alignment=end]{--_et-fab-contents-padding: 0 0 0 var(--_et-fab-contents-gap)}.et-fab .et-fab-icon{display:flex;align-items:center;justify-content:center;width:var(--_et-fab-size, 4rem);height:var(--_et-fab-size, 4rem);transition:opacity .12s ease}.et-fab .et-fab-icon .et-icon{width:var(--_et-fab-icon-size);height:var(--_et-fab-icon-size)}.et-fab .et-fab-contents{display:inline-grid;grid-template-columns:1fr;padding:var(--_et-fab-contents-padding);transition:opacity .12s ease,grid-template-columns var(--_et-fab-expand-duration) var(--_et-fab-expand-easing),padding var(--_et-fab-expand-duration) var(--_et-fab-expand-easing)}.et-fab .et-fab-contents .et-fab-contents-inner{min-width:0;opacity:1;white-space:nowrap;font-size:var(--_et-fab-label-font-size);transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-expand-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents{grid-template-columns:0fr;padding:0;pointer-events:none;transition:opacity .12s ease,grid-template-columns var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing),padding var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents-inner{opacity:0;transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-collapse-easing)}.et-fab[data-loading=true] .et-fab-icon,.et-fab[data-loading=true] .et-fab-contents{opacity:0}.et-fab[data-loading=true] .et-button-loader{opacity:1}\n"] }]
|
|
762
|
+
}, styles: ["@layer components{.et-fab{--_et-fab-expand-duration: .38s;--_et-fab-expand-easing: cubic-bezier(.22, .9, .3, 1);--_et-fab-collapse-duration: .22s;--_et-fab-collapse-easing: cubic-bezier(.4, 0, .2, 1);--_et-fab-label-fade-duration: .18s;--_et-fab-label-fade-expand-delay: 40ms;--_et-fab-contents-padding: 0 var(--_et-fab-contents-gap) 0 0;--et-button-shadow: 0 .3rem .8rem rgb(0 0 0 / .2), 0 .1rem .3rem rgb(0 0 0 / .12);display:inline-flex;position:relative;align-items:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-on-primary);border:none;border-radius:9999px;padding:0;overflow:hidden;height:var(--_et-fab-size, 4rem);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);box-shadow:var(--et-button-shadow);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap;flex-shrink:0}.et-fab[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease}.et-fab:after{content:\"\";position:absolute;inset:0;box-sizing:border-box;border:0 solid transparent;border-radius:inherit;pointer-events:none;transition:background .12s ease}.et-fab:where([data-variant=filled]):hover:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .08)}.et-fab:where([data-variant=filled]):focus-visible:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .12)}.et-fab:where([data-variant=filled]):active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-variant=filled]):focus-visible:active:after{background:rgb(var(--et-theme-color-on-primary-rgb) / .16)}.et-fab:where([data-size=xs]){--_et-fab-size: 2.4rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.4rem;--_et-fab-contents-gap: .5rem}.et-fab:where([data-size=sm]){--_et-fab-size: 3.1rem;--_et-fab-label-font-size: 1.2rem;--_et-fab-icon-size: 1.8rem;--_et-fab-contents-gap: .6rem}.et-fab:where([data-size=md]){--_et-fab-size: 3.9rem;--_et-fab-label-font-size: 1.3rem;--_et-fab-icon-size: 2rem;--_et-fab-contents-gap: .8rem}.et-fab:where([data-size=lg]){--_et-fab-size: 4.6rem;--_et-fab-label-font-size: 1.4rem;--_et-fab-icon-size: 2.4rem;--_et-fab-contents-gap: 1rem}.et-fab:where([data-size=xl]){--_et-fab-size: 5.7rem;--_et-fab-label-font-size: 1.6rem;--_et-fab-icon-size: 2.8rem;--_et-fab-contents-gap: 1.2rem}.et-fab:hover{--et-button-shadow: 0 .6rem 1.2rem rgb(0 0 0 / .22), 0 .2rem .4rem rgb(0 0 0 / .14)}.et-fab:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:focus-visible:active{--et-button-shadow: 0 .2rem .6rem rgb(0 0 0 / .18), 0 .1rem .2rem rgb(0 0 0 / .1)}.et-fab:where([disabled]),.et-fab:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-fab:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):after{border-width:var(--et-button-border-width, .1rem);border-color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=outline]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-fab:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32;--et-button-shadow: none}.et-fab:where([data-variant=tonal]):focus-visible:active{--et-button-shadow: none}.et-fab:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--et-button-shadow: none;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid)}.et-fab:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-fab:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16;--et-button-shadow: none}.et-fab:where([data-variant=transparent]):focus-visible:active{--et-button-shadow: none}.et-fab[data-icon-alignment=end]{--_et-fab-contents-padding: 0 0 0 var(--_et-fab-contents-gap)}.et-fab .et-fab-icon{display:flex;align-items:center;justify-content:center;width:var(--_et-fab-size, 4rem);height:var(--_et-fab-size, 4rem);transition:opacity .12s ease}.et-fab .et-fab-icon .et-icon{width:var(--_et-fab-icon-size);height:var(--_et-fab-icon-size)}.et-fab .et-fab-contents{display:inline-grid;grid-template-columns:1fr;padding:var(--_et-fab-contents-padding);transition:opacity .12s ease,grid-template-columns var(--_et-fab-expand-duration) var(--_et-fab-expand-easing),padding var(--_et-fab-expand-duration) var(--_et-fab-expand-easing)}.et-fab .et-fab-contents .et-fab-contents-inner{min-width:0;opacity:1;white-space:nowrap;font-size:var(--_et-fab-label-font-size);transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-expand-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents{grid-template-columns:0fr;padding:0;pointer-events:none;transition:opacity .12s ease,grid-template-columns var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing),padding var(--_et-fab-collapse-duration) var(--_et-fab-collapse-easing)}.et-fab:not([data-expanded=true]) .et-fab-contents-inner{opacity:0;transition:opacity var(--_et-fab-label-fade-duration) var(--_et-fab-collapse-easing)}.et-fab[data-loading=true] .et-fab-icon,.et-fab[data-loading=true] .et-fab-contents{opacity:0}.et-fab[data-loading=true] .et-button-loader{opacity:1}}\n"] }]
|
|
763
763
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], iconAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlignment", required: false }] }] } });
|
|
764
764
|
|
|
765
765
|
const PRESSED_VARIANT_MAP$1 = {
|
|
@@ -796,7 +796,7 @@ class IconButtonComponent {
|
|
|
796
796
|
/>
|
|
797
797
|
</div>
|
|
798
798
|
}
|
|
799
|
-
`, isInline: true, styles: ["@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.4rem;height:2.4rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.1rem;height:3.1rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:3.9rem;height:3.9rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.6rem;height:4.6rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.7rem;height:5.7rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]){color:currentColor}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 40%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 44%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 48%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){background:transparent;border-color:var(--et-surface-interaction-solid)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 24%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 28%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){background:transparent}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
799
|
+
`, isInline: true, styles: ["@layer components{@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.4rem;height:2.4rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.1rem;height:3.1rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:3.9rem;height:3.9rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.6rem;height:4.6rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.7rem;height:5.7rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]){color:currentColor}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 40%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 44%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 48%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){background:transparent;border-color:var(--et-surface-interaction-solid)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 24%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 28%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){background:transparent}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
800
800
|
}
|
|
801
801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
802
802
|
type: Component,
|
|
@@ -832,18 +832,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
832
832
|
'[attr.data-size]': 'size()',
|
|
833
833
|
'[attr.data-pressed-variant]': 'pressedVariant()',
|
|
834
834
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
835
|
-
}, styles: ["@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.4rem;height:2.4rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.1rem;height:3.1rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:3.9rem;height:3.9rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.6rem;height:4.6rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.7rem;height:5.7rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]){color:currentColor}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 40%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 44%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 48%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){background:transparent;border-color:var(--et-surface-interaction-solid)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 24%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 28%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){background:transparent}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
|
|
835
|
+
}, styles: ["@layer components{@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.4rem;height:2.4rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.1rem;height:3.1rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:3.9rem;height:3.9rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.6rem;height:4.6rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.7rem;height:5.7rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]){color:currentColor}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 40%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 44%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 48%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){background:transparent;border-color:var(--et-surface-interaction-solid)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 24%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 28%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){background:transparent}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}}\n"] }]
|
|
836
836
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
837
837
|
|
|
838
838
|
class SplitButtonComponent {
|
|
839
839
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
840
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SplitButtonComponent, isStandalone: true, selector: "et-split-button", host: { classAttribute: "et-split-button" }, hostDirectives: [{ directive: SplitButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover,:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
840
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SplitButtonComponent, isStandalone: true, selector: "et-split-button", host: { classAttribute: "et-split-button" }, hostDirectives: [{ directive: SplitButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover,:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
841
841
|
}
|
|
842
842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
843
843
|
type: Component,
|
|
844
844
|
args: [{ selector: 'et-split-button', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, hostDirectives: [SplitButtonDirective], host: {
|
|
845
845
|
class: 'et-split-button',
|
|
846
|
-
}, styles: ["@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover,:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}\n"] }]
|
|
846
|
+
}, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover,:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}}\n"] }]
|
|
847
847
|
}] });
|
|
848
848
|
|
|
849
849
|
class TextButtonComponent {
|
|
@@ -888,7 +888,7 @@ class TextButtonComponent {
|
|
|
888
888
|
<ng-template #iconTpl>
|
|
889
889
|
<ng-content select="[etIcon]" />
|
|
890
890
|
</ng-template>
|
|
891
|
-
`, isInline: true, styles: [".et-text-button{display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:transparent;color:var(--et-theme-color-ink-solid);border:none;padding:0;border-radius:.2rem;font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-text-button[data-can-animate]{transition:color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-text-button:where([data-size=xs]){--et-button-font-size: 1.2rem;--et-button-gap: .4rem}.et-text-button:where([data-size=sm]){--et-button-font-size: 1.4rem;--et-button-gap: .5rem}.et-text-button:where([data-size=md]){--et-button-font-size: 1.4rem;--et-button-gap: .6rem}.et-text-button:where([data-size=lg]){--et-button-font-size: 1.6rem;--et-button-gap: .7rem}.et-text-button:where([data-size=xl]){--et-button-font-size: 1.8rem;--et-button-gap: .8rem}.et-text-button:hover .et-text-button-contents:after{opacity:.9;transform:scaleX(1)}.et-text-button:focus-visible .et-text-button-contents:after{opacity:1;transform:scaleX(1)}.et-text-button:active .et-text-button-contents:after{opacity:1;transform:scaleX(.98)}.et-text-button:where([disabled]),.et-text-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-text-button .et-text-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-text-button .et-text-button-icon:empty{display:none}.et-text-button .et-text-button-icon .et-icon{width:1em;height:1em}.et-text-button .et-text-button-contents{display:inline-flex;align-items:center;min-width:0;position:relative;transition:opacity .12s ease}.et-text-button .et-text-button-contents:after{content:\"\";position:absolute;inset-inline:.04em;bottom:.15em;height:.08em;border-radius:999px;background:currentColor;opacity:0;transform:scaleX(.6);transform-origin:center;transition:opacity .16s ease,transform .2s ease}.et-text-button[data-loading=true] .et-text-button-icon,.et-text-button[data-loading=true] .et-text-button-contents{opacity:0}.et-text-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
891
|
+
`, isInline: true, styles: ["@layer components{.et-text-button{display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:transparent;color:var(--et-theme-color-ink-solid);border:none;padding:0;border-radius:.2rem;font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-text-button[data-can-animate]{transition:color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-text-button:where([data-size=xs]){--et-button-font-size: 1.2rem;--et-button-gap: .4rem}.et-text-button:where([data-size=sm]){--et-button-font-size: 1.4rem;--et-button-gap: .5rem}.et-text-button:where([data-size=md]){--et-button-font-size: 1.4rem;--et-button-gap: .6rem}.et-text-button:where([data-size=lg]){--et-button-font-size: 1.6rem;--et-button-gap: .7rem}.et-text-button:where([data-size=xl]){--et-button-font-size: 1.8rem;--et-button-gap: .8rem}.et-text-button:hover .et-text-button-contents:after{opacity:.9;transform:scaleX(1)}.et-text-button:focus-visible .et-text-button-contents:after{opacity:1;transform:scaleX(1)}.et-text-button:active .et-text-button-contents:after{opacity:1;transform:scaleX(.98)}.et-text-button:where([disabled]),.et-text-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-text-button .et-text-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-text-button .et-text-button-icon:empty{display:none}.et-text-button .et-text-button-icon .et-icon{width:1em;height:1em}.et-text-button .et-text-button-contents{display:inline-flex;align-items:center;min-width:0;position:relative;transition:opacity .12s ease}.et-text-button .et-text-button-contents:after{content:\"\";position:absolute;inset-inline:.04em;bottom:.15em;height:.08em;border-radius:999px;background:currentColor;opacity:0;transform:scaleX(.6);transform-origin:center;transition:opacity .16s ease,transform .2s ease}.et-text-button[data-loading=true] .et-text-button-icon,.et-text-button[data-loading=true] .et-text-button-contents{opacity:0}.et-text-button[data-loading=true] .et-button-loader{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
892
892
|
}
|
|
893
893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextButtonComponent, decorators: [{
|
|
894
894
|
type: Component,
|
|
@@ -939,7 +939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
939
939
|
'[attr.data-icon-alignment]': 'iconAlignment()',
|
|
940
940
|
'[attr.data-size]': 'size()',
|
|
941
941
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
942
|
-
}, styles: [".et-text-button{display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:transparent;color:var(--et-theme-color-ink-solid);border:none;padding:0;border-radius:.2rem;font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-text-button[data-can-animate]{transition:color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-text-button:where([data-size=xs]){--et-button-font-size: 1.2rem;--et-button-gap: .4rem}.et-text-button:where([data-size=sm]){--et-button-font-size: 1.4rem;--et-button-gap: .5rem}.et-text-button:where([data-size=md]){--et-button-font-size: 1.4rem;--et-button-gap: .6rem}.et-text-button:where([data-size=lg]){--et-button-font-size: 1.6rem;--et-button-gap: .7rem}.et-text-button:where([data-size=xl]){--et-button-font-size: 1.8rem;--et-button-gap: .8rem}.et-text-button:hover .et-text-button-contents:after{opacity:.9;transform:scaleX(1)}.et-text-button:focus-visible .et-text-button-contents:after{opacity:1;transform:scaleX(1)}.et-text-button:active .et-text-button-contents:after{opacity:1;transform:scaleX(.98)}.et-text-button:where([disabled]),.et-text-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-text-button .et-text-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-text-button .et-text-button-icon:empty{display:none}.et-text-button .et-text-button-icon .et-icon{width:1em;height:1em}.et-text-button .et-text-button-contents{display:inline-flex;align-items:center;min-width:0;position:relative;transition:opacity .12s ease}.et-text-button .et-text-button-contents:after{content:\"\";position:absolute;inset-inline:.04em;bottom:.15em;height:.08em;border-radius:999px;background:currentColor;opacity:0;transform:scaleX(.6);transform-origin:center;transition:opacity .16s ease,transform .2s ease}.et-text-button[data-loading=true] .et-text-button-icon,.et-text-button[data-loading=true] .et-text-button-contents{opacity:0}.et-text-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
|
|
942
|
+
}, styles: ["@layer components{.et-text-button{display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:transparent;color:var(--et-theme-color-ink-solid);border:none;padding:0;border-radius:.2rem;font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-text-button[data-can-animate]{transition:color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-text-button:where([data-size=xs]){--et-button-font-size: 1.2rem;--et-button-gap: .4rem}.et-text-button:where([data-size=sm]){--et-button-font-size: 1.4rem;--et-button-gap: .5rem}.et-text-button:where([data-size=md]){--et-button-font-size: 1.4rem;--et-button-gap: .6rem}.et-text-button:where([data-size=lg]){--et-button-font-size: 1.6rem;--et-button-gap: .7rem}.et-text-button:where([data-size=xl]){--et-button-font-size: 1.8rem;--et-button-gap: .8rem}.et-text-button:hover .et-text-button-contents:after{opacity:.9;transform:scaleX(1)}.et-text-button:focus-visible .et-text-button-contents:after{opacity:1;transform:scaleX(1)}.et-text-button:active .et-text-button-contents:after{opacity:1;transform:scaleX(.98)}.et-text-button:where([disabled]),.et-text-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-text-button .et-text-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-text-button .et-text-button-icon:empty{display:none}.et-text-button .et-text-button-icon .et-icon{width:1em;height:1em}.et-text-button .et-text-button-contents{display:inline-flex;align-items:center;min-width:0;position:relative;transition:opacity .12s ease}.et-text-button .et-text-button-contents:after{content:\"\";position:absolute;inset-inline:.04em;bottom:.15em;height:.08em;border-radius:999px;background:currentColor;opacity:0;transform:scaleX(.6);transform-origin:center;transition:opacity .16s ease,transform .2s ease}.et-text-button[data-loading=true] .et-text-button-icon,.et-text-button[data-loading=true] .et-text-button-contents{opacity:0}.et-text-button[data-loading=true] .et-button-loader{opacity:1}}\n"] }]
|
|
943
943
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlignment", required: false }] }] } });
|
|
944
944
|
|
|
945
945
|
const WINDOW_CONTROL_BUTTON_SIZES = {
|
|
@@ -982,7 +982,7 @@ class WindowControlButtonComponent {
|
|
|
982
982
|
/>
|
|
983
983
|
</div>
|
|
984
984
|
}
|
|
985
|
-
`, isInline: true, styles: ["@property --_et-window-control-button-size{syntax: \"<length>\"; inherits: false; initial-value: 32px;}@property --_et-window-control-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-window-control-button{--et-theme-color-primary-opacity: 0;--_et-window-control-button-fallback-background: transparent;--_et-window-control-button-fallback-color: rgba(255, 255, 255, .92);--_et-window-control-button-border-radius: 4px;display:inline-flex;position:relative;align-items:center;justify-content:center;width:var(--_et-window-control-button-size);height:var(--_et-window-control-button-size);flex-shrink:0;padding:0;border:none;border-radius:var(--_et-window-control-button-border-radius);background:var(--et-theme-color-primary, var(--_et-window-control-button-fallback-background));color:var(--et-theme-color-ink-solid, var(--_et-window-control-button-fallback-color));cursor:var(--et-button-cursor);font-size:var(--_et-window-control-button-icon-size);line-height:1;text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden}.et-window-control-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-window-control-button:where([data-size=sm]){--_et-window-control-button-size: 2.8rem;--_et-window-control-button-icon-size: 1.4rem}.et-window-control-button:where([data-size=md]){--_et-window-control-button-size: 3.2rem;--_et-window-control-button-icon-size: 1.6rem}.et-window-control-button:where([data-size=lg]){--_et-window-control-button-size: 3.6rem;--_et-window-control-button-icon-size: 1.8rem}.et-window-control-button:hover{--et-theme-color-primary-opacity: .14;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .14)}.et-window-control-button:focus-visible{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18);outline:none}.et-window-control-button:active{--et-theme-color-primary-opacity: .22;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .22)}.et-window-control-button[data-pressed=true]{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18)}.et-window-control-button[data-pressed=true]:hover{--et-theme-color-primary-opacity: .24;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .24)}.et-window-control-button[data-pressed=true]:focus-visible{--et-theme-color-primary-opacity: .28;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .28)}.et-window-control-button[data-pressed=true]:active{--et-theme-color-primary-opacity: .32;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .32)}.et-window-control-button:where([data-kind=close]):hover,.et-window-control-button:where([data-kind=close]):focus-visible{background:#e81123eb;color:#fff}.et-window-control-button:where([data-kind=close]):active{background:#c40e1df5;color:#fff}.et-window-control-button:where([disabled]),.et-window-control-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-window-control-button .et-window-control-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-window-control-button .et-window-control-button-icon:empty{display:none}.et-window-control-button .et-window-control-button-icon .et-icon{width:var(--_et-window-control-button-icon-size);height:var(--_et-window-control-button-icon-size)}.et-window-control-button[data-loading=true] .et-window-control-button-icon{opacity:0}.et-window-control-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
985
|
+
`, isInline: true, styles: ["@layer components{@property --_et-window-control-button-size{syntax: \"<length>\"; inherits: false; initial-value: 32px;}@property --_et-window-control-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-window-control-button{--et-theme-color-primary-opacity: 0;--_et-window-control-button-fallback-background: transparent;--_et-window-control-button-fallback-color: rgba(255, 255, 255, .92);--_et-window-control-button-border-radius: 4px;display:inline-flex;position:relative;align-items:center;justify-content:center;width:var(--_et-window-control-button-size);height:var(--_et-window-control-button-size);flex-shrink:0;padding:0;border:none;border-radius:var(--_et-window-control-button-border-radius);background:var(--et-theme-color-primary, var(--_et-window-control-button-fallback-background));color:var(--et-theme-color-ink-solid, var(--_et-window-control-button-fallback-color));cursor:var(--et-button-cursor);font-size:var(--_et-window-control-button-icon-size);line-height:1;text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden}.et-window-control-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-window-control-button:where([data-size=sm]){--_et-window-control-button-size: 2.8rem;--_et-window-control-button-icon-size: 1.4rem}.et-window-control-button:where([data-size=md]){--_et-window-control-button-size: 3.2rem;--_et-window-control-button-icon-size: 1.6rem}.et-window-control-button:where([data-size=lg]){--_et-window-control-button-size: 3.6rem;--_et-window-control-button-icon-size: 1.8rem}.et-window-control-button:hover{--et-theme-color-primary-opacity: .14;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .14)}.et-window-control-button:focus-visible{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18);outline:none}.et-window-control-button:active{--et-theme-color-primary-opacity: .22;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .22)}.et-window-control-button[data-pressed=true]{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18)}.et-window-control-button[data-pressed=true]:hover{--et-theme-color-primary-opacity: .24;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .24)}.et-window-control-button[data-pressed=true]:focus-visible{--et-theme-color-primary-opacity: .28;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .28)}.et-window-control-button[data-pressed=true]:active{--et-theme-color-primary-opacity: .32;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .32)}.et-window-control-button:where([data-kind=close]):hover,.et-window-control-button:where([data-kind=close]):focus-visible{background:#e81123eb;color:#fff}.et-window-control-button:where([data-kind=close]):active{background:#c40e1df5;color:#fff}.et-window-control-button:where([disabled]),.et-window-control-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-window-control-button .et-window-control-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-window-control-button .et-window-control-button-icon:empty{display:none}.et-window-control-button .et-window-control-button-icon .et-icon{width:var(--_et-window-control-button-icon-size);height:var(--_et-window-control-button-icon-size)}.et-window-control-button[data-loading=true] .et-window-control-button-icon{opacity:0}.et-window-control-button[data-loading=true] .et-button-loader{opacity:1}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
986
986
|
}
|
|
987
987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowControlButtonComponent, decorators: [{
|
|
988
988
|
type: Component,
|
|
@@ -1017,7 +1017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1017
1017
|
'[attr.data-kind]': 'kind()',
|
|
1018
1018
|
'[attr.data-size]': 'size()',
|
|
1019
1019
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
1020
|
-
}, styles: ["@property --_et-window-control-button-size{syntax: \"<length>\"; inherits: false; initial-value: 32px;}@property --_et-window-control-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-window-control-button{--et-theme-color-primary-opacity: 0;--_et-window-control-button-fallback-background: transparent;--_et-window-control-button-fallback-color: rgba(255, 255, 255, .92);--_et-window-control-button-border-radius: 4px;display:inline-flex;position:relative;align-items:center;justify-content:center;width:var(--_et-window-control-button-size);height:var(--_et-window-control-button-size);flex-shrink:0;padding:0;border:none;border-radius:var(--_et-window-control-button-border-radius);background:var(--et-theme-color-primary, var(--_et-window-control-button-fallback-background));color:var(--et-theme-color-ink-solid, var(--_et-window-control-button-fallback-color));cursor:var(--et-button-cursor);font-size:var(--_et-window-control-button-icon-size);line-height:1;text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden}.et-window-control-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-window-control-button:where([data-size=sm]){--_et-window-control-button-size: 2.8rem;--_et-window-control-button-icon-size: 1.4rem}.et-window-control-button:where([data-size=md]){--_et-window-control-button-size: 3.2rem;--_et-window-control-button-icon-size: 1.6rem}.et-window-control-button:where([data-size=lg]){--_et-window-control-button-size: 3.6rem;--_et-window-control-button-icon-size: 1.8rem}.et-window-control-button:hover{--et-theme-color-primary-opacity: .14;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .14)}.et-window-control-button:focus-visible{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18);outline:none}.et-window-control-button:active{--et-theme-color-primary-opacity: .22;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .22)}.et-window-control-button[data-pressed=true]{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18)}.et-window-control-button[data-pressed=true]:hover{--et-theme-color-primary-opacity: .24;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .24)}.et-window-control-button[data-pressed=true]:focus-visible{--et-theme-color-primary-opacity: .28;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .28)}.et-window-control-button[data-pressed=true]:active{--et-theme-color-primary-opacity: .32;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .32)}.et-window-control-button:where([data-kind=close]):hover,.et-window-control-button:where([data-kind=close]):focus-visible{background:#e81123eb;color:#fff}.et-window-control-button:where([data-kind=close]):active{background:#c40e1df5;color:#fff}.et-window-control-button:where([disabled]),.et-window-control-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-window-control-button .et-window-control-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-window-control-button .et-window-control-button-icon:empty{display:none}.et-window-control-button .et-window-control-button-icon .et-icon{width:var(--_et-window-control-button-icon-size);height:var(--_et-window-control-button-icon-size)}.et-window-control-button[data-loading=true] .et-window-control-button-icon{opacity:0}.et-window-control-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
|
|
1020
|
+
}, styles: ["@layer components{@property --_et-window-control-button-size{syntax: \"<length>\"; inherits: false; initial-value: 32px;}@property --_et-window-control-button-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-window-control-button{--et-theme-color-primary-opacity: 0;--_et-window-control-button-fallback-background: transparent;--_et-window-control-button-fallback-color: rgba(255, 255, 255, .92);--_et-window-control-button-border-radius: 4px;display:inline-flex;position:relative;align-items:center;justify-content:center;width:var(--_et-window-control-button-size);height:var(--_et-window-control-button-size);flex-shrink:0;padding:0;border:none;border-radius:var(--_et-window-control-button-border-radius);background:var(--et-theme-color-primary, var(--_et-window-control-button-fallback-background));color:var(--et-theme-color-ink-solid, var(--_et-window-control-button-fallback-color));cursor:var(--et-button-cursor);font-size:var(--_et-window-control-button-icon-size);line-height:1;text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden}.et-window-control-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-window-control-button:where([data-size=sm]){--_et-window-control-button-size: 2.8rem;--_et-window-control-button-icon-size: 1.4rem}.et-window-control-button:where([data-size=md]){--_et-window-control-button-size: 3.2rem;--_et-window-control-button-icon-size: 1.6rem}.et-window-control-button:where([data-size=lg]){--_et-window-control-button-size: 3.6rem;--_et-window-control-button-icon-size: 1.8rem}.et-window-control-button:hover{--et-theme-color-primary-opacity: .14;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .14)}.et-window-control-button:focus-visible{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18);outline:none}.et-window-control-button:active{--et-theme-color-primary-opacity: .22;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .22)}.et-window-control-button[data-pressed=true]{--et-theme-color-primary-opacity: .18;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .18)}.et-window-control-button[data-pressed=true]:hover{--et-theme-color-primary-opacity: .24;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .24)}.et-window-control-button[data-pressed=true]:focus-visible{--et-theme-color-primary-opacity: .28;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .28)}.et-window-control-button[data-pressed=true]:active{--et-theme-color-primary-opacity: .32;--_et-window-control-button-fallback-background: rgba(255, 255, 255, .32)}.et-window-control-button:where([data-kind=close]):hover,.et-window-control-button:where([data-kind=close]):focus-visible{background:#e81123eb;color:#fff}.et-window-control-button:where([data-kind=close]):active{background:#c40e1df5;color:#fff}.et-window-control-button:where([disabled]),.et-window-control-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-window-control-button .et-window-control-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-window-control-button .et-window-control-button-icon:empty{display:none}.et-window-control-button .et-window-control-button-icon .et-icon{width:var(--_et-window-control-button-icon-size);height:var(--_et-window-control-button-icon-size)}.et-window-control-button[data-loading=true] .et-window-control-button-icon{opacity:0}.et-window-control-button[data-loading=true] .et-button-loader{opacity:1}}\n"] }]
|
|
1021
1021
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }] } });
|
|
1022
1022
|
|
|
1023
1023
|
const BUTTON_IMPORTS = [
|
|
@@ -1499,7 +1499,7 @@ class CheckboxComponent {
|
|
|
1499
1499
|
});
|
|
1500
1500
|
}
|
|
1501
1501
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1502
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: CheckboxComponent, isStandalone: true, selector: "et-checkbox", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox" }, viewQueries: [{ propertyName: "checkmarkEl", first: true, predicate: ["checkmark"], descendants: true, isSignal: true }, { propertyName: "indeterminateEl", first: true, predicate: ["indeterminate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CheckboxDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<div class=\"et-checkbox-box\">\n <svg\n #checkmark\n [style.color]=\"frozenCheckmarkColor()\"\n class=\"et-checkbox-checkmark\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <polyline\n class=\"et-checkbox-checkmark-path\"\n points=\"3.5 8 6.5 11 12.5 5\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n #indeterminate\n [style.color]=\"frozenIndeterminateColor()\"\n class=\"et-checkbox-indeterminate\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <line\n class=\"et-checkbox-indeterminate-path\"\n x1=\"4\"\n y1=\"8\"\n x2=\"12\"\n y2=\"8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</div>\n", styles: ["@property --et-checkbox-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1502
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: CheckboxComponent, isStandalone: true, selector: "et-checkbox", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox" }, viewQueries: [{ propertyName: "checkmarkEl", first: true, predicate: ["checkmark"], descendants: true, isSignal: true }, { propertyName: "indeterminateEl", first: true, predicate: ["indeterminate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CheckboxDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<div class=\"et-checkbox-box\">\n <svg\n #checkmark\n [style.color]=\"frozenCheckmarkColor()\"\n class=\"et-checkbox-checkmark\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <polyline\n class=\"et-checkbox-checkmark-path\"\n points=\"3.5 8 6.5 11 12.5 5\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n #indeterminate\n [style.color]=\"frozenIndeterminateColor()\"\n class=\"et-checkbox-indeterminate\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <line\n class=\"et-checkbox-indeterminate-path\"\n x1=\"4\"\n y1=\"8\"\n x2=\"12\"\n y2=\"8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</div>\n", styles: ["@layer components{@property --et-checkbox-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1503
1503
|
}
|
|
1504
1504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1505
1505
|
type: Component,
|
|
@@ -1514,7 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1514
1514
|
], host: {
|
|
1515
1515
|
class: 'et-checkbox',
|
|
1516
1516
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
1517
|
-
}, template: "<div class=\"et-checkbox-box\">\n <svg\n #checkmark\n [style.color]=\"frozenCheckmarkColor()\"\n class=\"et-checkbox-checkmark\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <polyline\n class=\"et-checkbox-checkmark-path\"\n points=\"3.5 8 6.5 11 12.5 5\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n #indeterminate\n [style.color]=\"frozenIndeterminateColor()\"\n class=\"et-checkbox-indeterminate\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <line\n class=\"et-checkbox-indeterminate-path\"\n x1=\"4\"\n y1=\"8\"\n x2=\"12\"\n y2=\"8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</div>\n", styles: ["@property --et-checkbox-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}\n"] }]
|
|
1517
|
+
}, template: "<div class=\"et-checkbox-box\">\n <svg\n #checkmark\n [style.color]=\"frozenCheckmarkColor()\"\n class=\"et-checkbox-checkmark\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <polyline\n class=\"et-checkbox-checkmark-path\"\n points=\"3.5 8 6.5 11 12.5 5\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n #indeterminate\n [style.color]=\"frozenIndeterminateColor()\"\n class=\"et-checkbox-indeterminate\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <line\n class=\"et-checkbox-indeterminate-path\"\n x1=\"4\"\n y1=\"8\"\n x2=\"12\"\n y2=\"8\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</div>\n", styles: ["@layer components{@property --et-checkbox-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}}\n"] }]
|
|
1518
1518
|
}], ctorParameters: () => [], propDecorators: { checkmarkEl: [{ type: i0.ViewChild, args: ['checkmark', { isSignal: true }] }], indeterminateEl: [{ type: i0.ViewChild, args: ['indeterminate', { isSignal: true }] }] } });
|
|
1519
1519
|
|
|
1520
1520
|
const CHECKBOX_IMPORTS = [CheckboxComponent, CheckboxDirective];
|
|
@@ -1581,7 +1581,7 @@ class ChoiceFieldComponent {
|
|
|
1581
1581
|
});
|
|
1582
1582
|
}
|
|
1583
1583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ChoiceFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ChoiceFieldComponent, isStandalone: true, selector: "et-choice-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-choice-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<div class=\"et-choice-field-control\" etColorInteractiveContainer>\n <div class=\"et-choice-field-control-slot\">\n <ng-content />\n </div>\n\n <div class=\"et-choice-field-label-area\">\n <ng-content select=\"et-label\" />\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field[data-size=sm]{--et-choice-field-label-font-size: 12px}et-choice-field[data-size=sm] et-checkbox{--et-checkbox-size: 16px}et-choice-field[data-size=sm] et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field[data-size=lg]{--et-choice-field-label-font-size: 16px}et-choice-field[data-size=lg] et-checkbox{--et-checkbox-size: 24px}et-choice-field[data-size=lg] et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}et-choice-field:where(:has(.et-choice-field-control:hover)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(.et-choice-field-control:active)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveContainerDirective, selector: "[etColorInteractiveContainer]" }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ChoiceFieldComponent, isStandalone: true, selector: "et-choice-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-choice-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<div class=\"et-choice-field-control\" etColorInteractiveContainer>\n <div class=\"et-choice-field-control-slot\">\n <ng-content />\n </div>\n\n <div class=\"et-choice-field-label-area\">\n <ng-content select=\"et-label\" />\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field:where([data-size=sm]){--et-choice-field-label-font-size: 12px}et-choice-field:where([data-size=sm]) et-checkbox{--et-checkbox-size: 16px}et-choice-field:where([data-size=sm]) et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field:where([data-size=lg]){--et-choice-field-label-font-size: 16px}et-choice-field:where([data-size=lg]) et-checkbox{--et-checkbox-size: 24px}et-choice-field:where([data-size=lg]) et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}et-choice-field:where(:has(.et-choice-field-control:hover)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(.et-choice-field-control:active)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveContainerDirective, selector: "[etColorInteractiveContainer]" }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1585
1585
|
}
|
|
1586
1586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ChoiceFieldComponent, decorators: [{
|
|
1587
1587
|
type: Component,
|
|
@@ -1596,7 +1596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1596
1596
|
'[attr.data-size]': 'size()',
|
|
1597
1597
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
1598
1598
|
'[attr.data-error]': 'support.displaysError() || null',
|
|
1599
|
-
}, template: "<div class=\"et-choice-field-control\" etColorInteractiveContainer>\n <div class=\"et-choice-field-control-slot\">\n <ng-content />\n </div>\n\n <div class=\"et-choice-field-label-area\">\n <ng-content select=\"et-label\" />\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field[data-size=sm]{--et-choice-field-label-font-size: 12px}et-choice-field[data-size=sm] et-checkbox{--et-checkbox-size: 16px}et-choice-field[data-size=sm] et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field[data-size=lg]{--et-choice-field-label-font-size: 16px}et-choice-field[data-size=lg] et-checkbox{--et-checkbox-size: 24px}et-choice-field[data-size=lg] et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}et-choice-field:where(:has(.et-choice-field-control:hover)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(.et-choice-field-control:active)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}\n"] }]
|
|
1599
|
+
}, template: "<div class=\"et-choice-field-control\" etColorInteractiveContainer>\n <div class=\"et-choice-field-control-slot\">\n <ng-content />\n </div>\n\n <div class=\"et-choice-field-label-area\">\n <ng-content select=\"et-label\" />\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field:where([data-size=sm]){--et-choice-field-label-font-size: 12px}et-choice-field:where([data-size=sm]) et-checkbox{--et-checkbox-size: 16px}et-choice-field:where([data-size=sm]) et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field:where([data-size=lg]){--et-choice-field-label-font-size: 16px}et-choice-field:where([data-size=lg]) et-checkbox{--et-checkbox-size: 24px}et-choice-field:where([data-size=lg]) et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}et-choice-field:where(:has(.et-choice-field-control:hover)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(.et-choice-field-control:active)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}}\n"] }]
|
|
1600
1600
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
1601
1601
|
|
|
1602
1602
|
class HintComponent {
|
|
@@ -2354,11 +2354,11 @@ class DropzoneDirective {
|
|
|
2354
2354
|
this.multiple = input(false, /* @ts-ignore */
|
|
2355
2355
|
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
2356
2356
|
/** Emits all files of a selection that were rejected, with the reason per file. */
|
|
2357
|
-
this.
|
|
2357
|
+
this.filesReject = output();
|
|
2358
2358
|
/** Emits when the upload of an entry succeeded (after the control value was updated). */
|
|
2359
|
-
this.
|
|
2359
|
+
this.uploadSucceed = output();
|
|
2360
2360
|
/** Emits when the upload of an entry failed. */
|
|
2361
|
-
this.
|
|
2361
|
+
this.uploadFail = output();
|
|
2362
2362
|
this.internalEntries = signal([], /* @ts-ignore */
|
|
2363
2363
|
...(ngDevMode ? [{ debugName: "internalEntries" }] : /* istanbul ignore next */ []));
|
|
2364
2364
|
this.internalLastRejections = signal([], /* @ts-ignore */
|
|
@@ -2462,7 +2462,7 @@ class DropzoneDirective {
|
|
|
2462
2462
|
}
|
|
2463
2463
|
this.setRejections(rejections);
|
|
2464
2464
|
if (rejections.length) {
|
|
2465
|
-
this.
|
|
2465
|
+
this.filesReject.emit(rejections);
|
|
2466
2466
|
}
|
|
2467
2467
|
if (!accepted.length) {
|
|
2468
2468
|
return;
|
|
@@ -2575,10 +2575,10 @@ class DropzoneDirective {
|
|
|
2575
2575
|
untracked(() => {
|
|
2576
2576
|
if (status === DROPZONE_ENTRY_STATUSES.SUCCESS) {
|
|
2577
2577
|
this.syncValue();
|
|
2578
|
-
this.
|
|
2578
|
+
this.uploadSucceed.emit(entry);
|
|
2579
2579
|
}
|
|
2580
2580
|
else if (status === DROPZONE_ENTRY_STATUSES.ERROR) {
|
|
2581
|
-
this.
|
|
2581
|
+
this.uploadFail.emit(entry);
|
|
2582
2582
|
}
|
|
2583
2583
|
});
|
|
2584
2584
|
}, { ...(ngDevMode ? { debugName: "watcher" } : /* istanbul ignore next */ {}), injector: this.injector });
|
|
@@ -2653,7 +2653,7 @@ class DropzoneDirective {
|
|
|
2653
2653
|
}
|
|
2654
2654
|
}
|
|
2655
2655
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2656
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DropzoneDirective, isStandalone: true, selector: "[etDropzone]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, upload: { classPropertyName: "upload", publicName: "upload", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange",
|
|
2656
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DropzoneDirective, isStandalone: true, selector: "[etDropzone]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, upload: { classPropertyName: "upload", publicName: "upload", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", filesReject: "filesReject", uploadSucceed: "uploadSucceed", uploadFail: "uploadFail" }, host: { listeners: { "dragenter": "handleDragEnter($event)", "dragover": "handleDragOver($event)", "dragleave": "handleDragLeave()", "drop": "handleDrop($event)" }, properties: { "attr.data-drag-over": "isDragOver() || null", "attr.data-disabled": "disabled() || null" } }, ngImport: i0 }); }
|
|
2657
2657
|
}
|
|
2658
2658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropzoneDirective, decorators: [{
|
|
2659
2659
|
type: Directive,
|
|
@@ -2668,7 +2668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2668
2668
|
'(drop)': 'handleDrop($event)',
|
|
2669
2669
|
},
|
|
2670
2670
|
}]
|
|
2671
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], upload: [{ type: i0.Input, args: [{ isSignal: true, alias: "upload", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }],
|
|
2671
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], upload: [{ type: i0.Input, args: [{ isSignal: true, alias: "upload", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filesReject: [{ type: i0.Output, args: ["filesReject"] }], uploadSucceed: [{ type: i0.Output, args: ["uploadSucceed"] }], uploadFail: [{ type: i0.Output, args: ["uploadFail"] }] } });
|
|
2672
2672
|
|
|
2673
2673
|
class DropzoneComponent {
|
|
2674
2674
|
constructor() {
|
|
@@ -2811,7 +2811,7 @@ class DropzoneComponent {
|
|
|
2811
2811
|
return serverMessage ? `"${entry.name()}": ${serverMessage}` : `"${entry.name()}" ${this.uploadErrorLabel()}.`;
|
|
2812
2812
|
}
|
|
2813
2813
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DropzoneComponent, isStandalone: true, selector: "et-dropzone", inputs: { retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, replaceLabel: { classPropertyName: "replaceLabel", publicName: "replaceLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorLabel: { classPropertyName: "uploadErrorLabel", publicName: "uploadErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorMessage: { classPropertyName: "uploadErrorMessage", publicName: "uploadErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-error": "support.displaysError() || null", "attr.data-multiple": "dropzoneDir.multiple() || null", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-dropzone" }, providers: [provideFormSupport(), provideIcons(UPLOAD_ICON, FILE_ICON, ROTATE_RIGHT_ICON, TIMES_ICON)], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "browseButton", first: true, predicate: ["browseButton"], descendants: true, isSignal: true }, { propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }, { propertyName: "entryElements", predicate: ["entryEl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: DropzoneDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "upload", "upload", "multiple", "multiple"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange", "filesRejected", "filesRejected", "uploadSucceeded", "uploadSucceeded", "uploadFailed", "uploadFailed"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content select=\"et-label\" />\n\n<input\n #fileInput\n [accept]=\"dropzoneDir.accept() || null\"\n [multiple]=\"dropzoneDir.multiple()\"\n [disabled]=\"dropzoneDir.disabled()\"\n (change)=\"uploadPickedFiles($event)\"\n (cancel)=\"resetFilePickerState()\"\n class=\"et-dropzone-native-input\"\n type=\"file\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div [attr.data-has-preview]=\"singleEntry() ? true : null\" class=\"et-dropzone-area\">\n <button\n #browseButton\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.tabindex]=\"singleEntry() ? '-1' : null\"\n [attr.aria-invalid]=\"dropzoneDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dropzoneDir.describedById() || null\"\n [attr.aria-labelledby]=\"dropzoneDir.labelId() || null\"\n (click)=\"openFilePicker()\"\n (focus)=\"resetFilePickerState()\"\n (blur)=\"markTriggerTouched()\"\n class=\"et-dropzone-trigger\"\n type=\"button\"\n etFocusRing\n >\n <span class=\"et-dropzone-prompt\">\n <ng-content>\n <i class=\"et-dropzone-prompt-icon\" etIcon=\"et-upload\"></i>\n <span class=\"et-dropzone-prompt-text\">Drag & drop or click to browse</span>\n </ng-content>\n </span>\n </button>\n\n @if (singleEntry(); as entry) {\n <div #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-preview\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n\n <div class=\"et-dropzone-preview-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n <div class=\"et-dropzone-preview-actions\">\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n } @else {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"replaceLabel()\"\n (click)=\"openFilePicker()\"\n class=\"et-dropzone-replace-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n\n@if (dropzoneDir.multiple() && dropzoneDir.entries().length) {\n <ul class=\"et-dropzone-list\" role=\"list\">\n @for (entry of dropzoneDir.entries(); track entry.id) {\n <li #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-item\">\n <div class=\"et-dropzone-item-thumbnail\" aria-hidden=\"true\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n </div>\n\n <div class=\"et-dropzone-item-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </li>\n }\n </ul>\n}\n\n<div class=\"et-dropzone-live-status\" role=\"status\" aria-live=\"polite\">{{ liveStatusMessage() }}</div>\n\n@if (internalErrorMessages().length) {\n <div [etProvideColor]=\"support.errorColorTheme\" class=\"et-dropzone-internal-errors\" role=\"alert\">\n @for (message of internalErrorMessages(); track $index) {\n <span class=\"et-dropzone-internal-error\">{{ message }}</span>\n }\n </div>\n}\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-dropzone-support\">\n <div class=\"et-dropzone-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-dropzone-support-content et-dropzone-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-dropzone-support-content et-dropzone-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-dropzone-min-height{syntax: \"<length>\"; inherits: true; initial-value: 160px;}@property --et-dropzone-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-dropzone-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-dropzone-thumbnail-size{syntax: \"<length>\"; inherits: true; initial-value: 48px;}@property --et-dropzone-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-dropzone-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-dropzone-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-dropzone-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-dropzone-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-dropzone-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-dropzone{display:flex;flex-direction:column;gap:var(--et-dropzone-gap);color:var(--et-surface-color-solid, currentColor)}et-dropzone>et-label{font-size:var(--et-dropzone-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-dropzone .et-dropzone-native-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}et-dropzone .et-dropzone-area{position:relative;display:grid}et-dropzone .et-dropzone-trigger{grid-area:1 / 1;display:grid;place-items:center;min-block-size:var(--et-dropzone-min-height);padding:16px;border:var(--et-dropzone-border-width) dashed var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:transparent;color:var(--et-surface-color-muted-solid, currentColor);font:inherit;cursor:pointer;transition:border-color var(--et-dropzone-transition-duration) ease,background-color var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-trigger:hover:not(:disabled){border-color:var(--et-surface-interaction-hover-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 6%,transparent)}et-dropzone .et-dropzone-trigger:disabled{cursor:not-allowed}et-dropzone .et-dropzone-prompt{display:flex;flex-direction:column;align-items:center;gap:8px}et-dropzone .et-dropzone-prompt-icon{display:block;inline-size:28px;block-size:28px}et-dropzone .et-dropzone-prompt-text{font-size:13px;line-height:1.4}et-dropzone .et-dropzone-area[data-has-preview] .et-dropzone-prompt{visibility:hidden}et-dropzone .et-dropzone-file-icon{display:block;inline-size:40px;block-size:40px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-preview{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:var(--et-dropzone-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-preview>.et-dropzone-preview-image{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-preview[data-status=error]>.et-dropzone-preview-image{opacity:.15}et-dropzone .et-dropzone-preview .et-dropzone-preview-info{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background-color:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}et-dropzone .et-dropzone-preview .et-dropzone-preview-info .et-dropzone-entry-size{color:#ffffffb3}et-dropzone .et-dropzone-preview .et-dropzone-preview-actions{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:flex;gap:6px}et-dropzone .et-dropzone-list{position:relative;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}et-dropzone .et-dropzone-item{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--et-surface-border-solid, currentColor);border-radius:calc(var(--et-dropzone-border-radius) / 1.5);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail{display:grid;place-items:center;flex-shrink:0;inline-size:var(--et-dropzone-thumbnail-size);block-size:var(--et-dropzone-thumbnail-size);overflow:hidden;border-radius:calc(var(--et-dropzone-border-radius) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-preview-image{inline-size:100%;block-size:100%;object-fit:cover}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-file-icon{inline-size:22px;block-size:22px}et-dropzone .et-dropzone-item .et-dropzone-item-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1}et-dropzone .et-dropzone-entry-name{overflow:hidden;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}et-dropzone .et-dropzone-entry-size{font-size:12px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-internal-errors{display:flex;flex-direction:column;gap:2px;margin-block-start:calc(4px - var(--et-dropzone-gap));font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-entry-progress{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--et-dropzone-transition-duration) ease,opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-entry-progress[data-active]{grid-template-rows:1fr;opacity:1}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner{min-block-size:0;overflow:hidden}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner et-progress-bar{margin-block:4px 2px}et-dropzone .et-dropzone-live-status{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}et-dropzone .et-dropzone-support{margin-block-start:calc(4px - var(--et-dropzone-gap));overflow:clip;block-size:0}et-dropzone .et-dropzone-support-stack{position:relative;display:grid}et-dropzone .et-dropzone-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-dropzone .et-dropzone-support-content[data-active]{opacity:1;transform:translateY(0)}et-dropzone .et-dropzone-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-hint{padding-block-start:4px;font-size:var(--et-dropzone-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-hint:empty{display:none}et-dropzone[data-can-animate] .et-dropzone-support{transition:block-size var(--et-dropzone-support-duration) ease}et-dropzone[data-can-animate] .et-dropzone-support-content{transition:opacity var(--et-dropzone-support-duration) ease,transform var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-dropzone-support-offset) * -1))}}et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{transition:opacity var(--et-dropzone-transition-duration) ease,scale var(--et-dropzone-transition-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{opacity:0;scale:.97}}et-dropzone[data-can-animate] .et-dropzone-internal-errors{transition:opacity var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-internal-errors{opacity:0}}@media(prefers-reduced-motion:reduce){et-dropzone{--et-dropzone-support-duration: 1ms;--et-dropzone-support-offset: 0px;--et-dropzone-transition-duration: 1ms}}et-dropzone[data-drag-over] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 8%,transparent)}et-dropzone[data-error] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone[data-disabled] .et-dropzone-area,et-dropzone[data-disabled] .et-dropzone-list{opacity:var(--et-dropzone-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: ProgressBarComponent, selector: "et-progress-bar", inputs: ["value", "indeterminate"] }, { kind: "directive", type: FocusRingDirective, selector: "[etFocusRing]", inputs: ["disabled"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DropzoneComponent, isStandalone: true, selector: "et-dropzone", inputs: { retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, replaceLabel: { classPropertyName: "replaceLabel", publicName: "replaceLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorLabel: { classPropertyName: "uploadErrorLabel", publicName: "uploadErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorMessage: { classPropertyName: "uploadErrorMessage", publicName: "uploadErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-error": "support.displaysError() || null", "attr.data-multiple": "dropzoneDir.multiple() || null", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-dropzone" }, providers: [provideFormSupport(), provideIcons(UPLOAD_ICON, FILE_ICON, ROTATE_RIGHT_ICON, TIMES_ICON)], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "browseButton", first: true, predicate: ["browseButton"], descendants: true, isSignal: true }, { propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }, { propertyName: "entryElements", predicate: ["entryEl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: DropzoneDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "upload", "upload", "multiple", "multiple"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange", "filesReject", "filesReject", "uploadSucceed", "uploadSucceed", "uploadFail", "uploadFail"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content select=\"et-label\" />\n\n<input\n #fileInput\n [accept]=\"dropzoneDir.accept() || null\"\n [multiple]=\"dropzoneDir.multiple()\"\n [disabled]=\"dropzoneDir.disabled()\"\n (change)=\"uploadPickedFiles($event)\"\n (cancel)=\"resetFilePickerState()\"\n class=\"et-dropzone-native-input\"\n type=\"file\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div [attr.data-has-preview]=\"singleEntry() ? true : null\" class=\"et-dropzone-area\">\n <button\n #browseButton\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.tabindex]=\"singleEntry() ? '-1' : null\"\n [attr.aria-invalid]=\"dropzoneDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dropzoneDir.describedById() || null\"\n [attr.aria-labelledby]=\"dropzoneDir.labelId() || null\"\n (click)=\"openFilePicker()\"\n (focus)=\"resetFilePickerState()\"\n (blur)=\"markTriggerTouched()\"\n class=\"et-dropzone-trigger\"\n type=\"button\"\n etFocusRing\n >\n <span class=\"et-dropzone-prompt\">\n <ng-content>\n <i class=\"et-dropzone-prompt-icon\" etIcon=\"et-upload\"></i>\n <span class=\"et-dropzone-prompt-text\">Drag & drop or click to browse</span>\n </ng-content>\n </span>\n </button>\n\n @if (singleEntry(); as entry) {\n <div #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-preview\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n\n <div class=\"et-dropzone-preview-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n <div class=\"et-dropzone-preview-actions\">\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n } @else {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"replaceLabel()\"\n (click)=\"openFilePicker()\"\n class=\"et-dropzone-replace-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n\n@if (dropzoneDir.multiple() && dropzoneDir.entries().length) {\n <ul class=\"et-dropzone-list\" role=\"list\">\n @for (entry of dropzoneDir.entries(); track entry.id) {\n <li #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-item\">\n <div class=\"et-dropzone-item-thumbnail\" aria-hidden=\"true\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n </div>\n\n <div class=\"et-dropzone-item-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </li>\n }\n </ul>\n}\n\n<div class=\"et-dropzone-live-status\" role=\"status\" aria-live=\"polite\">{{ liveStatusMessage() }}</div>\n\n@if (internalErrorMessages().length) {\n <div [etProvideColor]=\"support.errorColorTheme\" class=\"et-dropzone-internal-errors\" role=\"alert\">\n @for (message of internalErrorMessages(); track $index) {\n <span class=\"et-dropzone-internal-error\">{{ message }}</span>\n }\n </div>\n}\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-dropzone-support\">\n <div class=\"et-dropzone-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-dropzone-support-content et-dropzone-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-dropzone-support-content et-dropzone-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-dropzone-min-height{syntax: \"<length>\"; inherits: true; initial-value: 160px;}@property --et-dropzone-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-dropzone-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-dropzone-thumbnail-size{syntax: \"<length>\"; inherits: true; initial-value: 48px;}@property --et-dropzone-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-dropzone-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-dropzone-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-dropzone-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-dropzone-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-dropzone-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-dropzone{display:flex;flex-direction:column;gap:var(--et-dropzone-gap);color:var(--et-surface-color-solid, currentColor)}et-dropzone>et-label{font-size:var(--et-dropzone-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-dropzone .et-dropzone-native-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}et-dropzone .et-dropzone-area{position:relative;display:grid}et-dropzone .et-dropzone-trigger{grid-area:1 / 1;display:grid;place-items:center;min-block-size:var(--et-dropzone-min-height);padding:16px;border:var(--et-dropzone-border-width) dashed var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:transparent;color:var(--et-surface-color-muted-solid, currentColor);font:inherit;cursor:pointer;transition:border-color var(--et-dropzone-transition-duration) ease,background-color var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-trigger:hover:not(:disabled){border-color:var(--et-surface-interaction-hover-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 6%,transparent)}et-dropzone .et-dropzone-trigger:disabled{cursor:not-allowed}et-dropzone .et-dropzone-prompt{display:flex;flex-direction:column;align-items:center;gap:8px}et-dropzone .et-dropzone-prompt-icon{display:block;inline-size:28px;block-size:28px}et-dropzone .et-dropzone-prompt-text{font-size:13px;line-height:1.4}et-dropzone .et-dropzone-area[data-has-preview] .et-dropzone-prompt{visibility:hidden}et-dropzone .et-dropzone-file-icon{display:block;inline-size:40px;block-size:40px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-preview{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:var(--et-dropzone-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-preview>.et-dropzone-preview-image{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-preview[data-status=error]>.et-dropzone-preview-image{opacity:.15}et-dropzone .et-dropzone-preview .et-dropzone-preview-info{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background-color:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}et-dropzone .et-dropzone-preview .et-dropzone-preview-info .et-dropzone-entry-size{color:#ffffffb3}et-dropzone .et-dropzone-preview .et-dropzone-preview-actions{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:flex;gap:6px}et-dropzone .et-dropzone-list{position:relative;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}et-dropzone .et-dropzone-item{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--et-surface-border-solid, currentColor);border-radius:calc(var(--et-dropzone-border-radius) / 1.5);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail{display:grid;place-items:center;flex-shrink:0;inline-size:var(--et-dropzone-thumbnail-size);block-size:var(--et-dropzone-thumbnail-size);overflow:hidden;border-radius:calc(var(--et-dropzone-border-radius) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-preview-image{inline-size:100%;block-size:100%;object-fit:cover}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-file-icon{inline-size:22px;block-size:22px}et-dropzone .et-dropzone-item .et-dropzone-item-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1}et-dropzone .et-dropzone-entry-name{overflow:hidden;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}et-dropzone .et-dropzone-entry-size{font-size:12px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-internal-errors{display:flex;flex-direction:column;gap:2px;margin-block-start:calc(4px - var(--et-dropzone-gap));font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-entry-progress{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--et-dropzone-transition-duration) ease,opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-entry-progress[data-active]{grid-template-rows:1fr;opacity:1}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner{min-block-size:0;overflow:hidden}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner et-progress-bar{margin-block:4px 2px}et-dropzone .et-dropzone-live-status{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}et-dropzone .et-dropzone-support{margin-block-start:calc(4px - var(--et-dropzone-gap));overflow:clip;block-size:0}et-dropzone .et-dropzone-support-stack{position:relative;display:grid}et-dropzone .et-dropzone-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-dropzone .et-dropzone-support-content[data-active]{opacity:1;transform:translateY(0)}et-dropzone .et-dropzone-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-hint{padding-block-start:4px;font-size:var(--et-dropzone-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-hint:empty{display:none}et-dropzone[data-can-animate] .et-dropzone-support{transition:block-size var(--et-dropzone-support-duration) ease}et-dropzone[data-can-animate] .et-dropzone-support-content{transition:opacity var(--et-dropzone-support-duration) ease,transform var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-dropzone-support-offset) * -1))}}et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{transition:opacity var(--et-dropzone-transition-duration) ease,scale var(--et-dropzone-transition-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{opacity:0;scale:.97}}et-dropzone[data-can-animate] .et-dropzone-internal-errors{transition:opacity var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-internal-errors{opacity:0}}@media(prefers-reduced-motion:reduce){et-dropzone{--et-dropzone-support-duration: 1ms;--et-dropzone-support-offset: 0px;--et-dropzone-transition-duration: 1ms}}et-dropzone[data-drag-over] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 8%,transparent)}et-dropzone[data-error] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone[data-disabled] .et-dropzone-area,et-dropzone[data-disabled] .et-dropzone-list{opacity:var(--et-dropzone-opacity-disabled)}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: ProgressBarComponent, selector: "et-progress-bar", inputs: ["value", "indeterminate"] }, { kind: "directive", type: FocusRingDirective, selector: "[etFocusRing]", inputs: ["disabled"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2815
2815
|
}
|
|
2816
2816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropzoneComponent, decorators: [{
|
|
2817
2817
|
type: Component,
|
|
@@ -2828,7 +2828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2828
2828
|
{
|
|
2829
2829
|
directive: DropzoneDirective,
|
|
2830
2830
|
inputs: ['value', 'touched', 'disabled', 'invalid', 'errors', 'required', 'name', 'upload', 'multiple'],
|
|
2831
|
-
outputs: ['valueChange', 'touchedChange', '
|
|
2831
|
+
outputs: ['valueChange', 'touchedChange', 'filesReject', 'uploadSucceed', 'uploadFail'],
|
|
2832
2832
|
},
|
|
2833
2833
|
{ directive: ProvideColorDirective, inputs: ['etProvideColor:color'] },
|
|
2834
2834
|
], host: {
|
|
@@ -2836,7 +2836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2836
2836
|
'[attr.data-error]': 'support.displaysError() || null',
|
|
2837
2837
|
'[attr.data-multiple]': 'dropzoneDir.multiple() || null',
|
|
2838
2838
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
2839
|
-
}, template: "<ng-content select=\"et-label\" />\n\n<input\n #fileInput\n [accept]=\"dropzoneDir.accept() || null\"\n [multiple]=\"dropzoneDir.multiple()\"\n [disabled]=\"dropzoneDir.disabled()\"\n (change)=\"uploadPickedFiles($event)\"\n (cancel)=\"resetFilePickerState()\"\n class=\"et-dropzone-native-input\"\n type=\"file\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div [attr.data-has-preview]=\"singleEntry() ? true : null\" class=\"et-dropzone-area\">\n <button\n #browseButton\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.tabindex]=\"singleEntry() ? '-1' : null\"\n [attr.aria-invalid]=\"dropzoneDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dropzoneDir.describedById() || null\"\n [attr.aria-labelledby]=\"dropzoneDir.labelId() || null\"\n (click)=\"openFilePicker()\"\n (focus)=\"resetFilePickerState()\"\n (blur)=\"markTriggerTouched()\"\n class=\"et-dropzone-trigger\"\n type=\"button\"\n etFocusRing\n >\n <span class=\"et-dropzone-prompt\">\n <ng-content>\n <i class=\"et-dropzone-prompt-icon\" etIcon=\"et-upload\"></i>\n <span class=\"et-dropzone-prompt-text\">Drag & drop or click to browse</span>\n </ng-content>\n </span>\n </button>\n\n @if (singleEntry(); as entry) {\n <div #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-preview\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n\n <div class=\"et-dropzone-preview-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n <div class=\"et-dropzone-preview-actions\">\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n } @else {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"replaceLabel()\"\n (click)=\"openFilePicker()\"\n class=\"et-dropzone-replace-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n\n@if (dropzoneDir.multiple() && dropzoneDir.entries().length) {\n <ul class=\"et-dropzone-list\" role=\"list\">\n @for (entry of dropzoneDir.entries(); track entry.id) {\n <li #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-item\">\n <div class=\"et-dropzone-item-thumbnail\" aria-hidden=\"true\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n </div>\n\n <div class=\"et-dropzone-item-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </li>\n }\n </ul>\n}\n\n<div class=\"et-dropzone-live-status\" role=\"status\" aria-live=\"polite\">{{ liveStatusMessage() }}</div>\n\n@if (internalErrorMessages().length) {\n <div [etProvideColor]=\"support.errorColorTheme\" class=\"et-dropzone-internal-errors\" role=\"alert\">\n @for (message of internalErrorMessages(); track $index) {\n <span class=\"et-dropzone-internal-error\">{{ message }}</span>\n }\n </div>\n}\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-dropzone-support\">\n <div class=\"et-dropzone-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-dropzone-support-content et-dropzone-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-dropzone-support-content et-dropzone-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-dropzone-min-height{syntax: \"<length>\"; inherits: true; initial-value: 160px;}@property --et-dropzone-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-dropzone-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-dropzone-thumbnail-size{syntax: \"<length>\"; inherits: true; initial-value: 48px;}@property --et-dropzone-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-dropzone-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-dropzone-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-dropzone-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-dropzone-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-dropzone-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-dropzone{display:flex;flex-direction:column;gap:var(--et-dropzone-gap);color:var(--et-surface-color-solid, currentColor)}et-dropzone>et-label{font-size:var(--et-dropzone-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-dropzone .et-dropzone-native-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}et-dropzone .et-dropzone-area{position:relative;display:grid}et-dropzone .et-dropzone-trigger{grid-area:1 / 1;display:grid;place-items:center;min-block-size:var(--et-dropzone-min-height);padding:16px;border:var(--et-dropzone-border-width) dashed var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:transparent;color:var(--et-surface-color-muted-solid, currentColor);font:inherit;cursor:pointer;transition:border-color var(--et-dropzone-transition-duration) ease,background-color var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-trigger:hover:not(:disabled){border-color:var(--et-surface-interaction-hover-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 6%,transparent)}et-dropzone .et-dropzone-trigger:disabled{cursor:not-allowed}et-dropzone .et-dropzone-prompt{display:flex;flex-direction:column;align-items:center;gap:8px}et-dropzone .et-dropzone-prompt-icon{display:block;inline-size:28px;block-size:28px}et-dropzone .et-dropzone-prompt-text{font-size:13px;line-height:1.4}et-dropzone .et-dropzone-area[data-has-preview] .et-dropzone-prompt{visibility:hidden}et-dropzone .et-dropzone-file-icon{display:block;inline-size:40px;block-size:40px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-preview{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:var(--et-dropzone-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-preview>.et-dropzone-preview-image{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-preview[data-status=error]>.et-dropzone-preview-image{opacity:.15}et-dropzone .et-dropzone-preview .et-dropzone-preview-info{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background-color:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}et-dropzone .et-dropzone-preview .et-dropzone-preview-info .et-dropzone-entry-size{color:#ffffffb3}et-dropzone .et-dropzone-preview .et-dropzone-preview-actions{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:flex;gap:6px}et-dropzone .et-dropzone-list{position:relative;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}et-dropzone .et-dropzone-item{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--et-surface-border-solid, currentColor);border-radius:calc(var(--et-dropzone-border-radius) / 1.5);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail{display:grid;place-items:center;flex-shrink:0;inline-size:var(--et-dropzone-thumbnail-size);block-size:var(--et-dropzone-thumbnail-size);overflow:hidden;border-radius:calc(var(--et-dropzone-border-radius) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-preview-image{inline-size:100%;block-size:100%;object-fit:cover}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-file-icon{inline-size:22px;block-size:22px}et-dropzone .et-dropzone-item .et-dropzone-item-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1}et-dropzone .et-dropzone-entry-name{overflow:hidden;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}et-dropzone .et-dropzone-entry-size{font-size:12px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-internal-errors{display:flex;flex-direction:column;gap:2px;margin-block-start:calc(4px - var(--et-dropzone-gap));font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-entry-progress{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--et-dropzone-transition-duration) ease,opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-entry-progress[data-active]{grid-template-rows:1fr;opacity:1}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner{min-block-size:0;overflow:hidden}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner et-progress-bar{margin-block:4px 2px}et-dropzone .et-dropzone-live-status{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}et-dropzone .et-dropzone-support{margin-block-start:calc(4px - var(--et-dropzone-gap));overflow:clip;block-size:0}et-dropzone .et-dropzone-support-stack{position:relative;display:grid}et-dropzone .et-dropzone-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-dropzone .et-dropzone-support-content[data-active]{opacity:1;transform:translateY(0)}et-dropzone .et-dropzone-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-hint{padding-block-start:4px;font-size:var(--et-dropzone-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-hint:empty{display:none}et-dropzone[data-can-animate] .et-dropzone-support{transition:block-size var(--et-dropzone-support-duration) ease}et-dropzone[data-can-animate] .et-dropzone-support-content{transition:opacity var(--et-dropzone-support-duration) ease,transform var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-dropzone-support-offset) * -1))}}et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{transition:opacity var(--et-dropzone-transition-duration) ease,scale var(--et-dropzone-transition-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{opacity:0;scale:.97}}et-dropzone[data-can-animate] .et-dropzone-internal-errors{transition:opacity var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-internal-errors{opacity:0}}@media(prefers-reduced-motion:reduce){et-dropzone{--et-dropzone-support-duration: 1ms;--et-dropzone-support-offset: 0px;--et-dropzone-transition-duration: 1ms}}et-dropzone[data-drag-over] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 8%,transparent)}et-dropzone[data-error] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone[data-disabled] .et-dropzone-area,et-dropzone[data-disabled] .et-dropzone-list{opacity:var(--et-dropzone-opacity-disabled)}\n"] }]
|
|
2839
|
+
}, template: "<ng-content select=\"et-label\" />\n\n<input\n #fileInput\n [accept]=\"dropzoneDir.accept() || null\"\n [multiple]=\"dropzoneDir.multiple()\"\n [disabled]=\"dropzoneDir.disabled()\"\n (change)=\"uploadPickedFiles($event)\"\n (cancel)=\"resetFilePickerState()\"\n class=\"et-dropzone-native-input\"\n type=\"file\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div [attr.data-has-preview]=\"singleEntry() ? true : null\" class=\"et-dropzone-area\">\n <button\n #browseButton\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.tabindex]=\"singleEntry() ? '-1' : null\"\n [attr.aria-invalid]=\"dropzoneDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dropzoneDir.describedById() || null\"\n [attr.aria-labelledby]=\"dropzoneDir.labelId() || null\"\n (click)=\"openFilePicker()\"\n (focus)=\"resetFilePickerState()\"\n (blur)=\"markTriggerTouched()\"\n class=\"et-dropzone-trigger\"\n type=\"button\"\n etFocusRing\n >\n <span class=\"et-dropzone-prompt\">\n <ng-content>\n <i class=\"et-dropzone-prompt-icon\" etIcon=\"et-upload\"></i>\n <span class=\"et-dropzone-prompt-text\">Drag & drop or click to browse</span>\n </ng-content>\n </span>\n </button>\n\n @if (singleEntry(); as entry) {\n <div #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-preview\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n\n <div class=\"et-dropzone-preview-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n <div class=\"et-dropzone-preview-actions\">\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n } @else {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"replaceLabel()\"\n (click)=\"openFilePicker()\"\n class=\"et-dropzone-replace-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n variant=\"filled\"\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n\n@if (dropzoneDir.multiple() && dropzoneDir.entries().length) {\n <ul class=\"et-dropzone-list\" role=\"list\">\n @for (entry of dropzoneDir.entries(); track entry.id) {\n <li #entryEl [attr.data-status]=\"entry.status()\" class=\"et-dropzone-item\">\n <div class=\"et-dropzone-item-thumbnail\" aria-hidden=\"true\">\n @if (entry.previewUrl(); as previewUrl) {\n <img [src]=\"previewUrl\" class=\"et-dropzone-preview-image\" alt=\"\" />\n } @else {\n <i class=\"et-dropzone-file-icon\" etIcon=\"et-file\"></i>\n }\n </div>\n\n <div class=\"et-dropzone-item-info\">\n <span class=\"et-dropzone-entry-name\">{{ entry.name() }}</span>\n\n @if (entry.size(); as size) {\n <span class=\"et-dropzone-entry-size\">{{ FORMAT_FILE_SIZE(size) }}</span>\n }\n\n @if (entry.source.type === 'file') {\n <div [attr.data-active]=\"entry.status() === 'uploading' || null\" class=\"et-dropzone-entry-progress\">\n <div class=\"et-dropzone-entry-progress-inner\">\n <et-progress-bar [value]=\"entry.progress() ?? 0\" [indeterminate]=\"entry.progress() === null\" />\n </div>\n </div>\n }\n </div>\n\n @if (entry.status() === 'error') {\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"retryLabel() + ' ' + entry.name()\"\n (click)=\"dropzoneDir.retryEntry(entry.id)\"\n class=\"et-dropzone-retry-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-rotate-right\"></i>\n </button>\n }\n\n <button\n [disabled]=\"dropzoneDir.disabled()\"\n [attr.aria-label]=\"removeLabel() + ' ' + entry.name()\"\n (click)=\"removeEntryAnimated(entry, entryEl)\"\n class=\"et-dropzone-remove-button\"\n type=\"button\"\n et-icon-button\n size=\"sm\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </li>\n }\n </ul>\n}\n\n<div class=\"et-dropzone-live-status\" role=\"status\" aria-live=\"polite\">{{ liveStatusMessage() }}</div>\n\n@if (internalErrorMessages().length) {\n <div [etProvideColor]=\"support.errorColorTheme\" class=\"et-dropzone-internal-errors\" role=\"alert\">\n @for (message of internalErrorMessages(); track $index) {\n <span class=\"et-dropzone-internal-error\">{{ message }}</span>\n }\n </div>\n}\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-dropzone-support\">\n <div class=\"et-dropzone-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-dropzone-support-content et-dropzone-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-dropzone-support-content et-dropzone-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-dropzone-min-height{syntax: \"<length>\"; inherits: true; initial-value: 160px;}@property --et-dropzone-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-dropzone-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-dropzone-thumbnail-size{syntax: \"<length>\"; inherits: true; initial-value: 48px;}@property --et-dropzone-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-dropzone-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-dropzone-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-dropzone-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-dropzone-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-dropzone-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-dropzone-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-dropzone{display:flex;flex-direction:column;gap:var(--et-dropzone-gap);color:var(--et-surface-color-solid, currentColor)}et-dropzone>et-label{font-size:var(--et-dropzone-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-dropzone .et-dropzone-native-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}et-dropzone .et-dropzone-area{position:relative;display:grid}et-dropzone .et-dropzone-trigger{grid-area:1 / 1;display:grid;place-items:center;min-block-size:var(--et-dropzone-min-height);padding:16px;border:var(--et-dropzone-border-width) dashed var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:transparent;color:var(--et-surface-color-muted-solid, currentColor);font:inherit;cursor:pointer;transition:border-color var(--et-dropzone-transition-duration) ease,background-color var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-trigger:hover:not(:disabled){border-color:var(--et-surface-interaction-hover-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 6%,transparent)}et-dropzone .et-dropzone-trigger:disabled{cursor:not-allowed}et-dropzone .et-dropzone-prompt{display:flex;flex-direction:column;align-items:center;gap:8px}et-dropzone .et-dropzone-prompt-icon{display:block;inline-size:28px;block-size:28px}et-dropzone .et-dropzone-prompt-text{font-size:13px;line-height:1.4}et-dropzone .et-dropzone-area[data-has-preview] .et-dropzone-prompt{visibility:hidden}et-dropzone .et-dropzone-file-icon{display:block;inline-size:40px;block-size:40px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-preview{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:var(--et-dropzone-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-dropzone-border-radius);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-preview>.et-dropzone-preview-image{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-preview[data-status=error]>.et-dropzone-preview-image{opacity:.15}et-dropzone .et-dropzone-preview .et-dropzone-preview-info{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background-color:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}et-dropzone .et-dropzone-preview .et-dropzone-preview-info .et-dropzone-entry-size{color:#ffffffb3}et-dropzone .et-dropzone-preview .et-dropzone-preview-actions{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:flex;gap:6px}et-dropzone .et-dropzone-list{position:relative;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}et-dropzone .et-dropzone-item{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--et-surface-border-solid, currentColor);border-radius:calc(var(--et-dropzone-border-radius) / 1.5);background-color:var(--et-surface-background-solid, transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail{display:grid;place-items:center;flex-shrink:0;inline-size:var(--et-dropzone-thumbnail-size);block-size:var(--et-dropzone-thumbnail-size);overflow:hidden;border-radius:calc(var(--et-dropzone-border-radius) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-preview-image{inline-size:100%;block-size:100%;object-fit:cover}et-dropzone .et-dropzone-item .et-dropzone-item-thumbnail .et-dropzone-file-icon{inline-size:22px;block-size:22px}et-dropzone .et-dropzone-item .et-dropzone-item-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1}et-dropzone .et-dropzone-entry-name{overflow:hidden;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}et-dropzone .et-dropzone-entry-size{font-size:12px;color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-internal-errors{display:flex;flex-direction:column;gap:2px;margin-block-start:calc(4px - var(--et-dropzone-gap));font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-entry-progress{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--et-dropzone-transition-duration) ease,opacity var(--et-dropzone-transition-duration) ease}et-dropzone .et-dropzone-entry-progress[data-active]{grid-template-rows:1fr;opacity:1}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner{min-block-size:0;overflow:hidden}et-dropzone .et-dropzone-entry-progress .et-dropzone-entry-progress-inner et-progress-bar{margin-block:4px 2px}et-dropzone .et-dropzone-live-status{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}et-dropzone .et-dropzone-support{margin-block-start:calc(4px - var(--et-dropzone-gap));overflow:clip;block-size:0}et-dropzone .et-dropzone-support-stack{position:relative;display:grid}et-dropzone .et-dropzone-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-dropzone .et-dropzone-support-content[data-active]{opacity:1;transform:translateY(0)}et-dropzone .et-dropzone-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-dropzone-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone .et-dropzone-hint{padding-block-start:4px;font-size:var(--et-dropzone-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-dropzone .et-dropzone-hint:empty{display:none}et-dropzone[data-can-animate] .et-dropzone-support{transition:block-size var(--et-dropzone-support-duration) ease}et-dropzone[data-can-animate] .et-dropzone-support-content{transition:opacity var(--et-dropzone-support-duration) ease,transform var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-dropzone-support-offset) * -1))}}et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{transition:opacity var(--et-dropzone-transition-duration) ease,scale var(--et-dropzone-transition-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-item,et-dropzone[data-can-animate] .et-dropzone-preview{opacity:0;scale:.97}}et-dropzone[data-can-animate] .et-dropzone-internal-errors{transition:opacity var(--et-dropzone-support-duration) ease}@starting-style{et-dropzone[data-can-animate] .et-dropzone-internal-errors{opacity:0}}@media(prefers-reduced-motion:reduce){et-dropzone{--et-dropzone-support-duration: 1ms;--et-dropzone-support-offset: 0px;--et-dropzone-transition-duration: 1ms}}et-dropzone[data-drag-over] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 8%,transparent)}et-dropzone[data-error] .et-dropzone-trigger{border-color:var(--et-theme-color-primary-solid, currentColor)}et-dropzone[data-disabled] .et-dropzone-area,et-dropzone[data-disabled] .et-dropzone-list{opacity:var(--et-dropzone-opacity-disabled)}}\n"] }]
|
|
2840
2840
|
}], ctorParameters: () => [], propDecorators: { retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], replaceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "replaceLabel", required: false }] }], uploadErrorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadErrorLabel", required: false }] }], uploadErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadErrorMessage", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], browseButton: [{ type: i0.ViewChild, args: ['browseButton', { isSignal: true }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }], entryElements: [{ type: i0.ViewChildren, args: ['entryEl', { isSignal: true }] }] } });
|
|
2841
2841
|
|
|
2842
2842
|
const DROPZONE_IMPORTS = [DropzoneComponent, DropzoneDirective];
|
|
@@ -3122,7 +3122,7 @@ class FormFieldComponent {
|
|
|
3122
3122
|
this.formFieldDir.activate();
|
|
3123
3123
|
}
|
|
3124
3124
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "displaysError() || null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <ng-content select=\"[etInputSuffix]\" />\n </div>\n </div>\n</div>\n\n@if (shouldRenderSupport()) {\n <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-stack\">\n @if (shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n [attr.data-active]=\"errorActive() || null\"\n [attr.data-direction]=\"errorDirection()\"\n [attr.data-state]=\"errorState()\"\n [etProvideColor]=\"errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n [attr.data-active]=\"hintActive() || null\"\n [attr.data-direction]=\"hintDirection()\"\n [attr.data-state]=\"hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var(--et-surface-background-solid, var(--et-surface-base-solid, transparent))}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-frame{align-items:stretch;padding:0;cursor:auto}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-area,et-form-field:where([data-control-type=rich-text]) .et-form-field-control-slot{align-items:stretch}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3125
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "displaysError() || null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <ng-content select=\"[etInputSuffix]\" />\n </div>\n </div>\n</div>\n\n@if (shouldRenderSupport()) {\n <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-stack\">\n @if (shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n [attr.data-active]=\"errorActive() || null\"\n [attr.data-direction]=\"errorDirection()\"\n [attr.data-state]=\"errorState()\"\n [etProvideColor]=\"errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n [attr.data-active]=\"hintActive() || null\"\n [attr.data-direction]=\"hintDirection()\"\n [attr.data-state]=\"hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-frame{align-items:stretch;padding:0;cursor:auto}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-area,et-form-field:where([data-control-type=rich-text]) .et-form-field-control-slot{align-items:stretch}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3126
3126
|
}
|
|
3127
3127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
3128
3128
|
type: Component,
|
|
@@ -3143,7 +3143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3143
3143
|
'[attr.data-size]': 'formFieldDir.usesTextFieldShell() ? size() : null',
|
|
3144
3144
|
'[attr.data-text-shell]': 'formFieldDir.usesTextFieldShell() || null',
|
|
3145
3145
|
'[style.--_et-form-field-prefix-offset]': 'prefixOffset()',
|
|
3146
|
-
}, template: "<div class=\"et-form-field-shell\">\n <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <ng-content select=\"[etInputSuffix]\" />\n </div>\n </div>\n</div>\n\n@if (shouldRenderSupport()) {\n <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-stack\">\n @if (shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n [attr.data-active]=\"errorActive() || null\"\n [attr.data-direction]=\"errorDirection()\"\n [attr.data-state]=\"errorState()\"\n [etProvideColor]=\"errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n [attr.data-active]=\"hintActive() || null\"\n [attr.data-direction]=\"hintDirection()\"\n [attr.data-state]=\"hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var(--et-surface-background-solid, var(--et-surface-base-solid, transparent))}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-frame{align-items:stretch;padding:0;cursor:auto}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-area,et-form-field:where([data-control-type=rich-text]) .et-form-field-control-slot{align-items:stretch}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}\n"] }]
|
|
3146
|
+
}, template: "<div class=\"et-form-field-shell\">\n <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <ng-content select=\"[etInputSuffix]\" />\n </div>\n </div>\n</div>\n\n@if (shouldRenderSupport()) {\n <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-stack\">\n @if (shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n [attr.data-active]=\"errorActive() || null\"\n [attr.data-direction]=\"errorDirection()\"\n [attr.data-state]=\"errorState()\"\n [etProvideColor]=\"errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n [attr.data-active]=\"hintActive() || null\"\n [attr.data-direction]=\"hintDirection()\"\n [attr.data-state]=\"hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-frame{align-items:stretch;padding:0;cursor:auto}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-area,et-form-field:where([data-control-type=rich-text]) .et-form-field-control-slot{align-items:stretch}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}}\n"] }]
|
|
3147
3147
|
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], prefixEl: [{ type: i0.ViewChild, args: ['prefixEl', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
3148
3148
|
|
|
3149
3149
|
class InputPrefixDirective {
|
|
@@ -3203,6 +3203,7 @@ class InputDirective {
|
|
|
3203
3203
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3204
3204
|
this.readonly = input(false, /* @ts-ignore */
|
|
3205
3205
|
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3206
|
+
// eslint-disable-next-line ethlete/no-native-html-input-name -- form-field hidden state deliberately mirrors the native attribute
|
|
3206
3207
|
this.hidden = input(false, /* @ts-ignore */
|
|
3207
3208
|
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
3208
3209
|
this.invalid = input(false, /* @ts-ignore */
|
|
@@ -3269,7 +3270,7 @@ class InputComponent {
|
|
|
3269
3270
|
this.inputDir.value.set(event.target.value);
|
|
3270
3271
|
}
|
|
3271
3272
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: InputComponent, isStandalone: true, selector: "et-input", host: { listeners: { "click": "inputDir.activate()" }, classAttribute: "et-input" }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: InputDirective, inputs: ["type", "type", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n #nativeInput\n [type]=\"inputDir.type()\"\n [value]=\"inputDir.value()\"\n [disabled]=\"inputDir.disabled()\"\n [readOnly]=\"inputDir.readonly()\"\n [required]=\"inputDir.required()\"\n [placeholder]=\"inputDir.placeholder()\"\n [autocomplete]=\"inputDir.autocomplete()\"\n [attr.name]=\"inputDir.name() || null\"\n [attr.aria-invalid]=\"inputDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"inputDir.describedById() || null\"\n [attr.aria-labelledby]=\"inputDir.labelId() || null\"\n [attr.data-text-align]=\"inputDir.textAlign()\"\n (input)=\"syncNativeValue($event)\"\n (focus)=\"inputDir.focused.set(true)\"\n (blur)=\"inputDir.focused.set(false); inputDir.touched.set(true)\"\n class=\"et-input-native\"\n/>\n", styles: ["et-input{display:block;flex:1;min-inline-size:0;color:inherit}et-input .et-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-input .et-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-input .et-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-input .et-input-native[data-text-align=start]{text-align:start}et-input .et-input-native[data-text-align=center]{text-align:center}et-input .et-input-native[data-text-align=end]{text-align:end}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: InputComponent, isStandalone: true, selector: "et-input", host: { listeners: { "click": "inputDir.activate()" }, classAttribute: "et-input" }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: InputDirective, inputs: ["type", "type", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n #nativeInput\n [type]=\"inputDir.type()\"\n [value]=\"inputDir.value()\"\n [disabled]=\"inputDir.disabled()\"\n [readOnly]=\"inputDir.readonly()\"\n [required]=\"inputDir.required()\"\n [placeholder]=\"inputDir.placeholder()\"\n [autocomplete]=\"inputDir.autocomplete()\"\n [attr.name]=\"inputDir.name() || null\"\n [attr.aria-invalid]=\"inputDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"inputDir.describedById() || null\"\n [attr.aria-labelledby]=\"inputDir.labelId() || null\"\n [attr.data-text-align]=\"inputDir.textAlign()\"\n (input)=\"syncNativeValue($event)\"\n (focus)=\"inputDir.focused.set(true)\"\n (blur)=\"inputDir.focused.set(false); inputDir.touched.set(true)\"\n class=\"et-input-native\"\n/>\n", styles: ["@layer components{et-input{display:block;flex:1;min-inline-size:0;color:inherit}et-input .et-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-input .et-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-input .et-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-input .et-input-native[data-text-align=start]{text-align:start}et-input .et-input-native[data-text-align=center]{text-align:center}et-input .et-input-native[data-text-align=end]{text-align:end}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3273
3274
|
}
|
|
3274
3275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
3275
3276
|
type: Component,
|
|
@@ -3296,7 +3297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3296
3297
|
], host: {
|
|
3297
3298
|
class: 'et-input',
|
|
3298
3299
|
'(click)': 'inputDir.activate()',
|
|
3299
|
-
}, template: "<input\n #nativeInput\n [type]=\"inputDir.type()\"\n [value]=\"inputDir.value()\"\n [disabled]=\"inputDir.disabled()\"\n [readOnly]=\"inputDir.readonly()\"\n [required]=\"inputDir.required()\"\n [placeholder]=\"inputDir.placeholder()\"\n [autocomplete]=\"inputDir.autocomplete()\"\n [attr.name]=\"inputDir.name() || null\"\n [attr.aria-invalid]=\"inputDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"inputDir.describedById() || null\"\n [attr.aria-labelledby]=\"inputDir.labelId() || null\"\n [attr.data-text-align]=\"inputDir.textAlign()\"\n (input)=\"syncNativeValue($event)\"\n (focus)=\"inputDir.focused.set(true)\"\n (blur)=\"inputDir.focused.set(false); inputDir.touched.set(true)\"\n class=\"et-input-native\"\n/>\n", styles: ["et-input{display:block;flex:1;min-inline-size:0;color:inherit}et-input .et-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-input .et-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-input .et-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-input .et-input-native[data-text-align=start]{text-align:start}et-input .et-input-native[data-text-align=center]{text-align:center}et-input .et-input-native[data-text-align=end]{text-align:end}\n"] }]
|
|
3300
|
+
}, template: "<input\n #nativeInput\n [type]=\"inputDir.type()\"\n [value]=\"inputDir.value()\"\n [disabled]=\"inputDir.disabled()\"\n [readOnly]=\"inputDir.readonly()\"\n [required]=\"inputDir.required()\"\n [placeholder]=\"inputDir.placeholder()\"\n [autocomplete]=\"inputDir.autocomplete()\"\n [attr.name]=\"inputDir.name() || null\"\n [attr.aria-invalid]=\"inputDir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"inputDir.describedById() || null\"\n [attr.aria-labelledby]=\"inputDir.labelId() || null\"\n [attr.data-text-align]=\"inputDir.textAlign()\"\n (input)=\"syncNativeValue($event)\"\n (focus)=\"inputDir.focused.set(true)\"\n (blur)=\"inputDir.focused.set(false); inputDir.touched.set(true)\"\n class=\"et-input-native\"\n/>\n", styles: ["@layer components{et-input{display:block;flex:1;min-inline-size:0;color:inherit}et-input .et-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-input .et-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-input .et-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-input .et-input-native[data-text-align=start]{text-align:start}et-input .et-input-native[data-text-align=center]{text-align:center}et-input .et-input-native[data-text-align=end]{text-align:end}}\n"] }]
|
|
3300
3301
|
}], ctorParameters: () => [], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }] } });
|
|
3301
3302
|
|
|
3302
3303
|
const INPUT_IMPORTS = [InputComponent, InputDirective];
|
|
@@ -4062,6 +4063,7 @@ class RichTextEditorDirective {
|
|
|
4062
4063
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4063
4064
|
this.readonly = input(false, /* @ts-ignore */
|
|
4064
4065
|
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
4066
|
+
// eslint-disable-next-line ethlete/no-native-html-input-name -- form-field hidden state deliberately mirrors the native attribute
|
|
4065
4067
|
this.hidden = input(false, /* @ts-ignore */
|
|
4066
4068
|
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
4067
4069
|
this.invalid = input(false, /* @ts-ignore */
|
|
@@ -4325,7 +4327,7 @@ class RichTextEditorFloatingToolbarComponent {
|
|
|
4325
4327
|
this.floatingCleanup = null;
|
|
4326
4328
|
}
|
|
4327
4329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorFloatingToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4328
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RichTextEditorFloatingToolbarComponent, isStandalone: true, selector: "et-rich-text-editor-floating-toolbar", host: { attributes: { "role": "toolbar", "aria-label": "Selection formatting" }, listeners: { "mousedown": "$event.preventDefault()" }, properties: { "class.et-rte-floating-toolbar--visible": "visible()", "attr.aria-hidden": "!visible()" }, classAttribute: "et-rte-floating-toolbar" }, providers: [provideIcons(BOLD_ICON, ITALIC_ICON, STRIKETHROUGH_ICON, LINK_ICON)], ngImport: i0, template: "<button\n [pressed]=\"dir.boldActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Bold\"\n>\n <i etIcon=\"et-bold\"></i>\n</button>\n\n<button\n [pressed]=\"dir.italicActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Italic\"\n>\n <i etIcon=\"et-italic\"></i>\n</button>\n\n<button\n [pressed]=\"dir.strikeActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Strikethrough\"\n>\n <i etIcon=\"et-strikethrough\"></i>\n</button>\n\n<span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n<button\n [pressed]=\"dir.linkActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Link\"\n>\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n</button>\n", styles: ["et-rich-text-editor-floating-toolbar{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:10;display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap, 2px);padding:var(--et-rich-text-editor-toolbar-padding, 4px);border-radius:10px;border:1px solid rgb(255 255 255 / .1);background:var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));color:var(--et-color-main-contrast, rgb(244 244 245));box-shadow:0 10px 24px #00000029;scale:.96;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s var(--ease-out-5, ease),scale .12s var(--ease-out-5, ease),visibility .12s var(--ease-out-5, ease)}et-rich-text-editor-floating-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius, 4px)}et-rich-text-editor-floating-toolbar .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 20%,transparent)}et-rich-text-editor-floating-toolbar.et-rte-floating-toolbar--visible{scale:1;opacity:1;visibility:visible;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RichTextEditorFloatingToolbarComponent, isStandalone: true, selector: "et-rich-text-editor-floating-toolbar", host: { attributes: { "role": "toolbar", "aria-label": "Selection formatting" }, listeners: { "mousedown": "$event.preventDefault()" }, properties: { "class.et-rte-floating-toolbar--visible": "visible()", "attr.aria-hidden": "!visible()" }, classAttribute: "et-rte-floating-toolbar" }, providers: [provideIcons(BOLD_ICON, ITALIC_ICON, STRIKETHROUGH_ICON, LINK_ICON)], ngImport: i0, template: "<button\n [pressed]=\"dir.boldActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Bold\"\n>\n <i etIcon=\"et-bold\"></i>\n</button>\n\n<button\n [pressed]=\"dir.italicActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Italic\"\n>\n <i etIcon=\"et-italic\"></i>\n</button>\n\n<button\n [pressed]=\"dir.strikeActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Strikethrough\"\n>\n <i etIcon=\"et-strikethrough\"></i>\n</button>\n\n<span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n<button\n [pressed]=\"dir.linkActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Link\"\n>\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n</button>\n", styles: ["@layer components{et-rich-text-editor-floating-toolbar{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:10;display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap, 2px);padding:var(--et-rich-text-editor-toolbar-padding, 4px);border-radius:10px;border:1px solid rgb(255 255 255 / .1);background:var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));color:var(--et-color-main-contrast, rgb(244 244 245));box-shadow:0 10px 24px #00000029;scale:.96;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s var(--ease-out-5, ease),scale .12s var(--ease-out-5, ease),visibility .12s var(--ease-out-5, ease)}et-rich-text-editor-floating-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius, 4px)}et-rich-text-editor-floating-toolbar .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 20%,transparent)}et-rich-text-editor-floating-toolbar.et-rte-floating-toolbar--visible{scale:1;opacity:1;visibility:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4329
4331
|
}
|
|
4330
4332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorFloatingToolbarComponent, decorators: [{
|
|
4331
4333
|
type: Component,
|
|
@@ -4336,7 +4338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4336
4338
|
'[class.et-rte-floating-toolbar--visible]': 'visible()',
|
|
4337
4339
|
'[attr.aria-hidden]': '!visible()',
|
|
4338
4340
|
'(mousedown)': '$event.preventDefault()',
|
|
4339
|
-
}, template: "<button\n [pressed]=\"dir.boldActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Bold\"\n>\n <i etIcon=\"et-bold\"></i>\n</button>\n\n<button\n [pressed]=\"dir.italicActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Italic\"\n>\n <i etIcon=\"et-italic\"></i>\n</button>\n\n<button\n [pressed]=\"dir.strikeActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Strikethrough\"\n>\n <i etIcon=\"et-strikethrough\"></i>\n</button>\n\n<span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n<button\n [pressed]=\"dir.linkActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Link\"\n>\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n</button>\n", styles: ["et-rich-text-editor-floating-toolbar{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:10;display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap, 2px);padding:var(--et-rich-text-editor-toolbar-padding, 4px);border-radius:10px;border:1px solid rgb(255 255 255 / .1);background:var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));color:var(--et-color-main-contrast, rgb(244 244 245));box-shadow:0 10px 24px #00000029;scale:.96;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s var(--ease-out-5, ease),scale .12s var(--ease-out-5, ease),visibility .12s var(--ease-out-5, ease)}et-rich-text-editor-floating-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius, 4px)}et-rich-text-editor-floating-toolbar .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 20%,transparent)}et-rich-text-editor-floating-toolbar.et-rte-floating-toolbar--visible{scale:1;opacity:1;visibility:visible;pointer-events:auto}\n"] }]
|
|
4341
|
+
}, template: "<button\n [pressed]=\"dir.boldActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Bold\"\n>\n <i etIcon=\"et-bold\"></i>\n</button>\n\n<button\n [pressed]=\"dir.italicActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Italic\"\n>\n <i etIcon=\"et-italic\"></i>\n</button>\n\n<button\n [pressed]=\"dir.strikeActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Strikethrough\"\n>\n <i etIcon=\"et-strikethrough\"></i>\n</button>\n\n<span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n<button\n [pressed]=\"dir.linkActive()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Link\"\n>\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n</button>\n", styles: ["@layer components{et-rich-text-editor-floating-toolbar{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:10;display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap, 2px);padding:var(--et-rich-text-editor-toolbar-padding, 4px);border-radius:10px;border:1px solid rgb(255 255 255 / .1);background:var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));color:var(--et-color-main-contrast, rgb(244 244 245));box-shadow:0 10px 24px #00000029;scale:.96;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s var(--ease-out-5, ease),scale .12s var(--ease-out-5, ease),visibility .12s var(--ease-out-5, ease)}et-rich-text-editor-floating-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius, 4px)}et-rich-text-editor-floating-toolbar .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 20%,transparent)}et-rich-text-editor-floating-toolbar.et-rte-floating-toolbar--visible{scale:1;opacity:1;visibility:visible;pointer-events:auto}}\n"] }]
|
|
4340
4342
|
}], ctorParameters: () => [] });
|
|
4341
4343
|
|
|
4342
4344
|
class RichTextEditorComponent {
|
|
@@ -4398,7 +4400,7 @@ class RichTextEditorComponent {
|
|
|
4398
4400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4399
4401
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: RichTextEditorComponent, isStandalone: true, selector: "et-rich-text-editor", host: { listeners: { "click": "dir.activate()" }, classAttribute: "et-rich-text-editor" }, providers: [
|
|
4400
4402
|
provideIcons(BOLD_ICON, ITALIC_ICON, STRIKETHROUGH_ICON, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LINK_ICON),
|
|
4401
|
-
], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n <button\n [pressed]=\"dir.boldActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bold\"\n >\n <i etIcon=\"et-bold\"></i>\n </button>\n\n <button\n [pressed]=\"dir.italicActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Italic\"\n >\n <i etIcon=\"et-italic\"></i>\n </button>\n\n <button\n [pressed]=\"dir.strikeActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Strikethrough\"\n >\n <i etIcon=\"et-strikethrough\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.headingLevel() === 1\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(1)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 1\"\n >\n <i etIcon=\"et-heading-1\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 2\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(2)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 2\"\n >\n <i etIcon=\"et-heading-2\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 3\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(3)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 3\"\n >\n <i etIcon=\"et-heading-3\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.unorderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleUnorderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bulleted list\"\n >\n <i etIcon=\"et-list-bulleted\"></i>\n </button>\n\n <button\n [pressed]=\"dir.orderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleOrderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Numbered list\"\n >\n <i etIcon=\"et-list-numbered\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.linkActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Link\"\n >\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n </button>\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedById() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptBackspaceKey($event)\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "component", type: RichTextEditorFloatingToolbarComponent, selector: "et-rich-text-editor-floating-toolbar" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4403
|
+
], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n <button\n [pressed]=\"dir.boldActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bold\"\n >\n <i etIcon=\"et-bold\"></i>\n </button>\n\n <button\n [pressed]=\"dir.italicActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Italic\"\n >\n <i etIcon=\"et-italic\"></i>\n </button>\n\n <button\n [pressed]=\"dir.strikeActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Strikethrough\"\n >\n <i etIcon=\"et-strikethrough\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.headingLevel() === 1\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(1)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 1\"\n >\n <i etIcon=\"et-heading-1\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 2\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(2)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 2\"\n >\n <i etIcon=\"et-heading-2\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 3\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(3)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 3\"\n >\n <i etIcon=\"et-heading-3\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.unorderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleUnorderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bulleted list\"\n >\n <i etIcon=\"et-list-bulleted\"></i>\n </button>\n\n <button\n [pressed]=\"dir.orderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleOrderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Numbered list\"\n >\n <i etIcon=\"et-list-numbered\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.linkActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Link\"\n >\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n </button>\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedById() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptBackspaceKey($event)\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "component", type: RichTextEditorFloatingToolbarComponent, selector: "et-rich-text-editor-floating-toolbar" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4402
4404
|
}
|
|
4403
4405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorComponent, decorators: [{
|
|
4404
4406
|
type: Component,
|
|
@@ -4413,7 +4415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4413
4415
|
], host: {
|
|
4414
4416
|
class: 'et-rich-text-editor',
|
|
4415
4417
|
'(click)': 'dir.activate()',
|
|
4416
|
-
}, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n <button\n [pressed]=\"dir.boldActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bold\"\n >\n <i etIcon=\"et-bold\"></i>\n </button>\n\n <button\n [pressed]=\"dir.italicActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Italic\"\n >\n <i etIcon=\"et-italic\"></i>\n </button>\n\n <button\n [pressed]=\"dir.strikeActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Strikethrough\"\n >\n <i etIcon=\"et-strikethrough\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.headingLevel() === 1\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(1)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 1\"\n >\n <i etIcon=\"et-heading-1\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 2\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(2)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 2\"\n >\n <i etIcon=\"et-heading-2\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 3\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(3)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 3\"\n >\n <i etIcon=\"et-heading-3\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.unorderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleUnorderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bulleted list\"\n >\n <i etIcon=\"et-list-bulleted\"></i>\n </button>\n\n <button\n [pressed]=\"dir.orderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleOrderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Numbered list\"\n >\n <i etIcon=\"et-list-numbered\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.linkActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Link\"\n >\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n </button>\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedById() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptBackspaceKey($event)\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"] }]
|
|
4418
|
+
}, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n <button\n [pressed]=\"dir.boldActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleBold()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bold\"\n >\n <i etIcon=\"et-bold\"></i>\n </button>\n\n <button\n [pressed]=\"dir.italicActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleItalic()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Italic\"\n >\n <i etIcon=\"et-italic\"></i>\n </button>\n\n <button\n [pressed]=\"dir.strikeActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleStrikethrough()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Strikethrough\"\n >\n <i etIcon=\"et-strikethrough\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.headingLevel() === 1\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(1)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 1\"\n >\n <i etIcon=\"et-heading-1\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 2\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(2)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 2\"\n >\n <i etIcon=\"et-heading-2\"></i>\n </button>\n\n <button\n [pressed]=\"dir.headingLevel() === 3\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleHeading(3)\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Heading 3\"\n >\n <i etIcon=\"et-heading-3\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.unorderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleUnorderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Bulleted list\"\n >\n <i etIcon=\"et-list-bulleted\"></i>\n </button>\n\n <button\n [pressed]=\"dir.orderedListActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.toggleOrderedList()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Numbered list\"\n >\n <i etIcon=\"et-list-numbered\"></i>\n </button>\n\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n <button\n [pressed]=\"dir.linkActive()\"\n [disabled]=\"dir.disabled() || dir.readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"dir.promptForLink()\"\n mutedUntilPressed\n et-icon-button\n size=\"xs\"\n type=\"button\"\n aria-label=\"Link\"\n >\n <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n </button>\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedById() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptBackspaceKey($event)\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}}\n"] }]
|
|
4417
4419
|
}], ctorParameters: () => [], propDecorators: { editable: [{ type: i0.ViewChild, args: ['editable', { isSignal: true }] }] } });
|
|
4418
4420
|
|
|
4419
4421
|
const RICH_TEXT_EDITOR_IMPORTS = [RichTextEditorComponent, RichTextEditorDirective];
|
|
@@ -4755,7 +4757,7 @@ class CheckboxGroupComponent {
|
|
|
4755
4757
|
});
|
|
4756
4758
|
}
|
|
4757
4759
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4758
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-checkbox-group" }, providers: [{ provide: SELECTION_LIST_MULTIPLE, useValue: true }, provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-checkbox-group-support\">\n <div class=\"et-checkbox-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-checkbox-group-support-content et-checkbox-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-checkbox-group-support-content et-checkbox-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-checkbox-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-checkbox-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-checkbox-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-checkbox-group{display:flex;flex-direction:column;gap:var(--et-checkbox-group-gap);color:var(--et-surface-color-solid, currentColor)}et-checkbox-group>et-label,et-checkbox-group .et-checkbox-group-label{font-size:var(--et-checkbox-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-checkbox-group[data-size=sm]{--et-checkbox-group-label-font-size: 12px;--et-checkbox-group-gap: 8px}et-checkbox-group[data-size=sm] et-checkbox-option{--et-checkbox-option-size: 16px;--et-checkbox-option-gap: 8px}et-checkbox-group[data-size=sm] .et-checkbox-option-label{font-size:12px;line-height:16px}et-checkbox-group[data-size=sm] .et-checkbox-option-check{inline-size:10px;block-size:8px}et-checkbox-group[data-size=lg]{--et-checkbox-group-label-font-size: 14px;--et-checkbox-group-gap: 12px}et-checkbox-group[data-size=lg] et-checkbox-option{--et-checkbox-option-size: 24px;--et-checkbox-option-gap: 12px}et-checkbox-group[data-size=lg] .et-checkbox-option-label{font-size:16px;line-height:24px}et-checkbox-group[data-size=lg] .et-checkbox-option-check{inline-size:14px;block-size:12px}et-checkbox-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-checkbox-group .et-checkbox-group-support{overflow:clip;block-size:0}et-checkbox-group .et-checkbox-group-support-stack{position:relative;display:grid}et-checkbox-group .et-checkbox-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-checkbox-group .et-checkbox-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-checkbox-group .et-checkbox-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-checkbox-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint{padding-block-start:4px;font-size:var(--et-checkbox-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint:empty{display:none}et-checkbox-group[data-can-animate] .et-checkbox-group-support{transition:block-size var(--et-checkbox-group-support-duration) ease}et-checkbox-group[data-can-animate] .et-checkbox-group-support-content{transition:opacity var(--et-checkbox-group-support-duration) ease,transform var(--et-checkbox-group-support-duration) ease}@starting-style{et-checkbox-group[data-can-animate] .et-checkbox-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-checkbox-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-checkbox-group{--et-checkbox-group-support-duration: 1ms;--et-checkbox-group-support-offset: 0px}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4760
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-checkbox-group" }, providers: [{ provide: SELECTION_LIST_MULTIPLE, useValue: true }, provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-checkbox-group-support\">\n <div class=\"et-checkbox-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-checkbox-group-support-content et-checkbox-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-checkbox-group-support-content et-checkbox-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-checkbox-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-checkbox-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-checkbox-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-checkbox-group{display:flex;flex-direction:column;gap:var(--et-checkbox-group-gap);color:var(--et-surface-color-solid, currentColor)}et-checkbox-group>et-label,et-checkbox-group .et-checkbox-group-label{font-size:var(--et-checkbox-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-checkbox-group:where([data-size=sm]){--et-checkbox-group-label-font-size: 12px;--et-checkbox-group-gap: 8px}et-checkbox-group:where([data-size=sm]) et-checkbox-option{--et-checkbox-option-size: 16px;--et-checkbox-option-gap: 8px}et-checkbox-group:where([data-size=sm]) .et-checkbox-option-label{font-size:12px;line-height:16px}et-checkbox-group:where([data-size=sm]) .et-checkbox-option-check{inline-size:10px;block-size:8px}et-checkbox-group:where([data-size=lg]){--et-checkbox-group-label-font-size: 14px;--et-checkbox-group-gap: 12px}et-checkbox-group:where([data-size=lg]) et-checkbox-option{--et-checkbox-option-size: 24px;--et-checkbox-option-gap: 12px}et-checkbox-group:where([data-size=lg]) .et-checkbox-option-label{font-size:16px;line-height:24px}et-checkbox-group:where([data-size=lg]) .et-checkbox-option-check{inline-size:14px;block-size:12px}et-checkbox-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-checkbox-group .et-checkbox-group-support{overflow:clip;block-size:0}et-checkbox-group .et-checkbox-group-support-stack{position:relative;display:grid}et-checkbox-group .et-checkbox-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-checkbox-group .et-checkbox-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-checkbox-group .et-checkbox-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-checkbox-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint{padding-block-start:4px;font-size:var(--et-checkbox-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint:empty{display:none}et-checkbox-group[data-can-animate] .et-checkbox-group-support{transition:block-size var(--et-checkbox-group-support-duration) ease}et-checkbox-group[data-can-animate] .et-checkbox-group-support-content{transition:opacity var(--et-checkbox-group-support-duration) ease,transform var(--et-checkbox-group-support-duration) ease}@starting-style{et-checkbox-group[data-can-animate] .et-checkbox-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-checkbox-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-checkbox-group{--et-checkbox-group-support-duration: 1ms;--et-checkbox-group-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4759
4761
|
}
|
|
4760
4762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
4761
4763
|
type: Component,
|
|
@@ -4772,7 +4774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4772
4774
|
'[attr.data-size]': 'size()',
|
|
4773
4775
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
4774
4776
|
'[attr.data-error]': 'support.displaysError() || null',
|
|
4775
|
-
}, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-checkbox-group-support\">\n <div class=\"et-checkbox-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-checkbox-group-support-content et-checkbox-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-checkbox-group-support-content et-checkbox-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-checkbox-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-checkbox-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-checkbox-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-checkbox-group{display:flex;flex-direction:column;gap:var(--et-checkbox-group-gap);color:var(--et-surface-color-solid, currentColor)}et-checkbox-group>et-label,et-checkbox-group .et-checkbox-group-label{font-size:var(--et-checkbox-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-checkbox-group[data-size=sm]{--et-checkbox-group-label-font-size: 12px;--et-checkbox-group-gap: 8px}et-checkbox-group[data-size=sm] et-checkbox-option{--et-checkbox-option-size: 16px;--et-checkbox-option-gap: 8px}et-checkbox-group[data-size=sm] .et-checkbox-option-label{font-size:12px;line-height:16px}et-checkbox-group[data-size=sm] .et-checkbox-option-check{inline-size:10px;block-size:8px}et-checkbox-group[data-size=lg]{--et-checkbox-group-label-font-size: 14px;--et-checkbox-group-gap: 12px}et-checkbox-group[data-size=lg] et-checkbox-option{--et-checkbox-option-size: 24px;--et-checkbox-option-gap: 12px}et-checkbox-group[data-size=lg] .et-checkbox-option-label{font-size:16px;line-height:24px}et-checkbox-group[data-size=lg] .et-checkbox-option-check{inline-size:14px;block-size:12px}et-checkbox-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-checkbox-group .et-checkbox-group-support{overflow:clip;block-size:0}et-checkbox-group .et-checkbox-group-support-stack{position:relative;display:grid}et-checkbox-group .et-checkbox-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-checkbox-group .et-checkbox-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-checkbox-group .et-checkbox-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-checkbox-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint{padding-block-start:4px;font-size:var(--et-checkbox-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint:empty{display:none}et-checkbox-group[data-can-animate] .et-checkbox-group-support{transition:block-size var(--et-checkbox-group-support-duration) ease}et-checkbox-group[data-can-animate] .et-checkbox-group-support-content{transition:opacity var(--et-checkbox-group-support-duration) ease,transform var(--et-checkbox-group-support-duration) ease}@starting-style{et-checkbox-group[data-can-animate] .et-checkbox-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-checkbox-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-checkbox-group{--et-checkbox-group-support-duration: 1ms;--et-checkbox-group-support-offset: 0px}}\n"] }]
|
|
4777
|
+
}, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-checkbox-group-support\">\n <div class=\"et-checkbox-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-checkbox-group-support-content et-checkbox-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-checkbox-group-support-content et-checkbox-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-checkbox-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-checkbox-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-checkbox-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-checkbox-group{display:flex;flex-direction:column;gap:var(--et-checkbox-group-gap);color:var(--et-surface-color-solid, currentColor)}et-checkbox-group>et-label,et-checkbox-group .et-checkbox-group-label{font-size:var(--et-checkbox-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-checkbox-group:where([data-size=sm]){--et-checkbox-group-label-font-size: 12px;--et-checkbox-group-gap: 8px}et-checkbox-group:where([data-size=sm]) et-checkbox-option{--et-checkbox-option-size: 16px;--et-checkbox-option-gap: 8px}et-checkbox-group:where([data-size=sm]) .et-checkbox-option-label{font-size:12px;line-height:16px}et-checkbox-group:where([data-size=sm]) .et-checkbox-option-check{inline-size:10px;block-size:8px}et-checkbox-group:where([data-size=lg]){--et-checkbox-group-label-font-size: 14px;--et-checkbox-group-gap: 12px}et-checkbox-group:where([data-size=lg]) et-checkbox-option{--et-checkbox-option-size: 24px;--et-checkbox-option-gap: 12px}et-checkbox-group:where([data-size=lg]) .et-checkbox-option-label{font-size:16px;line-height:24px}et-checkbox-group:where([data-size=lg]) .et-checkbox-option-check{inline-size:14px;block-size:12px}et-checkbox-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-checkbox-group .et-checkbox-group-support{overflow:clip;block-size:0}et-checkbox-group .et-checkbox-group-support-stack{position:relative;display:grid}et-checkbox-group .et-checkbox-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-checkbox-group .et-checkbox-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-checkbox-group .et-checkbox-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-checkbox-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint{padding-block-start:4px;font-size:var(--et-checkbox-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint:empty{display:none}et-checkbox-group[data-can-animate] .et-checkbox-group-support{transition:block-size var(--et-checkbox-group-support-duration) ease}et-checkbox-group[data-can-animate] .et-checkbox-group-support-content{transition:opacity var(--et-checkbox-group-support-duration) ease,transform var(--et-checkbox-group-support-duration) ease}@starting-style{et-checkbox-group[data-can-animate] .et-checkbox-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-checkbox-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-checkbox-group{--et-checkbox-group-support-duration: 1ms;--et-checkbox-group-support-offset: 0px}}}\n"] }]
|
|
4776
4778
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
4777
4779
|
|
|
4778
4780
|
class CheckboxOptionComponent {
|
|
@@ -4781,7 +4783,7 @@ class CheckboxOptionComponent {
|
|
|
4781
4783
|
this.canAnimate = createCanAnimateSignal();
|
|
4782
4784
|
}
|
|
4783
4785
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: CheckboxOptionComponent, isStandalone: true, selector: "et-checkbox-option", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox-option" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-checkbox-option-box\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-checkbox-option:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: CheckboxOptionComponent, isStandalone: true, selector: "et-checkbox-option", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox-option" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-checkbox-option-box\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-checkbox-option:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4785
4787
|
}
|
|
4786
4788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxOptionComponent, decorators: [{
|
|
4787
4789
|
type: Component,
|
|
@@ -4795,7 +4797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4795
4797
|
], host: {
|
|
4796
4798
|
class: 'et-checkbox-option',
|
|
4797
4799
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
4798
|
-
}, template: "<div class=\"et-checkbox-option-box\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-checkbox-option:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}\n"] }]
|
|
4800
|
+
}, template: "<div class=\"et-checkbox-option-box\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-checkbox-option:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}}\n"] }]
|
|
4799
4801
|
}] });
|
|
4800
4802
|
|
|
4801
4803
|
class RadioGroupComponent {
|
|
@@ -4820,7 +4822,7 @@ class RadioGroupComponent {
|
|
|
4820
4822
|
});
|
|
4821
4823
|
}
|
|
4822
4824
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4823
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RadioGroupComponent, isStandalone: true, selector: "et-radio-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-radio-group" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-radio-group-support\">\n <div class=\"et-radio-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-radio-group-support-content et-radio-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-radio-group-support-content et-radio-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-radio-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-radio-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-radio-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-radio-group{display:flex;flex-direction:column;gap:var(--et-radio-group-gap);color:var(--et-surface-color-solid, currentColor)}et-radio-group>et-label,et-radio-group .et-radio-group-label{font-size:var(--et-radio-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-radio-group[data-size=sm]{--et-radio-group-label-font-size: 12px;--et-radio-group-gap: 8px}et-radio-group[data-size=sm] et-radio{--et-radio-size: 16px;--et-radio-dot-size: 8px;--et-radio-gap: 8px}et-radio-group[data-size=sm] .et-radio-label{font-size:12px;line-height:16px}et-radio-group[data-size=lg]{--et-radio-group-label-font-size: 14px;--et-radio-group-gap: 12px}et-radio-group[data-size=lg] et-radio{--et-radio-size: 24px;--et-radio-dot-size: 12px;--et-radio-gap: 12px}et-radio-group[data-size=lg] .et-radio-label{font-size:16px;line-height:24px}et-radio-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-radio-group .et-radio-group-support{overflow:clip;block-size:0}et-radio-group .et-radio-group-support-stack{position:relative;display:grid}et-radio-group .et-radio-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-radio-group .et-radio-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-radio-group .et-radio-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-radio-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-hint{padding-block-start:4px;font-size:var(--et-radio-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-radio-group .et-radio-group-hint:empty{display:none}et-radio-group[data-can-animate] .et-radio-group-support{transition:block-size var(--et-radio-group-support-duration) ease}et-radio-group[data-can-animate] .et-radio-group-support-content{transition:opacity var(--et-radio-group-support-duration) ease,transform var(--et-radio-group-support-duration) ease}@starting-style{et-radio-group[data-can-animate] .et-radio-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-radio-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-radio-group{--et-radio-group-support-duration: 1ms;--et-radio-group-support-offset: 0px}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RadioGroupComponent, isStandalone: true, selector: "et-radio-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-radio-group" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-radio-group-support\">\n <div class=\"et-radio-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-radio-group-support-content et-radio-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-radio-group-support-content et-radio-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-radio-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-radio-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-radio-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-radio-group{display:flex;flex-direction:column;gap:var(--et-radio-group-gap);color:var(--et-surface-color-solid, currentColor)}et-radio-group>et-label,et-radio-group .et-radio-group-label{font-size:var(--et-radio-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-radio-group:where([data-size=sm]){--et-radio-group-label-font-size: 12px;--et-radio-group-gap: 8px}et-radio-group:where([data-size=sm]) et-radio{--et-radio-size: 16px;--et-radio-dot-size: 8px;--et-radio-gap: 8px}et-radio-group:where([data-size=sm]) .et-radio-label{font-size:12px;line-height:16px}et-radio-group:where([data-size=lg]){--et-radio-group-label-font-size: 14px;--et-radio-group-gap: 12px}et-radio-group:where([data-size=lg]) et-radio{--et-radio-size: 24px;--et-radio-dot-size: 12px;--et-radio-gap: 12px}et-radio-group:where([data-size=lg]) .et-radio-label{font-size:16px;line-height:24px}et-radio-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-radio-group .et-radio-group-support{overflow:clip;block-size:0}et-radio-group .et-radio-group-support-stack{position:relative;display:grid}et-radio-group .et-radio-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-radio-group .et-radio-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-radio-group .et-radio-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-radio-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-hint{padding-block-start:4px;font-size:var(--et-radio-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-radio-group .et-radio-group-hint:empty{display:none}et-radio-group[data-can-animate] .et-radio-group-support{transition:block-size var(--et-radio-group-support-duration) ease}et-radio-group[data-can-animate] .et-radio-group-support-content{transition:opacity var(--et-radio-group-support-duration) ease,transform var(--et-radio-group-support-duration) ease}@starting-style{et-radio-group[data-can-animate] .et-radio-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-radio-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-radio-group{--et-radio-group-support-duration: 1ms;--et-radio-group-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4824
4826
|
}
|
|
4825
4827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
4826
4828
|
type: Component,
|
|
@@ -4837,7 +4839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4837
4839
|
'[attr.data-size]': 'size()',
|
|
4838
4840
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
4839
4841
|
'[attr.data-error]': 'support.displaysError() || null',
|
|
4840
|
-
}, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-radio-group-support\">\n <div class=\"et-radio-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-radio-group-support-content et-radio-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-radio-group-support-content et-radio-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-radio-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-radio-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-radio-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-radio-group{display:flex;flex-direction:column;gap:var(--et-radio-group-gap);color:var(--et-surface-color-solid, currentColor)}et-radio-group>et-label,et-radio-group .et-radio-group-label{font-size:var(--et-radio-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-radio-group[data-size=sm]{--et-radio-group-label-font-size: 12px;--et-radio-group-gap: 8px}et-radio-group[data-size=sm] et-radio{--et-radio-size: 16px;--et-radio-dot-size: 8px;--et-radio-gap: 8px}et-radio-group[data-size=sm] .et-radio-label{font-size:12px;line-height:16px}et-radio-group[data-size=lg]{--et-radio-group-label-font-size: 14px;--et-radio-group-gap: 12px}et-radio-group[data-size=lg] et-radio{--et-radio-size: 24px;--et-radio-dot-size: 12px;--et-radio-gap: 12px}et-radio-group[data-size=lg] .et-radio-label{font-size:16px;line-height:24px}et-radio-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-radio-group .et-radio-group-support{overflow:clip;block-size:0}et-radio-group .et-radio-group-support-stack{position:relative;display:grid}et-radio-group .et-radio-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-radio-group .et-radio-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-radio-group .et-radio-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-radio-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-hint{padding-block-start:4px;font-size:var(--et-radio-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-radio-group .et-radio-group-hint:empty{display:none}et-radio-group[data-can-animate] .et-radio-group-support{transition:block-size var(--et-radio-group-support-duration) ease}et-radio-group[data-can-animate] .et-radio-group-support-content{transition:opacity var(--et-radio-group-support-duration) ease,transform var(--et-radio-group-support-duration) ease}@starting-style{et-radio-group[data-can-animate] .et-radio-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-radio-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-radio-group{--et-radio-group-support-duration: 1ms;--et-radio-group-support-offset: 0px}}\n"] }]
|
|
4842
|
+
}, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-radio-group-support\">\n <div class=\"et-radio-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-radio-group-support-content et-radio-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-radio-group-support-content et-radio-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-radio-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-radio-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-radio-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-radio-group{display:flex;flex-direction:column;gap:var(--et-radio-group-gap);color:var(--et-surface-color-solid, currentColor)}et-radio-group>et-label,et-radio-group .et-radio-group-label{font-size:var(--et-radio-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-radio-group:where([data-size=sm]){--et-radio-group-label-font-size: 12px;--et-radio-group-gap: 8px}et-radio-group:where([data-size=sm]) et-radio{--et-radio-size: 16px;--et-radio-dot-size: 8px;--et-radio-gap: 8px}et-radio-group:where([data-size=sm]) .et-radio-label{font-size:12px;line-height:16px}et-radio-group:where([data-size=lg]){--et-radio-group-label-font-size: 14px;--et-radio-group-gap: 12px}et-radio-group:where([data-size=lg]) et-radio{--et-radio-size: 24px;--et-radio-dot-size: 12px;--et-radio-gap: 12px}et-radio-group:where([data-size=lg]) .et-radio-label{font-size:16px;line-height:24px}et-radio-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-radio-group .et-radio-group-support{overflow:clip;block-size:0}et-radio-group .et-radio-group-support-stack{position:relative;display:grid}et-radio-group .et-radio-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-radio-group .et-radio-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-radio-group .et-radio-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-radio-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-hint{padding-block-start:4px;font-size:var(--et-radio-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-radio-group .et-radio-group-hint:empty{display:none}et-radio-group[data-can-animate] .et-radio-group-support{transition:block-size var(--et-radio-group-support-duration) ease}et-radio-group[data-can-animate] .et-radio-group-support-content{transition:opacity var(--et-radio-group-support-duration) ease,transform var(--et-radio-group-support-duration) ease}@starting-style{et-radio-group[data-can-animate] .et-radio-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-radio-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-radio-group{--et-radio-group-support-duration: 1ms;--et-radio-group-support-offset: 0px}}}\n"] }]
|
|
4841
4843
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
4842
4844
|
|
|
4843
4845
|
class RadioComponent {
|
|
@@ -4846,7 +4848,7 @@ class RadioComponent {
|
|
|
4846
4848
|
this.canAnimate = createCanAnimateSignal();
|
|
4847
4849
|
}
|
|
4848
4850
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RadioComponent, isStandalone: true, selector: "et-radio", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-radio" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-radio:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RadioComponent, isStandalone: true, selector: "et-radio", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-radio" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-radio:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4850
4852
|
}
|
|
4851
4853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, decorators: [{
|
|
4852
4854
|
type: Component,
|
|
@@ -4860,7 +4862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4860
4862
|
], host: {
|
|
4861
4863
|
class: 'et-radio',
|
|
4862
4864
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
4863
|
-
}, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-radio:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}\n"] }]
|
|
4865
|
+
}, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}et-radio:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}}\n"] }]
|
|
4864
4866
|
}] });
|
|
4865
4867
|
|
|
4866
4868
|
class SegmentedButtonGroupComponent {
|
|
@@ -4888,7 +4890,7 @@ class SegmentedButtonGroupComponent {
|
|
|
4888
4890
|
});
|
|
4889
4891
|
}
|
|
4890
4892
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentedButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SegmentedButtonGroupComponent, isStandalone: true, selector: "et-segmented-button-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-segmented-button-group" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content select=\"et-label\" />\n<ng-content select=\".et-segmented-button-group-label\" />\n\n<div class=\"et-segmented-button-group-buttons\">\n <ng-content />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-segmented-button-group-support\">\n <div class=\"et-segmented-button-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-segmented-button-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-segmented-button-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-segmented-button-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-segmented-button-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-segmented-button-group-track-padding{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-segmented-button-group-track-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-segmented-button-group{display:flex;flex-direction:column;gap:var(--et-segmented-button-group-gap);color:var(--et-surface-color-solid, currentColor)}et-segmented-button-group>et-label,et-segmented-button-group .et-segmented-button-group-label{font-size:var(--et-segmented-button-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-segmented-button-group[data-size=sm]{--et-segmented-button-group-label-font-size: 12px;--et-segmented-button-group-gap: 8px}et-segmented-button-group[data-size=sm] et-segmented-button{--et-segmented-button-padding-x: 10px;--et-segmented-button-padding-y: 4px;font-size:12px}et-segmented-button-group[data-size=lg]{--et-segmented-button-group-label-font-size: 14px;--et-segmented-button-group-gap: 12px}et-segmented-button-group[data-size=lg] et-segmented-button{--et-segmented-button-padding-x: 18px;--et-segmented-button-padding-y: 8px;font-size:16px}et-segmented-button-group .et-segmented-button-group-buttons{display:inline-flex;align-self:flex-start;gap:2px;padding:var(--et-segmented-button-group-track-padding);border-radius:var(--et-segmented-button-group-track-radius);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-segmented-button-group[data-error] .et-segmented-button-group-buttons{box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}et-segmented-button-group .et-segmented-button-group-support{overflow:clip;block-size:0}et-segmented-button-group .et-segmented-button-group-support-stack{position:relative;display:grid}et-segmented-button-group .et-segmented-button-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-segmented-button-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint{padding-block-start:4px;font-size:var(--et-segmented-button-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint:empty{display:none}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support{transition:block-size var(--et-segmented-button-group-support-duration) ease}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content{transition:opacity var(--et-segmented-button-group-support-duration) ease,transform var(--et-segmented-button-group-support-duration) ease}@starting-style{et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-segmented-button-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-segmented-button-group{--et-segmented-button-group-support-duration: 1ms;--et-segmented-button-group-support-offset: 0px}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SegmentedButtonGroupComponent, isStandalone: true, selector: "et-segmented-button-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-segmented-button-group" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content select=\"et-label\" />\n<ng-content select=\".et-segmented-button-group-label\" />\n\n<div class=\"et-segmented-button-group-buttons\">\n <ng-content />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-segmented-button-group-support\">\n <div class=\"et-segmented-button-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-segmented-button-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-segmented-button-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-segmented-button-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-segmented-button-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-segmented-button-group-track-padding{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-segmented-button-group-track-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-segmented-button-group{display:flex;flex-direction:column;gap:var(--et-segmented-button-group-gap);color:var(--et-surface-color-solid, currentColor)}et-segmented-button-group>et-label,et-segmented-button-group .et-segmented-button-group-label{font-size:var(--et-segmented-button-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-segmented-button-group:where([data-size=sm]){--et-segmented-button-group-label-font-size: 12px;--et-segmented-button-group-gap: 8px}et-segmented-button-group:where([data-size=sm]) et-segmented-button{--et-segmented-button-padding-x: 10px;--et-segmented-button-padding-y: 4px;font-size:12px}et-segmented-button-group:where([data-size=lg]){--et-segmented-button-group-label-font-size: 14px;--et-segmented-button-group-gap: 12px}et-segmented-button-group:where([data-size=lg]) et-segmented-button{--et-segmented-button-padding-x: 18px;--et-segmented-button-padding-y: 8px;font-size:16px}et-segmented-button-group .et-segmented-button-group-buttons{display:inline-flex;align-self:flex-start;gap:2px;padding:var(--et-segmented-button-group-track-padding);border-radius:var(--et-segmented-button-group-track-radius);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-segmented-button-group[data-error] .et-segmented-button-group-buttons{box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}et-segmented-button-group .et-segmented-button-group-support{overflow:clip;block-size:0}et-segmented-button-group .et-segmented-button-group-support-stack{position:relative;display:grid}et-segmented-button-group .et-segmented-button-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-segmented-button-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint{padding-block-start:4px;font-size:var(--et-segmented-button-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint:empty{display:none}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support{transition:block-size var(--et-segmented-button-group-support-duration) ease}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content{transition:opacity var(--et-segmented-button-group-support-duration) ease,transform var(--et-segmented-button-group-support-duration) ease}@starting-style{et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-segmented-button-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-segmented-button-group{--et-segmented-button-group-support-duration: 1ms;--et-segmented-button-group-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4892
4894
|
}
|
|
4893
4895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentedButtonGroupComponent, decorators: [{
|
|
4894
4896
|
type: Component,
|
|
@@ -4905,7 +4907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4905
4907
|
'[attr.data-size]': 'size()',
|
|
4906
4908
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
4907
4909
|
'[attr.data-error]': 'support.displaysError() || null',
|
|
4908
|
-
}, template: "<ng-content select=\"et-label\" />\n<ng-content select=\".et-segmented-button-group-label\" />\n\n<div class=\"et-segmented-button-group-buttons\">\n <ng-content />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-segmented-button-group-support\">\n <div class=\"et-segmented-button-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@property --et-segmented-button-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-segmented-button-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-segmented-button-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-segmented-button-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-segmented-button-group-track-padding{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-segmented-button-group-track-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-segmented-button-group{display:flex;flex-direction:column;gap:var(--et-segmented-button-group-gap);color:var(--et-surface-color-solid, currentColor)}et-segmented-button-group>et-label,et-segmented-button-group .et-segmented-button-group-label{font-size:var(--et-segmented-button-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-segmented-button-group[data-size=sm]{--et-segmented-button-group-label-font-size: 12px;--et-segmented-button-group-gap: 8px}et-segmented-button-group[data-size=sm] et-segmented-button{--et-segmented-button-padding-x: 10px;--et-segmented-button-padding-y: 4px;font-size:12px}et-segmented-button-group[data-size=lg]{--et-segmented-button-group-label-font-size: 14px;--et-segmented-button-group-gap: 12px}et-segmented-button-group[data-size=lg] et-segmented-button{--et-segmented-button-padding-x: 18px;--et-segmented-button-padding-y: 8px;font-size:16px}et-segmented-button-group .et-segmented-button-group-buttons{display:inline-flex;align-self:flex-start;gap:2px;padding:var(--et-segmented-button-group-track-padding);border-radius:var(--et-segmented-button-group-track-radius);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-segmented-button-group[data-error] .et-segmented-button-group-buttons{box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}et-segmented-button-group .et-segmented-button-group-support{overflow:clip;block-size:0}et-segmented-button-group .et-segmented-button-group-support-stack{position:relative;display:grid}et-segmented-button-group .et-segmented-button-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-segmented-button-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint{padding-block-start:4px;font-size:var(--et-segmented-button-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint:empty{display:none}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support{transition:block-size var(--et-segmented-button-group-support-duration) ease}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content{transition:opacity var(--et-segmented-button-group-support-duration) ease,transform var(--et-segmented-button-group-support-duration) ease}@starting-style{et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-segmented-button-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-segmented-button-group{--et-segmented-button-group-support-duration: 1ms;--et-segmented-button-group-support-offset: 0px}}\n"] }]
|
|
4910
|
+
}, template: "<ng-content select=\"et-label\" />\n<ng-content select=\".et-segmented-button-group-label\" />\n\n<div class=\"et-segmented-button-group-buttons\">\n <ng-content />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-segmented-button-group-support\">\n <div class=\"et-segmented-button-group-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-segmented-button-group-support-content et-segmented-button-group-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-segmented-button-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-segmented-button-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-segmented-button-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-segmented-button-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-segmented-button-group-track-padding{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-segmented-button-group-track-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-segmented-button-group{display:flex;flex-direction:column;gap:var(--et-segmented-button-group-gap);color:var(--et-surface-color-solid, currentColor)}et-segmented-button-group>et-label,et-segmented-button-group .et-segmented-button-group-label{font-size:var(--et-segmented-button-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-segmented-button-group:where([data-size=sm]){--et-segmented-button-group-label-font-size: 12px;--et-segmented-button-group-gap: 8px}et-segmented-button-group:where([data-size=sm]) et-segmented-button{--et-segmented-button-padding-x: 10px;--et-segmented-button-padding-y: 4px;font-size:12px}et-segmented-button-group:where([data-size=lg]){--et-segmented-button-group-label-font-size: 14px;--et-segmented-button-group-gap: 12px}et-segmented-button-group:where([data-size=lg]) et-segmented-button{--et-segmented-button-padding-x: 18px;--et-segmented-button-padding-y: 8px;font-size:16px}et-segmented-button-group .et-segmented-button-group-buttons{display:inline-flex;align-self:flex-start;gap:2px;padding:var(--et-segmented-button-group-track-padding);border-radius:var(--et-segmented-button-group-track-radius);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-segmented-button-group[data-error] .et-segmented-button-group-buttons{box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}et-segmented-button-group .et-segmented-button-group-support{overflow:clip;block-size:0}et-segmented-button-group .et-segmented-button-group-support-stack{position:relative;display:grid}et-segmented-button-group .et-segmented-button-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-segmented-button-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint{padding-block-start:4px;font-size:var(--et-segmented-button-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint:empty{display:none}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support{transition:block-size var(--et-segmented-button-group-support-duration) ease}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content{transition:opacity var(--et-segmented-button-group-support-duration) ease,transform var(--et-segmented-button-group-support-duration) ease}@starting-style{et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-segmented-button-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-segmented-button-group{--et-segmented-button-group-support-duration: 1ms;--et-segmented-button-group-support-offset: 0px}}}\n"] }]
|
|
4909
4911
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
4910
4912
|
|
|
4911
4913
|
class SegmentedButtonComponent {
|
|
@@ -4941,7 +4943,7 @@ class SegmentedButtonComponent {
|
|
|
4941
4943
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: SegmentedButtonComponent, isStandalone: true, selector: "et-segmented-button", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-segmented-button" }, viewQueries: [{ propertyName: "backgroundRef", first: true, predicate: ["background"], descendants: true, isSignal: true }], hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: `
|
|
4942
4944
|
<div #background class="et-segmented-button-bg"></div>
|
|
4943
4945
|
<ng-content />
|
|
4944
|
-
`, isInline: true, styles: ["@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-segmented-button-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-segmented-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);border-radius:var(--et-segmented-button-border-radius);cursor:pointer;outline:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;-webkit-user-select:none;user-select:none}et-segmented-button .et-segmented-button-bg{position:absolute;inset:0;z-index:-1;border-radius:var(--et-segmented-button-border-radius);background-color:var(--et-theme-color-primary-solid, currentColor);opacity:0}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]):not([aria-checked=true]){color:var(--et-surface-color-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent)}et-segmented-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true] .et-segmented-button-bg{opacity:1}et-segmented-button[data-can-animate]{transition:color var(--et-segmented-button-transition-duration) ease,transform var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4946
|
+
`, isInline: true, styles: ["@layer components{@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-segmented-button-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-segmented-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);border-radius:var(--et-segmented-button-border-radius);cursor:pointer;outline:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;-webkit-user-select:none;user-select:none}et-segmented-button .et-segmented-button-bg{position:absolute;inset:0;z-index:-1;border-radius:var(--et-segmented-button-border-radius);background-color:var(--et-theme-color-primary-solid, currentColor);opacity:0}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]):not([aria-checked=true]){color:var(--et-surface-color-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent)}et-segmented-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true] .et-segmented-button-bg{opacity:1}et-segmented-button[data-can-animate]{transition:color var(--et-segmented-button-transition-duration) ease,transform var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4945
4947
|
}
|
|
4946
4948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
4947
4949
|
type: Component,
|
|
@@ -4958,7 +4960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4958
4960
|
], host: {
|
|
4959
4961
|
class: 'et-segmented-button',
|
|
4960
4962
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
4961
|
-
}, styles: ["@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-segmented-button-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-segmented-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);border-radius:var(--et-segmented-button-border-radius);cursor:pointer;outline:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;-webkit-user-select:none;user-select:none}et-segmented-button .et-segmented-button-bg{position:absolute;inset:0;z-index:-1;border-radius:var(--et-segmented-button-border-radius);background-color:var(--et-theme-color-primary-solid, currentColor);opacity:0}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]):not([aria-checked=true]){color:var(--et-surface-color-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent)}et-segmented-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true] .et-segmented-button-bg{opacity:1}et-segmented-button[data-can-animate]{transition:color var(--et-segmented-button-transition-duration) ease,transform var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}\n"] }]
|
|
4963
|
+
}, styles: ["@layer components{@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-segmented-button-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-segmented-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);border-radius:var(--et-segmented-button-border-radius);cursor:pointer;outline:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;-webkit-user-select:none;user-select:none}et-segmented-button .et-segmented-button-bg{position:absolute;inset:0;z-index:-1;border-radius:var(--et-segmented-button-border-radius);background-color:var(--et-theme-color-primary-solid, currentColor);opacity:0}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]):not([aria-checked=true]){color:var(--et-surface-color-solid, currentColor);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent)}et-segmented-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true] .et-segmented-button-bg{opacity:1}et-segmented-button[data-can-animate]{transition:color var(--et-segmented-button-transition-duration) ease,transform var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}}\n"] }]
|
|
4962
4964
|
}], ctorParameters: () => [], propDecorators: { backgroundRef: [{ type: i0.ViewChild, args: ['background', { isSignal: true }] }] } });
|
|
4963
4965
|
|
|
4964
4966
|
class SwitchDirective {
|
|
@@ -5033,7 +5035,7 @@ class SwitchComponent {
|
|
|
5033
5035
|
this.canAnimate = createCanAnimateSignal();
|
|
5034
5036
|
}
|
|
5035
5037
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SwitchComponent, isStandalone: true, selector: "et-switch", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-switch" }, hostDirectives: [{ directive: SwitchDirective, inputs: ["checked", "checked", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-switch-track\">\n <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@property --et-switch-track-width{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: true; initial-value: 22px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}et-switch:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 30%,transparent)}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid) 40%,transparent)}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch .et-switch-thumb{position:absolute;top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);left:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);width:calc(var(--et-switch-thumb-size) - 4px);height:calc(var(--et-switch-thumb-size) - 4px);border-radius:calc(var(--et-switch-thumb-size) / 2);background-color:var(--et-surface-color-muted-solid, currentColor)}et-switch:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-surface-color-solid, currentColor)}et-switch:active:not([aria-disabled=true]) .et-switch-thumb{width:var(--et-switch-thumb-size)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[aria-checked=true] .et-switch-thumb{top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true]:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:active:not([aria-disabled=true]) .et-switch-thumb{width:calc(var(--et-switch-thumb-size) + 3px);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset))}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:top var(--et-switch-transition-duration) ease,left var(--et-switch-transition-duration) ease,width var(--et-switch-transition-duration) ease,height var(--et-switch-transition-duration) ease,background-color var(--et-switch-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-switch{--et-switch-transition-duration: 1ms}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SwitchComponent, isStandalone: true, selector: "et-switch", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-switch" }, hostDirectives: [{ directive: SwitchDirective, inputs: ["checked", "checked", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-switch-track\">\n <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@layer components{@property --et-switch-track-width{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: true; initial-value: 22px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}et-switch:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 30%,transparent)}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid) 40%,transparent)}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch .et-switch-thumb{position:absolute;top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);left:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);width:calc(var(--et-switch-thumb-size) - 4px);height:calc(var(--et-switch-thumb-size) - 4px);border-radius:calc(var(--et-switch-thumb-size) / 2);background-color:var(--et-surface-color-muted-solid, currentColor)}et-switch:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-surface-color-solid, currentColor)}et-switch:active:not([aria-disabled=true]) .et-switch-thumb{width:var(--et-switch-thumb-size)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[aria-checked=true] .et-switch-thumb{top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true]:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:active:not([aria-disabled=true]) .et-switch-thumb{width:calc(var(--et-switch-thumb-size) + 3px);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset))}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:top var(--et-switch-transition-duration) ease,left var(--et-switch-transition-duration) ease,width var(--et-switch-transition-duration) ease,height var(--et-switch-transition-duration) ease,background-color var(--et-switch-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-switch{--et-switch-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5037
5039
|
}
|
|
5038
5040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
5039
5041
|
type: Component,
|
|
@@ -5047,7 +5049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5047
5049
|
], host: {
|
|
5048
5050
|
class: 'et-switch',
|
|
5049
5051
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
5050
|
-
}, template: "<div class=\"et-switch-track\">\n <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@property --et-switch-track-width{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: true; initial-value: 22px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}et-switch:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 30%,transparent)}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid) 40%,transparent)}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch .et-switch-thumb{position:absolute;top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);left:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);width:calc(var(--et-switch-thumb-size) - 4px);height:calc(var(--et-switch-thumb-size) - 4px);border-radius:calc(var(--et-switch-thumb-size) / 2);background-color:var(--et-surface-color-muted-solid, currentColor)}et-switch:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-surface-color-solid, currentColor)}et-switch:active:not([aria-disabled=true]) .et-switch-thumb{width:var(--et-switch-thumb-size)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[aria-checked=true] .et-switch-thumb{top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true]:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:active:not([aria-disabled=true]) .et-switch-thumb{width:calc(var(--et-switch-thumb-size) + 3px);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset))}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:top var(--et-switch-transition-duration) ease,left var(--et-switch-transition-duration) ease,width var(--et-switch-transition-duration) ease,height var(--et-switch-transition-duration) ease,background-color var(--et-switch-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-switch{--et-switch-transition-duration: 1ms}}\n"] }]
|
|
5052
|
+
}, template: "<div class=\"et-switch-track\">\n <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@layer components{@property --et-switch-track-width{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: true; initial-value: 22px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}et-switch:hover:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 30%,transparent)}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]):not([aria-checked=true]) .et-switch-track{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid) 40%,transparent)}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch .et-switch-thumb{position:absolute;top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);left:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);width:calc(var(--et-switch-thumb-size) - 4px);height:calc(var(--et-switch-thumb-size) - 4px);border-radius:calc(var(--et-switch-thumb-size) / 2);background-color:var(--et-surface-color-muted-solid, currentColor)}et-switch:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-surface-color-solid, currentColor)}et-switch:active:not([aria-disabled=true]) .et-switch-thumb{width:var(--et-switch-thumb-size)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[aria-checked=true] .et-switch-thumb{top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:hover:not([aria-disabled=true]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true]:not([aria-disabled=true]) .et-switch-thumb{background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true]:active:not([aria-disabled=true]) .et-switch-thumb{width:calc(var(--et-switch-thumb-size) + 3px);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset))}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:top var(--et-switch-transition-duration) ease,left var(--et-switch-transition-duration) ease,width var(--et-switch-transition-duration) ease,height var(--et-switch-transition-duration) ease,background-color var(--et-switch-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-switch{--et-switch-transition-duration: 1ms}}}\n"] }]
|
|
5051
5053
|
}] });
|
|
5052
5054
|
|
|
5053
5055
|
const SWITCH_IMPORTS = [SwitchComponent, SwitchDirective];
|
|
@@ -6917,7 +6919,7 @@ class GridItemComponent {
|
|
|
6917
6919
|
this.surfaceThemes = injectSurfaceThemes({ optional: true });
|
|
6918
6920
|
this.ariaLabel = input('Grid item', /* @ts-ignore */
|
|
6919
6921
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6920
|
-
this.
|
|
6922
|
+
this.remove = output();
|
|
6921
6923
|
this.isReadOnly = computed(() => this.grid?.readOnly() ?? false, /* @ts-ignore */
|
|
6922
6924
|
...(ngDevMode ? [{ debugName: "isReadOnly" }] : /* istanbul ignore next */ []));
|
|
6923
6925
|
this.resolvedSurface = computed(() => {
|
|
@@ -7000,13 +7002,13 @@ class GridItemComponent {
|
|
|
7000
7002
|
if (event.key === 'Delete' || event.key === 'Backspace') {
|
|
7001
7003
|
if (event.ctrlKey || event.metaKey) {
|
|
7002
7004
|
grid.removeItem(this.gridItem.itemId());
|
|
7003
|
-
this.
|
|
7005
|
+
this.remove.emit();
|
|
7004
7006
|
event.preventDefault();
|
|
7005
7007
|
}
|
|
7006
7008
|
}
|
|
7007
7009
|
}
|
|
7008
7010
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7009
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: GridItemComponent, isStandalone: true, selector: "et-grid-item, [et-grid-item]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
7011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: GridItemComponent, isStandalone: true, selector: "et-grid-item, [et-grid-item]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { listeners: { "keydown": "applyKeyboardShortcut($event)" }, properties: { "class.et-grid-item--dragging": "!isReadOnly() && gridDrag.dragHandle.isDragging()", "class.et-grid-item--resizing": "gridResize.isResizing()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel()", "attr.tabindex": "\"0\"" }, classAttribute: "et-grid-item" }, hostDirectives: [{ directive: GridItemDirective, inputs: ["itemId", "itemId", "minColSpan", "minColSpan", "maxColSpan", "maxColSpan", "minRowSpan", "minRowSpan", "maxRowSpan", "maxRowSpan"] }, { directive: GridDragDirective }, { directive: GridResizeDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: `
|
|
7010
7012
|
<div (pointerdown)="blockPointerDownWhenReadOnly($event)" class="et-grid-item__content">
|
|
7011
7013
|
<ng-content />
|
|
7012
7014
|
</div>
|
|
@@ -7061,7 +7063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7061
7063
|
'[attr.tabindex]': '"0"',
|
|
7062
7064
|
'(keydown)': 'applyKeyboardShortcut($event)',
|
|
7063
7065
|
}, styles: [".et-grid-item{position:absolute;top:0;left:0;box-sizing:border-box;display:flex;flex-direction:column;outline:none;will-change:translate;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging,.et-grid-item--resizing,.et-grid-item--direct,.et-grid-item--settling){z-index:100}.et-grid-item:is(.et-grid-item--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--entering,.et-grid-item--leaving){scale:.9;opacity:0}.et-grid-item:is(.et-grid-item--leaving){pointer-events:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__content{flex:1;min-height:0}.et-grid:not(.et-grid--readonly) .et-grid-item__content{cursor:grab;user-select:none;-webkit-user-select:none}.et-grid-item--dragging .et-grid-item__content{cursor:grabbing}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"] }]
|
|
7064
|
-
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }],
|
|
7066
|
+
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
|
|
7065
7067
|
|
|
7066
7068
|
class GridComponent {
|
|
7067
7069
|
constructor() {
|
|
@@ -7149,7 +7151,7 @@ class GridComponent {
|
|
|
7149
7151
|
}
|
|
7150
7152
|
}
|
|
7151
7153
|
<ng-content />
|
|
7152
|
-
`, isInline: true, styles: ["@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:block;box-sizing:border-box;padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{position:absolute;top:0;left:0;z-index:0;border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);box-sizing:border-box;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"], dependencies: [{ kind: "component", type: GridItemComponent, selector: "et-grid-item, [et-grid-item]", inputs: ["ariaLabel"], outputs: ["
|
|
7154
|
+
`, isInline: true, styles: ["@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:block;box-sizing:border-box;padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{position:absolute;top:0;left:0;z-index:0;border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);box-sizing:border-box;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"], dependencies: [{ kind: "component", type: GridItemComponent, selector: "et-grid-item, [et-grid-item]", inputs: ["ariaLabel"], outputs: ["remove"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7153
7155
|
}
|
|
7154
7156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridComponent, decorators: [{
|
|
7155
7157
|
type: Component,
|
|
@@ -7728,14 +7730,14 @@ class OverlayContainerComponent {
|
|
|
7728
7730
|
this.destroyRef.onDestroy(() => this.contentComponentRef()?.destroy());
|
|
7729
7731
|
}
|
|
7730
7732
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7731
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: [".et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-size: 14px;--_et-overlay-arrow-overlap: calc( var(--_et-overlay-arrow-size) / 2 + var(--_et-overlay-arrow-pane-border-width, 0px) );--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc( var(--_et-overlay-arrow-size) - var(--_et-overlay-arrow-overlap) - 2 * var(--_et-overlay-arrow-border-width) );position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, 0),var(--origin-scale-y, 0))!important;border-radius:min(250px,calc(var(--origin-width, 0px) / 2),calc(var(--origin-height, 0px) / 2));opacity:0}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-out-5),border-radius .4s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),border-radius .4s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),border-radius .3s var(--ease-in-out-5),opacity .15s linear .1s}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5),border-radius .3s var(--ease-spring-2)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, .85),var(--origin-scale-y, .85))!important;opacity:0}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s linear}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-size: 14px;--_et-overlay-arrow-overlap: calc( var(--_et-overlay-arrow-size) / 2 + var(--_et-overlay-arrow-pane-border-width, 0px) );--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc( var(--_et-overlay-arrow-size) - var(--_et-overlay-arrow-overlap) - 2 * var(--_et-overlay-arrow-border-width) );position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, 0),var(--origin-scale-y, 0))!important;border-radius:min(250px,calc(var(--origin-width, 0px) / 2),calc(var(--origin-height, 0px) / 2));opacity:0}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-out-5),border-radius .4s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),border-radius .4s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),border-radius .3s var(--ease-in-out-5),opacity .15s linear .1s}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5),border-radius .3s var(--ease-spring-2)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, .85),var(--origin-scale-y, .85))!important;opacity:0}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s linear}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7732
7734
|
}
|
|
7733
7735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayContainerComponent, decorators: [{
|
|
7734
7736
|
type: Component,
|
|
7735
7737
|
args: [{ selector: 'et-overlay-container', encapsulation: ViewEncapsulation.None, providers: [provideBoundaryElement()], hostDirectives: [AnimatedLifecycleDirective, ProvideColorDirective, ProvideSurfaceDirective], host: {
|
|
7736
7738
|
class: 'et-overlay',
|
|
7737
7739
|
'[class.et-with-default-animation]': '!overlayRef.config.customAnimated',
|
|
7738
|
-
}, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: [".et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-size: 14px;--_et-overlay-arrow-overlap: calc( var(--_et-overlay-arrow-size) / 2 + var(--_et-overlay-arrow-pane-border-width, 0px) );--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc( var(--_et-overlay-arrow-size) - var(--_et-overlay-arrow-overlap) - 2 * var(--_et-overlay-arrow-border-width) );position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, 0),var(--origin-scale-y, 0))!important;border-radius:min(250px,calc(var(--origin-width, 0px) / 2),calc(var(--origin-height, 0px) / 2));opacity:0}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-out-5),border-radius .4s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),border-radius .4s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),border-radius .3s var(--ease-in-out-5),opacity .15s linear .1s}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5),border-radius .3s var(--ease-spring-2)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, .85),var(--origin-scale-y, .85))!important;opacity:0}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s linear}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}\n"] }]
|
|
7740
|
+
}, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-size: 14px;--_et-overlay-arrow-overlap: calc( var(--_et-overlay-arrow-size) / 2 + var(--_et-overlay-arrow-pane-border-width, 0px) );--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc( var(--_et-overlay-arrow-size) - var(--_et-overlay-arrow-overlap) - 2 * var(--_et-overlay-arrow-border-width) );position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, 0),var(--origin-scale-y, 0))!important;border-radius:min(250px,calc(var(--origin-width, 0px) / 2),calc(var(--origin-height, 0px) / 2));opacity:0}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-out-5),border-radius .4s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),border-radius .4s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),border-radius .3s var(--ease-in-out-5),opacity .15s linear .1s}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5),border-radius .3s var(--ease-spring-2)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-overlay--full-screen-dialog--reduced-animation.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(var(--origin-translate-x, 0),var(--origin-translate-y, 0)) scale(var(--origin-scale-x, .85),var(--origin-scale-y, .85))!important;opacity:0}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .15s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),opacity .15s linear}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s linear}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"] }]
|
|
7739
7741
|
}], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], componentBindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentBindings", required: false }] }], renderArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderArrow", required: false }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
7740
7742
|
|
|
7741
7743
|
const isHtmlElement = (element) => element instanceof HTMLElement;
|
|
@@ -8139,13 +8141,13 @@ class OverlayTemplateHostComponent {
|
|
|
8139
8141
|
...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
|
|
8140
8142
|
}
|
|
8141
8143
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayTemplateHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: OverlayTemplateHostComponent, isStandalone: true, selector: "et-overlay-template-host", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-overlay-template-host" }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"context()\" />\n", styles: [".et-overlay-template-host{display:block;max-width:min(var(--et-overlay-max-width, 100vw),100%);max-height:var(--et-overlay-max-height, 100vh)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: OverlayTemplateHostComponent, isStandalone: true, selector: "et-overlay-template-host", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-overlay-template-host" }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"context()\" />\n", styles: ["@layer components{.et-overlay-template-host{display:block;max-width:min(var(--et-overlay-max-width, 100vw),100%);max-height:var(--et-overlay-max-height, 100vh)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8143
8145
|
}
|
|
8144
8146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayTemplateHostComponent, decorators: [{
|
|
8145
8147
|
type: Component,
|
|
8146
8148
|
args: [{ selector: 'et-overlay-template-host', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
|
|
8147
8149
|
class: 'et-overlay-template-host',
|
|
8148
|
-
}, template: "<ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"context()\" />\n", styles: [".et-overlay-template-host{display:block;max-width:min(var(--et-overlay-max-width, 100vw),100%);max-height:var(--et-overlay-max-height, 100vh)}\n"] }]
|
|
8150
|
+
}, template: "<ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"context()\" />\n", styles: ["@layer components{.et-overlay-template-host{display:block;max-width:min(var(--et-overlay-max-width, 100vw),100%);max-height:var(--et-overlay-max-height, 100vh)}}\n"] }]
|
|
8149
8151
|
}], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }] } });
|
|
8150
8152
|
|
|
8151
8153
|
const buildAnchoredRuntimePositionStrategy = (options = {}) => (origin) => origin
|
|
@@ -8714,14 +8716,14 @@ class OverlayOriginCloneComponent {
|
|
|
8714
8716
|
this.animatedLifecycle = inject(AnimatedLifecycleDirective);
|
|
8715
8717
|
}
|
|
8716
8718
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayOriginCloneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: OverlayOriginCloneComponent, isStandalone: true, selector: "et-overlay-origin-clone", host: { attributes: { "inert": "true" }, classAttribute: "et-overlay-origin-clone" }, hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".et-overlay-origin-clone{position:fixed;margin:0;z-index:999999;pointer-events:none;transform-origin:center center}.et-overlay-origin-clone.et-animation-enter-from{transform:translate(var(--enter-from-translate-x, 0),var(--enter-from-translate-y, 0)) scale(var(--enter-from-scale-x, 1),var(--enter-from-scale-y, 1));opacity:1}.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-out-5),opacity .1s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),opacity .1s linear}}.et-overlay-origin-clone.et-animation-enter-to,.et-overlay-origin-clone.et-animation-enter-done{transform:translate(var(--enter-to-translate-x, 0),var(--enter-to-translate-y, 0)) scale(var(--enter-to-scale-x, 1),var(--enter-to-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-from{transform:translate(var(--leave-from-translate-x, 0),var(--leave-from-translate-y, 0)) scale(var(--leave-from-scale-x, 1),var(--leave-from-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),opacity 125ms 175ms linear}.et-overlay-origin-clone.et-animation-leave-to,.et-overlay-origin-clone.et-animation-leave-done{transform:translate(var(--leave-to-translate-x, 0),var(--leave-to-translate-y, 0)) scale(var(--leave-to-scale-x, 1),var(--leave-to-scale-y, 1));opacity:1}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8719
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: OverlayOriginCloneComponent, isStandalone: true, selector: "et-overlay-origin-clone", host: { attributes: { "inert": "true" }, classAttribute: "et-overlay-origin-clone" }, hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.et-overlay-origin-clone{position:fixed;margin:0;z-index:999999;pointer-events:none;transform-origin:center center}.et-overlay-origin-clone.et-animation-enter-from{transform:translate(var(--enter-from-translate-x, 0),var(--enter-from-translate-y, 0)) scale(var(--enter-from-scale-x, 1),var(--enter-from-scale-y, 1));opacity:1}.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-out-5),opacity .1s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),opacity .1s linear}}.et-overlay-origin-clone.et-animation-enter-to,.et-overlay-origin-clone.et-animation-enter-done{transform:translate(var(--enter-to-translate-x, 0),var(--enter-to-translate-y, 0)) scale(var(--enter-to-scale-x, 1),var(--enter-to-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-from{transform:translate(var(--leave-from-translate-x, 0),var(--leave-from-translate-y, 0)) scale(var(--leave-from-scale-x, 1),var(--leave-from-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),opacity 125ms 175ms linear}.et-overlay-origin-clone.et-animation-leave-to,.et-overlay-origin-clone.et-animation-leave-done{transform:translate(var(--leave-to-translate-x, 0),var(--leave-to-translate-y, 0)) scale(var(--leave-to-scale-x, 1),var(--leave-to-scale-y, 1));opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8718
8720
|
}
|
|
8719
8721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayOriginCloneComponent, decorators: [{
|
|
8720
8722
|
type: Component,
|
|
8721
8723
|
args: [{ selector: 'et-overlay-origin-clone', template: '<ng-content />', encapsulation: ViewEncapsulation.None, hostDirectives: [AnimatedLifecycleDirective], host: {
|
|
8722
8724
|
class: 'et-overlay-origin-clone',
|
|
8723
8725
|
inert: 'true',
|
|
8724
|
-
}, styles: [".et-overlay-origin-clone{position:fixed;margin:0;z-index:999999;pointer-events:none;transform-origin:center center}.et-overlay-origin-clone.et-animation-enter-from{transform:translate(var(--enter-from-translate-x, 0),var(--enter-from-translate-y, 0)) scale(var(--enter-from-scale-x, 1),var(--enter-from-scale-y, 1));opacity:1}.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-out-5),opacity .1s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),opacity .1s linear}}.et-overlay-origin-clone.et-animation-enter-to,.et-overlay-origin-clone.et-animation-enter-done{transform:translate(var(--enter-to-translate-x, 0),var(--enter-to-translate-y, 0)) scale(var(--enter-to-scale-x, 1),var(--enter-to-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-from{transform:translate(var(--leave-from-translate-x, 0),var(--leave-from-translate-y, 0)) scale(var(--leave-from-scale-x, 1),var(--leave-from-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),opacity 125ms 175ms linear}.et-overlay-origin-clone.et-animation-leave-to,.et-overlay-origin-clone.et-animation-leave-done{transform:translate(var(--leave-to-translate-x, 0),var(--leave-to-translate-y, 0)) scale(var(--leave-to-scale-x, 1),var(--leave-to-scale-y, 1));opacity:1}\n"] }]
|
|
8726
|
+
}, styles: ["@layer components{.et-overlay-origin-clone{position:fixed;margin:0;z-index:999999;pointer-events:none;transform-origin:center center}.et-overlay-origin-clone.et-animation-enter-from{transform:translate(var(--enter-from-translate-x, 0),var(--enter-from-translate-y, 0)) scale(var(--enter-from-scale-x, 1),var(--enter-from-scale-y, 1));opacity:1}.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-out-5),opacity .1s linear}@supports (transition-timing-function: linear(0,1)){.et-overlay-origin-clone.et-animation-enter-active{transition:transform .4s var(--ease-spring-1),opacity .1s linear}}.et-overlay-origin-clone.et-animation-enter-to,.et-overlay-origin-clone.et-animation-enter-done{transform:translate(var(--enter-to-translate-x, 0),var(--enter-to-translate-y, 0)) scale(var(--enter-to-scale-x, 1),var(--enter-to-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-from{transform:translate(var(--leave-from-translate-x, 0),var(--leave-from-translate-y, 0)) scale(var(--leave-from-scale-x, 1),var(--leave-from-scale-y, 1));opacity:0}.et-overlay-origin-clone.et-animation-leave-active{transition:transform .3s var(--ease-in-out-5),opacity 125ms 175ms linear}.et-overlay-origin-clone.et-animation-leave-to,.et-overlay-origin-clone.et-animation-leave-done{transform:translate(var(--leave-to-translate-x, 0),var(--leave-to-translate-y, 0)) scale(var(--leave-to-scale-x, 1),var(--leave-to-scale-y, 1));opacity:1}}\n"] }]
|
|
8725
8727
|
}] });
|
|
8726
8728
|
|
|
8727
8729
|
const REDUCED_ANIMATION_THRESHOLD_WIDTH = 1000;
|
|
@@ -9557,6 +9559,7 @@ class MenuDirective {
|
|
|
9557
9559
|
...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
|
|
9558
9560
|
this.arrowPadding = input(14, /* @ts-ignore */
|
|
9559
9561
|
...(ngDevMode ? [{ debugName: "arrowPadding" }] : /* istanbul ignore next */ []));
|
|
9562
|
+
// eslint-disable-next-line ethlete/no-native-html-input-name -- mirrors the native autofocus behaviour on open
|
|
9560
9563
|
this.autoFocus = input(true, /* @ts-ignore */
|
|
9561
9564
|
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
9562
9565
|
this.hoverOpen = input(true, /* @ts-ignore */
|
|
@@ -10383,7 +10386,7 @@ class MenuItemDirective {
|
|
|
10383
10386
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
10384
10387
|
this.closeOnActivate = input(undefined, /* @ts-ignore */
|
|
10385
10388
|
...(ngDevMode ? [{ debugName: "closeOnActivate" }] : /* istanbul ignore next */ []));
|
|
10386
|
-
this.
|
|
10389
|
+
this.activate = output();
|
|
10387
10390
|
/** @internal The menu whose item list this item belongs to. */
|
|
10388
10391
|
this.owner = null;
|
|
10389
10392
|
/** @internal The submenu this item opens when it doubles as a submenu trigger. */
|
|
@@ -10473,7 +10476,7 @@ class MenuItemDirective {
|
|
|
10473
10476
|
event.stopPropagation();
|
|
10474
10477
|
return;
|
|
10475
10478
|
}
|
|
10476
|
-
this.
|
|
10479
|
+
this.activate.emit({ source });
|
|
10477
10480
|
if (this.closeOnActivate() ?? this.defaultCloseOnActivate) {
|
|
10478
10481
|
this.owner?.closeAll('item');
|
|
10479
10482
|
}
|
|
@@ -10495,7 +10498,7 @@ class MenuItemDirective {
|
|
|
10495
10498
|
this.owner?.activeItem.set(this);
|
|
10496
10499
|
}
|
|
10497
10500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10498
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: MenuItemDirective, isStandalone: true, selector: "[etMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnActivate: { classPropertyName: "closeOnActivate", publicName: "closeOnActivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
10501
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: MenuItemDirective, isStandalone: true, selector: "[etMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnActivate: { classPropertyName: "closeOnActivate", publicName: "closeOnActivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)", "mousedown": "handleMousedown($event)", "pointerenter": "handlePointerEnter($event)", "focus": "handleFocus()" }, properties: { "attr.role": "role()", "attr.tabindex": "tabIndex()", "attr.aria-disabled": "isDisabled() || null", "attr.data-active": "isActive() || null" } }, exportAs: ["etMenuItem"], ngImport: i0 }); }
|
|
10499
10502
|
}
|
|
10500
10503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemDirective, decorators: [{
|
|
10501
10504
|
type: Directive,
|
|
@@ -10514,7 +10517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10514
10517
|
'(focus)': 'handleFocus()',
|
|
10515
10518
|
},
|
|
10516
10519
|
}]
|
|
10517
|
-
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnActivate", required: false }] }],
|
|
10520
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnActivate", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
|
|
10518
10521
|
|
|
10519
10522
|
class MenuPanelDirective {
|
|
10520
10523
|
constructor() {
|
|
@@ -10814,7 +10817,7 @@ class MenuSelectionItemDirective {
|
|
|
10814
10817
|
menuItem.roleOverride.set(computed(() => (this.kind() === 'radio' ? 'menuitemradio' : 'menuitemcheckbox')));
|
|
10815
10818
|
menuItem.setDefaultCloseOnActivate(false);
|
|
10816
10819
|
menuItem.disabledOverride.set(this.isDisabled);
|
|
10817
|
-
outputToObservable(menuItem.
|
|
10820
|
+
outputToObservable(menuItem.activate)
|
|
10818
10821
|
.pipe(takeUntilDestroyed(), tap((event) => this.handleActivation(event)))
|
|
10819
10822
|
.subscribe();
|
|
10820
10823
|
}
|
|
@@ -10943,7 +10946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10943
10946
|
|
|
10944
10947
|
class MenuCheckboxItemComponent {
|
|
10945
10948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuCheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10946
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuCheckboxItemComponent, isStandalone: true, selector: "et-menu-checkbox-item", host: { classAttribute: "et-menu-item et-menu-selection-item et-menu-checkbox-item" }, providers: [{ provide: MENU_SELECTION_ITEM_KIND, useValue: 'checkbox' }], hostDirectives: [{ directive: MenuItemDirective, inputs: ["closeOnActivate", "closeOnActivate"], outputs: ["
|
|
10949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuCheckboxItemComponent, isStandalone: true, selector: "et-menu-checkbox-item", host: { classAttribute: "et-menu-item et-menu-selection-item et-menu-checkbox-item" }, providers: [{ provide: MENU_SELECTION_ITEM_KIND, useValue: 'checkbox' }], hostDirectives: [{ directive: MenuItemDirective, inputs: ["closeOnActivate", "closeOnActivate"], outputs: ["activate", "activate"] }, { directive: MenuSelectionItemDirective, inputs: ["value", "value", "checked", "checked", "indeterminate", "indeterminate", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<span class=\"et-menu-item-check\" aria-hidden=\"true\"></span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n", styles: ["@layer components{.et-menu-selection-item{cursor:pointer}.et-menu-selection-item .et-menu-item-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px);color:var(--et-theme-color-primary-solid, currentColor)}.et-menu-selection-item.et-menu-radio-item .et-menu-item-check:before{content:\"\";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-radio-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:scale(1)}.et-menu-selection-item.et-menu-checkbox-item .et-menu-item-check:before{content:\"\";inline-size:9px;block-size:5px;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) translateY(-1px) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:rotate(-45deg) translateY(-1px) scale(1)}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=mixed] .et-menu-item-check:before{inline-size:9px;block-size:0;border-inline-start:none;border-block-end:2px solid currentColor;transform:none;opacity:1}@media(prefers-reduced-motion:reduce){.et-menu-selection-item .et-menu-item-check:before{transition-duration:0ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10947
10950
|
}
|
|
10948
10951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuCheckboxItemComponent, decorators: [{
|
|
10949
10952
|
type: Component,
|
|
@@ -10951,7 +10954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10951
10954
|
{
|
|
10952
10955
|
directive: MenuItemDirective,
|
|
10953
10956
|
inputs: ['closeOnActivate'],
|
|
10954
|
-
outputs: ['
|
|
10957
|
+
outputs: ['activate'],
|
|
10955
10958
|
},
|
|
10956
10959
|
{
|
|
10957
10960
|
directive: MenuSelectionItemDirective,
|
|
@@ -10960,7 +10963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10960
10963
|
},
|
|
10961
10964
|
], host: {
|
|
10962
10965
|
class: 'et-menu-item et-menu-selection-item et-menu-checkbox-item',
|
|
10963
|
-
}, template: "<span class=\"et-menu-item-check\" aria-hidden=\"true\"></span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n", styles: [".et-menu-selection-item{cursor:pointer}.et-menu-selection-item .et-menu-item-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px);color:var(--et-theme-color-primary-solid, currentColor)}.et-menu-selection-item.et-menu-radio-item .et-menu-item-check:before{content:\"\";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-radio-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:scale(1)}.et-menu-selection-item.et-menu-checkbox-item .et-menu-item-check:before{content:\"\";inline-size:9px;block-size:5px;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) translateY(-1px) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:rotate(-45deg) translateY(-1px) scale(1)}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=mixed] .et-menu-item-check:before{inline-size:9px;block-size:0;border-inline-start:none;border-block-end:2px solid currentColor;transform:none;opacity:1}@media(prefers-reduced-motion:reduce){.et-menu-selection-item .et-menu-item-check:before{transition-duration:0ms}}\n"] }]
|
|
10966
|
+
}, template: "<span class=\"et-menu-item-check\" aria-hidden=\"true\"></span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n", styles: ["@layer components{.et-menu-selection-item{cursor:pointer}.et-menu-selection-item .et-menu-item-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px);color:var(--et-theme-color-primary-solid, currentColor)}.et-menu-selection-item.et-menu-radio-item .et-menu-item-check:before{content:\"\";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-radio-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:scale(1)}.et-menu-selection-item.et-menu-checkbox-item .et-menu-item-check:before{content:\"\";inline-size:9px;block-size:5px;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) translateY(-1px) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:rotate(-45deg) translateY(-1px) scale(1)}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=mixed] .et-menu-item-check:before{inline-size:9px;block-size:0;border-inline-start:none;border-block-end:2px solid currentColor;transform:none;opacity:1}@media(prefers-reduced-motion:reduce){.et-menu-selection-item .et-menu-item-check:before{transition-duration:0ms}}}\n"] }]
|
|
10964
10967
|
}] });
|
|
10965
10968
|
|
|
10966
10969
|
class MenuGroupLabelComponent {
|
|
@@ -10978,14 +10981,14 @@ class MenuGroupLabelComponent {
|
|
|
10978
10981
|
});
|
|
10979
10982
|
}
|
|
10980
10983
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10981
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuGroupLabelComponent, isStandalone: true, selector: "et-menu-group-label", host: { attributes: { "role": "presentation" }, classAttribute: "et-menu-group-label" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".et-menu-group-label{display:block;padding-block:6px 4px;padding-inline:var(--et-menu-item-padding-inline, 10px);color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:var(--et-menu-group-label-font-size, 12px);font-weight:600;letter-spacing:.02em;text-transform:uppercase}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10984
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuGroupLabelComponent, isStandalone: true, selector: "et-menu-group-label", host: { attributes: { "role": "presentation" }, classAttribute: "et-menu-group-label" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{.et-menu-group-label{display:block;padding-block:6px 4px;padding-inline:var(--et-menu-item-padding-inline, 10px);color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:var(--et-menu-group-label-font-size, 12px);font-weight:600;letter-spacing:.02em;text-transform:uppercase}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10982
10985
|
}
|
|
10983
10986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuGroupLabelComponent, decorators: [{
|
|
10984
10987
|
type: Component,
|
|
10985
10988
|
args: [{ selector: 'et-menu-group-label', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
|
|
10986
10989
|
class: 'et-menu-group-label',
|
|
10987
10990
|
role: 'presentation',
|
|
10988
|
-
}, styles: [".et-menu-group-label{display:block;padding-block:6px 4px;padding-inline:var(--et-menu-item-padding-inline, 10px);color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:var(--et-menu-group-label-font-size, 12px);font-weight:600;letter-spacing:.02em;text-transform:uppercase}\n"] }]
|
|
10991
|
+
}, styles: ["@layer components{.et-menu-group-label{display:block;padding-block:6px 4px;padding-inline:var(--et-menu-item-padding-inline, 10px);color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:var(--et-menu-group-label-font-size, 12px);font-weight:600;letter-spacing:.02em;text-transform:uppercase}}\n"] }]
|
|
10989
10992
|
}], ctorParameters: () => [] });
|
|
10990
10993
|
|
|
10991
10994
|
const MENU_ITEM_VARIANTS = {
|
|
@@ -11010,7 +11013,7 @@ class MenuItemComponent {
|
|
|
11010
11013
|
});
|
|
11011
11014
|
}
|
|
11012
11015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11013
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: MenuItemComponent, isStandalone: true, selector: "button[et-menu-item], a[et-menu-item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "et-menu-item" }, hostDirectives: [{ directive: MenuItemDirective, inputs: ["disabled", "disabled", "closeOnActivate", "closeOnActivate"], outputs: ["
|
|
11016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: MenuItemComponent, isStandalone: true, selector: "button[et-menu-item], a[et-menu-item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "et-menu-item" }, hostDirectives: [{ directive: MenuItemDirective, inputs: ["disabled", "disabled", "closeOnActivate", "closeOnActivate"], outputs: ["activate", "activate"] }, { directive: i1.ProvideColorDirective }], ngImport: i0, template: "<span class=\"et-menu-item-icon\">\n <ng-content select=\"[etIcon]\" />\n</span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n\n<span class=\"et-menu-item-trailing\">\n <ng-content select=\"et-menu-item-shortcut\" />\n</span>\n", styles: ["@layer components{.et-menu-item .et-menu-item-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}.et-menu-item .et-menu-item-icon:not(:has(*)){display:none}.et-menu-item .et-menu-item-icon svg{inline-size:var(--et-menu-item-icon-size);block-size:var(--et-menu-item-icon-size)}.et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-menu-item .et-menu-item-trailing{display:inline-flex;align-items:center;flex:none}.et-menu-item .et-menu-item-trailing:not(:has(*)){display:none}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11014
11017
|
}
|
|
11015
11018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
11016
11019
|
type: Component,
|
|
@@ -11018,25 +11021,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11018
11021
|
{
|
|
11019
11022
|
directive: MenuItemDirective,
|
|
11020
11023
|
inputs: ['disabled', 'closeOnActivate'],
|
|
11021
|
-
outputs: ['
|
|
11024
|
+
outputs: ['activate'],
|
|
11022
11025
|
},
|
|
11023
11026
|
ProvideColorDirective,
|
|
11024
11027
|
], host: {
|
|
11025
11028
|
class: 'et-menu-item',
|
|
11026
11029
|
'[attr.data-variant]': 'variant()',
|
|
11027
|
-
}, template: "<span class=\"et-menu-item-icon\">\n <ng-content select=\"[etIcon]\" />\n</span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n\n<span class=\"et-menu-item-trailing\">\n <ng-content select=\"et-menu-item-shortcut\" />\n</span>\n", styles: [".et-menu-item .et-menu-item-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}.et-menu-item .et-menu-item-icon:not(:has(*)){display:none}.et-menu-item .et-menu-item-icon svg{inline-size:var(--et-menu-item-icon-size);block-size:var(--et-menu-item-icon-size)}.et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-menu-item .et-menu-item-trailing{display:inline-flex;align-items:center;flex:none}.et-menu-item .et-menu-item-trailing:not(:has(*)){display:none}\n"] }]
|
|
11030
|
+
}, template: "<span class=\"et-menu-item-icon\">\n <ng-content select=\"[etIcon]\" />\n</span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n\n<span class=\"et-menu-item-trailing\">\n <ng-content select=\"et-menu-item-shortcut\" />\n</span>\n", styles: ["@layer components{.et-menu-item .et-menu-item-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}.et-menu-item .et-menu-item-icon:not(:has(*)){display:none}.et-menu-item .et-menu-item-icon svg{inline-size:var(--et-menu-item-icon-size);block-size:var(--et-menu-item-icon-size)}.et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-menu-item .et-menu-item-trailing{display:inline-flex;align-items:center;flex:none}.et-menu-item .et-menu-item-trailing:not(:has(*)){display:none}}\n"] }]
|
|
11028
11031
|
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
11029
11032
|
|
|
11030
11033
|
class MenuItemShortcutComponent {
|
|
11031
11034
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuItemShortcutComponent, isStandalone: true, selector: "et-menu-item-shortcut", host: { attributes: { "aria-hidden": "true" }, classAttribute: "et-menu-item-shortcut" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".et-menu-item-shortcut{display:inline-flex;align-items:center;color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11035
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuItemShortcutComponent, isStandalone: true, selector: "et-menu-item-shortcut", host: { attributes: { "aria-hidden": "true" }, classAttribute: "et-menu-item-shortcut" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{.et-menu-item-shortcut{display:inline-flex;align-items:center;color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11033
11036
|
}
|
|
11034
11037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemShortcutComponent, decorators: [{
|
|
11035
11038
|
type: Component,
|
|
11036
11039
|
args: [{ selector: 'et-menu-item-shortcut', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
|
|
11037
11040
|
class: 'et-menu-item-shortcut',
|
|
11038
11041
|
'aria-hidden': 'true',
|
|
11039
|
-
}, styles: [".et-menu-item-shortcut{display:inline-flex;align-items:center;color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"] }]
|
|
11042
|
+
}, styles: ["@layer components{.et-menu-item-shortcut{display:inline-flex;align-items:center;color:var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / .55)));font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}}\n"] }]
|
|
11040
11043
|
}] });
|
|
11041
11044
|
|
|
11042
11045
|
class MenuRadioGroupComponent {
|
|
@@ -11070,7 +11073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11070
11073
|
|
|
11071
11074
|
class MenuRadioItemComponent {
|
|
11072
11075
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11073
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuRadioItemComponent, isStandalone: true, selector: "et-menu-radio-item", host: { classAttribute: "et-menu-item et-menu-selection-item et-menu-radio-item" }, providers: [{ provide: MENU_SELECTION_ITEM_KIND, useValue: 'radio' }], hostDirectives: [{ directive: MenuItemDirective, inputs: ["closeOnActivate", "closeOnActivate"], outputs: ["
|
|
11076
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuRadioItemComponent, isStandalone: true, selector: "et-menu-radio-item", host: { classAttribute: "et-menu-item et-menu-selection-item et-menu-radio-item" }, providers: [{ provide: MENU_SELECTION_ITEM_KIND, useValue: 'radio' }], hostDirectives: [{ directive: MenuItemDirective, inputs: ["closeOnActivate", "closeOnActivate"], outputs: ["activate", "activate"] }, { directive: MenuSelectionItemDirective, inputs: ["value", "value", "checked", "checked", "touched", "touched", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<span class=\"et-menu-item-check\" aria-hidden=\"true\"></span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n", styles: ["@layer components{.et-menu-selection-item{cursor:pointer}.et-menu-selection-item .et-menu-item-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px);color:var(--et-theme-color-primary-solid, currentColor)}.et-menu-selection-item.et-menu-radio-item .et-menu-item-check:before{content:\"\";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-radio-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:scale(1)}.et-menu-selection-item.et-menu-checkbox-item .et-menu-item-check:before{content:\"\";inline-size:9px;block-size:5px;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) translateY(-1px) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:rotate(-45deg) translateY(-1px) scale(1)}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=mixed] .et-menu-item-check:before{inline-size:9px;block-size:0;border-inline-start:none;border-block-end:2px solid currentColor;transform:none;opacity:1}@media(prefers-reduced-motion:reduce){.et-menu-selection-item .et-menu-item-check:before{transition-duration:0ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11074
11077
|
}
|
|
11075
11078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuRadioItemComponent, decorators: [{
|
|
11076
11079
|
type: Component,
|
|
@@ -11078,7 +11081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11078
11081
|
{
|
|
11079
11082
|
directive: MenuItemDirective,
|
|
11080
11083
|
inputs: ['closeOnActivate'],
|
|
11081
|
-
outputs: ['
|
|
11084
|
+
outputs: ['activate'],
|
|
11082
11085
|
},
|
|
11083
11086
|
{
|
|
11084
11087
|
directive: MenuSelectionItemDirective,
|
|
@@ -11087,12 +11090,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11087
11090
|
},
|
|
11088
11091
|
], host: {
|
|
11089
11092
|
class: 'et-menu-item et-menu-selection-item et-menu-radio-item',
|
|
11090
|
-
}, template: "<span class=\"et-menu-item-check\" aria-hidden=\"true\"></span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n", styles: [".et-menu-selection-item{cursor:pointer}.et-menu-selection-item .et-menu-item-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px);color:var(--et-theme-color-primary-solid, currentColor)}.et-menu-selection-item.et-menu-radio-item .et-menu-item-check:before{content:\"\";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-radio-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:scale(1)}.et-menu-selection-item.et-menu-checkbox-item .et-menu-item-check:before{content:\"\";inline-size:9px;block-size:5px;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) translateY(-1px) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:rotate(-45deg) translateY(-1px) scale(1)}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=mixed] .et-menu-item-check:before{inline-size:9px;block-size:0;border-inline-start:none;border-block-end:2px solid currentColor;transform:none;opacity:1}@media(prefers-reduced-motion:reduce){.et-menu-selection-item .et-menu-item-check:before{transition-duration:0ms}}\n"] }]
|
|
11093
|
+
}, template: "<span class=\"et-menu-item-check\" aria-hidden=\"true\"></span>\n\n<span class=\"et-menu-item-content\">\n <ng-content />\n</span>\n", styles: ["@layer components{.et-menu-selection-item{cursor:pointer}.et-menu-selection-item .et-menu-item-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px);color:var(--et-theme-color-primary-solid, currentColor)}.et-menu-selection-item.et-menu-radio-item .et-menu-item-check:before{content:\"\";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-radio-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:scale(1)}.et-menu-selection-item.et-menu-checkbox-item .et-menu-item-check:before{content:\"\";inline-size:9px;block-size:5px;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) translateY(-1px) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=true] .et-menu-item-check:before{opacity:1;transform:rotate(-45deg) translateY(-1px) scale(1)}.et-menu-selection-item.et-menu-checkbox-item[aria-checked=mixed] .et-menu-item-check:before{inline-size:9px;block-size:0;border-inline-start:none;border-block-end:2px solid currentColor;transform:none;opacity:1}@media(prefers-reduced-motion:reduce){.et-menu-selection-item .et-menu-item-check:before{transition-duration:0ms}}}\n"] }]
|
|
11091
11094
|
}] });
|
|
11092
11095
|
|
|
11093
11096
|
class MenuSeparatorComponent {
|
|
11094
11097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11095
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuSeparatorComponent, isStandalone: true, selector: "et-menu-separator", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" }, classAttribute: "et-menu-separator" }, ngImport: i0, template: ``, isInline: true, styles: [".et-menu-separator{display:block;block-size:1px;margin-block:var(--et-menu-separator-margin-block, 6px);margin-inline:calc(var(--et-menu-item-padding-inline, 10px) * -.5);background:var(--_et-menu-separator-color, var(--et-surface-border-solid, rgb(255 255 255 / .1)))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuSeparatorComponent, isStandalone: true, selector: "et-menu-separator", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" }, classAttribute: "et-menu-separator" }, ngImport: i0, template: ``, isInline: true, styles: ["@layer components{.et-menu-separator{display:block;block-size:1px;margin-block:var(--et-menu-separator-margin-block, 6px);margin-inline:calc(var(--et-menu-item-padding-inline, 10px) * -.5);background:var(--_et-menu-separator-color, var(--et-surface-border-solid, rgb(255 255 255 / .1)))}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11096
11099
|
}
|
|
11097
11100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
|
|
11098
11101
|
type: Component,
|
|
@@ -11100,7 +11103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11100
11103
|
class: 'et-menu-separator',
|
|
11101
11104
|
role: 'separator',
|
|
11102
11105
|
'aria-orientation': 'horizontal',
|
|
11103
|
-
}, styles: [".et-menu-separator{display:block;block-size:1px;margin-block:var(--et-menu-separator-margin-block, 6px);margin-inline:calc(var(--et-menu-item-padding-inline, 10px) * -.5);background:var(--_et-menu-separator-color, var(--et-surface-border-solid, rgb(255 255 255 / .1)))}\n"] }]
|
|
11106
|
+
}, styles: ["@layer components{.et-menu-separator{display:block;block-size:1px;margin-block:var(--et-menu-separator-margin-block, 6px);margin-inline:calc(var(--et-menu-item-padding-inline, 10px) * -.5);background:var(--_et-menu-separator-color, var(--et-surface-border-solid, rgb(255 255 255 / .1)))}}\n"] }]
|
|
11104
11107
|
}] });
|
|
11105
11108
|
|
|
11106
11109
|
const RESIZE_ANIMATION_CLASS = 'et-menu--resizing';
|
|
@@ -11182,13 +11185,13 @@ class MenuComponent {
|
|
|
11182
11185
|
this.resizeAnimation = animation;
|
|
11183
11186
|
}
|
|
11184
11187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11185
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuComponent, isStandalone: true, selector: "et-menu", host: { classAttribute: "et-menu" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["menuHeader"], descendants: true, isSignal: true }, { propertyName: "bodyElement", first: true, predicate: ["menuBody"], descendants: true, isSignal: true }], hostDirectives: [{ directive: MenuPanelDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div #menuHeader class=\"et-menu-header\">\n <div class=\"et-menu-search-field\">\n <ng-content select=\"input[etMenuSearch]\" />\n\n @if (searchLoading()) {\n <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n }\n </div>\n\n @if (searchError(); as error) {\n <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n {{ error }}\n </p>\n }\n</div>\n\n<div #menuBody class=\"et-menu-body\">\n <ng-content />\n</div>\n", styles: ["@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:block;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu .et-menu-header{padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{max-block-size:var(--et-menu-max-height, var(--et-overlay-max-height));padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:hover,:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition-duration:0ms}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}\n"], dependencies: [{ kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuComponent, isStandalone: true, selector: "et-menu", host: { classAttribute: "et-menu" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["menuHeader"], descendants: true, isSignal: true }, { propertyName: "bodyElement", first: true, predicate: ["menuBody"], descendants: true, isSignal: true }], hostDirectives: [{ directive: MenuPanelDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div #menuHeader class=\"et-menu-header\">\n <div class=\"et-menu-search-field\">\n <ng-content select=\"input[etMenuSearch]\" />\n\n @if (searchLoading()) {\n <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n }\n </div>\n\n @if (searchError(); as error) {\n <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n {{ error }}\n </p>\n }\n</div>\n\n<div #menuBody class=\"et-menu-body\">\n <ng-content />\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:block;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu .et-menu-header{padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{max-block-size:var(--et-menu-max-height, var(--et-overlay-max-height));padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:hover,:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition-duration:0ms}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11186
11189
|
}
|
|
11187
11190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuComponent, decorators: [{
|
|
11188
11191
|
type: Component,
|
|
11189
11192
|
args: [{ selector: 'et-menu', encapsulation: ViewEncapsulation.None, imports: [ProvideColorDirective, SpinnerComponent], hostDirectives: [MenuPanelDirective, ProvideColorDirective, AutoSurfaceDirective], host: {
|
|
11190
11193
|
class: 'et-menu',
|
|
11191
|
-
}, template: "<div #menuHeader class=\"et-menu-header\">\n <div class=\"et-menu-search-field\">\n <ng-content select=\"input[etMenuSearch]\" />\n\n @if (searchLoading()) {\n <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n }\n </div>\n\n @if (searchError(); as error) {\n <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n {{ error }}\n </p>\n }\n</div>\n\n<div #menuBody class=\"et-menu-body\">\n <ng-content />\n</div>\n", styles: ["@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:block;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu .et-menu-header{padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{max-block-size:var(--et-menu-max-height, var(--et-overlay-max-height));padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:hover,:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition-duration:0ms}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}\n"] }]
|
|
11194
|
+
}, template: "<div #menuHeader class=\"et-menu-header\">\n <div class=\"et-menu-search-field\">\n <ng-content select=\"input[etMenuSearch]\" />\n\n @if (searchLoading()) {\n <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n }\n </div>\n\n @if (searchError(); as error) {\n <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n {{ error }}\n </p>\n }\n</div>\n\n<div #menuBody class=\"et-menu-body\">\n <ng-content />\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:block;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu .et-menu-header{padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{max-block-size:var(--et-menu-max-height, var(--et-overlay-max-height));padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:hover,:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition-duration:0ms}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
|
|
11192
11195
|
}], ctorParameters: () => [], propDecorators: { headerElement: [{ type: i0.ViewChild, args: ['menuHeader', { isSignal: true }] }], bodyElement: [{ type: i0.ViewChild, args: ['menuBody', { isSignal: true }] }] } });
|
|
11193
11196
|
|
|
11194
11197
|
const MENU_IMPORTS = [
|
|
@@ -11671,7 +11674,7 @@ class NotificationComponent {
|
|
|
11671
11674
|
});
|
|
11672
11675
|
}
|
|
11673
11676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationComponent, isStandalone: true, selector: "et-notification", host: { listeners: { "keydown.escape": "notification.ref().dismiss()", "mouseenter": "notification.ref().pauseTimer()", "mouseleave": "notification.ref().resumeTimer()", "focusin": "notification.ref().pauseTimer()", "focusout": "notification.ref().resumeTimer()" }, classAttribute: "et-notification" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: NotificationDirective, inputs: ["ref", "ref"] }, { directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }], ngImport: i0, template: "<div class=\"et-notification-content\">\n <div class=\"et-notification-header\">\n @if (notification.isLoading()) {\n <et-spinner class=\"et-notification-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n <span class=\"et-notification-title\">{{ notification.title() }}</span>\n\n <button\n [color]=\"controlsColor()\"\n [attr.aria-label]=\"dismissLabel()\"\n class=\"et-notification-dismiss-btn\"\n et-icon-button\n etNotificationDismiss\n size=\"xs\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n\n @if (notification.message()) {\n <p class=\"et-notification-message\">{{ notification.message() }}</p>\n }\n\n @if (notification.progress() !== undefined) {\n <et-progress-bar [value]=\"notification.progress()!\" class=\"et-notification-progress-bar\" />\n }\n\n @if (notification.action()) {\n <div class=\"et-notification-footer\">\n <button et-text-button etNotificationAction size=\"xs\" type=\"button\">\n {{ notification.action()!.label }}\n </button>\n </div>\n }\n</div>\n", styles: ["@property --et-notification-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-padding{syntax: \"*\"; inherits: false; initial-value: 12px 12px 12px 14px;}@property --et-notification-min-width{syntax: \"<length>\"; inherits: false; initial-value: 300px;}@property --et-notification-max-width{syntax: \"<length>\"; inherits: false; initial-value: 420px;}@property --et-notification-shadow{syntax: \"*\"; inherits: false; initial-value: 0 4px 16px rgb(0 0 0 / 10%),0 0 0 1px rgb(0 0 0 / 5%);}@property --et-notification-border-width{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-notification-line-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-notification-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-notification-title-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 600;}@property --et-notification-message-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-notification-message-line-height{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-notification-message-opacity{syntax: \"<number>\"; inherits: false; initial-value: .65;}@property --et-notification-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 3px;}.et-notification{display:block;pointer-events:all;background:var(--et-surface-background-solid, #fff);color:var(--et-surface-color-solid, #111);border-radius:var(--et-notification-border-radius);padding:var(--et-notification-padding);box-shadow:var(--et-notification-shadow);min-width:var(--et-notification-min-width);max-width:var(--et-notification-max-width);border-left:var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);font-family:inherit;font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification.et-animation-enter-from{opacity:0;transform:translate(1rem)}.et-notification.et-animation-enter-active
|
|
11677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationComponent, isStandalone: true, selector: "et-notification", host: { listeners: { "keydown.escape": "notification.ref().dismiss()", "mouseenter": "notification.ref().pauseTimer()", "mouseleave": "notification.ref().resumeTimer()", "focusin": "notification.ref().pauseTimer()", "focusout": "notification.ref().resumeTimer()" }, classAttribute: "et-notification" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: NotificationDirective, inputs: ["ref", "ref"] }, { directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }], ngImport: i0, template: "<div class=\"et-notification-content\">\n <div class=\"et-notification-header\">\n @if (notification.isLoading()) {\n <et-spinner class=\"et-notification-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n <span class=\"et-notification-title\">{{ notification.title() }}</span>\n\n <button\n [color]=\"controlsColor()\"\n [attr.aria-label]=\"dismissLabel()\"\n class=\"et-notification-dismiss-btn\"\n et-icon-button\n etNotificationDismiss\n size=\"xs\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n\n @if (notification.message()) {\n <p class=\"et-notification-message\">{{ notification.message() }}</p>\n }\n\n @if (notification.progress() !== undefined) {\n <et-progress-bar [value]=\"notification.progress()!\" class=\"et-notification-progress-bar\" />\n }\n\n @if (notification.action()) {\n <div class=\"et-notification-footer\">\n <button et-text-button etNotificationAction size=\"xs\" type=\"button\">\n {{ notification.action()!.label }}\n </button>\n </div>\n }\n</div>\n", styles: ["@layer components{@property --et-notification-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-padding{syntax: \"*\"; inherits: false; initial-value: 12px 12px 12px 14px;}@property --et-notification-min-width{syntax: \"<length>\"; inherits: false; initial-value: 300px;}@property --et-notification-max-width{syntax: \"<length>\"; inherits: false; initial-value: 420px;}@property --et-notification-shadow{syntax: \"*\"; inherits: false; initial-value: 0 4px 16px rgb(0 0 0 / 10%),0 0 0 1px rgb(0 0 0 / 5%);}@property --et-notification-border-width{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-notification-line-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-notification-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-notification-title-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 600;}@property --et-notification-message-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-notification-message-line-height{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-notification-message-opacity{syntax: \"<number>\"; inherits: false; initial-value: .65;}@property --et-notification-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 3px;}.et-notification{display:block;pointer-events:all;background:var(--et-surface-background-solid, #fff);color:var(--et-surface-color-solid, #111);border-radius:var(--et-notification-border-radius);padding:var(--et-notification-padding);box-shadow:var(--et-notification-shadow);min-width:var(--et-notification-min-width);max-width:var(--et-notification-max-width);border-left:var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);font-family:inherit;font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification.et-animation-enter-from{opacity:0;transform:translate(1rem)}.et-notification.et-animation-enter-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-to{opacity:0;transform:translate(1rem)}:is(.et-notification-stack[data-position=bottom-start] .et-notification,.et-notification-stack[data-position=top-start] .et-notification).et-animation-enter-from,:is(.et-notification-stack[data-position=bottom-start] .et-notification,.et-notification-stack[data-position=top-start] .et-notification).et-animation-leave-to{transform:translate(-1rem)}.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-leave-to{transform:translateY(1rem)}.et-notification-stack[data-position=top-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=top-center] .et-notification.et-animation-leave-to{transform:translateY(-1rem)}.et-notification-header{display:flex;align-items:center;justify-content:space-between;gap:var(--et-notification-gap)}.et-notification-spinner{flex-shrink:0;--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}.et-notification-title{flex:1;font-weight:var(--et-notification-title-font-weight);font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification-dismiss-btn{flex-shrink:0;opacity:.4;transition:opacity .12s ease}.et-notification-dismiss-btn:hover{opacity:.8}.et-notification-message{margin:.4rem 0 0;color:var(--et-surface-color-muted-solid, inherit);opacity:var(--et-notification-message-opacity);font-size:var(--et-notification-message-font-size);line-height:var(--et-notification-message-line-height)}.et-notification-progress-bar{margin-top:.8rem;color:var(--et-theme-color-primary-solid, currentColor);--et-progress-bar-height: var(--et-notification-progress-bar-height)}.et-notification-footer{margin-top:.8rem}@media(prefers-reduced-motion:reduce){.et-notification.et-animation-enter-from{transform:none}.et-notification.et-animation-enter-active,.et-notification.et-animation-leave-active{transition-duration:0ms}.et-notification.et-animation-leave-to{transform:none}}}\n"], dependencies: [{ kind: "directive", type: NotificationActionDirective, selector: "[etNotificationAction]", exportAs: ["etNotificationAction"] }, { kind: "directive", type: NotificationDismissDirective, selector: "[etNotificationDismiss]", exportAs: ["etNotificationDismiss"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "component", type: ProgressBarComponent, selector: "et-progress-bar", inputs: ["value", "indeterminate"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11675
11678
|
}
|
|
11676
11679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
11677
11680
|
type: Component,
|
|
@@ -11701,7 +11704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11701
11704
|
'(mouseleave)': 'notification.ref().resumeTimer()',
|
|
11702
11705
|
'(focusin)': 'notification.ref().pauseTimer()',
|
|
11703
11706
|
'(focusout)': 'notification.ref().resumeTimer()',
|
|
11704
|
-
}, template: "<div class=\"et-notification-content\">\n <div class=\"et-notification-header\">\n @if (notification.isLoading()) {\n <et-spinner class=\"et-notification-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n <span class=\"et-notification-title\">{{ notification.title() }}</span>\n\n <button\n [color]=\"controlsColor()\"\n [attr.aria-label]=\"dismissLabel()\"\n class=\"et-notification-dismiss-btn\"\n et-icon-button\n etNotificationDismiss\n size=\"xs\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n\n @if (notification.message()) {\n <p class=\"et-notification-message\">{{ notification.message() }}</p>\n }\n\n @if (notification.progress() !== undefined) {\n <et-progress-bar [value]=\"notification.progress()!\" class=\"et-notification-progress-bar\" />\n }\n\n @if (notification.action()) {\n <div class=\"et-notification-footer\">\n <button et-text-button etNotificationAction size=\"xs\" type=\"button\">\n {{ notification.action()!.label }}\n </button>\n </div>\n }\n</div>\n", styles: ["@property --et-notification-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-padding{syntax: \"*\"; inherits: false; initial-value: 12px 12px 12px 14px;}@property --et-notification-min-width{syntax: \"<length>\"; inherits: false; initial-value: 300px;}@property --et-notification-max-width{syntax: \"<length>\"; inherits: false; initial-value: 420px;}@property --et-notification-shadow{syntax: \"*\"; inherits: false; initial-value: 0 4px 16px rgb(0 0 0 / 10%),0 0 0 1px rgb(0 0 0 / 5%);}@property --et-notification-border-width{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-notification-line-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-notification-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-notification-title-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 600;}@property --et-notification-message-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-notification-message-line-height{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-notification-message-opacity{syntax: \"<number>\"; inherits: false; initial-value: .65;}@property --et-notification-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 3px;}.et-notification{display:block;pointer-events:all;background:var(--et-surface-background-solid, #fff);color:var(--et-surface-color-solid, #111);border-radius:var(--et-notification-border-radius);padding:var(--et-notification-padding);box-shadow:var(--et-notification-shadow);min-width:var(--et-notification-min-width);max-width:var(--et-notification-max-width);border-left:var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);font-family:inherit;font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification.et-animation-enter-from{opacity:0;transform:translate(1rem)}.et-notification.et-animation-enter-active
|
|
11707
|
+
}, template: "<div class=\"et-notification-content\">\n <div class=\"et-notification-header\">\n @if (notification.isLoading()) {\n <et-spinner class=\"et-notification-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n <span class=\"et-notification-title\">{{ notification.title() }}</span>\n\n <button\n [color]=\"controlsColor()\"\n [attr.aria-label]=\"dismissLabel()\"\n class=\"et-notification-dismiss-btn\"\n et-icon-button\n etNotificationDismiss\n size=\"xs\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </div>\n\n @if (notification.message()) {\n <p class=\"et-notification-message\">{{ notification.message() }}</p>\n }\n\n @if (notification.progress() !== undefined) {\n <et-progress-bar [value]=\"notification.progress()!\" class=\"et-notification-progress-bar\" />\n }\n\n @if (notification.action()) {\n <div class=\"et-notification-footer\">\n <button et-text-button etNotificationAction size=\"xs\" type=\"button\">\n {{ notification.action()!.label }}\n </button>\n </div>\n }\n</div>\n", styles: ["@layer components{@property --et-notification-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-padding{syntax: \"*\"; inherits: false; initial-value: 12px 12px 12px 14px;}@property --et-notification-min-width{syntax: \"<length>\"; inherits: false; initial-value: 300px;}@property --et-notification-max-width{syntax: \"<length>\"; inherits: false; initial-value: 420px;}@property --et-notification-shadow{syntax: \"*\"; inherits: false; initial-value: 0 4px 16px rgb(0 0 0 / 10%),0 0 0 1px rgb(0 0 0 / 5%);}@property --et-notification-border-width{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-notification-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-notification-line-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-notification-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-notification-title-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 600;}@property --et-notification-message-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-notification-message-line-height{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-notification-message-opacity{syntax: \"<number>\"; inherits: false; initial-value: .65;}@property --et-notification-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 3px;}.et-notification{display:block;pointer-events:all;background:var(--et-surface-background-solid, #fff);color:var(--et-surface-color-solid, #111);border-radius:var(--et-notification-border-radius);padding:var(--et-notification-padding);box-shadow:var(--et-notification-shadow);min-width:var(--et-notification-min-width);max-width:var(--et-notification-max-width);border-left:var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);font-family:inherit;font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification.et-animation-enter-from{opacity:0;transform:translate(1rem)}.et-notification.et-animation-enter-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-to{opacity:0;transform:translate(1rem)}:is(.et-notification-stack[data-position=bottom-start] .et-notification,.et-notification-stack[data-position=top-start] .et-notification).et-animation-enter-from,:is(.et-notification-stack[data-position=bottom-start] .et-notification,.et-notification-stack[data-position=top-start] .et-notification).et-animation-leave-to{transform:translate(-1rem)}.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-leave-to{transform:translateY(1rem)}.et-notification-stack[data-position=top-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=top-center] .et-notification.et-animation-leave-to{transform:translateY(-1rem)}.et-notification-header{display:flex;align-items:center;justify-content:space-between;gap:var(--et-notification-gap)}.et-notification-spinner{flex-shrink:0;--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}.et-notification-title{flex:1;font-weight:var(--et-notification-title-font-weight);font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification-dismiss-btn{flex-shrink:0;opacity:.4;transition:opacity .12s ease}.et-notification-dismiss-btn:hover{opacity:.8}.et-notification-message{margin:.4rem 0 0;color:var(--et-surface-color-muted-solid, inherit);opacity:var(--et-notification-message-opacity);font-size:var(--et-notification-message-font-size);line-height:var(--et-notification-message-line-height)}.et-notification-progress-bar{margin-top:.8rem;color:var(--et-theme-color-primary-solid, currentColor);--et-progress-bar-height: var(--et-notification-progress-bar-height)}.et-notification-footer{margin-top:.8rem}@media(prefers-reduced-motion:reduce){.et-notification.et-animation-enter-from{transform:none}.et-notification.et-animation-enter-active,.et-notification.et-animation-leave-active{transition-duration:0ms}.et-notification.et-animation-leave-to{transform:none}}}\n"] }]
|
|
11705
11708
|
}], ctorParameters: () => [] });
|
|
11706
11709
|
|
|
11707
11710
|
class NotificationStackComponent {
|
|
@@ -11709,7 +11712,7 @@ class NotificationStackComponent {
|
|
|
11709
11712
|
this.stackDirective = inject(NotificationStackDirective);
|
|
11710
11713
|
}
|
|
11711
11714
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationStackComponent, isStandalone: true, selector: "et-notification-stack", host: { attributes: { "role": "log", "aria-live": "polite", "aria-relevant": "additions" }, classAttribute: "et-notification-stack" }, hostDirectives: [{ directive: NotificationStackDirective }], ngImport: i0, template: "@for (ref of stackDirective.displayRefs(); track ref.id) {\n <div [etNotificationItem]=\"ref\">\n <et-notification [ref]=\"ref\" />\n </div>\n}\n", styles: [".et-notification-stack{position:fixed;display:flex;flex-direction:column;align-items:flex-end;gap:var(--et-notification-stack-gap, .5rem);z-index:var(--et-notification-stack-z-index, 1000);pointer-events:none;bottom:1rem;right:1rem}.et-notification-stack[data-position=bottom-center]{bottom:1rem;right:50%;left:auto;top:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=bottom-start]{bottom:1rem;left:1rem;right:auto;top:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=bottom-end]{bottom:1rem;right:1rem;left:auto;top:auto;align-items:flex-end;transform:none}.et-notification-stack[data-position=top-center]{top:1rem;right:50%;bottom:auto;left:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=top-start]{top:1rem;left:1rem;bottom:auto;right:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=top-end]{top:1rem;right:1rem;bottom:auto;left:auto;align-items:flex-end;transform:none}\n"], dependencies: [{ kind: "component", type: NotificationComponent, selector: "et-notification" }, { kind: "directive", type: NotificationItemDirective, selector: "[etNotificationItem]", inputs: ["etNotificationItem"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11715
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationStackComponent, isStandalone: true, selector: "et-notification-stack", host: { attributes: { "role": "log", "aria-live": "polite", "aria-relevant": "additions" }, classAttribute: "et-notification-stack" }, hostDirectives: [{ directive: NotificationStackDirective }], ngImport: i0, template: "@for (ref of stackDirective.displayRefs(); track ref.id) {\n <div [etNotificationItem]=\"ref\">\n <et-notification [ref]=\"ref\" />\n </div>\n}\n", styles: ["@layer components{.et-notification-stack{position:fixed;display:flex;flex-direction:column;align-items:flex-end;gap:var(--et-notification-stack-gap, .5rem);z-index:var(--et-notification-stack-z-index, 1000);pointer-events:none;bottom:1rem;right:1rem}.et-notification-stack[data-position=bottom-center]{bottom:1rem;right:50%;left:auto;top:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=bottom-start]{bottom:1rem;left:1rem;right:auto;top:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=bottom-end]{bottom:1rem;right:1rem;left:auto;top:auto;align-items:flex-end;transform:none}.et-notification-stack[data-position=top-center]{top:1rem;right:50%;bottom:auto;left:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=top-start]{top:1rem;left:1rem;bottom:auto;right:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=top-end]{top:1rem;right:1rem;bottom:auto;left:auto;align-items:flex-end;transform:none}}\n"], dependencies: [{ kind: "component", type: NotificationComponent, selector: "et-notification" }, { kind: "directive", type: NotificationItemDirective, selector: "[etNotificationItem]", inputs: ["etNotificationItem"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11713
11716
|
}
|
|
11714
11717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationStackComponent, decorators: [{
|
|
11715
11718
|
type: Component,
|
|
@@ -11718,7 +11721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11718
11721
|
role: 'log',
|
|
11719
11722
|
'aria-live': 'polite',
|
|
11720
11723
|
'aria-relevant': 'additions',
|
|
11721
|
-
}, template: "@for (ref of stackDirective.displayRefs(); track ref.id) {\n <div [etNotificationItem]=\"ref\">\n <et-notification [ref]=\"ref\" />\n </div>\n}\n", styles: [".et-notification-stack{position:fixed;display:flex;flex-direction:column;align-items:flex-end;gap:var(--et-notification-stack-gap, .5rem);z-index:var(--et-notification-stack-z-index, 1000);pointer-events:none;bottom:1rem;right:1rem}.et-notification-stack[data-position=bottom-center]{bottom:1rem;right:50%;left:auto;top:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=bottom-start]{bottom:1rem;left:1rem;right:auto;top:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=bottom-end]{bottom:1rem;right:1rem;left:auto;top:auto;align-items:flex-end;transform:none}.et-notification-stack[data-position=top-center]{top:1rem;right:50%;bottom:auto;left:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=top-start]{top:1rem;left:1rem;bottom:auto;right:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=top-end]{top:1rem;right:1rem;bottom:auto;left:auto;align-items:flex-end;transform:none}\n"] }]
|
|
11724
|
+
}, template: "@for (ref of stackDirective.displayRefs(); track ref.id) {\n <div [etNotificationItem]=\"ref\">\n <et-notification [ref]=\"ref\" />\n </div>\n}\n", styles: ["@layer components{.et-notification-stack{position:fixed;display:flex;flex-direction:column;align-items:flex-end;gap:var(--et-notification-stack-gap, .5rem);z-index:var(--et-notification-stack-z-index, 1000);pointer-events:none;bottom:1rem;right:1rem}.et-notification-stack[data-position=bottom-center]{bottom:1rem;right:50%;left:auto;top:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=bottom-start]{bottom:1rem;left:1rem;right:auto;top:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=bottom-end]{bottom:1rem;right:1rem;left:auto;top:auto;align-items:flex-end;transform:none}.et-notification-stack[data-position=top-center]{top:1rem;right:50%;bottom:auto;left:auto;align-items:center;transform:translate(50%)}.et-notification-stack[data-position=top-start]{top:1rem;left:1rem;bottom:auto;right:auto;align-items:flex-start;transform:none}.et-notification-stack[data-position=top-end]{top:1rem;right:1rem;bottom:auto;left:auto;align-items:flex-end;transform:none}}\n"] }]
|
|
11722
11725
|
}] });
|
|
11723
11726
|
|
|
11724
11727
|
const [provideNotificationManagerInstance, injectNotificationManager] = createRootProvider(() => {
|
|
@@ -11828,6 +11831,7 @@ class OverlayDirective {
|
|
|
11828
11831
|
this.overlayManager = injectOverlayManager();
|
|
11829
11832
|
this.mode = input('non-modal', /* @ts-ignore */
|
|
11830
11833
|
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
11834
|
+
// eslint-disable-next-line ethlete/no-native-html-input-name -- deliberately sets the overlay's ARIA role
|
|
11831
11835
|
this.role = input(undefined, /* @ts-ignore */
|
|
11832
11836
|
...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
|
|
11833
11837
|
this.open = model(false, /* @ts-ignore */
|
|
@@ -11836,6 +11840,7 @@ class OverlayDirective {
|
|
|
11836
11840
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
11837
11841
|
this.disableClose = input(false, /* @ts-ignore */
|
|
11838
11842
|
...(ngDevMode ? [{ debugName: "disableClose" }] : /* istanbul ignore next */ []));
|
|
11843
|
+
// eslint-disable-next-line ethlete/no-native-html-input-name -- mirrors the native autofocus behaviour on open
|
|
11839
11844
|
this.autoFocus = input(undefined, /* @ts-ignore */
|
|
11840
11845
|
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
11841
11846
|
this.restoreFocus = input(true, /* @ts-ignore */
|
|
@@ -12721,6 +12726,7 @@ class OverlayTitleDirective {
|
|
|
12721
12726
|
this.elementRef = inject(ElementRef);
|
|
12722
12727
|
this.overlayManager = injectOverlayManager();
|
|
12723
12728
|
this.renderer = injectRenderer();
|
|
12729
|
+
// eslint-disable-next-line ethlete/no-native-html-input-name -- deliberately drives the host [attr.id] and aria-labelledby
|
|
12724
12730
|
this.id = input(`et-overlay-title-${uniqueId++}`, /* @ts-ignore */
|
|
12725
12731
|
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
12726
12732
|
}
|
|
@@ -13452,7 +13458,7 @@ class OverlayRouterOutletComponent {
|
|
|
13452
13458
|
</div>
|
|
13453
13459
|
}
|
|
13454
13460
|
</div>
|
|
13455
|
-
`, isInline: true, styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4);display:block;block-size:100%}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from
|
|
13461
|
+
`, isInline: true, styles: ["@layer components{.et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4);display:block;block-size:100%}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity .1s linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-20%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical{--_et-overlay-router-transform-from: translateY(20%);--_et-overlay-router-transform-to: translateY(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateY(-20%);--_et-overlay-router-transform-to: translateY(20%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing),opacity 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);block-size:100%;overflow:hidden}.et-overlay-router-outlet-page{grid-area:1 / 1 / 2 / 2;pointer-events:none;overflow:hidden auto;outline:none}.et-overlay-router-outlet-page:not(:empty){background-color:var( --et-overlay-router-outlet-page-background, var(--_et-overlay-router-outlet-page-background, transparent) )}.et-overlay-router-outlet-page>*{pointer-events:auto}.et-overlay-router-outlet-page.et-overlay-router-outlet-page--active:not(:empty){pointer-events:auto}.et-overlay-router-outlet-page>.et-overlay-main{block-size:100%}.et-overlay-router-outlet-disabled-page{position:relative}}\n"], dependencies: [{ kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverlayMainDirective, selector: "[etOverlayMain], et-overlay-main", inputs: ["etOverlayMain"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13456
13462
|
}
|
|
13457
13463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayRouterOutletComponent, decorators: [{
|
|
13458
13464
|
type: Component,
|
|
@@ -13505,7 +13511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13505
13511
|
'[class.et-overlay-router-outlet--disabled]': 'disabled()',
|
|
13506
13512
|
'[class.et-overlay-router-outlet--has-disabled-template]': '!!outletDisabledTemplate()',
|
|
13507
13513
|
'[class.et-overlay-router-outlet--has-shared-route-template]': '!!sharedRouteTemplate()',
|
|
13508
|
-
}, styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4);display:block;block-size:100%}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from
|
|
13514
|
+
}, styles: ["@layer components{.et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4);display:block;block-size:100%}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity .1s linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-20%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical{--_et-overlay-router-transform-from: translateY(20%);--_et-overlay-router-transform-to: translateY(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateY(-20%);--_et-overlay-router-transform-to: translateY(20%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing),opacity 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);block-size:100%;overflow:hidden}.et-overlay-router-outlet-page{grid-area:1 / 1 / 2 / 2;pointer-events:none;overflow:hidden auto;outline:none}.et-overlay-router-outlet-page:not(:empty){background-color:var( --et-overlay-router-outlet-page-background, var(--_et-overlay-router-outlet-page-background, transparent) )}.et-overlay-router-outlet-page>*{pointer-events:auto}.et-overlay-router-outlet-page.et-overlay-router-outlet-page--active:not(:empty){pointer-events:auto}.et-overlay-router-outlet-page>.et-overlay-main{block-size:100%}.et-overlay-router-outlet-disabled-page{position:relative}}\n"] }]
|
|
13509
13515
|
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sharedRouteTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN), { ...{ read: TemplateRef }, isSignal: true }] }], outletDisabledTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN), { ...{ read: TemplateRef }, isSignal: true }] }], pageWrappers: [{ type: i0.ViewChildren, args: ['pageWrapper', { isSignal: true }] }] } });
|
|
13510
13516
|
|
|
13511
13517
|
class OverlaySharedRouteTemplateOutletComponent {
|
|
@@ -14263,7 +14269,7 @@ class ScrollableComponent {
|
|
|
14263
14269
|
});
|
|
14264
14270
|
}
|
|
14265
14271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: true, isRequired: false, transformFunction: null }, maskVariant: { classPropertyName: "maskVariant", publicName: "maskVariant", isSignal: true, isRequired: false, transformFunction: null }, renderButtons: { classPropertyName: "renderButtons", publicName: "renderButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonPosition: { classPropertyName: "buttonPosition", publicName: "buttonPosition", isSignal: true, isRequired: false, transformFunction: null }, renderNavigation: { classPropertyName: "renderNavigation", publicName: "renderNavigation", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, cursorDragScroll: { classPropertyName: "cursorDragScroll", publicName: "cursorDragScroll", isSignal: true, isRequired: false, transformFunction: null }, darkenNonIntersectingItems: { classPropertyName: "darkenNonIntersectingItems", publicName: "darkenNonIntersectingItems", isSignal: true, isRequired: false, transformFunction: null }, stickyButtons: { classPropertyName: "stickyButtons", publicName: "stickyButtons", isSignal: true, isRequired: false, transformFunction: null }, showLoadingTemplate: { classPropertyName: "showLoadingTemplate", publicName: "showLoadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplatePosition: { classPropertyName: "loadingTemplatePosition", publicName: "loadingTemplatePosition", isSignal: true, isRequired: false, transformFunction: null }, scrollableRole: { classPropertyName: "scrollableRole", publicName: "scrollableRole", isSignal: true, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intersectionChange: "intersectionChange", scrollStateChange: "scrollStateChange" }, host: { properties: { "class.et-scrollable--can-animate": "canAnimate.state()", "class.et-scrollable--darken-non-intersecting-items": "darkenNonIntersectingItems()", "class.et-scrollable--sticky-buttons": "stickyButtons() && renderButtonsInside()", "attr.mask-variant": "maskVariant()" }, classAttribute: "et-scrollable" }, viewQueries: [{ propertyName: "scrollContainerEl", first: true, predicate: ["scrollable"], descendants: true, isSignal: true }, { propertyName: "scrollObserver", first: true, predicate: ScrollObserverDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ScrollableDirective, inputs: ["itemSize", "itemSize", "direction", "direction", "scrollMode", "scrollMode", "scrollOrigin", "scrollOrigin", "scrollMargin", "scrollMargin", "renderScrollbars", "renderScrollbars"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [class]=\"scrollableClass()\"\n class=\"et-scrollable-container\"\n etScrollObserver\n >\n <div class=\"et-scroll-observer-first-element\" etScrollObserverStart etScrollableIgnoreChild></div>\n\n @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <ng-content />\n\n @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <div class=\"et-scroll-observer-last-element\" etScrollObserverEnd etScrollableIgnoreChild></div>\n </div>\n\n @if (renderMasks()) {\n <et-scrollable-masks />\n }\n\n @if (renderButtonsInside()) {\n <et-scrollable-buttons />\n }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableDir.canScroll())) && scrollableDir.canScroll()) {\n <div\n [class.et-scrollable-footer--with-navigation]=\"renderNavigation()\"\n [class.et-scrollable-footer--with-buttons]=\"renderButtonsInFooter()\"\n class=\"et-scrollable-footer\"\n aria-hidden=\"true\"\n >\n @if (renderButtonsInFooter()) {\n <et-scrollable-buttons position=\"footer\" />\n }\n\n @if (renderNavigation()) {\n <et-scrollable-navigation />\n }\n\n @if (renderButtonsInFooter()) {\n <!-- Second buttons instance for end side in footer layout is handled by the buttons directive itself -->\n }\n </div>\n}\n\n@if (snap()) {\n <ng-container etScrollableSnap />\n}\n\n@if (cursorDragScroll()) {\n <ng-container etScrollableDrag />\n}\n\n@if (darkenNonIntersectingItems()) {\n <ng-container etScrollableDarken />\n}\n\n<ng-template #loadingTpl>\n @if (scrollableDir.loadingTemplate(); as tpl) {\n @for (\n _ of tpl.repeat();\n track index;\n let index = $index;\n let even = $even;\n let odd = $odd;\n let first = $first;\n let last = $last\n ) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n }\n }\n</ng-template>\n", styles: [":where(.et-scrollable){--mask-size: 25px;--_mask-color: var(--et-surface-background-solid, #121212);--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block;position:relative}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container{scrollbar-width:none}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container::-webkit-scrollbar{display:none}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-child(2){grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask{inline-size:var(--mask-size);block-size:100%}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--start{inset-block-start:0;inset-inline:0 0;background:linear-gradient(to right,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--end{inset-block-start:0;inset-inline:calc(100% - var(--mask-size)) 100%;background:linear-gradient(to left,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start{inset-block-start:calc(50% - 1.4rem);inset-inline:0 0;transform:translate(-10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end{inset-block-start:calc(50% - 1.4rem);inset-inline:calc(100% - 2.8rem) 0;transform:translate(10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element,:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-mask{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start{inset-block-start:0;inset-inline-start:0;background:linear-gradient(to bottom,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-mask--end{inset-block-end:0;inset-inline-start:0;background:linear-gradient(to top,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable .et-scrollable-container{display:grid;position:relative;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1 / 1;grid-column:1 / 1;pointer-events:none}.et-scrollable .et-scrollable-button{color:var(--et-surface-interaction-solid, currentColor)}.et-scrollable .et-scrollable-mask{position:absolute;opacity:0}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,opacity .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.et-scrollable.et-scrollable--sticky-buttons{--_sticky-margin: 10%}.et-scrollable.et-scrollable--sticky-buttons .et-scrollable-button{position:sticky}.et-scrollable.et-scrollable--sticky-buttons[direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer .et-scrollable-buttons{display:contents}.et-scrollable .et-scrollable-footer .et-scrollable-button{position:static;opacity:1;pointer-events:all;transform:none}.et-scrollable[mask-variant=border] .et-scrollable-mask{background:none}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask{inline-size:0;block-size:100%;border-inline-start:1px solid var(--et-surface-border-solid, #404040)}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--start{inset-inline:0}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--end{inset-inline:auto 0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask{block-size:0;inline-size:100%;border-block-start:1px solid var(--et-surface-border-solid, #404040)}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--start{inset-block-start:0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--end{inset-block:auto 0}\n"], dependencies: [{ kind: "directive", type: ScrollObserverDirective, selector: "[etScrollObserver]", inputs: ["enabled"], outputs: ["enabledChange"], exportAs: ["etScrollObserver"] }, { kind: "directive", type: ScrollObserverStartDirective, selector: "[etScrollObserverStart]" }, { kind: "directive", type: ScrollObserverEndDirective, selector: "[etScrollObserverEnd]" }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["enabled"] }, { kind: "component", type: ScrollableMasksDirective, selector: "et-scrollable-masks, [et-scrollable-masks]" }, { kind: "component", type: ScrollableButtonsDirective, selector: "et-scrollable-buttons, [et-scrollable-buttons]", inputs: ["position"] }, { kind: "component", type: ScrollableNavigationDirective, selector: "et-scrollable-navigation, [et-scrollable-navigation]" }, { kind: "directive", type: ScrollableSnapDirective, selector: "[etScrollableSnap]", inputs: ["enabled", "snapOrigin"] }, { kind: "directive", type: ScrollableDragDirective, selector: "[etScrollableDrag]", inputs: ["enabled"] }, { kind: "directive", type: ScrollableDarkenDirective, selector: "[etScrollableDarken]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
14272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: true, isRequired: false, transformFunction: null }, maskVariant: { classPropertyName: "maskVariant", publicName: "maskVariant", isSignal: true, isRequired: false, transformFunction: null }, renderButtons: { classPropertyName: "renderButtons", publicName: "renderButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonPosition: { classPropertyName: "buttonPosition", publicName: "buttonPosition", isSignal: true, isRequired: false, transformFunction: null }, renderNavigation: { classPropertyName: "renderNavigation", publicName: "renderNavigation", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, cursorDragScroll: { classPropertyName: "cursorDragScroll", publicName: "cursorDragScroll", isSignal: true, isRequired: false, transformFunction: null }, darkenNonIntersectingItems: { classPropertyName: "darkenNonIntersectingItems", publicName: "darkenNonIntersectingItems", isSignal: true, isRequired: false, transformFunction: null }, stickyButtons: { classPropertyName: "stickyButtons", publicName: "stickyButtons", isSignal: true, isRequired: false, transformFunction: null }, showLoadingTemplate: { classPropertyName: "showLoadingTemplate", publicName: "showLoadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplatePosition: { classPropertyName: "loadingTemplatePosition", publicName: "loadingTemplatePosition", isSignal: true, isRequired: false, transformFunction: null }, scrollableRole: { classPropertyName: "scrollableRole", publicName: "scrollableRole", isSignal: true, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intersectionChange: "intersectionChange", scrollStateChange: "scrollStateChange" }, host: { properties: { "class.et-scrollable--can-animate": "canAnimate.state()", "class.et-scrollable--darken-non-intersecting-items": "darkenNonIntersectingItems()", "class.et-scrollable--sticky-buttons": "stickyButtons() && renderButtonsInside()", "attr.mask-variant": "maskVariant()" }, classAttribute: "et-scrollable" }, viewQueries: [{ propertyName: "scrollContainerEl", first: true, predicate: ["scrollable"], descendants: true, isSignal: true }, { propertyName: "scrollObserver", first: true, predicate: ScrollObserverDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ScrollableDirective, inputs: ["itemSize", "itemSize", "direction", "direction", "scrollMode", "scrollMode", "scrollOrigin", "scrollOrigin", "scrollMargin", "scrollMargin", "renderScrollbars", "renderScrollbars"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [class]=\"scrollableClass()\"\n class=\"et-scrollable-container\"\n etScrollObserver\n >\n <div class=\"et-scroll-observer-first-element\" etScrollObserverStart etScrollableIgnoreChild></div>\n\n @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <ng-content />\n\n @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <div class=\"et-scroll-observer-last-element\" etScrollObserverEnd etScrollableIgnoreChild></div>\n </div>\n\n @if (renderMasks()) {\n <et-scrollable-masks />\n }\n\n @if (renderButtonsInside()) {\n <et-scrollable-buttons />\n }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableDir.canScroll())) && scrollableDir.canScroll()) {\n <div\n [class.et-scrollable-footer--with-navigation]=\"renderNavigation()\"\n [class.et-scrollable-footer--with-buttons]=\"renderButtonsInFooter()\"\n class=\"et-scrollable-footer\"\n aria-hidden=\"true\"\n >\n @if (renderButtonsInFooter()) {\n <et-scrollable-buttons position=\"footer\" />\n }\n\n @if (renderNavigation()) {\n <et-scrollable-navigation />\n }\n\n @if (renderButtonsInFooter()) {\n <!-- Second buttons instance for end side in footer layout is handled by the buttons directive itself -->\n }\n </div>\n}\n\n@if (snap()) {\n <ng-container etScrollableSnap />\n}\n\n@if (cursorDragScroll()) {\n <ng-container etScrollableDrag />\n}\n\n@if (darkenNonIntersectingItems()) {\n <ng-container etScrollableDarken />\n}\n\n<ng-template #loadingTpl>\n @if (scrollableDir.loadingTemplate(); as tpl) {\n @for (\n _ of tpl.repeat();\n track index;\n let index = $index;\n let even = $even;\n let odd = $odd;\n let first = $first;\n let last = $last\n ) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n }\n }\n</ng-template>\n", styles: ["@layer components{:where(.et-scrollable){--mask-size: 25px;--_mask-color: var(--et-surface-background-solid, #121212);--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block;position:relative}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container{scrollbar-width:none}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container::-webkit-scrollbar{display:none}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-child(2){grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask{inline-size:var(--mask-size);block-size:100%}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--start{inset-block-start:0;inset-inline:0 0;background:linear-gradient(to right,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--end{inset-block-start:0;inset-inline:calc(100% - var(--mask-size)) 100%;background:linear-gradient(to left,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start{inset-block-start:calc(50% - 1.4rem);inset-inline:0 0;transform:translate(-10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end{inset-block-start:calc(50% - 1.4rem);inset-inline:calc(100% - 2.8rem) 0;transform:translate(10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element,:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-mask{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start{inset-block-start:0;inset-inline-start:0;background:linear-gradient(to bottom,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-mask--end{inset-block-end:0;inset-inline-start:0;background:linear-gradient(to top,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable .et-scrollable-container{display:grid;position:relative;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1 / 1;grid-column:1 / 1;pointer-events:none}.et-scrollable .et-scrollable-button{color:var(--et-surface-interaction-solid, currentColor)}.et-scrollable .et-scrollable-mask{position:absolute;opacity:0}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,opacity .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.et-scrollable.et-scrollable--sticky-buttons{--_sticky-margin: 10%}.et-scrollable.et-scrollable--sticky-buttons .et-scrollable-button{position:sticky}.et-scrollable.et-scrollable--sticky-buttons[direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer .et-scrollable-buttons{display:contents}.et-scrollable .et-scrollable-footer .et-scrollable-button{position:static;opacity:1;pointer-events:all;transform:none}.et-scrollable[mask-variant=border] .et-scrollable-mask{background:none}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask{inline-size:0;block-size:100%;border-inline-start:1px solid var(--et-surface-border-solid, #404040)}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--start{inset-inline:0}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--end{inset-inline:auto 0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask{block-size:0;inline-size:100%;border-block-start:1px solid var(--et-surface-border-solid, #404040)}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--start{inset-block-start:0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--end{inset-block:auto 0}}\n"], dependencies: [{ kind: "directive", type: ScrollObserverDirective, selector: "[etScrollObserver]", inputs: ["enabled"], outputs: ["enabledChange"], exportAs: ["etScrollObserver"] }, { kind: "directive", type: ScrollObserverStartDirective, selector: "[etScrollObserverStart]" }, { kind: "directive", type: ScrollObserverEndDirective, selector: "[etScrollObserverEnd]" }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["enabled"] }, { kind: "component", type: ScrollableMasksDirective, selector: "et-scrollable-masks, [et-scrollable-masks]" }, { kind: "component", type: ScrollableButtonsDirective, selector: "et-scrollable-buttons, [et-scrollable-buttons]", inputs: ["position"] }, { kind: "component", type: ScrollableNavigationDirective, selector: "et-scrollable-navigation, [et-scrollable-navigation]" }, { kind: "directive", type: ScrollableSnapDirective, selector: "[etScrollableSnap]", inputs: ["enabled", "snapOrigin"] }, { kind: "directive", type: ScrollableDragDirective, selector: "[etScrollableDrag]", inputs: ["enabled"] }, { kind: "directive", type: ScrollableDarkenDirective, selector: "[etScrollableDarken]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
14267
14273
|
}
|
|
14268
14274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollableComponent, decorators: [{
|
|
14269
14275
|
type: Component,
|
|
@@ -14294,7 +14300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14294
14300
|
'[class.et-scrollable--darken-non-intersecting-items]': 'darkenNonIntersectingItems()',
|
|
14295
14301
|
'[class.et-scrollable--sticky-buttons]': 'stickyButtons() && renderButtonsInside()',
|
|
14296
14302
|
'[attr.mask-variant]': 'maskVariant()',
|
|
14297
|
-
}, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [class]=\"scrollableClass()\"\n class=\"et-scrollable-container\"\n etScrollObserver\n >\n <div class=\"et-scroll-observer-first-element\" etScrollObserverStart etScrollableIgnoreChild></div>\n\n @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <ng-content />\n\n @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <div class=\"et-scroll-observer-last-element\" etScrollObserverEnd etScrollableIgnoreChild></div>\n </div>\n\n @if (renderMasks()) {\n <et-scrollable-masks />\n }\n\n @if (renderButtonsInside()) {\n <et-scrollable-buttons />\n }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableDir.canScroll())) && scrollableDir.canScroll()) {\n <div\n [class.et-scrollable-footer--with-navigation]=\"renderNavigation()\"\n [class.et-scrollable-footer--with-buttons]=\"renderButtonsInFooter()\"\n class=\"et-scrollable-footer\"\n aria-hidden=\"true\"\n >\n @if (renderButtonsInFooter()) {\n <et-scrollable-buttons position=\"footer\" />\n }\n\n @if (renderNavigation()) {\n <et-scrollable-navigation />\n }\n\n @if (renderButtonsInFooter()) {\n <!-- Second buttons instance for end side in footer layout is handled by the buttons directive itself -->\n }\n </div>\n}\n\n@if (snap()) {\n <ng-container etScrollableSnap />\n}\n\n@if (cursorDragScroll()) {\n <ng-container etScrollableDrag />\n}\n\n@if (darkenNonIntersectingItems()) {\n <ng-container etScrollableDarken />\n}\n\n<ng-template #loadingTpl>\n @if (scrollableDir.loadingTemplate(); as tpl) {\n @for (\n _ of tpl.repeat();\n track index;\n let index = $index;\n let even = $even;\n let odd = $odd;\n let first = $first;\n let last = $last\n ) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n }\n }\n</ng-template>\n", styles: [":where(.et-scrollable){--mask-size: 25px;--_mask-color: var(--et-surface-background-solid, #121212);--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block;position:relative}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container{scrollbar-width:none}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container::-webkit-scrollbar{display:none}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-child(2){grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask{inline-size:var(--mask-size);block-size:100%}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--start{inset-block-start:0;inset-inline:0 0;background:linear-gradient(to right,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--end{inset-block-start:0;inset-inline:calc(100% - var(--mask-size)) 100%;background:linear-gradient(to left,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start{inset-block-start:calc(50% - 1.4rem);inset-inline:0 0;transform:translate(-10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end{inset-block-start:calc(50% - 1.4rem);inset-inline:calc(100% - 2.8rem) 0;transform:translate(10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element,:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-mask{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start{inset-block-start:0;inset-inline-start:0;background:linear-gradient(to bottom,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-mask--end{inset-block-end:0;inset-inline-start:0;background:linear-gradient(to top,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable .et-scrollable-container{display:grid;position:relative;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1 / 1;grid-column:1 / 1;pointer-events:none}.et-scrollable .et-scrollable-button{color:var(--et-surface-interaction-solid, currentColor)}.et-scrollable .et-scrollable-mask{position:absolute;opacity:0}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,opacity .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.et-scrollable.et-scrollable--sticky-buttons{--_sticky-margin: 10%}.et-scrollable.et-scrollable--sticky-buttons .et-scrollable-button{position:sticky}.et-scrollable.et-scrollable--sticky-buttons[direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer .et-scrollable-buttons{display:contents}.et-scrollable .et-scrollable-footer .et-scrollable-button{position:static;opacity:1;pointer-events:all;transform:none}.et-scrollable[mask-variant=border] .et-scrollable-mask{background:none}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask{inline-size:0;block-size:100%;border-inline-start:1px solid var(--et-surface-border-solid, #404040)}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--start{inset-inline:0}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--end{inset-inline:auto 0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask{block-size:0;inline-size:100%;border-block-start:1px solid var(--et-surface-border-solid, #404040)}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--start{inset-block-start:0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--end{inset-block:auto 0}\n"] }]
|
|
14303
|
+
}, template: "<div class=\"et-scrollable-wrapper\">\n <div\n #scrollable\n [attr.role]=\"scrollableRole() ?? undefined\"\n [class]=\"scrollableClass()\"\n class=\"et-scrollable-container\"\n etScrollObserver\n >\n <div class=\"et-scroll-observer-first-element\" etScrollObserverStart etScrollableIgnoreChild></div>\n\n @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <ng-content />\n\n @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n }\n\n <div class=\"et-scroll-observer-last-element\" etScrollObserverEnd etScrollableIgnoreChild></div>\n </div>\n\n @if (renderMasks()) {\n <et-scrollable-masks />\n }\n\n @if (renderButtonsInside()) {\n <et-scrollable-buttons />\n }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableDir.canScroll())) && scrollableDir.canScroll()) {\n <div\n [class.et-scrollable-footer--with-navigation]=\"renderNavigation()\"\n [class.et-scrollable-footer--with-buttons]=\"renderButtonsInFooter()\"\n class=\"et-scrollable-footer\"\n aria-hidden=\"true\"\n >\n @if (renderButtonsInFooter()) {\n <et-scrollable-buttons position=\"footer\" />\n }\n\n @if (renderNavigation()) {\n <et-scrollable-navigation />\n }\n\n @if (renderButtonsInFooter()) {\n <!-- Second buttons instance for end side in footer layout is handled by the buttons directive itself -->\n }\n </div>\n}\n\n@if (snap()) {\n <ng-container etScrollableSnap />\n}\n\n@if (cursorDragScroll()) {\n <ng-container etScrollableDrag />\n}\n\n@if (darkenNonIntersectingItems()) {\n <ng-container etScrollableDarken />\n}\n\n<ng-template #loadingTpl>\n @if (scrollableDir.loadingTemplate(); as tpl) {\n @for (\n _ of tpl.repeat();\n track index;\n let index = $index;\n let even = $even;\n let odd = $odd;\n let first = $first;\n let last = $last\n ) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n }\n }\n</ng-template>\n", styles: ["@layer components{:where(.et-scrollable){--mask-size: 25px;--_mask-color: var(--et-surface-background-solid, #121212);--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block;position:relative}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container{scrollbar-width:none}:is(.et-scrollable[render-scrollbars=false],.et-scrollable:not([render-scrollbars])) .et-scrollable-container::-webkit-scrollbar{display:none}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-child(2){grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask{inline-size:var(--mask-size);block-size:100%}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--start{inset-block-start:0;inset-inline:0 0;background:linear-gradient(to right,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-mask--end{inset-block-start:0;inset-inline:calc(100% - var(--mask-size)) 100%;background:linear-gradient(to left,var(--_mask-color) 0,transparent 100%)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start{inset-block-start:calc(50% - 1.4rem);inset-inline:0 0;transform:translate(-10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end{inset-block-start:calc(50% - 1.4rem);inset-inline:calc(100% - 2.8rem) 0;transform:translate(10px)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element,:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1 / 1;grid-row:1 / 1}:is(.et-scrollable[direction=horizontal],.et-scrollable:not([direction])) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count) / var(--item-count);grid-row:1 / 1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scrollable-mask{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start{inset-block-start:0;inset-inline-start:0;background:linear-gradient(to bottom,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-mask--end{inset-block-end:0;inset-inline-start:0;background:linear-gradient(to top,var(--_mask-color) 0,transparent 100%)}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:calc(50% - 1.4rem);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count) / var(--item-count);grid-column:1 / 1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable .et-scrollable-container{display:grid;position:relative;grid-row:1 / 1;grid-column:1 / 1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1 / 1;grid-column:1 / 1;pointer-events:none}.et-scrollable .et-scrollable-button{color:var(--et-surface-interaction-solid, currentColor)}.et-scrollable .et-scrollable-mask{position:absolute;opacity:0}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,opacity .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.et-scrollable.et-scrollable--sticky-buttons{--_sticky-margin: 10%}.et-scrollable.et-scrollable--sticky-buttons .et-scrollable-button{position:sticky}.et-scrollable.et-scrollable--sticky-buttons[direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable.et-scrollable--sticky-buttons[direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer .et-scrollable-buttons{display:contents}.et-scrollable .et-scrollable-footer .et-scrollable-button{position:static;opacity:1;pointer-events:all;transform:none}.et-scrollable[mask-variant=border] .et-scrollable-mask{background:none}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask{inline-size:0;block-size:100%;border-inline-start:1px solid var(--et-surface-border-solid, #404040)}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--start{inset-inline:0}:is(.et-scrollable[mask-variant=border][direction=horizontal],.et-scrollable[mask-variant=border]:not([direction])) .et-scrollable-mask--end{inset-inline:auto 0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask{block-size:0;inline-size:100%;border-block-start:1px solid var(--et-surface-border-solid, #404040)}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--start{inset-block-start:0}.et-scrollable[mask-variant=border][direction=vertical] .et-scrollable-mask--end{inset-block:auto 0}}\n"] }]
|
|
14298
14304
|
}], ctorParameters: () => [], propDecorators: { renderMasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMasks", required: false }] }], maskVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskVariant", required: false }] }], renderButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderButtons", required: false }] }], buttonPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonPosition", required: false }] }], renderNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderNavigation", required: false }] }], snap: [{ type: i0.Input, args: [{ isSignal: true, alias: "snap", required: false }] }], cursorDragScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorDragScroll", required: false }] }], darkenNonIntersectingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkenNonIntersectingItems", required: false }] }], stickyButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyButtons", required: false }] }], showLoadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingTemplate", required: false }] }], loadingTemplatePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplatePosition", required: false }] }], scrollableRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollableRole", required: false }] }], scrollableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollableClass", required: false }] }], intersectionChange: [{ type: i0.Output, args: ["intersectionChange"] }], scrollStateChange: [{ type: i0.Output, args: ["scrollStateChange"] }], scrollContainerEl: [{ type: i0.ViewChild, args: ['scrollable', { isSignal: true }] }], scrollObserver: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ScrollObserverDirective), { isSignal: true }] }] } });
|
|
14299
14305
|
|
|
14300
14306
|
const SCROLLABLE_IMPORTS = [
|
|
@@ -15568,7 +15574,7 @@ class PipPlayerComponent {
|
|
|
15568
15574
|
<img [src]="url" class="et-pip-player__preview-thumb" alt="" aria-hidden="true" />
|
|
15569
15575
|
</div>
|
|
15570
15576
|
}
|
|
15571
|
-
`, isInline: true, styles: ["et-pip-player{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}.et-pip-player__thumb-wrapper{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .25s ease}.et-pip-player__thumb-wrapper--hidden{opacity:0}.et-pip-player__preview-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
15577
|
+
`, isInline: true, styles: ["@layer components{et-pip-player{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}.et-pip-player__thumb-wrapper{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .25s ease}.et-pip-player__thumb-wrapper--hidden{opacity:0}.et-pip-player__preview-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
15572
15578
|
}
|
|
15573
15579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PipPlayerComponent, decorators: [{
|
|
15574
15580
|
type: Component,
|
|
@@ -15592,7 +15598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15592
15598
|
'[attr.data-pip-player-id]': 'resolvedEntry().playerId',
|
|
15593
15599
|
'[attr.inert]': 'pipCell ? pipCell.cell().playerInertAttr : null',
|
|
15594
15600
|
'[style.--et-pip-player-ratio]': 'resolvedEntry()?.aspectRatio ?? (16 / 9)',
|
|
15595
|
-
}, styles: ["et-pip-player{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}.et-pip-player__thumb-wrapper{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .25s ease}.et-pip-player__thumb-wrapper--hidden{opacity:0}.et-pip-player__preview-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}\n"] }]
|
|
15601
|
+
}, styles: ["@layer components{et-pip-player{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}.et-pip-player__thumb-wrapper{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .25s ease}.et-pip-player__thumb-wrapper--hidden{opacity:0}.et-pip-player__preview-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}}\n"] }]
|
|
15596
15602
|
}], ctorParameters: () => [], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: false }] }], showThumbnail: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnail", required: false }] }] } });
|
|
15597
15603
|
|
|
15598
15604
|
class StreamPipChromeComponent {
|
|
@@ -15636,7 +15642,7 @@ class StreamPipChromeComponent {
|
|
|
15636
15642
|
return chrome.state.windowAspectRatio;
|
|
15637
15643
|
},
|
|
15638
15644
|
},
|
|
15639
|
-
], viewQueries: [{ propertyName: "stageRef", first: true, predicate: PipStageDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "pipWindowRef", first: true, predicate: PipWindowComponent, descendants: true, isSignal: true }, { propertyName: "gridBtnRef", first: true, predicate: PipGridToggleDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<et-pip-window>\n <ng-template etPipTitleBar>\n @if (state.showBackButton()) {\n <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n <i etIcon=\"et-arrow-out-up-right\"></i>\n </button>\n }\n <span class=\"et-pip-window__title-bar-spacer\"></span>\n @if (state.hasMultiplePips()) {\n <button\n [color]=\"controlsColor()\"\n [pressed]=\"state.multiView()\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipGridToggle\n >\n @if (state.multiView()) {\n <i etIcon=\"et-focus-frame\"></i>\n } @else {\n <i etIcon=\"et-grid-2x2\"></i>\n }\n </button>\n }\n <button\n [color]=\"controlsColor()\"\n [kind]=\"CLOSE_KIND\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipClose\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </ng-template>\n\n <div etPipStage>\n @for (c of state.cells(); track c.playerId) {\n <div [etPipCell]=\"c\">\n <et-pip-player />\n </div>\n }\n </div>\n</et-pip-window>\n", styles: ["et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after,et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player{display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}et-pip-player iframe{width:100%!important;height:100%!important;display:block}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "component", type: PipWindowComponent, selector: "et-pip-window" }, { kind: "component", type: PipPlayerComponent, selector: "et-pip-player", inputs: ["entry", "showThumbnail"] }, { kind: "directive", type: PipBackDirective, selector: "[etPipBack]", inputs: ["entry"] }, { kind: "directive", type: PipGridToggleDirective, selector: "[etPipGridToggle]" }, { kind: "directive", type: PipStageDirective, selector: "[etPipStage]" }, { kind: "directive", type: PipTitleBarTemplateDirective, selector: "ng-template[etPipTitleBar]" }, { kind: "directive", type: PipCellDirective, selector: "[etPipCell]", inputs: ["etPipCell"] }, { kind: "directive", type: PipCloseDirective, selector: "[etPipClose]", inputs: ["entry"] }, { kind: "component", type: WindowControlButtonComponent, selector: "[et-window-control-button]", inputs: ["size", "kind"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
15645
|
+
], viewQueries: [{ propertyName: "stageRef", first: true, predicate: PipStageDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "pipWindowRef", first: true, predicate: PipWindowComponent, descendants: true, isSignal: true }, { propertyName: "gridBtnRef", first: true, predicate: PipGridToggleDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<et-pip-window>\n <ng-template etPipTitleBar>\n @if (state.showBackButton()) {\n <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n <i etIcon=\"et-arrow-out-up-right\"></i>\n </button>\n }\n <span class=\"et-pip-window__title-bar-spacer\"></span>\n @if (state.hasMultiplePips()) {\n <button\n [color]=\"controlsColor()\"\n [pressed]=\"state.multiView()\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipGridToggle\n >\n @if (state.multiView()) {\n <i etIcon=\"et-focus-frame\"></i>\n } @else {\n <i etIcon=\"et-grid-2x2\"></i>\n }\n </button>\n }\n <button\n [color]=\"controlsColor()\"\n [kind]=\"CLOSE_KIND\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipClose\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </ng-template>\n\n <div etPipStage>\n @for (c of state.cells(); track c.playerId) {\n <div [etPipCell]=\"c\">\n <et-pip-player />\n </div>\n }\n </div>\n</et-pip-window>\n", styles: ["@layer components{et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after,et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player{display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "component", type: PipWindowComponent, selector: "et-pip-window" }, { kind: "component", type: PipPlayerComponent, selector: "et-pip-player", inputs: ["entry", "showThumbnail"] }, { kind: "directive", type: PipBackDirective, selector: "[etPipBack]", inputs: ["entry"] }, { kind: "directive", type: PipGridToggleDirective, selector: "[etPipGridToggle]" }, { kind: "directive", type: PipStageDirective, selector: "[etPipStage]" }, { kind: "directive", type: PipTitleBarTemplateDirective, selector: "ng-template[etPipTitleBar]" }, { kind: "directive", type: PipCellDirective, selector: "[etPipCell]", inputs: ["etPipCell"] }, { kind: "directive", type: PipCloseDirective, selector: "[etPipClose]", inputs: ["entry"] }, { kind: "component", type: WindowControlButtonComponent, selector: "[et-window-control-button]", inputs: ["size", "kind"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
15640
15646
|
}
|
|
15641
15647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StreamPipChromeComponent, decorators: [{
|
|
15642
15648
|
type: Component,
|
|
@@ -15664,7 +15670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15664
15670
|
], hostDirectives: [ProvideSurfaceDirective], host: {
|
|
15665
15671
|
class: 'et-stream-pip-chrome',
|
|
15666
15672
|
'[class.et-stream-pip-chrome--grid]': 'state.multiView()',
|
|
15667
|
-
}, template: "<et-pip-window>\n <ng-template etPipTitleBar>\n @if (state.showBackButton()) {\n <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n <i etIcon=\"et-arrow-out-up-right\"></i>\n </button>\n }\n <span class=\"et-pip-window__title-bar-spacer\"></span>\n @if (state.hasMultiplePips()) {\n <button\n [color]=\"controlsColor()\"\n [pressed]=\"state.multiView()\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipGridToggle\n >\n @if (state.multiView()) {\n <i etIcon=\"et-focus-frame\"></i>\n } @else {\n <i etIcon=\"et-grid-2x2\"></i>\n }\n </button>\n }\n <button\n [color]=\"controlsColor()\"\n [kind]=\"CLOSE_KIND\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipClose\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </ng-template>\n\n <div etPipStage>\n @for (c of state.cells(); track c.playerId) {\n <div [etPipCell]=\"c\">\n <et-pip-player />\n </div>\n }\n </div>\n</et-pip-window>\n", styles: ["et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after,et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player{display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}et-pip-player iframe{width:100%!important;height:100%!important;display:block}\n"] }]
|
|
15673
|
+
}, template: "<et-pip-window>\n <ng-template etPipTitleBar>\n @if (state.showBackButton()) {\n <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n <i etIcon=\"et-arrow-out-up-right\"></i>\n </button>\n }\n <span class=\"et-pip-window__title-bar-spacer\"></span>\n @if (state.hasMultiplePips()) {\n <button\n [color]=\"controlsColor()\"\n [pressed]=\"state.multiView()\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipGridToggle\n >\n @if (state.multiView()) {\n <i etIcon=\"et-focus-frame\"></i>\n } @else {\n <i etIcon=\"et-grid-2x2\"></i>\n }\n </button>\n }\n <button\n [color]=\"controlsColor()\"\n [kind]=\"CLOSE_KIND\"\n [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n et-window-control-button\n etPipClose\n >\n <i etIcon=\"et-times\"></i>\n </button>\n </ng-template>\n\n <div etPipStage>\n @for (c of state.cells(); track c.playerId) {\n <div [etPipCell]=\"c\">\n <et-pip-player />\n </div>\n }\n </div>\n</et-pip-window>\n", styles: ["@layer components{et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after,et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player{display:flex;align-items:center;justify-content:center;width:100%;height:100%;container-type:size}et-pip-player>:not(.et-pip-player__thumb-wrapper){flex:none;display:block!important;width:min(100cqw,100cqh * var(--et-pip-player-ratio, calc(16 / 9)))!important;height:min(100cqh,100cqw / var(--et-pip-player-ratio, calc(16 / 9)))!important}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"] }]
|
|
15668
15674
|
}], ctorParameters: () => [], propDecorators: { stageRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipStageDirective), { ...{ read: ElementRef }, isSignal: true }] }], pipWindowRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipWindowComponent), { isSignal: true }] }], gridBtnRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipGridToggleDirective), { ...{
|
|
15669
15675
|
read: ElementRef,
|
|
15670
15676
|
}, isSignal: true }] }] } });
|
|
@@ -16193,7 +16199,7 @@ class PipWindowComponent {
|
|
|
16193
16199
|
this.RESIZE_EDGES = ['s', 'e', 'w', 'se', 'sw'];
|
|
16194
16200
|
}
|
|
16195
16201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PipWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PipWindowComponent, isStandalone: true, selector: "et-pip-window", host: { properties: { "class.et-pip-window--title-bar-forced": "forcedTitleBar()", "class.et-pip-window--dragging": "posState.isDragging()", "class.et-pip-window--collapsed": "posState.isCollapsed()", "class.et-pip-window--resizing": "posState.isResizing()", "class.et-pip-window--positioned": "posState.positionInitialized()", "style.translate": "posState.position()", "style.width.px": "sizeState.w()", "style.height.px": "sizeState.h()", "style.--et-pip-title-bar-h.px": "titleBarH()", "style.--et-pip-content-ratio": "!posState.positionInitialized() ? params.aspectRatio() : null" }, classAttribute: "et-pip-window" }, queries: [{ propertyName: "titleBarTemplate", first: true, predicate: PipTitleBarTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizeHandles", first: true, predicate: ResizeHandlesComponent, descendants: true, isSignal: true }, { propertyName: "titleBar", first: true, predicate: PipTitleBarDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: PipWindowParamsDirective }], ngImport: i0, template: "<et-resize-handles [edges]=\"RESIZE_EDGES\" [disabled]=\"posState.isCollapsed() || posState.isDragging()\" />\n\n@if (posState.isCollapsed()) {\n <div [dragHandle]=\"dragHandle()\" etPipCollapseOverlay></div>\n}\n\n<div [dragDisabled]=\"posState.isResizing()\" etPipTitleBar>\n <ng-container [ngTemplateOutlet]=\"titleBarTemplate().template\" />\n</div>\n\n<div class=\"et-pip-window__content\">\n <ng-content />\n</div>\n", styles: ["@property --et-pip-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-pip-backdrop-blur{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-pip-title-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}et-pip-window{position:fixed;display:flex;flex-direction:column;touch-action:none;color:var(--et-surface-color-solid, inherit);--et-resize-handles-side-top: var(--et-pip-title-bar-h)}et-pip-window:after{content:\"\";display:block;position:absolute;inset:0;background:var(--et-pip-bg, color-mix(in srgb, var(--et-surface-background-solid, rgb(0 0 0)) 60%, transparent));-webkit-backdrop-filter:blur(var(--et-pip-backdrop-blur));backdrop-filter:blur(var(--et-pip-backdrop-blur));z-index:-1;transform:translateY(var(--et-pip-title-bar-h));transition:transform .2s ease;pointer-events:none;border-radius:var(--et-pip-border-radius)}et-pip-window.et-pip-window--dragging .et-pip-window__title-bar{cursor:grabbing}.et-pip-window__title-bar{height:var(--et-pip-title-bar-height);display:flex;align-items:center;gap:4px;padding:0 6px;transform:translateY(100%);transition:transform .2s ease,opacity .2s ease;pointer-events:none;opacity:0;cursor:grab;border-radius:var(--et-pip-border-radius) var(--et-pip-border-radius) 0 0}.et-pip-window__title-bar-spacer{flex:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)) .et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;opacity:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)):after{transform:translateY(0)}@media(hover:none){.et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;animation:etPipWindowTitleBarSlideIn .5s ease;opacity:1}.et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}}@keyframes etPipWindowTitleBarSlideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.et-pip-window__content{flex:1;min-height:0;position:relative;overflow:hidden;aspect-ratio:var(--et-pip-content-ratio, calc(16 / 9));border-radius:var(--et-pip-border-radius);transition:border-radius .2s ease}et-pip-window:hover .et-pip-window__content,et-pip-window.et-pip-window--dragging .et-pip-window__content,et-pip-window.et-pip-window--collapsed .et-pip-window__content,et-pip-window.et-pip-window--title-bar-forced .et-pip-window__content,et-pip-window:has(.et-pip-window__title-bar :focus-visible) .et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}.et-pip-window__collapse-overlay{position:absolute;inset:0;z-index:4;cursor:grab}.et-pip-interacting iframe,.et-pip-interacting [contenteditable]{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}et-pip-window.et-pip-window--positioned{inset:0 auto auto 0!important}et-pip-window.et-pip-window--mode-transitioning{transition:width .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1)}et-pip-window .et-resize-handle:before{content:\"\";position:absolute;background:color-mix(in srgb,var(--et-surface-color-solid, rgb(255 255 255)) 65%,transparent);border-radius:3px;opacity:0;transition:opacity .15s 0s;pointer-events:none}et-pip-window .et-resize-handle:hover:before{opacity:1;transition:opacity .15s .4s}et-pip-window .et-resize-handle--s:before{height:3px;left:10px;right:10px;bottom:1px}et-pip-window .et-resize-handle--e:before{width:3px;top:10px;bottom:10px;right:1px}et-pip-window .et-resize-handle--w:before{width:3px;top:10px;bottom:10px;left:1px}et-pip-window .et-resize-handle--se:before{width:8px;height:8px;bottom:2px;right:2px;border-radius:1px 1px 3px}et-pip-window .et-resize-handle--sw:before{width:8px;height:8px;bottom:2px;left:2px;border-radius:1px 1px 1px 3px}et-pip-window et-resize-handles[data-active-edge=s] .et-resize-handle--s:before,et-pip-window et-resize-handles[data-active-edge=e] .et-resize-handle--e:before,et-pip-window et-resize-handles[data-active-edge=w] .et-resize-handle--w:before,et-pip-window et-resize-handles[data-active-edge=se] .et-resize-handle--se:before,et-pip-window et-resize-handles[data-active-edge=sw] .et-resize-handle--sw:before{opacity:1;transition:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded"] }, { kind: "directive", type: PipTitleBarDirective, selector: "[etPipTitleBar]" }, { kind: "directive", type: PipCollapseOverlayDirective, selector: "[etPipCollapseOverlay]", inputs: ["dragHandle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
16202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PipWindowComponent, isStandalone: true, selector: "et-pip-window", host: { properties: { "class.et-pip-window--title-bar-forced": "forcedTitleBar()", "class.et-pip-window--dragging": "posState.isDragging()", "class.et-pip-window--collapsed": "posState.isCollapsed()", "class.et-pip-window--resizing": "posState.isResizing()", "class.et-pip-window--positioned": "posState.positionInitialized()", "style.translate": "posState.position()", "style.width.px": "sizeState.w()", "style.height.px": "sizeState.h()", "style.--et-pip-title-bar-h.px": "titleBarH()", "style.--et-pip-content-ratio": "!posState.positionInitialized() ? params.aspectRatio() : null" }, classAttribute: "et-pip-window" }, queries: [{ propertyName: "titleBarTemplate", first: true, predicate: PipTitleBarTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizeHandles", first: true, predicate: ResizeHandlesComponent, descendants: true, isSignal: true }, { propertyName: "titleBar", first: true, predicate: PipTitleBarDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: PipWindowParamsDirective }], ngImport: i0, template: "<et-resize-handles [edges]=\"RESIZE_EDGES\" [disabled]=\"posState.isCollapsed() || posState.isDragging()\" />\n\n@if (posState.isCollapsed()) {\n <div [dragHandle]=\"dragHandle()\" etPipCollapseOverlay></div>\n}\n\n<div [dragDisabled]=\"posState.isResizing()\" etPipTitleBar>\n <ng-container [ngTemplateOutlet]=\"titleBarTemplate().template\" />\n</div>\n\n<div class=\"et-pip-window__content\">\n <ng-content />\n</div>\n", styles: ["@layer components{@property --et-pip-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-pip-backdrop-blur{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-pip-title-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}et-pip-window{position:fixed;display:flex;flex-direction:column;touch-action:none;color:var(--et-surface-color-solid, inherit);--et-resize-handles-side-top: var(--et-pip-title-bar-h)}et-pip-window:after{content:\"\";display:block;position:absolute;inset:0;background:var(--et-pip-bg, color-mix(in srgb, var(--et-surface-background-solid, rgb(0 0 0)) 60%, transparent));-webkit-backdrop-filter:blur(var(--et-pip-backdrop-blur));backdrop-filter:blur(var(--et-pip-backdrop-blur));z-index:-1;transform:translateY(var(--et-pip-title-bar-h));transition:transform .2s ease;pointer-events:none;border-radius:var(--et-pip-border-radius)}et-pip-window.et-pip-window--dragging .et-pip-window__title-bar{cursor:grabbing}.et-pip-window__title-bar{height:var(--et-pip-title-bar-height);display:flex;align-items:center;gap:4px;padding:0 6px;transform:translateY(100%);transition:transform .2s ease,opacity .2s ease;pointer-events:none;opacity:0;cursor:grab;border-radius:var(--et-pip-border-radius) var(--et-pip-border-radius) 0 0}.et-pip-window__title-bar-spacer{flex:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)) .et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;opacity:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)):after{transform:translateY(0)}@media(hover:none){.et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;animation:etPipWindowTitleBarSlideIn .5s ease;opacity:1}.et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}}@keyframes etPipWindowTitleBarSlideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.et-pip-window__content{flex:1;min-height:0;position:relative;overflow:hidden;aspect-ratio:var(--et-pip-content-ratio, calc(16 / 9));border-radius:var(--et-pip-border-radius);transition:border-radius .2s ease}et-pip-window:hover .et-pip-window__content,et-pip-window.et-pip-window--dragging .et-pip-window__content,et-pip-window.et-pip-window--collapsed .et-pip-window__content,et-pip-window.et-pip-window--title-bar-forced .et-pip-window__content,et-pip-window:has(.et-pip-window__title-bar :focus-visible) .et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}.et-pip-window__collapse-overlay{position:absolute;inset:0;z-index:4;cursor:grab}.et-pip-interacting iframe,.et-pip-interacting [contenteditable]{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}et-pip-window.et-pip-window--positioned{inset:0 auto auto 0!important}et-pip-window.et-pip-window--mode-transitioning{transition:width .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1)}et-pip-window .et-resize-handle:before{content:\"\";position:absolute;background:color-mix(in srgb,var(--et-surface-color-solid, rgb(255 255 255)) 65%,transparent);border-radius:3px;opacity:0;transition:opacity .15s 0s;pointer-events:none}et-pip-window .et-resize-handle:hover:before{opacity:1;transition:opacity .15s .4s}et-pip-window .et-resize-handle--s:before{height:3px;left:10px;right:10px;bottom:1px}et-pip-window .et-resize-handle--e:before{width:3px;top:10px;bottom:10px;right:1px}et-pip-window .et-resize-handle--w:before{width:3px;top:10px;bottom:10px;left:1px}et-pip-window .et-resize-handle--se:before{width:8px;height:8px;bottom:2px;right:2px;border-radius:1px 1px 3px}et-pip-window .et-resize-handle--sw:before{width:8px;height:8px;bottom:2px;left:2px;border-radius:1px 1px 1px 3px}et-pip-window et-resize-handles[data-active-edge=s] .et-resize-handle--s:before,et-pip-window et-resize-handles[data-active-edge=e] .et-resize-handle--e:before,et-pip-window et-resize-handles[data-active-edge=w] .et-resize-handle--w:before,et-pip-window et-resize-handles[data-active-edge=se] .et-resize-handle--se:before,et-pip-window et-resize-handles[data-active-edge=sw] .et-resize-handle--sw:before{opacity:1;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded"] }, { kind: "directive", type: PipTitleBarDirective, selector: "[etPipTitleBar]" }, { kind: "directive", type: PipCollapseOverlayDirective, selector: "[etPipCollapseOverlay]", inputs: ["dragHandle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
16197
16203
|
}
|
|
16198
16204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PipWindowComponent, decorators: [{
|
|
16199
16205
|
type: Component,
|
|
@@ -16209,7 +16215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16209
16215
|
'[style.height.px]': 'sizeState.h()',
|
|
16210
16216
|
'[style.--et-pip-title-bar-h.px]': 'titleBarH()',
|
|
16211
16217
|
'[style.--et-pip-content-ratio]': '!posState.positionInitialized() ? params.aspectRatio() : null',
|
|
16212
|
-
}, template: "<et-resize-handles [edges]=\"RESIZE_EDGES\" [disabled]=\"posState.isCollapsed() || posState.isDragging()\" />\n\n@if (posState.isCollapsed()) {\n <div [dragHandle]=\"dragHandle()\" etPipCollapseOverlay></div>\n}\n\n<div [dragDisabled]=\"posState.isResizing()\" etPipTitleBar>\n <ng-container [ngTemplateOutlet]=\"titleBarTemplate().template\" />\n</div>\n\n<div class=\"et-pip-window__content\">\n <ng-content />\n</div>\n", styles: ["@property --et-pip-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-pip-backdrop-blur{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-pip-title-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}et-pip-window{position:fixed;display:flex;flex-direction:column;touch-action:none;color:var(--et-surface-color-solid, inherit);--et-resize-handles-side-top: var(--et-pip-title-bar-h)}et-pip-window:after{content:\"\";display:block;position:absolute;inset:0;background:var(--et-pip-bg, color-mix(in srgb, var(--et-surface-background-solid, rgb(0 0 0)) 60%, transparent));-webkit-backdrop-filter:blur(var(--et-pip-backdrop-blur));backdrop-filter:blur(var(--et-pip-backdrop-blur));z-index:-1;transform:translateY(var(--et-pip-title-bar-h));transition:transform .2s ease;pointer-events:none;border-radius:var(--et-pip-border-radius)}et-pip-window.et-pip-window--dragging .et-pip-window__title-bar{cursor:grabbing}.et-pip-window__title-bar{height:var(--et-pip-title-bar-height);display:flex;align-items:center;gap:4px;padding:0 6px;transform:translateY(100%);transition:transform .2s ease,opacity .2s ease;pointer-events:none;opacity:0;cursor:grab;border-radius:var(--et-pip-border-radius) var(--et-pip-border-radius) 0 0}.et-pip-window__title-bar-spacer{flex:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)) .et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;opacity:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)):after{transform:translateY(0)}@media(hover:none){.et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;animation:etPipWindowTitleBarSlideIn .5s ease;opacity:1}.et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}}@keyframes etPipWindowTitleBarSlideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.et-pip-window__content{flex:1;min-height:0;position:relative;overflow:hidden;aspect-ratio:var(--et-pip-content-ratio, calc(16 / 9));border-radius:var(--et-pip-border-radius);transition:border-radius .2s ease}et-pip-window:hover .et-pip-window__content,et-pip-window.et-pip-window--dragging .et-pip-window__content,et-pip-window.et-pip-window--collapsed .et-pip-window__content,et-pip-window.et-pip-window--title-bar-forced .et-pip-window__content,et-pip-window:has(.et-pip-window__title-bar :focus-visible) .et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}.et-pip-window__collapse-overlay{position:absolute;inset:0;z-index:4;cursor:grab}.et-pip-interacting iframe,.et-pip-interacting [contenteditable]{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}et-pip-window.et-pip-window--positioned{inset:0 auto auto 0!important}et-pip-window.et-pip-window--mode-transitioning{transition:width .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1)}et-pip-window .et-resize-handle:before{content:\"\";position:absolute;background:color-mix(in srgb,var(--et-surface-color-solid, rgb(255 255 255)) 65%,transparent);border-radius:3px;opacity:0;transition:opacity .15s 0s;pointer-events:none}et-pip-window .et-resize-handle:hover:before{opacity:1;transition:opacity .15s .4s}et-pip-window .et-resize-handle--s:before{height:3px;left:10px;right:10px;bottom:1px}et-pip-window .et-resize-handle--e:before{width:3px;top:10px;bottom:10px;right:1px}et-pip-window .et-resize-handle--w:before{width:3px;top:10px;bottom:10px;left:1px}et-pip-window .et-resize-handle--se:before{width:8px;height:8px;bottom:2px;right:2px;border-radius:1px 1px 3px}et-pip-window .et-resize-handle--sw:before{width:8px;height:8px;bottom:2px;left:2px;border-radius:1px 1px 1px 3px}et-pip-window et-resize-handles[data-active-edge=s] .et-resize-handle--s:before,et-pip-window et-resize-handles[data-active-edge=e] .et-resize-handle--e:before,et-pip-window et-resize-handles[data-active-edge=w] .et-resize-handle--w:before,et-pip-window et-resize-handles[data-active-edge=se] .et-resize-handle--se:before,et-pip-window et-resize-handles[data-active-edge=sw] .et-resize-handle--sw:before{opacity:1;transition:none}\n"] }]
|
|
16218
|
+
}, template: "<et-resize-handles [edges]=\"RESIZE_EDGES\" [disabled]=\"posState.isCollapsed() || posState.isDragging()\" />\n\n@if (posState.isCollapsed()) {\n <div [dragHandle]=\"dragHandle()\" etPipCollapseOverlay></div>\n}\n\n<div [dragDisabled]=\"posState.isResizing()\" etPipTitleBar>\n <ng-container [ngTemplateOutlet]=\"titleBarTemplate().template\" />\n</div>\n\n<div class=\"et-pip-window__content\">\n <ng-content />\n</div>\n", styles: ["@layer components{@property --et-pip-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-pip-backdrop-blur{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-pip-title-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}et-pip-window{position:fixed;display:flex;flex-direction:column;touch-action:none;color:var(--et-surface-color-solid, inherit);--et-resize-handles-side-top: var(--et-pip-title-bar-h)}et-pip-window:after{content:\"\";display:block;position:absolute;inset:0;background:var(--et-pip-bg, color-mix(in srgb, var(--et-surface-background-solid, rgb(0 0 0)) 60%, transparent));-webkit-backdrop-filter:blur(var(--et-pip-backdrop-blur));backdrop-filter:blur(var(--et-pip-backdrop-blur));z-index:-1;transform:translateY(var(--et-pip-title-bar-h));transition:transform .2s ease;pointer-events:none;border-radius:var(--et-pip-border-radius)}et-pip-window.et-pip-window--dragging .et-pip-window__title-bar{cursor:grabbing}.et-pip-window__title-bar{height:var(--et-pip-title-bar-height);display:flex;align-items:center;gap:4px;padding:0 6px;transform:translateY(100%);transition:transform .2s ease,opacity .2s ease;pointer-events:none;opacity:0;cursor:grab;border-radius:var(--et-pip-border-radius) var(--et-pip-border-radius) 0 0}.et-pip-window__title-bar-spacer{flex:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)) .et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;opacity:1}:is(et-pip-window:hover,et-pip-window.et-pip-window--dragging,et-pip-window.et-pip-window--collapsed,et-pip-window.et-pip-window--title-bar-forced,et-pip-window:has(.et-pip-window__title-bar :focus-visible)):after{transform:translateY(0)}@media(hover:none){.et-pip-window__title-bar{transform:translateY(0);pointer-events:auto;animation:etPipWindowTitleBarSlideIn .5s ease;opacity:1}.et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}}@keyframes etPipWindowTitleBarSlideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.et-pip-window__content{flex:1;min-height:0;position:relative;overflow:hidden;aspect-ratio:var(--et-pip-content-ratio, calc(16 / 9));border-radius:var(--et-pip-border-radius);transition:border-radius .2s ease}et-pip-window:hover .et-pip-window__content,et-pip-window.et-pip-window--dragging .et-pip-window__content,et-pip-window.et-pip-window--collapsed .et-pip-window__content,et-pip-window.et-pip-window--title-bar-forced .et-pip-window__content,et-pip-window:has(.et-pip-window__title-bar :focus-visible) .et-pip-window__content{border-radius:0 0 var(--et-pip-border-radius) var(--et-pip-border-radius)}.et-pip-window__collapse-overlay{position:absolute;inset:0;z-index:4;cursor:grab}.et-pip-interacting iframe,.et-pip-interacting [contenteditable]{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}et-pip-window.et-pip-window--positioned{inset:0 auto auto 0!important}et-pip-window.et-pip-window--mode-transitioning{transition:width .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1)}et-pip-window .et-resize-handle:before{content:\"\";position:absolute;background:color-mix(in srgb,var(--et-surface-color-solid, rgb(255 255 255)) 65%,transparent);border-radius:3px;opacity:0;transition:opacity .15s 0s;pointer-events:none}et-pip-window .et-resize-handle:hover:before{opacity:1;transition:opacity .15s .4s}et-pip-window .et-resize-handle--s:before{height:3px;left:10px;right:10px;bottom:1px}et-pip-window .et-resize-handle--e:before{width:3px;top:10px;bottom:10px;right:1px}et-pip-window .et-resize-handle--w:before{width:3px;top:10px;bottom:10px;left:1px}et-pip-window .et-resize-handle--se:before{width:8px;height:8px;bottom:2px;right:2px;border-radius:1px 1px 3px}et-pip-window .et-resize-handle--sw:before{width:8px;height:8px;bottom:2px;left:2px;border-radius:1px 1px 1px 3px}et-pip-window et-resize-handles[data-active-edge=s] .et-resize-handle--s:before,et-pip-window et-resize-handles[data-active-edge=e] .et-resize-handle--e:before,et-pip-window et-resize-handles[data-active-edge=w] .et-resize-handle--w:before,et-pip-window et-resize-handles[data-active-edge=se] .et-resize-handle--se:before,et-pip-window et-resize-handles[data-active-edge=sw] .et-resize-handle--sw:before{opacity:1;transition:none}}\n"] }]
|
|
16213
16219
|
}], propDecorators: { resizeHandles: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ResizeHandlesComponent), { isSignal: true }] }], titleBar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipTitleBarDirective), { isSignal: true }] }], titleBarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PipTitleBarTemplateDirective), { isSignal: true }] }] } });
|
|
16214
16220
|
|
|
16215
16221
|
class PipCloseDirective {
|
|
@@ -16649,11 +16655,11 @@ const createStreamPlayerSlot = (options) => {
|
|
|
16649
16655
|
|
|
16650
16656
|
class StreamPlayerSlotStylesComponent {
|
|
16651
16657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StreamPlayerSlotStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: StreamPlayerSlotStylesComponent, isStandalone: true, selector: "et-stream-player-slot-styles", ngImport: i0, template: '', isInline: true, styles: ["@property --et-stream-player-slot-radius{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-stream-player-slot{position:relative;display:block;overflow:hidden;border-radius:var(--et-stream-player-slot-radius)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
16658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: StreamPlayerSlotStylesComponent, isStandalone: true, selector: "et-stream-player-slot-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-stream-player-slot-radius{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-stream-player-slot{position:relative;display:block;overflow:hidden;border-radius:var(--et-stream-player-slot-radius)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
16653
16659
|
}
|
|
16654
16660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StreamPlayerSlotStylesComponent, decorators: [{
|
|
16655
16661
|
type: Component,
|
|
16656
|
-
args: [{ selector: 'et-stream-player-slot-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@property --et-stream-player-slot-radius{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-stream-player-slot{position:relative;display:block;overflow:hidden;border-radius:var(--et-stream-player-slot-radius)}\n"] }]
|
|
16662
|
+
args: [{ selector: 'et-stream-player-slot-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-stream-player-slot-radius{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-stream-player-slot{position:relative;display:block;overflow:hidden;border-radius:var(--et-stream-player-slot-radius)}}\n"] }]
|
|
16657
16663
|
}] });
|
|
16658
16664
|
|
|
16659
16665
|
const STREAM_PLAYER_PARAMS_TOKEN = new InjectionToken('STREAM_PLAYER_PARAMS_TOKEN');
|
|
@@ -19824,7 +19830,7 @@ class ToggletipComponent {
|
|
|
19824
19830
|
});
|
|
19825
19831
|
}
|
|
19826
19832
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToggletipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ToggletipComponent, isStandalone: true, selector: "et-toggletip", inputs: { toggletipId: { classPropertyName: "toggletipId", publicName: "toggletipId", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, colorProvider: { classPropertyName: "colorProvider", publicName: "colorProvider", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "toggletipId()", "attr.data-has-template": "hasTemplate() || null" }, classAttribute: "et-toggletip" }, hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective, inputs: ["surfaceProvider", "surfaceProvider"] }], ngImport: i0, template: "<div class=\"et-toggletip__surface\">\n <div [attr.id]=\"contentId()\" class=\"et-toggletip__content\">\n @if (contentText(); as text) {\n <p class=\"et-toggletip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" [ngTemplateOutletInjector]=\"injector\" />\n }\n </div>\n</div>\n", styles: ["@property --et-toggletip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-toggletip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-toggletip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-toggletip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-toggletip-gap{syntax: \"<length>\"; inherits: false; initial-value: 14px;}.et-overlay.et-overlay--toggletip{overflow:visible;background:transparent;box-shadow:none}.et-overlay--toggletip>:nth-child(2){display:block;overflow:visible}.et-toggletip{--_et-toggletip-background: var(--et-surface-2, rgb(32 32 32));--_et-toggletip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-toggletip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-toggletip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-toggletip-radius: 16px;--_et-toggletip-max-width: min(34ch, calc(100vw - 24px) );--_et-toggletip-focus-ring: rgb(59 130 246 / .35);position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-toggletip-max-width);color:var(--_et-toggletip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-toggletip-font-size);font-weight:500;line-height:var(--et-toggletip-line-height);letter-spacing:-.01em}.et-toggletip__surface{position:relative;z-index:1;display:block;min-inline-size:min(272px,calc(100vw - 24px));max-inline-size:var(--_et-toggletip-max-width);padding:calc(var(--et-toggletip-padding-block) + 2px) calc(var(--et-toggletip-padding-inline) + 2px);border-radius:var(--_et-toggletip-radius);border:1px solid var(--_et-toggletip-border);background:var(--et-surface-background-solid, var(--_et-toggletip-background));color:var(--et-surface-color-solid, var(--_et-toggletip-color));box-shadow:var(--_et-toggletip-shadow)}.et-toggletip__content{position:relative;z-index:1;display:grid;gap:var(--et-toggletip-gap)}.et-toggletip__content :where(p){margin:0;opacity:.88}.et-toggletip__content :where(a){color:inherit}.et-toggletip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-toggletip__content :where([data-toggletip-body]){display:grid;gap:6px}.et-toggletip__content :where([data-toggletip-actions]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid rgb(255 255 255 / .08)}.et-toggletip__text{margin:0}.et-overlay--toggletip:focus-visible .et-toggletip__surface,.et-toggletip:focus-visible .et-toggletip__surface{outline:2px solid var(--_et-toggletip-focus-ring);outline-offset:2px}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--toggletip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition-duration:0ms}.et-overlay--toggletip[data-overlay-placement].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19833
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ToggletipComponent, isStandalone: true, selector: "et-toggletip", inputs: { toggletipId: { classPropertyName: "toggletipId", publicName: "toggletipId", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, colorProvider: { classPropertyName: "colorProvider", publicName: "colorProvider", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "toggletipId()", "attr.data-has-template": "hasTemplate() || null" }, classAttribute: "et-toggletip" }, hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective, inputs: ["surfaceProvider", "surfaceProvider"] }], ngImport: i0, template: "<div class=\"et-toggletip__surface\">\n <div [attr.id]=\"contentId()\" class=\"et-toggletip__content\">\n @if (contentText(); as text) {\n <p class=\"et-toggletip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" [ngTemplateOutletInjector]=\"injector\" />\n }\n </div>\n</div>\n", styles: ["@layer components{@property --et-toggletip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-toggletip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-toggletip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-toggletip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-toggletip-gap{syntax: \"<length>\"; inherits: false; initial-value: 14px;}.et-overlay.et-overlay--toggletip{overflow:visible;background:transparent;box-shadow:none}.et-overlay--toggletip>:nth-child(2){display:block;overflow:visible}.et-toggletip{--_et-toggletip-background: var(--et-surface-2, rgb(32 32 32));--_et-toggletip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-toggletip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-toggletip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-toggletip-radius: 16px;--_et-toggletip-max-width: min(34ch, calc(100vw - 24px) );--_et-toggletip-focus-ring: rgb(59 130 246 / .35);position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-toggletip-max-width);color:var(--_et-toggletip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-toggletip-font-size);font-weight:500;line-height:var(--et-toggletip-line-height);letter-spacing:-.01em}.et-toggletip__surface{position:relative;z-index:1;display:block;min-inline-size:min(272px,calc(100vw - 24px));max-inline-size:var(--_et-toggletip-max-width);padding:calc(var(--et-toggletip-padding-block) + 2px) calc(var(--et-toggletip-padding-inline) + 2px);border-radius:var(--_et-toggletip-radius);border:1px solid var(--_et-toggletip-border);background:var(--et-surface-background-solid, var(--_et-toggletip-background));color:var(--et-surface-color-solid, var(--_et-toggletip-color));box-shadow:var(--_et-toggletip-shadow)}.et-toggletip__content{position:relative;z-index:1;display:grid;gap:var(--et-toggletip-gap)}.et-toggletip__content :where(p){margin:0;opacity:.88}.et-toggletip__content :where(a){color:inherit}.et-toggletip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-toggletip__content :where([data-toggletip-body]){display:grid;gap:6px}.et-toggletip__content :where([data-toggletip-actions]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid rgb(255 255 255 / .08)}.et-toggletip__text{margin:0}.et-overlay--toggletip:focus-visible .et-toggletip__surface,.et-toggletip:focus-visible .et-toggletip__surface{outline:2px solid var(--_et-toggletip-focus-ring);outline-offset:2px}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--toggletip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition-duration:0ms}.et-overlay--toggletip[data-overlay-placement].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19828
19834
|
}
|
|
19829
19835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToggletipComponent, decorators: [{
|
|
19830
19836
|
type: Component,
|
|
@@ -19832,7 +19838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
19832
19838
|
class: 'et-toggletip',
|
|
19833
19839
|
'[attr.id]': 'toggletipId()',
|
|
19834
19840
|
'[attr.data-has-template]': 'hasTemplate() || null',
|
|
19835
|
-
}, template: "<div class=\"et-toggletip__surface\">\n <div [attr.id]=\"contentId()\" class=\"et-toggletip__content\">\n @if (contentText(); as text) {\n <p class=\"et-toggletip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" [ngTemplateOutletInjector]=\"injector\" />\n }\n </div>\n</div>\n", styles: ["@property --et-toggletip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-toggletip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-toggletip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-toggletip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-toggletip-gap{syntax: \"<length>\"; inherits: false; initial-value: 14px;}.et-overlay.et-overlay--toggletip{overflow:visible;background:transparent;box-shadow:none}.et-overlay--toggletip>:nth-child(2){display:block;overflow:visible}.et-toggletip{--_et-toggletip-background: var(--et-surface-2, rgb(32 32 32));--_et-toggletip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-toggletip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-toggletip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-toggletip-radius: 16px;--_et-toggletip-max-width: min(34ch, calc(100vw - 24px) );--_et-toggletip-focus-ring: rgb(59 130 246 / .35);position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-toggletip-max-width);color:var(--_et-toggletip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-toggletip-font-size);font-weight:500;line-height:var(--et-toggletip-line-height);letter-spacing:-.01em}.et-toggletip__surface{position:relative;z-index:1;display:block;min-inline-size:min(272px,calc(100vw - 24px));max-inline-size:var(--_et-toggletip-max-width);padding:calc(var(--et-toggletip-padding-block) + 2px) calc(var(--et-toggletip-padding-inline) + 2px);border-radius:var(--_et-toggletip-radius);border:1px solid var(--_et-toggletip-border);background:var(--et-surface-background-solid, var(--_et-toggletip-background));color:var(--et-surface-color-solid, var(--_et-toggletip-color));box-shadow:var(--_et-toggletip-shadow)}.et-toggletip__content{position:relative;z-index:1;display:grid;gap:var(--et-toggletip-gap)}.et-toggletip__content :where(p){margin:0;opacity:.88}.et-toggletip__content :where(a){color:inherit}.et-toggletip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-toggletip__content :where([data-toggletip-body]){display:grid;gap:6px}.et-toggletip__content :where([data-toggletip-actions]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid rgb(255 255 255 / .08)}.et-toggletip__text{margin:0}.et-overlay--toggletip:focus-visible .et-toggletip__surface,.et-toggletip:focus-visible .et-toggletip__surface{outline:2px solid var(--_et-toggletip-focus-ring);outline-offset:2px}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--toggletip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition-duration:0ms}.et-overlay--toggletip[data-overlay-placement].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}\n"] }]
|
|
19841
|
+
}, template: "<div class=\"et-toggletip__surface\">\n <div [attr.id]=\"contentId()\" class=\"et-toggletip__content\">\n @if (contentText(); as text) {\n <p class=\"et-toggletip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" [ngTemplateOutletInjector]=\"injector\" />\n }\n </div>\n</div>\n", styles: ["@layer components{@property --et-toggletip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-toggletip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-toggletip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-toggletip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-toggletip-gap{syntax: \"<length>\"; inherits: false; initial-value: 14px;}.et-overlay.et-overlay--toggletip{overflow:visible;background:transparent;box-shadow:none}.et-overlay--toggletip>:nth-child(2){display:block;overflow:visible}.et-toggletip{--_et-toggletip-background: var(--et-surface-2, rgb(32 32 32));--_et-toggletip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-toggletip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-toggletip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-toggletip-radius: 16px;--_et-toggletip-max-width: min(34ch, calc(100vw - 24px) );--_et-toggletip-focus-ring: rgb(59 130 246 / .35);position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-toggletip-max-width);color:var(--_et-toggletip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-toggletip-font-size);font-weight:500;line-height:var(--et-toggletip-line-height);letter-spacing:-.01em}.et-toggletip__surface{position:relative;z-index:1;display:block;min-inline-size:min(272px,calc(100vw - 24px));max-inline-size:var(--_et-toggletip-max-width);padding:calc(var(--et-toggletip-padding-block) + 2px) calc(var(--et-toggletip-padding-inline) + 2px);border-radius:var(--_et-toggletip-radius);border:1px solid var(--_et-toggletip-border);background:var(--et-surface-background-solid, var(--_et-toggletip-background));color:var(--et-surface-color-solid, var(--_et-toggletip-color));box-shadow:var(--_et-toggletip-shadow)}.et-toggletip__content{position:relative;z-index:1;display:grid;gap:var(--et-toggletip-gap)}.et-toggletip__content :where(p){margin:0;opacity:.88}.et-toggletip__content :where(a){color:inherit}.et-toggletip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-toggletip__content :where([data-toggletip-body]){display:grid;gap:6px}.et-toggletip__content :where([data-toggletip-actions]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid rgb(255 255 255 / .08)}.et-toggletip__text{margin:0}.et-overlay--toggletip:focus-visible .et-toggletip__surface,.et-toggletip:focus-visible .et-toggletip__surface{outline:2px solid var(--_et-toggletip-focus-ring);outline-offset:2px}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--toggletip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--toggletip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--toggletip.et-animation-leave-active{transition-duration:0ms}.et-overlay--toggletip[data-overlay-placement].et-animation-enter-from,.et-overlay--toggletip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
|
|
19836
19842
|
}], ctorParameters: () => [], propDecorators: { toggletipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggletipId", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], colorProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorProvider", required: true }] }] } });
|
|
19837
19843
|
|
|
19838
19844
|
let nextToggletipId = 0;
|
|
@@ -20141,7 +20147,7 @@ class TooltipComponent {
|
|
|
20141
20147
|
});
|
|
20142
20148
|
}
|
|
20143
20149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20144
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TooltipComponent, isStandalone: true, selector: "et-tooltip", inputs: { tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, colorProvider: { classPropertyName: "colorProvider", publicName: "colorProvider", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "tooltipId()", "attr.data-has-template": "hasTemplate() || null" }, classAttribute: "et-tooltip" }, hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective, inputs: ["surfaceProvider", "surfaceProvider"] }], ngImport: i0, template: "<div class=\"et-tooltip__surface\">\n <div class=\"et-tooltip__content\">\n @if (contentText(); as text) {\n <p class=\"et-tooltip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n }\n </div>\n</div>\n", styles: ["@property --et-tooltip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-tooltip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-tooltip-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-tooltip-letter-spacing{syntax: \"<length>\"; inherits: false; initial-value: -.13px;}@property --et-tooltip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-tooltip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-overlay.et-overlay--tooltip{overflow:visible;pointer-events:none;background:transparent;box-shadow:none}.et-overlay--tooltip>:nth-child(2){display:block;overflow:visible}.et-tooltip{--_et-tooltip-background: var(--et-surface-2, rgb(32 32 32));--_et-tooltip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-tooltip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-tooltip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-tooltip-radius: 16px;--_et-tooltip-max-width: min(34ch, calc(100vw - 24px) );position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-tooltip-max-width);pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--_et-tooltip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-tooltip-font-size);font-weight:var(--et-tooltip-font-weight);line-height:var(--et-tooltip-line-height);letter-spacing:var(--et-tooltip-letter-spacing)}.et-tooltip__surface{position:relative;z-index:1;display:block;max-inline-size:var(--_et-tooltip-max-width);padding:calc(var(--et-tooltip-padding-block) + 2px) calc(var(--et-tooltip-padding-inline) + 2px);border-radius:var(--_et-tooltip-radius);border:1px solid var(--_et-tooltip-border);background:var(--et-surface-background-solid, var(--_et-tooltip-background));color:var(--et-surface-color-solid, var(--_et-tooltip-color));box-shadow:var(--_et-tooltip-shadow)}.et-tooltip__content{position:relative;z-index:1;display:grid;gap:6px}.et-tooltip__content :where(p){margin:0;opacity:.88}.et-tooltip__content :where(a){color:inherit}.et-tooltip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-tooltip__text{margin:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--tooltip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition-duration:0ms}.et-overlay--tooltip[data-overlay-placement].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
20150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TooltipComponent, isStandalone: true, selector: "et-tooltip", inputs: { tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, colorProvider: { classPropertyName: "colorProvider", publicName: "colorProvider", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "tooltipId()", "attr.data-has-template": "hasTemplate() || null" }, classAttribute: "et-tooltip" }, hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective, inputs: ["surfaceProvider", "surfaceProvider"] }], ngImport: i0, template: "<div class=\"et-tooltip__surface\">\n <div class=\"et-tooltip__content\">\n @if (contentText(); as text) {\n <p class=\"et-tooltip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n }\n </div>\n</div>\n", styles: ["@layer components{@property --et-tooltip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-tooltip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-tooltip-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-tooltip-letter-spacing{syntax: \"<length>\"; inherits: false; initial-value: -.13px;}@property --et-tooltip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-tooltip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-overlay.et-overlay--tooltip{overflow:visible;pointer-events:none;background:transparent;box-shadow:none}.et-overlay--tooltip>:nth-child(2){display:block;overflow:visible}.et-tooltip{--_et-tooltip-background: var(--et-surface-2, rgb(32 32 32));--_et-tooltip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-tooltip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-tooltip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-tooltip-radius: 16px;--_et-tooltip-max-width: min(34ch, calc(100vw - 24px) );position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-tooltip-max-width);pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--_et-tooltip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-tooltip-font-size);font-weight:var(--et-tooltip-font-weight);line-height:var(--et-tooltip-line-height);letter-spacing:var(--et-tooltip-letter-spacing)}.et-tooltip__surface{position:relative;z-index:1;display:block;max-inline-size:var(--_et-tooltip-max-width);padding:calc(var(--et-tooltip-padding-block) + 2px) calc(var(--et-tooltip-padding-inline) + 2px);border-radius:var(--_et-tooltip-radius);border:1px solid var(--_et-tooltip-border);background:var(--et-surface-background-solid, var(--_et-tooltip-background));color:var(--et-surface-color-solid, var(--_et-tooltip-color));box-shadow:var(--_et-tooltip-shadow)}.et-tooltip__content{position:relative;z-index:1;display:grid;gap:6px}.et-tooltip__content :where(p){margin:0;opacity:.88}.et-tooltip__content :where(a){color:inherit}.et-tooltip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-tooltip__text{margin:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--tooltip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition-duration:0ms}.et-overlay--tooltip[data-overlay-placement].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
20145
20151
|
}
|
|
20146
20152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
20147
20153
|
type: Component,
|
|
@@ -20150,7 +20156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
20150
20156
|
role: 'tooltip',
|
|
20151
20157
|
'[attr.id]': 'tooltipId()',
|
|
20152
20158
|
'[attr.data-has-template]': 'hasTemplate() || null',
|
|
20153
|
-
}, template: "<div class=\"et-tooltip__surface\">\n <div class=\"et-tooltip__content\">\n @if (contentText(); as text) {\n <p class=\"et-tooltip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n }\n </div>\n</div>\n", styles: ["@property --et-tooltip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-tooltip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-tooltip-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-tooltip-letter-spacing{syntax: \"<length>\"; inherits: false; initial-value: -.13px;}@property --et-tooltip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-tooltip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-overlay.et-overlay--tooltip{overflow:visible;pointer-events:none;background:transparent;box-shadow:none}.et-overlay--tooltip>:nth-child(2){display:block;overflow:visible}.et-tooltip{--_et-tooltip-background: var(--et-surface-2, rgb(32 32 32));--_et-tooltip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-tooltip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-tooltip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-tooltip-radius: 16px;--_et-tooltip-max-width: min(34ch, calc(100vw - 24px) );position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-tooltip-max-width);pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--_et-tooltip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-tooltip-font-size);font-weight:var(--et-tooltip-font-weight);line-height:var(--et-tooltip-line-height);letter-spacing:var(--et-tooltip-letter-spacing)}.et-tooltip__surface{position:relative;z-index:1;display:block;max-inline-size:var(--_et-tooltip-max-width);padding:calc(var(--et-tooltip-padding-block) + 2px) calc(var(--et-tooltip-padding-inline) + 2px);border-radius:var(--_et-tooltip-radius);border:1px solid var(--_et-tooltip-border);background:var(--et-surface-background-solid, var(--_et-tooltip-background));color:var(--et-surface-color-solid, var(--_et-tooltip-color));box-shadow:var(--_et-tooltip-shadow)}.et-tooltip__content{position:relative;z-index:1;display:grid;gap:6px}.et-tooltip__content :where(p){margin:0;opacity:.88}.et-tooltip__content :where(a){color:inherit}.et-tooltip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-tooltip__text{margin:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--tooltip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition-duration:0ms}.et-overlay--tooltip[data-overlay-placement].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}\n"] }]
|
|
20159
|
+
}, template: "<div class=\"et-tooltip__surface\">\n <div class=\"et-tooltip__content\">\n @if (contentText(); as text) {\n <p class=\"et-tooltip__text\">{{ text }}</p>\n } @else if (contentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\n }\n </div>\n</div>\n", styles: ["@layer components{@property --et-tooltip-font-size{syntax: \"<length>\"; inherits: false; initial-value: 13px;}@property --et-tooltip-line-height{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-tooltip-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-tooltip-letter-spacing{syntax: \"<length>\"; inherits: false; initial-value: -.13px;}@property --et-tooltip-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-tooltip-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-overlay.et-overlay--tooltip{overflow:visible;pointer-events:none;background:transparent;box-shadow:none}.et-overlay--tooltip>:nth-child(2){display:block;overflow:visible}.et-tooltip{--_et-tooltip-background: var(--et-surface-2, rgb(32 32 32));--_et-tooltip-color: var(--et-color-main-contrast, rgb(244 244 245));--_et-tooltip-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-tooltip-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-tooltip-radius: 16px;--_et-tooltip-max-width: min(34ch, calc(100vw - 24px) );position:relative;display:block;inline-size:max-content;max-inline-size:var(--_et-tooltip-max-width);pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--_et-tooltip-color);font-family:var(--et-font-family, inherit);font-size:var(--et-tooltip-font-size);font-weight:var(--et-tooltip-font-weight);line-height:var(--et-tooltip-line-height);letter-spacing:var(--et-tooltip-letter-spacing)}.et-tooltip__surface{position:relative;z-index:1;display:block;max-inline-size:var(--_et-tooltip-max-width);padding:calc(var(--et-tooltip-padding-block) + 2px) calc(var(--et-tooltip-padding-inline) + 2px);border-radius:var(--_et-tooltip-radius);border:1px solid var(--_et-tooltip-border);background:var(--et-surface-background-solid, var(--_et-tooltip-background));color:var(--et-surface-color-solid, var(--_et-tooltip-color));box-shadow:var(--_et-tooltip-shadow)}.et-tooltip__content{position:relative;z-index:1;display:grid;gap:6px}.et-tooltip__content :where(p){margin:0;opacity:.88}.et-tooltip__content :where(a){color:inherit}.et-tooltip__content :where(strong){display:block;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.02em;opacity:1}.et-tooltip__text{margin:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}.et-overlay--tooltip[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.45rem)!important}.et-overlay--tooltip[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.45rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-enter-active,.et-overlay.et-with-default-animation.et-overlay--tooltip.et-animation-leave-active{transition-duration:0ms}.et-overlay--tooltip[data-overlay-placement].et-animation-enter-from,.et-overlay--tooltip[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
|
|
20154
20160
|
}], ctorParameters: () => [], propDecorators: { tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], colorProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorProvider", required: true }] }] } });
|
|
20155
20161
|
|
|
20156
20162
|
let nextTooltipId = 0;
|