@filip.mazev/blocks 1.4.3 → 1.4.5
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/README.md +1 -1
- package/_index.scss +1 -1
- package/core/styles/_field-state.scss +16 -4
- package/core/styles/_index.scss +0 -1
- package/core/styles/_mixins.scss +2 -2
- package/core/styles/_motion.scss +1 -1
- package/core/styles/_palettes.scss +127 -132
- package/core/styles/_slider.scss +158 -40
- package/core/styles/_theme-engine.scss +43 -63
- package/core/styles/_utilities.scss +3 -4
- package/core/styles/_validation.scss +6 -1
- package/core/styles/_variables.scss +24 -14
- package/core/styles/themes/_cyberpunk-theme.scss +1 -1
- package/core/styles/themes/_green-theme.scss +1 -1
- package/core/styles/themes/_high-contrast-theme.scss +152 -133
- package/core/styles/themes/_orange-theme.scss +1 -1
- package/core/styles/themes/_purple-theme.scss +1 -1
- package/core/styles/themes/_red-theme.scss +1 -1
- package/core/styles/themes/_white-theme.scss +26 -20
- package/effects/README.md +5 -9
- package/effects/effects.css +200 -121
- package/effects/runtime/README.md +19 -11
- package/fesm2022/filip.mazev-blocks-core.mjs +27 -22
- package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs +887 -67
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects.mjs +8 -48
- package/fesm2022/filip.mazev-blocks-effects.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-forms.mjs +65 -61
- package/fesm2022/filip.mazev-blocks-forms.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-modal.mjs +29 -32
- package/fesm2022/filip.mazev-blocks-modal.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-navigation.mjs +35 -1
- package/fesm2022/filip.mazev-blocks-navigation.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-primitives.mjs +106 -32
- package/fesm2022/filip.mazev-blocks-primitives.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-toastr.mjs +5 -7
- package/fesm2022/filip.mazev-blocks-toastr.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks.mjs +1 -1
- package/fesm2022/filip.mazev-blocks.mjs.map +1 -1
- package/navigation/README.md +44 -0
- package/package.json +1 -1
- package/schematics/ng-add/index.js +4 -1
- package/types/filip.mazev-blocks-core.d.ts +3 -4
- package/types/filip.mazev-blocks-effects-runtime.d.ts +10 -8
- package/types/filip.mazev-blocks-effects.d.ts +5 -17
- package/types/filip.mazev-blocks-forms.d.ts +13 -11
- package/types/filip.mazev-blocks-modal.d.ts +1 -0
- package/types/filip.mazev-blocks-navigation.d.ts +20 -4
- package/types/filip.mazev-blocks-primitives.d.ts +12 -2
- package/types/filip.mazev-blocks-toastr.d.ts +4 -4
- package/types/filip.mazev-blocks.d.ts +1 -1
|
@@ -12,8 +12,8 @@ import { Subject } from "rxjs";
|
|
|
12
12
|
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
|
|
13
13
|
var Button = class Button {
|
|
14
14
|
appearance = injectComponentSurface(() => ({
|
|
15
|
-
interactive: !this.interactive() || this.disabled() ? false : void 0,
|
|
16
|
-
emission: this.interactive() && !this.disabled() ? this.color() === "primary" || this.color() === "grayscale" ? "var(--bx-primary)" : `var(--bx-text-${this.color()})` : void 0
|
|
15
|
+
interactive: this.variant() === "text" || !this.interactive() || this.disabled() ? false : void 0,
|
|
16
|
+
emission: this.variant() !== "text" && this.interactive() && !this.disabled() ? this.color() === "primary" || this.color() === "grayscale" ? "var(--bx-primary)" : `var(--bx-text-${this.color()})` : void 0
|
|
17
17
|
}));
|
|
18
18
|
a11y = inject(BxA11yService);
|
|
19
19
|
isAnimated = computed(() => {
|
|
@@ -110,7 +110,7 @@ var Button = class Button {
|
|
|
110
110
|
},
|
|
111
111
|
ngImport: i0,
|
|
112
112
|
template: "<span class=\"bx-btn-content-wrapper\">\n <ng-content></ng-content>\n</span>",
|
|
113
|
-
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;outline:none;text-decoration:none;box-sizing:border-box;border:1px solid transparent}:host.bx-btn-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host.bx-btn-non-interactive{cursor:default}:host[disabled],:host[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:none!important}:host.bx-btn-color-primary{--btn-theme-base: var(--bx-primary);--btn-theme-hover: var(--bx-primary-hover);--btn-theme-active: var(--bx-primary-active);--btn-theme-text: var(--bx-on-primary);--btn-theme-tonal-bg: var(--bx-primary-subtle);--btn-theme-tonal-text: var(--bx-text-brand);--btn-theme-border: var(--bx-border-brand)}:host.bx-btn-color-danger{--btn-theme-base: var(--bx-bg-danger);--btn-theme-hover: var(--bx-bg-danger-hover);--btn-theme-active: var(--bx-bg-danger-active);--btn-theme-text: var(--bx-text-danger);--btn-theme-tonal-bg: var(--bx-bg-danger-subtle);--btn-theme-tonal-text: var(--bx-text-danger);--btn-theme-border: var(--bx-border-danger)}:host.bx-btn-color-success{--btn-theme-base: var(--bx-bg-success);--btn-theme-hover: var(--bx-bg-success-hover);--btn-theme-active: var(--bx-bg-success-active);--btn-theme-text: var(--bx-text-success);--btn-theme-tonal-bg: var(--bx-bg-success-subtle);--btn-theme-tonal-text: var(--bx-text-success);--btn-theme-border: var(--bx-border-success)}:host.bx-btn-color-info{--btn-theme-base: var(--bx-bg-info);--btn-theme-hover: var(--bx-bg-info-hover);--btn-theme-active: var(--bx-bg-info-active);--btn-theme-text: var(--bx-text-info);--btn-theme-tonal-bg: var(--bx-bg-info-subtle);--btn-theme-tonal-text: var(--bx-text-info);--btn-theme-border: var(--bx-border-info)}:host.bx-btn-color-warn{--btn-theme-base: var(--bx-bg-warn);--btn-theme-hover: var(--bx-bg-warn-hover);--btn-theme-active: var(--bx-bg-warn-active);--btn-theme-text: var(--bx-text-warn);--btn-theme-tonal-bg: var(--bx-bg-warn-subtle);--btn-theme-tonal-text: var(--bx-text-warn);--btn-theme-border: var(--bx-border-warn)}:host.bx-btn-color-grayscale{--btn-theme-base: var(--bx-bg-element);--btn-theme-hover: var(--bx-bg-element-hover);--btn-theme-active: var(--bx-bg-element-active);--btn-theme-text: var(--bx-text-primary);--btn-theme-tonal-bg: var(--bx-bg-surface-alt);--btn-theme-tonal-text: var(--bx-text-primary);--btn-theme-border: var(--bx-border-strong)}:host.bx-btn-text,:host.bx-btn-filled,:host.bx-btn-tonal{padding:.5rem 1rem;border-radius:.25rem}:host.bx-btn-icon,:host.bx-btn-fab,:host.bx-btn-mini-fab{padding:0;border-radius:9999px}:host.bx-btn-icon .bx-btn-content-wrapper,:host.bx-btn-fab .bx-btn-content-wrapper,:host.bx-btn-mini-fab .bx-btn-content-wrapper{gap:0}:host.bx-btn-icon,:host.bx-btn-mini-fab{width:2.5rem;height:2.5rem}:host.bx-btn-fab{width:3.5rem;height:3.5rem}:host.bx-btn-extended-fab{padding:0 1.5rem;height:3.5rem;border-radius:9999px}:host.bx-btn-is-outlined{border-color:var(--btn-theme-border)}:host.bx-btn-is-elevated{box-shadow:0 4px 8px -1px #00000026,0 2px 4px -2px #0000001f}:host.bx-btn-is-elevated:not(.bx-btn-non-interactive):active{box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a}.bx-btn-content-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;color:inherit}:host([data-bx-surface]),:host(:not([data-bx-surface])){border-radius:var(--bx-glass-radius, .5rem);--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-text: var(--btn-theme-tonal-text, var(--bx-text-primary));--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: .35;border-color:var(--bx-glass-edge);--bx-glass-shadow: 0 2px 4px rgb(0 0 0 /
|
|
113
|
+
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;outline:none;text-decoration:none;box-sizing:border-box;border:1px solid transparent}:host.bx-btn-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host.bx-btn-non-interactive{cursor:default}:host[disabled],:host[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:none!important}:host.bx-btn-color-primary{--btn-theme-base: var(--bx-primary);--btn-theme-hover: var(--bx-primary-hover);--btn-theme-active: var(--bx-primary-active);--btn-theme-text: var(--bx-on-primary);--btn-theme-tonal-bg: var(--bx-primary-subtle);--btn-theme-tonal-text: var(--bx-text-brand);--btn-theme-border: var(--bx-border-brand)}:host.bx-btn-color-danger{--btn-theme-base: var(--bx-bg-danger);--btn-theme-hover: var(--bx-bg-danger-hover);--btn-theme-active: var(--bx-bg-danger-active);--btn-theme-text: var(--bx-text-danger);--btn-theme-tonal-bg: var(--bx-bg-danger-subtle);--btn-theme-tonal-text: var(--bx-text-danger);--btn-theme-border: var(--bx-border-danger)}:host.bx-btn-color-success{--btn-theme-base: var(--bx-bg-success);--btn-theme-hover: var(--bx-bg-success-hover);--btn-theme-active: var(--bx-bg-success-active);--btn-theme-text: var(--bx-text-success);--btn-theme-tonal-bg: var(--bx-bg-success-subtle);--btn-theme-tonal-text: var(--bx-text-success);--btn-theme-border: var(--bx-border-success)}:host.bx-btn-color-info{--btn-theme-base: var(--bx-bg-info);--btn-theme-hover: var(--bx-bg-info-hover);--btn-theme-active: var(--bx-bg-info-active);--btn-theme-text: var(--bx-text-info);--btn-theme-tonal-bg: var(--bx-bg-info-subtle);--btn-theme-tonal-text: var(--bx-text-info);--btn-theme-border: var(--bx-border-info)}:host.bx-btn-color-warn{--btn-theme-base: var(--bx-bg-warn);--btn-theme-hover: var(--bx-bg-warn-hover);--btn-theme-active: var(--bx-bg-warn-active);--btn-theme-text: var(--bx-text-warn);--btn-theme-tonal-bg: var(--bx-bg-warn-subtle);--btn-theme-tonal-text: var(--bx-text-warn);--btn-theme-border: var(--bx-border-warn)}:host.bx-btn-color-grayscale{--btn-theme-base: var(--bx-bg-element);--btn-theme-hover: var(--bx-bg-element-hover);--btn-theme-active: var(--bx-bg-element-active);--btn-theme-text: var(--bx-text-primary);--btn-theme-tonal-bg: var(--bx-bg-surface-alt);--btn-theme-tonal-text: var(--bx-text-primary);--btn-theme-border: var(--bx-border-strong)}:host.bx-btn-text,:host.bx-btn-filled,:host.bx-btn-tonal{padding:.5rem 1rem;border-radius:.25rem}:host.bx-btn-icon,:host.bx-btn-fab,:host.bx-btn-mini-fab{padding:0;border-radius:9999px}:host.bx-btn-icon .bx-btn-content-wrapper,:host.bx-btn-fab .bx-btn-content-wrapper,:host.bx-btn-mini-fab .bx-btn-content-wrapper{gap:0}:host.bx-btn-icon,:host.bx-btn-mini-fab{width:2.5rem;height:2.5rem}:host.bx-btn-fab{width:3.5rem;height:3.5rem}:host.bx-btn-extended-fab{padding:0 1.5rem;height:3.5rem;border-radius:9999px}:host.bx-btn-is-outlined{border-color:var(--btn-theme-border)}:host.bx-btn-is-elevated{box-shadow:0 4px 8px -1px #00000026,0 2px 4px -2px #0000001f}:host.bx-btn-is-elevated:not(.bx-btn-non-interactive):active{box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a}.bx-btn-content-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;color:inherit}:host([data-bx-surface]),:host(:not([data-bx-surface])){border-radius:var(--bx-glass-radius, .5rem);--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-text: var(--btn-theme-tonal-text, var(--bx-text-primary));--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: .35;border-color:var(--bx-glass-edge);--bx-glass-shadow: 0 2px 4px rgb(0 0 0 / 8%);color:var(--bx-glass-text);background:var(--bx-glass-surface)}@supports (background: color-mix(in srgb,white,transparent)){:host([data-bx-surface]),:host(:not([data-bx-surface])){background:color-mix(in srgb,var(--bx-glass-surface) calc(max(.35,var(--bx-glass-opacity, .24))*100%),transparent)}}:host([data-bx-surface]).bx-btn-is-elevated,:host(:not([data-bx-surface])).bx-btn-is-elevated{--bx-glass-shadow: 0 4px 8px -1px rgba(0, 0, 0, .15), 0 2px 4px -2px rgba(0, 0, 0, .12)}:host([data-bx-surface]).bx-btn-icon,:host([data-bx-surface]).bx-btn-fab,:host([data-bx-surface]).bx-btn-mini-fab,:host(:not([data-bx-surface])).bx-btn-icon,:host(:not([data-bx-surface])).bx-btn-fab,:host(:not([data-bx-surface])).bx-btn-mini-fab{border-radius:var(--bx-glass-radius, 9999px)}:host([data-bx-surface]).bx-btn-extended-fab,:host(:not([data-bx-surface])).bx-btn-extended-fab{border-radius:var(--bx-glass-radius, 9999px)}:host([data-bx-surface]).bx-btn-color-danger,:host(:not([data-bx-surface])).bx-btn-color-danger{--bx-glass-text: var(--bx-text-danger)}:host([data-bx-surface]).bx-btn-color-success,:host(:not([data-bx-surface])).bx-btn-color-success{--bx-glass-text: var(--bx-text-success)}:host([data-bx-surface]).bx-btn-color-info,:host(:not([data-bx-surface])).bx-btn-color-info{--bx-glass-text: var(--bx-text-info)}:host([data-bx-surface]).bx-btn-color-warn,:host(:not([data-bx-surface])).bx-btn-color-warn{--bx-glass-text: var(--bx-text-warn)}:host([data-bx-surface]):focus-visible,:host(:not([data-bx-surface])):focus-visible{outline:2px solid var(--bx-border-brand, currentColor);outline-offset:-2px}:host([data-bx-surface]).bx-btn-tonal:not(.bx-btn-non-interactive):hover,:host([data-bx-surface]).bx-btn-tonal:not(.bx-btn-non-interactive):active,:host(:not([data-bx-surface])).bx-btn-tonal:not(.bx-btn-non-interactive):hover,:host(:not([data-bx-surface])).bx-btn-tonal:not(.bx-btn-non-interactive):active{opacity:1}:host([data-bx-surface]):hover:not(.bx-btn-non-interactive){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-strong)}:host([data-bx-surface]):active:not(.bx-btn-non-interactive){--bx-glass-shadow: inset 0 1px 3px rgb(0 0 0 / 12%)}:host(:is([aria-pressed=true],[aria-selected=true],[aria-expanded=true],[aria-current]:not([aria-current=false],[aria-current=\"\"])):not(.bx-btn-non-interactive,[aria-disabled=true])){--bx-glass-surface: var(--btn-selected-surface, var(--bx-bg-neutral-active))}:host(.bx-btn-tonal){--bx-glass-surface: var(--btn-theme-tonal-bg);--btn-selected-surface: var(--btn-theme-tonal-bg)}:host(.bx-btn-tonal):hover:not(.bx-btn-non-interactive,[aria-disabled=true]),:host(.bx-btn-tonal):active:not(.bx-btn-non-interactive,[aria-disabled=true]){--bx-glass-surface: var(--btn-theme-tonal-bg)}:host(:is(.bx-btn-filled,.bx-btn-fab,.bx-btn-mini-fab,.bx-btn-extended-fab):not(.bx-btn-is-outlined)){--bx-glass-surface: var(--btn-theme-base);--btn-selected-surface: var(--btn-theme-base);--bx-glass-text: var(--btn-theme-text);--bx-glass-min-opacity: .88}:host(:is(.bx-btn-filled,.bx-btn-fab,.bx-btn-mini-fab,.bx-btn-extended-fab):not(.bx-btn-is-outlined)):hover:not(.bx-btn-non-interactive,[aria-disabled=true]){--bx-glass-surface: var(--btn-theme-hover);--btn-selected-surface: var(--btn-theme-hover)}:host(:is(.bx-btn-filled,.bx-btn-fab,.bx-btn-mini-fab,.bx-btn-extended-fab):not(.bx-btn-is-outlined)):active:not(.bx-btn-non-interactive,[aria-disabled=true]){--bx-glass-surface: var(--btn-theme-active);--btn-selected-surface: var(--btn-theme-active)}:host(.bx-btn-text){background:transparent!important;border:0;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0}:host(.bx-btn-text):hover:not(.bx-btn-non-interactive,[aria-disabled=true]){text-decoration:underline;text-underline-offset:.2em}\n"],
|
|
114
114
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
115
115
|
});
|
|
116
116
|
};
|
|
@@ -136,7 +136,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
136
136
|
"[attr.tabindex]": "disabled() ? \"-1\" : null"
|
|
137
137
|
},
|
|
138
138
|
template: "<span class=\"bx-btn-content-wrapper\">\n <ng-content></ng-content>\n</span>",
|
|
139
|
-
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;outline:none;text-decoration:none;box-sizing:border-box;border:1px solid transparent}:host.bx-btn-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host.bx-btn-non-interactive{cursor:default}:host[disabled],:host[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:none!important}:host.bx-btn-color-primary{--btn-theme-base: var(--bx-primary);--btn-theme-hover: var(--bx-primary-hover);--btn-theme-active: var(--bx-primary-active);--btn-theme-text: var(--bx-on-primary);--btn-theme-tonal-bg: var(--bx-primary-subtle);--btn-theme-tonal-text: var(--bx-text-brand);--btn-theme-border: var(--bx-border-brand)}:host.bx-btn-color-danger{--btn-theme-base: var(--bx-bg-danger);--btn-theme-hover: var(--bx-bg-danger-hover);--btn-theme-active: var(--bx-bg-danger-active);--btn-theme-text: var(--bx-text-danger);--btn-theme-tonal-bg: var(--bx-bg-danger-subtle);--btn-theme-tonal-text: var(--bx-text-danger);--btn-theme-border: var(--bx-border-danger)}:host.bx-btn-color-success{--btn-theme-base: var(--bx-bg-success);--btn-theme-hover: var(--bx-bg-success-hover);--btn-theme-active: var(--bx-bg-success-active);--btn-theme-text: var(--bx-text-success);--btn-theme-tonal-bg: var(--bx-bg-success-subtle);--btn-theme-tonal-text: var(--bx-text-success);--btn-theme-border: var(--bx-border-success)}:host.bx-btn-color-info{--btn-theme-base: var(--bx-bg-info);--btn-theme-hover: var(--bx-bg-info-hover);--btn-theme-active: var(--bx-bg-info-active);--btn-theme-text: var(--bx-text-info);--btn-theme-tonal-bg: var(--bx-bg-info-subtle);--btn-theme-tonal-text: var(--bx-text-info);--btn-theme-border: var(--bx-border-info)}:host.bx-btn-color-warn{--btn-theme-base: var(--bx-bg-warn);--btn-theme-hover: var(--bx-bg-warn-hover);--btn-theme-active: var(--bx-bg-warn-active);--btn-theme-text: var(--bx-text-warn);--btn-theme-tonal-bg: var(--bx-bg-warn-subtle);--btn-theme-tonal-text: var(--bx-text-warn);--btn-theme-border: var(--bx-border-warn)}:host.bx-btn-color-grayscale{--btn-theme-base: var(--bx-bg-element);--btn-theme-hover: var(--bx-bg-element-hover);--btn-theme-active: var(--bx-bg-element-active);--btn-theme-text: var(--bx-text-primary);--btn-theme-tonal-bg: var(--bx-bg-surface-alt);--btn-theme-tonal-text: var(--bx-text-primary);--btn-theme-border: var(--bx-border-strong)}:host.bx-btn-text,:host.bx-btn-filled,:host.bx-btn-tonal{padding:.5rem 1rem;border-radius:.25rem}:host.bx-btn-icon,:host.bx-btn-fab,:host.bx-btn-mini-fab{padding:0;border-radius:9999px}:host.bx-btn-icon .bx-btn-content-wrapper,:host.bx-btn-fab .bx-btn-content-wrapper,:host.bx-btn-mini-fab .bx-btn-content-wrapper{gap:0}:host.bx-btn-icon,:host.bx-btn-mini-fab{width:2.5rem;height:2.5rem}:host.bx-btn-fab{width:3.5rem;height:3.5rem}:host.bx-btn-extended-fab{padding:0 1.5rem;height:3.5rem;border-radius:9999px}:host.bx-btn-is-outlined{border-color:var(--btn-theme-border)}:host.bx-btn-is-elevated{box-shadow:0 4px 8px -1px #00000026,0 2px 4px -2px #0000001f}:host.bx-btn-is-elevated:not(.bx-btn-non-interactive):active{box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a}.bx-btn-content-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;color:inherit}:host([data-bx-surface]),:host(:not([data-bx-surface])){border-radius:var(--bx-glass-radius, .5rem);--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-text: var(--btn-theme-tonal-text, var(--bx-text-primary));--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: .35;border-color:var(--bx-glass-edge);--bx-glass-shadow: 0 2px 4px rgb(0 0 0 /
|
|
139
|
+
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;outline:none;text-decoration:none;box-sizing:border-box;border:1px solid transparent}:host.bx-btn-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host.bx-btn-non-interactive{cursor:default}:host[disabled],:host[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:none!important}:host.bx-btn-color-primary{--btn-theme-base: var(--bx-primary);--btn-theme-hover: var(--bx-primary-hover);--btn-theme-active: var(--bx-primary-active);--btn-theme-text: var(--bx-on-primary);--btn-theme-tonal-bg: var(--bx-primary-subtle);--btn-theme-tonal-text: var(--bx-text-brand);--btn-theme-border: var(--bx-border-brand)}:host.bx-btn-color-danger{--btn-theme-base: var(--bx-bg-danger);--btn-theme-hover: var(--bx-bg-danger-hover);--btn-theme-active: var(--bx-bg-danger-active);--btn-theme-text: var(--bx-text-danger);--btn-theme-tonal-bg: var(--bx-bg-danger-subtle);--btn-theme-tonal-text: var(--bx-text-danger);--btn-theme-border: var(--bx-border-danger)}:host.bx-btn-color-success{--btn-theme-base: var(--bx-bg-success);--btn-theme-hover: var(--bx-bg-success-hover);--btn-theme-active: var(--bx-bg-success-active);--btn-theme-text: var(--bx-text-success);--btn-theme-tonal-bg: var(--bx-bg-success-subtle);--btn-theme-tonal-text: var(--bx-text-success);--btn-theme-border: var(--bx-border-success)}:host.bx-btn-color-info{--btn-theme-base: var(--bx-bg-info);--btn-theme-hover: var(--bx-bg-info-hover);--btn-theme-active: var(--bx-bg-info-active);--btn-theme-text: var(--bx-text-info);--btn-theme-tonal-bg: var(--bx-bg-info-subtle);--btn-theme-tonal-text: var(--bx-text-info);--btn-theme-border: var(--bx-border-info)}:host.bx-btn-color-warn{--btn-theme-base: var(--bx-bg-warn);--btn-theme-hover: var(--bx-bg-warn-hover);--btn-theme-active: var(--bx-bg-warn-active);--btn-theme-text: var(--bx-text-warn);--btn-theme-tonal-bg: var(--bx-bg-warn-subtle);--btn-theme-tonal-text: var(--bx-text-warn);--btn-theme-border: var(--bx-border-warn)}:host.bx-btn-color-grayscale{--btn-theme-base: var(--bx-bg-element);--btn-theme-hover: var(--bx-bg-element-hover);--btn-theme-active: var(--bx-bg-element-active);--btn-theme-text: var(--bx-text-primary);--btn-theme-tonal-bg: var(--bx-bg-surface-alt);--btn-theme-tonal-text: var(--bx-text-primary);--btn-theme-border: var(--bx-border-strong)}:host.bx-btn-text,:host.bx-btn-filled,:host.bx-btn-tonal{padding:.5rem 1rem;border-radius:.25rem}:host.bx-btn-icon,:host.bx-btn-fab,:host.bx-btn-mini-fab{padding:0;border-radius:9999px}:host.bx-btn-icon .bx-btn-content-wrapper,:host.bx-btn-fab .bx-btn-content-wrapper,:host.bx-btn-mini-fab .bx-btn-content-wrapper{gap:0}:host.bx-btn-icon,:host.bx-btn-mini-fab{width:2.5rem;height:2.5rem}:host.bx-btn-fab{width:3.5rem;height:3.5rem}:host.bx-btn-extended-fab{padding:0 1.5rem;height:3.5rem;border-radius:9999px}:host.bx-btn-is-outlined{border-color:var(--btn-theme-border)}:host.bx-btn-is-elevated{box-shadow:0 4px 8px -1px #00000026,0 2px 4px -2px #0000001f}:host.bx-btn-is-elevated:not(.bx-btn-non-interactive):active{box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a}.bx-btn-content-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;color:inherit}:host([data-bx-surface]),:host(:not([data-bx-surface])){border-radius:var(--bx-glass-radius, .5rem);--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-text: var(--btn-theme-tonal-text, var(--bx-text-primary));--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: .35;border-color:var(--bx-glass-edge);--bx-glass-shadow: 0 2px 4px rgb(0 0 0 / 8%);color:var(--bx-glass-text);background:var(--bx-glass-surface)}@supports (background: color-mix(in srgb,white,transparent)){:host([data-bx-surface]),:host(:not([data-bx-surface])){background:color-mix(in srgb,var(--bx-glass-surface) calc(max(.35,var(--bx-glass-opacity, .24))*100%),transparent)}}:host([data-bx-surface]).bx-btn-is-elevated,:host(:not([data-bx-surface])).bx-btn-is-elevated{--bx-glass-shadow: 0 4px 8px -1px rgba(0, 0, 0, .15), 0 2px 4px -2px rgba(0, 0, 0, .12)}:host([data-bx-surface]).bx-btn-icon,:host([data-bx-surface]).bx-btn-fab,:host([data-bx-surface]).bx-btn-mini-fab,:host(:not([data-bx-surface])).bx-btn-icon,:host(:not([data-bx-surface])).bx-btn-fab,:host(:not([data-bx-surface])).bx-btn-mini-fab{border-radius:var(--bx-glass-radius, 9999px)}:host([data-bx-surface]).bx-btn-extended-fab,:host(:not([data-bx-surface])).bx-btn-extended-fab{border-radius:var(--bx-glass-radius, 9999px)}:host([data-bx-surface]).bx-btn-color-danger,:host(:not([data-bx-surface])).bx-btn-color-danger{--bx-glass-text: var(--bx-text-danger)}:host([data-bx-surface]).bx-btn-color-success,:host(:not([data-bx-surface])).bx-btn-color-success{--bx-glass-text: var(--bx-text-success)}:host([data-bx-surface]).bx-btn-color-info,:host(:not([data-bx-surface])).bx-btn-color-info{--bx-glass-text: var(--bx-text-info)}:host([data-bx-surface]).bx-btn-color-warn,:host(:not([data-bx-surface])).bx-btn-color-warn{--bx-glass-text: var(--bx-text-warn)}:host([data-bx-surface]):focus-visible,:host(:not([data-bx-surface])):focus-visible{outline:2px solid var(--bx-border-brand, currentColor);outline-offset:-2px}:host([data-bx-surface]).bx-btn-tonal:not(.bx-btn-non-interactive):hover,:host([data-bx-surface]).bx-btn-tonal:not(.bx-btn-non-interactive):active,:host(:not([data-bx-surface])).bx-btn-tonal:not(.bx-btn-non-interactive):hover,:host(:not([data-bx-surface])).bx-btn-tonal:not(.bx-btn-non-interactive):active{opacity:1}:host([data-bx-surface]):hover:not(.bx-btn-non-interactive){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-strong)}:host([data-bx-surface]):active:not(.bx-btn-non-interactive){--bx-glass-shadow: inset 0 1px 3px rgb(0 0 0 / 12%)}:host(:is([aria-pressed=true],[aria-selected=true],[aria-expanded=true],[aria-current]:not([aria-current=false],[aria-current=\"\"])):not(.bx-btn-non-interactive,[aria-disabled=true])){--bx-glass-surface: var(--btn-selected-surface, var(--bx-bg-neutral-active))}:host(.bx-btn-tonal){--bx-glass-surface: var(--btn-theme-tonal-bg);--btn-selected-surface: var(--btn-theme-tonal-bg)}:host(.bx-btn-tonal):hover:not(.bx-btn-non-interactive,[aria-disabled=true]),:host(.bx-btn-tonal):active:not(.bx-btn-non-interactive,[aria-disabled=true]){--bx-glass-surface: var(--btn-theme-tonal-bg)}:host(:is(.bx-btn-filled,.bx-btn-fab,.bx-btn-mini-fab,.bx-btn-extended-fab):not(.bx-btn-is-outlined)){--bx-glass-surface: var(--btn-theme-base);--btn-selected-surface: var(--btn-theme-base);--bx-glass-text: var(--btn-theme-text);--bx-glass-min-opacity: .88}:host(:is(.bx-btn-filled,.bx-btn-fab,.bx-btn-mini-fab,.bx-btn-extended-fab):not(.bx-btn-is-outlined)):hover:not(.bx-btn-non-interactive,[aria-disabled=true]){--bx-glass-surface: var(--btn-theme-hover);--btn-selected-surface: var(--btn-theme-hover)}:host(:is(.bx-btn-filled,.bx-btn-fab,.bx-btn-mini-fab,.bx-btn-extended-fab):not(.bx-btn-is-outlined)):active:not(.bx-btn-non-interactive,[aria-disabled=true]){--bx-glass-surface: var(--btn-theme-active);--btn-selected-surface: var(--btn-theme-active)}:host(.bx-btn-text){background:transparent!important;border:0;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0}:host(.bx-btn-text):hover:not(.bx-btn-non-interactive,[aria-disabled=true]){text-decoration:underline;text-underline-offset:.2em}\n"]
|
|
140
140
|
}]
|
|
141
141
|
}],
|
|
142
142
|
propDecorators: {
|
|
@@ -201,15 +201,17 @@ var BxError = class BxError {
|
|
|
201
201
|
ngImport: i0,
|
|
202
202
|
type: BxError,
|
|
203
203
|
deps: [],
|
|
204
|
-
target: i0.ɵɵFactoryTarget.
|
|
204
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
205
205
|
});
|
|
206
|
-
static
|
|
206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
207
207
|
minVersion: "14.0.0",
|
|
208
208
|
version: "22.2.3",
|
|
209
209
|
type: BxError,
|
|
210
210
|
isStandalone: true,
|
|
211
211
|
selector: "bx-error",
|
|
212
|
-
ngImport: i0
|
|
212
|
+
ngImport: i0,
|
|
213
|
+
template: "<ng-content />",
|
|
214
|
+
isInline: true
|
|
213
215
|
});
|
|
214
216
|
};
|
|
215
217
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -218,10 +220,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
218
220
|
ngImport: i0,
|
|
219
221
|
type: BxError,
|
|
220
222
|
decorators: [{
|
|
221
|
-
type:
|
|
223
|
+
type: Component,
|
|
222
224
|
args: [{
|
|
223
225
|
selector: "bx-error",
|
|
224
|
-
standalone: true
|
|
226
|
+
standalone: true,
|
|
227
|
+
template: "<ng-content />"
|
|
225
228
|
}]
|
|
226
229
|
}]
|
|
227
230
|
});
|
|
@@ -510,17 +513,15 @@ var Checkbox = class Checkbox extends BxBaseControl {
|
|
|
510
513
|
usesInheritance: true,
|
|
511
514
|
ngImport: i0,
|
|
512
515
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"checkbox\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\" [checked]=\"internalValue() === true\"\n (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n\n <div class=\"bx-checkbox-box\" bxSurface [class.is-checked]=\"internalValue() === true\" [class.is-invalid]=\"!!errorMessage\">\n @if (internalValue() === true) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n\n @if (resolvedLabel()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n </label>\n</bx-form-field>",
|
|
513
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:
|
|
516
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-checkbox-box{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;line-height:0;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:var(--bx-rounded-sm);color:var(--bx-text-primary);transition:background-color .15s ease,border-color .15s ease}.bx-checkbox-box.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-checkbox-box.is-checked{background-color:var(--bx-primary);border-color:var(--bx-primary)}.bx-checkbox-box.is-checked.is-invalid{background-color:var(--bx-bg-danger);border-color:var(--bx-border-danger)}input:focus-visible~.bx-checkbox-box{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-checkbox-box[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}\n"],
|
|
514
517
|
dependencies: [
|
|
515
518
|
{
|
|
516
519
|
kind: "directive",
|
|
517
520
|
type: BxSurfaceDirective,
|
|
518
521
|
selector: "[bxSurface]",
|
|
519
522
|
inputs: [
|
|
520
|
-
"bxSurface",
|
|
521
523
|
"bxSurfaceInteractive",
|
|
522
|
-
"
|
|
523
|
-
"bxSurfaceTint",
|
|
524
|
+
"bxSurfaceGlassiness",
|
|
524
525
|
"bxSurfaceEmission",
|
|
525
526
|
"bxSurfaceFocusEmission",
|
|
526
527
|
"bxReducedTransparency"
|
|
@@ -581,7 +582,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
581
582
|
],
|
|
582
583
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
583
584
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"checkbox\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\" [checked]=\"internalValue() === true\"\n (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n\n <div class=\"bx-checkbox-box\" bxSurface [class.is-checked]=\"internalValue() === true\" [class.is-invalid]=\"!!errorMessage\">\n @if (internalValue() === true) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n\n @if (resolvedLabel()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n </label>\n</bx-form-field>",
|
|
584
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:
|
|
585
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-checkbox-box{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;line-height:0;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:var(--bx-rounded-sm);color:var(--bx-text-primary);transition:background-color .15s ease,border-color .15s ease}.bx-checkbox-box.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-checkbox-box.is-checked{background-color:var(--bx-primary);border-color:var(--bx-primary)}.bx-checkbox-box.is-checked.is-invalid{background-color:var(--bx-bg-danger);border-color:var(--bx-border-danger)}input:focus-visible~.bx-checkbox-box{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-checkbox-box[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}\n"]
|
|
585
586
|
}]
|
|
586
587
|
}]
|
|
587
588
|
});
|
|
@@ -589,6 +590,14 @@ var InputField = class InputField extends BxBaseControl {
|
|
|
589
590
|
i18n = inject(BX_I18N, { optional: true });
|
|
590
591
|
inputId = computed(() => `bx-input-${uuidv4()}`, ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
|
|
591
592
|
isFocused = signal(false, ...ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []);
|
|
593
|
+
isSpinDownDisabled = computed(() => {
|
|
594
|
+
const min = this.min();
|
|
595
|
+
return this.isDisabled() || min !== void 0 && (Number(this.internalValue()) || 0) <= min;
|
|
596
|
+
}, ...ngDevMode ? [{ debugName: "isSpinDownDisabled" }] : /* istanbul ignore next */ []);
|
|
597
|
+
isSpinUpDisabled = computed(() => {
|
|
598
|
+
const max = this.max();
|
|
599
|
+
return this.isDisabled() || max !== void 0 && (Number(this.internalValue()) || 0) >= max;
|
|
600
|
+
}, ...ngDevMode ? [{ debugName: "isSpinUpDisabled" }] : /* istanbul ignore next */ []);
|
|
592
601
|
isFloating = computed(() => {
|
|
593
602
|
const val = this.internalValue();
|
|
594
603
|
const hasValue = val !== null && val !== void 0 && val !== "";
|
|
@@ -615,12 +624,12 @@ var InputField = class InputField extends BxBaseControl {
|
|
|
615
624
|
min = input(void 0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
|
|
616
625
|
max = input(void 0, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
|
|
617
626
|
step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
|
|
627
|
+
spinTimeout;
|
|
628
|
+
spinInterval;
|
|
618
629
|
constructor() {
|
|
619
630
|
super();
|
|
620
631
|
inject(DestroyRef).onDestroy(() => this.stopSpin());
|
|
621
632
|
}
|
|
622
|
-
spinTimeout;
|
|
623
|
-
spinInterval;
|
|
624
633
|
startSpin(direction, event) {
|
|
625
634
|
event.preventDefault();
|
|
626
635
|
if (this.isDisabled()) return;
|
|
@@ -649,8 +658,10 @@ var InputField = class InputField extends BxBaseControl {
|
|
|
649
658
|
}
|
|
650
659
|
applyStep(direction) {
|
|
651
660
|
let next = (Number(this.internalValue()) || 0) + direction * this.step();
|
|
652
|
-
|
|
653
|
-
|
|
661
|
+
const min = this.min();
|
|
662
|
+
const max = this.max();
|
|
663
|
+
if (min !== void 0 && next < min) next = min;
|
|
664
|
+
if (max !== void 0 && next > max) next = max;
|
|
654
665
|
this.updateValue(next);
|
|
655
666
|
this.markAsTouched();
|
|
656
667
|
}
|
|
@@ -700,18 +711,16 @@ var InputField = class InputField extends BxBaseControl {
|
|
|
700
711
|
},
|
|
701
712
|
usesInheritance: true,
|
|
702
713
|
ngImport: i0,
|
|
703
|
-
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <div class=\"bx-input-wrapper\" bxSurface [class.is-invalid]=\"!!errorMessage\" [class.is-disabled]=\"isDisabled()\"\n [class.has-spinners]=\"type() === 'number'\" [class.is-floating]=\"isFloating()\">\n\n <div class=\"bx-input-container\">\n @if (label()) {\n <label class=\"bx-floating-label\" [attr.for]=\"inputId()\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </label>\n }\n\n <input class=\"bx-native-input\" [attr.id]=\"inputId()\" [attr.type]=\"type()\"\n [attr.placeholder]=\"isFloating() ? resolvedPlaceholder() : ''\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [attr.min]=\"min()\" [attr.max]=\"max()\" [attr.step]=\"step()\"\n [disabled]=\"isDisabled()\" [value]=\"internalValue() ?? ''\" (input)=\"onInput($event)\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n </div>\n\n @if (type() === 'number') {\n <div class=\"bx-spinners-group\">\n <button type=\"button\" class=\"bx-spin-btn\" tabindex=\"-1\"\n [disabled]=\"
|
|
704
|
-
styles: [":host{display:block;width:100%}.bx-input-wrapper{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease}.bx-input-wrapper:hover:not(.is-disabled){background-color:var(--bx-bg-neutral-hover)}.bx-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted}.bx-input-wrapper:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-input-wrapper:focus-within:not(.is-disabled):after{transform:scaleX(1)}.bx-input-wrapper.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-input-wrapper.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-input-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.bx-native-input{width:100%;box-sizing:border-box;padding:1.5rem .75rem .5rem;height:3.85rem;background:transparent;border:none;outline:none;font-family:inherit;font-size:1rem;color:var(--bx-text-heading);z-index:1}.bx-native-input::placeholder{color:var(--bx-text-secondary)}.bx-native-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-input{appearance:textfield
|
|
714
|
+
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <div class=\"bx-input-wrapper\" bxSurface [class.is-invalid]=\"!!errorMessage\" [class.is-disabled]=\"isDisabled()\"\n [class.has-spinners]=\"type() === 'number'\" [class.is-floating]=\"isFloating()\">\n\n <div class=\"bx-input-container\">\n @if (label()) {\n <label class=\"bx-floating-label\" [attr.for]=\"inputId()\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </label>\n }\n\n <input class=\"bx-native-input\" [attr.id]=\"inputId()\" [attr.type]=\"type()\"\n [attr.placeholder]=\"isFloating() ? resolvedPlaceholder() : ''\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [attr.min]=\"min()\" [attr.max]=\"max()\" [attr.step]=\"step()\"\n [disabled]=\"isDisabled()\" [value]=\"internalValue() ?? ''\" (input)=\"onInput($event)\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n </div>\n\n @if (type() === 'number') {\n <div class=\"bx-spinners-group\">\n <button type=\"button\" class=\"bx-spin-btn\" tabindex=\"-1\"\n [disabled]=\"isSpinDownDisabled()\"\n (mousedown)=\"startSpin(-1, $event)\" (touchstart)=\"startSpin(-1, $event)\" (mouseup)=\"stopSpin()\"\n (mouseleave)=\"stopSpin()\" (touchend)=\"stopSpin()\">\n <bx-icon name=\"minus\" size=\"16\"></bx-icon>\n </button>\n\n <button type=\"button\" class=\"bx-spin-btn\" tabindex=\"-1\"\n [disabled]=\"isSpinUpDisabled()\"\n (mousedown)=\"startSpin(1, $event)\" (touchstart)=\"startSpin(1, $event)\" (mouseup)=\"stopSpin()\"\n (mouseleave)=\"stopSpin()\" (touchend)=\"stopSpin()\">\n <bx-icon name=\"plus\" size=\"16\"></bx-icon>\n </button>\n </div>\n }\n\n </div>\n</bx-form-field>\n",
|
|
715
|
+
styles: [":host{display:block;width:100%}.bx-input-wrapper{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease}.bx-input-wrapper:hover:not(.is-disabled){background-color:var(--bx-bg-neutral-hover)}.bx-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted}.bx-input-wrapper:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-input-wrapper:focus-within:not(.is-disabled):after{transform:scaleX(1)}.bx-input-wrapper.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-input-wrapper.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-input-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.bx-native-input{width:100%;box-sizing:border-box;padding:1.5rem .75rem .5rem;height:3.85rem;background:transparent;border:none;outline:none;font-family:inherit;font-size:1rem;color:var(--bx-text-heading);z-index:1}.bx-native-input::placeholder{color:var(--bx-text-secondary)}.bx-native-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-input{appearance:textfield}.bx-native-input::-webkit-outer-spin-button,.bx-native-input::-webkit-inner-spin-button{appearance:none;margin:0}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-input-wrapper.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-input-wrapper.is-floating:focus-within .bx-floating-label{color:var(--bx-primary)}.bx-input-wrapper.is-invalid .bx-floating-label{color:var(--bx-text-danger)}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-spinners-group{display:flex;align-items:center;align-self:stretch;z-index:1}.bx-spin-btn{display:flex;align-items:center;justify-content:center;width:2.25rem;align-self:stretch;background:transparent;border:none;border-left:1px solid var(--bx-border-subtle);color:var(--bx-text-secondary);cursor:pointer;outline:none;transition:background-color .1s ease,color .1s ease}.bx-spin-btn:hover:not(:disabled){background-color:var(--bx-bg-element-hover);color:var(--bx-text-primary)}.bx-spin-btn:active:not(:disabled){background-color:var(--bx-bg-element-active)}.bx-spin-btn:disabled{cursor:not-allowed;opacity:.3}.bx-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-input-wrapper[data-bx-surface]:after{display:none}.bx-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled),.bx-input-wrapper[data-bx-surface]:focus-visible:not(:disabled),.bx-input-wrapper[data-bx-surface].is-open:not(:disabled){--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-spinners-group{border-radius:inherit;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden}.bx-spin-btn:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}\n"],
|
|
705
716
|
dependencies: [
|
|
706
717
|
{
|
|
707
718
|
kind: "directive",
|
|
708
719
|
type: BxSurfaceDirective,
|
|
709
720
|
selector: "[bxSurface]",
|
|
710
721
|
inputs: [
|
|
711
|
-
"bxSurface",
|
|
712
722
|
"bxSurfaceInteractive",
|
|
713
|
-
"
|
|
714
|
-
"bxSurfaceTint",
|
|
723
|
+
"bxSurfaceGlassiness",
|
|
715
724
|
"bxSurfaceEmission",
|
|
716
725
|
"bxSurfaceFocusEmission",
|
|
717
726
|
"bxReducedTransparency"
|
|
@@ -771,8 +780,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
771
780
|
Icon
|
|
772
781
|
],
|
|
773
782
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
774
|
-
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <div class=\"bx-input-wrapper\" bxSurface [class.is-invalid]=\"!!errorMessage\" [class.is-disabled]=\"isDisabled()\"\n [class.has-spinners]=\"type() === 'number'\" [class.is-floating]=\"isFloating()\">\n\n <div class=\"bx-input-container\">\n @if (label()) {\n <label class=\"bx-floating-label\" [attr.for]=\"inputId()\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </label>\n }\n\n <input class=\"bx-native-input\" [attr.id]=\"inputId()\" [attr.type]=\"type()\"\n [attr.placeholder]=\"isFloating() ? resolvedPlaceholder() : ''\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [attr.min]=\"min()\" [attr.max]=\"max()\" [attr.step]=\"step()\"\n [disabled]=\"isDisabled()\" [value]=\"internalValue() ?? ''\" (input)=\"onInput($event)\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n </div>\n\n @if (type() === 'number') {\n <div class=\"bx-spinners-group\">\n <button type=\"button\" class=\"bx-spin-btn\" tabindex=\"-1\"\n [disabled]=\"
|
|
775
|
-
styles: [":host{display:block;width:100%}.bx-input-wrapper{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease}.bx-input-wrapper:hover:not(.is-disabled){background-color:var(--bx-bg-neutral-hover)}.bx-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted}.bx-input-wrapper:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-input-wrapper:focus-within:not(.is-disabled):after{transform:scaleX(1)}.bx-input-wrapper.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-input-wrapper.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-input-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.bx-native-input{width:100%;box-sizing:border-box;padding:1.5rem .75rem .5rem;height:3.85rem;background:transparent;border:none;outline:none;font-family:inherit;font-size:1rem;color:var(--bx-text-heading);z-index:1}.bx-native-input::placeholder{color:var(--bx-text-secondary)}.bx-native-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-input{appearance:textfield
|
|
783
|
+
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <div class=\"bx-input-wrapper\" bxSurface [class.is-invalid]=\"!!errorMessage\" [class.is-disabled]=\"isDisabled()\"\n [class.has-spinners]=\"type() === 'number'\" [class.is-floating]=\"isFloating()\">\n\n <div class=\"bx-input-container\">\n @if (label()) {\n <label class=\"bx-floating-label\" [attr.for]=\"inputId()\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </label>\n }\n\n <input class=\"bx-native-input\" [attr.id]=\"inputId()\" [attr.type]=\"type()\"\n [attr.placeholder]=\"isFloating() ? resolvedPlaceholder() : ''\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [attr.min]=\"min()\" [attr.max]=\"max()\" [attr.step]=\"step()\"\n [disabled]=\"isDisabled()\" [value]=\"internalValue() ?? ''\" (input)=\"onInput($event)\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n </div>\n\n @if (type() === 'number') {\n <div class=\"bx-spinners-group\">\n <button type=\"button\" class=\"bx-spin-btn\" tabindex=\"-1\"\n [disabled]=\"isSpinDownDisabled()\"\n (mousedown)=\"startSpin(-1, $event)\" (touchstart)=\"startSpin(-1, $event)\" (mouseup)=\"stopSpin()\"\n (mouseleave)=\"stopSpin()\" (touchend)=\"stopSpin()\">\n <bx-icon name=\"minus\" size=\"16\"></bx-icon>\n </button>\n\n <button type=\"button\" class=\"bx-spin-btn\" tabindex=\"-1\"\n [disabled]=\"isSpinUpDisabled()\"\n (mousedown)=\"startSpin(1, $event)\" (touchstart)=\"startSpin(1, $event)\" (mouseup)=\"stopSpin()\"\n (mouseleave)=\"stopSpin()\" (touchend)=\"stopSpin()\">\n <bx-icon name=\"plus\" size=\"16\"></bx-icon>\n </button>\n </div>\n }\n\n </div>\n</bx-form-field>\n",
|
|
784
|
+
styles: [":host{display:block;width:100%}.bx-input-wrapper{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease}.bx-input-wrapper:hover:not(.is-disabled){background-color:var(--bx-bg-neutral-hover)}.bx-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted}.bx-input-wrapper:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-input-wrapper:focus-within:not(.is-disabled):after{transform:scaleX(1)}.bx-input-wrapper.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-input-wrapper.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-input-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.bx-native-input{width:100%;box-sizing:border-box;padding:1.5rem .75rem .5rem;height:3.85rem;background:transparent;border:none;outline:none;font-family:inherit;font-size:1rem;color:var(--bx-text-heading);z-index:1}.bx-native-input::placeholder{color:var(--bx-text-secondary)}.bx-native-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-input{appearance:textfield}.bx-native-input::-webkit-outer-spin-button,.bx-native-input::-webkit-inner-spin-button{appearance:none;margin:0}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-input-wrapper.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-input-wrapper.is-floating:focus-within .bx-floating-label{color:var(--bx-primary)}.bx-input-wrapper.is-invalid .bx-floating-label{color:var(--bx-text-danger)}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-spinners-group{display:flex;align-items:center;align-self:stretch;z-index:1}.bx-spin-btn{display:flex;align-items:center;justify-content:center;width:2.25rem;align-self:stretch;background:transparent;border:none;border-left:1px solid var(--bx-border-subtle);color:var(--bx-text-secondary);cursor:pointer;outline:none;transition:background-color .1s ease,color .1s ease}.bx-spin-btn:hover:not(:disabled){background-color:var(--bx-bg-element-hover);color:var(--bx-text-primary)}.bx-spin-btn:active:not(:disabled){background-color:var(--bx-bg-element-active)}.bx-spin-btn:disabled{cursor:not-allowed;opacity:.3}.bx-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-input-wrapper[data-bx-surface]:after{display:none}.bx-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled),.bx-input-wrapper[data-bx-surface]:focus-visible:not(:disabled),.bx-input-wrapper[data-bx-surface].is-open:not(:disabled){--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-spinners-group{border-radius:inherit;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden}.bx-spin-btn:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}\n"]
|
|
776
785
|
}]
|
|
777
786
|
}],
|
|
778
787
|
ctorParameters: () => [],
|
|
@@ -908,17 +917,15 @@ var Radio = class Radio extends BxBaseControl {
|
|
|
908
917
|
usesInheritance: true,
|
|
909
918
|
ngImport: i0,
|
|
910
919
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"radio\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.name]=\"name() || null\"\n [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\"\n [checked]=\"internalValue() === value()\" (change)=\"onSelect()\" (blur)=\"onBlur()\">\n\n <div class=\"bx-radio-circle\" bxSurface [class.is-checked]=\"internalValue() === value()\"\n [class.is-invalid]=\"!!errorMessage\">\n <div class=\"bx-radio-inner\"></div>\n </div>\n\n @if (resolvedLabel()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n </label>\n</bx-form-field>",
|
|
911
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:
|
|
920
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-radio-circle{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:9999px;transition:background-color .15s ease,border-color .15s ease}.bx-radio-circle.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-radio-circle.is-checked{border-color:var(--bx-primary)}.bx-radio-circle.is-checked.is-invalid{border-color:var(--bx-border-danger)}.bx-radio-circle.is-checked .bx-radio-inner{transform:scale(1)}input:focus-visible~.bx-radio-circle{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-radio-inner{width:.5rem;height:.5rem;background-color:var(--bx-primary);border-radius:9999px;transform:scale(0);transition:transform .2s cubic-bezier(.25,.8,.25,1)}.is-invalid .bx-radio-inner{background-color:var(--bx-bg-danger)}.bx-radio-circle[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-radio-circle[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-brand)}.bx-radio-circle[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-brand)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-primary-hover)}\n"],
|
|
912
921
|
dependencies: [
|
|
913
922
|
{
|
|
914
923
|
kind: "directive",
|
|
915
924
|
type: BxSurfaceDirective,
|
|
916
925
|
selector: "[bxSurface]",
|
|
917
926
|
inputs: [
|
|
918
|
-
"bxSurface",
|
|
919
927
|
"bxSurfaceInteractive",
|
|
920
|
-
"
|
|
921
|
-
"bxSurfaceTint",
|
|
928
|
+
"bxSurfaceGlassiness",
|
|
922
929
|
"bxSurfaceEmission",
|
|
923
930
|
"bxSurfaceFocusEmission",
|
|
924
931
|
"bxReducedTransparency"
|
|
@@ -964,7 +971,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
964
971
|
],
|
|
965
972
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
966
973
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"radio\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.name]=\"name() || null\"\n [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\"\n [checked]=\"internalValue() === value()\" (change)=\"onSelect()\" (blur)=\"onBlur()\">\n\n <div class=\"bx-radio-circle\" bxSurface [class.is-checked]=\"internalValue() === value()\"\n [class.is-invalid]=\"!!errorMessage\">\n <div class=\"bx-radio-inner\"></div>\n </div>\n\n @if (resolvedLabel()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n </label>\n</bx-form-field>",
|
|
967
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:
|
|
974
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-radio-circle{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:9999px;transition:background-color .15s ease,border-color .15s ease}.bx-radio-circle.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-radio-circle.is-checked{border-color:var(--bx-primary)}.bx-radio-circle.is-checked.is-invalid{border-color:var(--bx-border-danger)}.bx-radio-circle.is-checked .bx-radio-inner{transform:scale(1)}input:focus-visible~.bx-radio-circle{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-radio-inner{width:.5rem;height:.5rem;background-color:var(--bx-primary);border-radius:9999px;transform:scale(0);transition:transform .2s cubic-bezier(.25,.8,.25,1)}.is-invalid .bx-radio-inner{background-color:var(--bx-bg-danger)}.bx-radio-circle[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-radio-circle[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-brand)}.bx-radio-circle[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-brand)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-primary-hover)}\n"]
|
|
968
975
|
}]
|
|
969
976
|
}],
|
|
970
977
|
ctorParameters: () => [],
|
|
@@ -1039,17 +1046,15 @@ var SearchInput = class SearchInput extends BxBaseControl {
|
|
|
1039
1046
|
usesInheritance: true,
|
|
1040
1047
|
ngImport: i0,
|
|
1041
1048
|
template: "<bx-form-field [label]=\"label()\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\"\n [required]=\"required()\" [forId]=\"inputId()\">\n\n <div class=\"bx-search-input-wrapper\" bxSurface [class.is-invalid]=\"!!errorMessage\" [class.is-disabled]=\"isDisabled()\">\n <bx-icon class=\"bx-search-icon-left\" name=\"search\" size=\"16\"></bx-icon>\n\n <input #inputElement class=\"bx-native-search-input\" type=\"text\" [attr.id]=\"inputId()\"\n [attr.placeholder]=\"resolvedPlaceholder()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"isDisabled()\" [value]=\"internalValue() || ''\" (input)=\"onInput($event)\" (blur)=\"onBlur()\">\n\n @if (internalValue()) {\n <button type=\"button\" class=\"bx-search-clear-btn\" aria-label=\"Clear search\" [disabled]=\"isDisabled()\" (click)=\"clear()\">\n <bx-icon name=\"x\" size=\"16\"></bx-icon>\n </button>\n }\n </div>\n\n</bx-form-field>",
|
|
1042
|
-
styles: [":host{display:block;width:100%}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within{box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;text-overflow:ellipsis;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-search-clear-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;width:1.5rem;height:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn{transition:color .15s ease}.bx-search-clear-btn:hover{color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled
|
|
1049
|
+
styles: [":host{display:block;width:100%}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within{box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;text-overflow:ellipsis;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-search-clear-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;width:1.5rem;height:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn{transition:color .15s ease}.bx-search-clear-btn:hover{color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled),.bx-search-input-wrapper[data-bx-surface]:focus-visible:not(:disabled),.bx-search-input-wrapper[data-bx-surface].is-open:not(:disabled){--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}\n"],
|
|
1043
1050
|
dependencies: [
|
|
1044
1051
|
{
|
|
1045
1052
|
kind: "directive",
|
|
1046
1053
|
type: BxSurfaceDirective,
|
|
1047
1054
|
selector: "[bxSurface]",
|
|
1048
1055
|
inputs: [
|
|
1049
|
-
"bxSurface",
|
|
1050
1056
|
"bxSurfaceInteractive",
|
|
1051
|
-
"
|
|
1052
|
-
"bxSurfaceTint",
|
|
1057
|
+
"bxSurfaceGlassiness",
|
|
1053
1058
|
"bxSurfaceEmission",
|
|
1054
1059
|
"bxSurfaceFocusEmission",
|
|
1055
1060
|
"bxReducedTransparency"
|
|
@@ -1110,7 +1115,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1110
1115
|
],
|
|
1111
1116
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1112
1117
|
template: "<bx-form-field [label]=\"label()\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\"\n [required]=\"required()\" [forId]=\"inputId()\">\n\n <div class=\"bx-search-input-wrapper\" bxSurface [class.is-invalid]=\"!!errorMessage\" [class.is-disabled]=\"isDisabled()\">\n <bx-icon class=\"bx-search-icon-left\" name=\"search\" size=\"16\"></bx-icon>\n\n <input #inputElement class=\"bx-native-search-input\" type=\"text\" [attr.id]=\"inputId()\"\n [attr.placeholder]=\"resolvedPlaceholder()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"isDisabled()\" [value]=\"internalValue() || ''\" (input)=\"onInput($event)\" (blur)=\"onBlur()\">\n\n @if (internalValue()) {\n <button type=\"button\" class=\"bx-search-clear-btn\" aria-label=\"Clear search\" [disabled]=\"isDisabled()\" (click)=\"clear()\">\n <bx-icon name=\"x\" size=\"16\"></bx-icon>\n </button>\n }\n </div>\n\n</bx-form-field>",
|
|
1113
|
-
styles: [":host{display:block;width:100%}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within{box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;text-overflow:ellipsis;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-search-clear-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;width:1.5rem;height:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn{transition:color .15s ease}.bx-search-clear-btn:hover{color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled
|
|
1118
|
+
styles: [":host{display:block;width:100%}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within{box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;text-overflow:ellipsis;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-search-clear-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;width:1.5rem;height:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn{transition:color .15s ease}.bx-search-clear-btn:hover{color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled),.bx-search-input-wrapper[data-bx-surface]:focus-visible:not(:disabled),.bx-search-input-wrapper[data-bx-surface].is-open:not(:disabled){--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}\n"]
|
|
1114
1119
|
}]
|
|
1115
1120
|
}],
|
|
1116
1121
|
propDecorators: {
|
|
@@ -1187,20 +1192,20 @@ var Select = class Select extends BxBaseControl {
|
|
|
1187
1192
|
const selected = this.resolvedOptions().find((o) => o.value === currentVal);
|
|
1188
1193
|
return selected ? selected.resolvedStr : "";
|
|
1189
1194
|
}, ...ngDevMode ? [{ debugName: "selectedOptionLabel" }] : /* istanbul ignore next */ []);
|
|
1195
|
+
resolvedSearchPlaceholder = computed(() => this.resolveText(this.searchPlaceholder()), ...ngDevMode ? [{ debugName: "resolvedSearchPlaceholder" }] : /* istanbul ignore next */ []);
|
|
1196
|
+
resolvedEmptyMessage = computed(() => this.resolveText(this.emptyMessage()), ...ngDevMode ? [{ debugName: "resolvedEmptyMessage" }] : /* istanbul ignore next */ []);
|
|
1190
1197
|
options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
1191
1198
|
isSearchable = input(false, ...ngDevMode ? [{ debugName: "isSearchable" }] : /* istanbul ignore next */ []);
|
|
1192
1199
|
externalFiltering = input(false, ...ngDevMode ? [{ debugName: "externalFiltering" }] : /* istanbul ignore next */ []);
|
|
1200
|
+
searchPlaceholder = input("Search...", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
|
|
1201
|
+
emptyMessage = input("No results found.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
|
|
1202
|
+
search = output();
|
|
1203
|
+
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
1193
1204
|
transition;
|
|
1194
1205
|
disconnectTheme;
|
|
1195
1206
|
transitionRevision = 0;
|
|
1196
|
-
resolvedSearchPlaceholder = computed(() => this.resolveText(this.searchPlaceholder()), ...ngDevMode ? [{ debugName: "resolvedSearchPlaceholder" }] : /* istanbul ignore next */ []);
|
|
1197
1207
|
focusOnOpen = null;
|
|
1198
|
-
resolvedEmptyMessage = computed(() => this.resolveText(this.emptyMessage()), ...ngDevMode ? [{ debugName: "resolvedEmptyMessage" }] : /* istanbul ignore next */ []);
|
|
1199
1208
|
connectedOverlay;
|
|
1200
|
-
searchPlaceholder = input("Search...", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
|
|
1201
|
-
emptyMessage = input("No results found.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
|
|
1202
|
-
search = output();
|
|
1203
|
-
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
1204
1209
|
searchInputRef;
|
|
1205
1210
|
originRef;
|
|
1206
1211
|
searchSubject = new Subject();
|
|
@@ -1229,7 +1234,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1229
1234
|
this.isPanelAttached.set(true);
|
|
1230
1235
|
const pane = this.connectedOverlay?.overlayRef?.overlayElement;
|
|
1231
1236
|
if (pane) pane.inert = false;
|
|
1232
|
-
|
|
1237
|
+
const transition = this.transition;
|
|
1238
|
+
if (transition) this.zone.runOutsideAngular(() => transition.enter());
|
|
1233
1239
|
}
|
|
1234
1240
|
close() {
|
|
1235
1241
|
this.isOpen.set(false);
|
|
@@ -1238,7 +1244,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1238
1244
|
const pane = this.connectedOverlay?.overlayRef?.overlayElement;
|
|
1239
1245
|
if (pane?.contains(pane.ownerDocument.activeElement)) this.originRef?.nativeElement.focus({ preventScroll: true });
|
|
1240
1246
|
if (pane) pane.inert = true;
|
|
1241
|
-
|
|
1247
|
+
const transition = this.transition;
|
|
1248
|
+
if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
|
|
1242
1249
|
if (revision === this.transitionRevision && !this.isOpen()) this.isPanelAttached.set(false);
|
|
1243
1250
|
}).catch(() => {
|
|
1244
1251
|
if (revision === this.transitionRevision) this.isPanelAttached.set(false);
|
|
@@ -1257,7 +1264,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1257
1264
|
if (!this.a11y.isReducedMotion()) {
|
|
1258
1265
|
this.transition?.destroy();
|
|
1259
1266
|
this.transition = this.zone.runOutsideAngular(() => createGlassTransition(origin, overlay.overlayElement));
|
|
1260
|
-
|
|
1267
|
+
const transition = this.transition;
|
|
1268
|
+
this.zone.runOutsideAngular(() => transition.enter()).catch(() => {
|
|
1261
1269
|
if (revision === this.transitionRevision) {
|
|
1262
1270
|
this.transition?.destroy();
|
|
1263
1271
|
this.transition = void 0;
|
|
@@ -1419,18 +1427,16 @@ var Select = class Select extends BxBaseControl {
|
|
|
1419
1427
|
],
|
|
1420
1428
|
usesInheritance: true,
|
|
1421
1429
|
ngImport: i0,
|
|
1422
|
-
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n [class.is-invalid]=\"!!errorMessage\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\"\n [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\"\n [disabled]=\"isDisabled() || loading()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? inputId() + '-options' : null\">\n\n <div class=\"bx-select-container\">\n @if (label()) {\n <
|
|
1423
|
-
styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease;padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-subtle);border-radius:.25rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{overflow
|
|
1430
|
+
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n [class.is-invalid]=\"!!errorMessage\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\"\n [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\"\n [disabled]=\"isDisabled() || loading()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? inputId() + '-options' : null\">\n\n <div class=\"bx-select-container\">\n @if (label()) {\n <span class=\"bx-floating-label\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </span>\n }\n\n <span class=\"bx-select-value\" [attr.title]=\"selectedOptionLabel() || resolvedPlaceholder()\" [class.is-placeholder]=\"internalValue() === null\">\n @if (internalValue() === null && isFloating()) {\n {{ resolvedPlaceholder() }}\n } @else {\n {{ selectedOptionLabel() }}\n }\n </span>\n </div>\n\n <bx-icon class=\"bx-select-caret\" name=\"chevron-down\" size=\"16\"></bx-icon>\n </button>\n\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n\n <div class=\"bx-select-panel\" bxSurface role=\"listbox\" tabindex=\"0\" [attr.aria-label]=\"resolvedLabel()\" [id]=\"inputId() + '-options'\" (keydown)=\"onPanelKey($event)\">\n\n @if (isSearchable()) {\n <div class=\"bx-select-search-container\">\n <bx-search-input #searchInput [placeholder]=\"resolvedSearchPlaceholder()\"\n (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\">\n </bx-search-input>\n </div>\n }\n\n <div class=\"bx-select-menu-container\">\n @for (option of filteredOptions(); track option.value) {\n\n <bx-menu-item role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" [wrapLabel]=\"true\" (action)=\"selectOption(option)\">\n <div class=\"bx-select-item-inner\">\n <div class=\"bx-select-check-placeholder\">\n @if (internalValue() === option.value) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n <span [title]=\"option.resolvedStr\">{{ option.resolvedStr }}</span>\n </div>\n </bx-menu-item>\n\n } @empty {\n <div class=\"bx-select-empty\">\n <span class=\"bx-empty-text\">{{ resolvedEmptyMessage() }}</span>\n </div>\n }\n </div>\n\n </div>\n </ng-template>\n\n</bx-form-field>\n",
|
|
1431
|
+
styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease;padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-subtle);border-radius:.25rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-primary);transition:color .15s ease-in-out}bx-menu-item:hover .bx-select-check-placeholder{color:currentcolor}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled),.bx-select-trigger[data-bx-surface].is-open:not(:disabled){--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-panel[data-bx-surface]{--bx-glass-min-opacity: .8}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}\n"],
|
|
1424
1432
|
dependencies: [
|
|
1425
1433
|
{
|
|
1426
1434
|
kind: "directive",
|
|
1427
1435
|
type: BxSurfaceDirective,
|
|
1428
1436
|
selector: "[bxSurface]",
|
|
1429
1437
|
inputs: [
|
|
1430
|
-
"bxSurface",
|
|
1431
1438
|
"bxSurfaceInteractive",
|
|
1432
|
-
"
|
|
1433
|
-
"bxSurfaceTint",
|
|
1439
|
+
"bxSurfaceGlassiness",
|
|
1434
1440
|
"bxSurfaceEmission",
|
|
1435
1441
|
"bxSurfaceFocusEmission",
|
|
1436
1442
|
"bxReducedTransparency"
|
|
@@ -1528,6 +1534,7 @@ var Select = class Select extends BxBaseControl {
|
|
|
1528
1534
|
"icon",
|
|
1529
1535
|
"endIcon",
|
|
1530
1536
|
"label",
|
|
1537
|
+
"wrapLabel",
|
|
1531
1538
|
"disabled",
|
|
1532
1539
|
"danger",
|
|
1533
1540
|
"shortcut"
|
|
@@ -1564,8 +1571,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1564
1571
|
SearchInput
|
|
1565
1572
|
],
|
|
1566
1573
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1567
|
-
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n [class.is-invalid]=\"!!errorMessage\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\"\n [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\"\n [disabled]=\"isDisabled() || loading()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? inputId() + '-options' : null\">\n\n <div class=\"bx-select-container\">\n @if (label()) {\n <
|
|
1568
|
-
styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease;padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-subtle);border-radius:.25rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{overflow
|
|
1574
|
+
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n [class.is-invalid]=\"!!errorMessage\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\"\n [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\"\n [disabled]=\"isDisabled() || loading()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? inputId() + '-options' : null\">\n\n <div class=\"bx-select-container\">\n @if (label()) {\n <span class=\"bx-floating-label\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </span>\n }\n\n <span class=\"bx-select-value\" [attr.title]=\"selectedOptionLabel() || resolvedPlaceholder()\" [class.is-placeholder]=\"internalValue() === null\">\n @if (internalValue() === null && isFloating()) {\n {{ resolvedPlaceholder() }}\n } @else {\n {{ selectedOptionLabel() }}\n }\n </span>\n </div>\n\n <bx-icon class=\"bx-select-caret\" name=\"chevron-down\" size=\"16\"></bx-icon>\n </button>\n\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n\n <div class=\"bx-select-panel\" bxSurface role=\"listbox\" tabindex=\"0\" [attr.aria-label]=\"resolvedLabel()\" [id]=\"inputId() + '-options'\" (keydown)=\"onPanelKey($event)\">\n\n @if (isSearchable()) {\n <div class=\"bx-select-search-container\">\n <bx-search-input #searchInput [placeholder]=\"resolvedSearchPlaceholder()\"\n (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\">\n </bx-search-input>\n </div>\n }\n\n <div class=\"bx-select-menu-container\">\n @for (option of filteredOptions(); track option.value) {\n\n <bx-menu-item role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" [wrapLabel]=\"true\" (action)=\"selectOption(option)\">\n <div class=\"bx-select-item-inner\">\n <div class=\"bx-select-check-placeholder\">\n @if (internalValue() === option.value) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n <span [title]=\"option.resolvedStr\">{{ option.resolvedStr }}</span>\n </div>\n </bx-menu-item>\n\n } @empty {\n <div class=\"bx-select-empty\">\n <span class=\"bx-empty-text\">{{ resolvedEmptyMessage() }}</span>\n </div>\n }\n </div>\n\n </div>\n </ng-template>\n\n</bx-form-field>\n",
|
|
1575
|
+
styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease;padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-subtle);border-radius:.25rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-primary);transition:color .15s ease-in-out}bx-menu-item:hover .bx-select-check-placeholder{color:currentcolor}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled),.bx-select-trigger[data-bx-surface].is-open:not(:disabled){--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-panel[data-bx-surface]{--bx-glass-min-opacity: .8}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}\n"]
|
|
1569
1576
|
}]
|
|
1570
1577
|
}],
|
|
1571
1578
|
propDecorators: {
|
|
@@ -1593,10 +1600,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1593
1600
|
required: false
|
|
1594
1601
|
}]
|
|
1595
1602
|
}],
|
|
1596
|
-
connectedOverlay: [{
|
|
1597
|
-
type: ViewChild,
|
|
1598
|
-
args: [CdkConnectedOverlay]
|
|
1599
|
-
}],
|
|
1600
1603
|
searchPlaceholder: [{
|
|
1601
1604
|
type: i0.Input,
|
|
1602
1605
|
args: [{
|
|
@@ -1617,6 +1620,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1617
1620
|
type: i0.Output,
|
|
1618
1621
|
args: ["search"]
|
|
1619
1622
|
}],
|
|
1623
|
+
connectedOverlay: [{
|
|
1624
|
+
type: ViewChild,
|
|
1625
|
+
args: [CdkConnectedOverlay]
|
|
1626
|
+
}],
|
|
1620
1627
|
searchInputRef: [{
|
|
1621
1628
|
type: ViewChild,
|
|
1622
1629
|
args: ["searchInput"]
|
|
@@ -1660,17 +1667,15 @@ var SlideToggle = class SlideToggle extends BxBaseControl {
|
|
|
1660
1667
|
usesInheritance: true,
|
|
1661
1668
|
ngImport: i0,
|
|
1662
1669
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"checkbox\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\" [checked]=\"internalValue() === true\"\n (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n\n <div class=\"bx-slide-toggle-track\" bxSurface [class.is-checked]=\"internalValue() === true\" [class.is-invalid]=\"!!errorMessage\">\n <div class=\"bx-slide-toggle-thumb\"></div>\n </div>\n\n @if (resolvedLabel() || tooltip()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n\n\n </label>\n\n</bx-form-field>",
|
|
1663
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:
|
|
1670
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary)}.bx-inline-required{color:var(--bx-text-danger)}.bx-inline-tooltip-trigger{position:relative;display:inline-flex;color:var(--bx-text-secondary);cursor:help;outline:none}.bx-inline-tooltip-trigger:hover,.bx-inline-tooltip-trigger:focus-visible{color:var(--bx-text-brand)}.bx-inline-tooltip-trigger bx-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bx-slide-toggle-track{position:relative;width:42px;height:24px;background-color:var(--bx-border-strong);border-radius:9999px;transition:background-color .2s ease,border-color .2s ease}.bx-slide-toggle-track.is-invalid{background-color:var(--bx-bg-danger-subtle);box-shadow:inset 0 0 0 2px var(--bx-border-danger)}.bx-slide-toggle-track.is-checked{background-color:var(--bx-primary)}.bx-slide-toggle-track.is-checked.is-invalid{background-color:var(--bx-bg-danger)}.bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{transform:translate(18px)}input:focus-visible~.bx-slide-toggle-track{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(150deg,#ffffff,#dce1e7);border:1px solid rgba(255,255,255,.7);box-sizing:border-box;border-radius:9999px;transition:transform .2s cubic-bezier(.25,.8,.25,1);box-shadow:var(--bx-shadow-sm)}.bx-slide-toggle-track[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-slide-toggle-track[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-brand)}.bx-slide-toggle-track[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-brand)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-primary-hover)}@media(forced-colors:active){.bx-slide-toggle-thumb{background:ButtonText}.is-checked .bx-slide-toggle-thumb{background:Highlight}}.bx-field-tooltip-trigger,.bx-inline-tooltip-trigger{border:0;padding:.25rem;background:transparent;color:var(--bx-text-secondary);cursor:help}\n"],
|
|
1664
1671
|
dependencies: [
|
|
1665
1672
|
{
|
|
1666
1673
|
kind: "directive",
|
|
1667
1674
|
type: BxSurfaceDirective,
|
|
1668
1675
|
selector: "[bxSurface]",
|
|
1669
1676
|
inputs: [
|
|
1670
|
-
"bxSurface",
|
|
1671
1677
|
"bxSurfaceInteractive",
|
|
1672
|
-
"
|
|
1673
|
-
"bxSurfaceTint",
|
|
1678
|
+
"bxSurfaceGlassiness",
|
|
1674
1679
|
"bxSurfaceEmission",
|
|
1675
1680
|
"bxSurfaceFocusEmission",
|
|
1676
1681
|
"bxReducedTransparency"
|
|
@@ -1716,7 +1721,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1716
1721
|
],
|
|
1717
1722
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1718
1723
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"checkbox\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\" [checked]=\"internalValue() === true\"\n (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n\n <div class=\"bx-slide-toggle-track\" bxSurface [class.is-checked]=\"internalValue() === true\" [class.is-invalid]=\"!!errorMessage\">\n <div class=\"bx-slide-toggle-thumb\"></div>\n </div>\n\n @if (resolvedLabel() || tooltip()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n\n\n </label>\n\n</bx-form-field>",
|
|
1719
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:
|
|
1724
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary)}.bx-inline-required{color:var(--bx-text-danger)}.bx-inline-tooltip-trigger{position:relative;display:inline-flex;color:var(--bx-text-secondary);cursor:help;outline:none}.bx-inline-tooltip-trigger:hover,.bx-inline-tooltip-trigger:focus-visible{color:var(--bx-text-brand)}.bx-inline-tooltip-trigger bx-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bx-slide-toggle-track{position:relative;width:42px;height:24px;background-color:var(--bx-border-strong);border-radius:9999px;transition:background-color .2s ease,border-color .2s ease}.bx-slide-toggle-track.is-invalid{background-color:var(--bx-bg-danger-subtle);box-shadow:inset 0 0 0 2px var(--bx-border-danger)}.bx-slide-toggle-track.is-checked{background-color:var(--bx-primary)}.bx-slide-toggle-track.is-checked.is-invalid{background-color:var(--bx-bg-danger)}.bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{transform:translate(18px)}input:focus-visible~.bx-slide-toggle-track{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(150deg,#ffffff,#dce1e7);border:1px solid rgba(255,255,255,.7);box-sizing:border-box;border-radius:9999px;transition:transform .2s cubic-bezier(.25,.8,.25,1);box-shadow:var(--bx-shadow-sm)}.bx-slide-toggle-track[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-slide-toggle-track[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-brand)}.bx-slide-toggle-track[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-brand)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-primary-hover)}@media(forced-colors:active){.bx-slide-toggle-thumb{background:ButtonText}.is-checked .bx-slide-toggle-thumb{background:Highlight}}.bx-field-tooltip-trigger,.bx-inline-tooltip-trigger{border:0;padding:.25rem;background:transparent;color:var(--bx-text-secondary);cursor:help}\n"]
|
|
1720
1725
|
}]
|
|
1721
1726
|
}]
|
|
1722
1727
|
});
|
|
@@ -1787,7 +1792,6 @@ var SliderDirective = class SliderDirective {
|
|
|
1787
1792
|
this.shell.style.setProperty("--bx-slider-position", position);
|
|
1788
1793
|
if (this.thumb) refreshGlassLighting(this.thumb);
|
|
1789
1794
|
}
|
|
1790
|
-
this.shell.classList.toggle("is-disabled", input.disabled);
|
|
1791
1795
|
}
|
|
1792
1796
|
}
|
|
1793
1797
|
static ɵfac = i0.ɵɵngDeclareFactory({
|