@filip.mazev/blocks 1.4.13 → 1.4.15
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 +5 -5
- package/core/styles/_a11y.scss +1 -1
- package/core/styles/_index.scss +3 -9
- package/core/styles/_palettes.scss +54 -10
- package/core/styles/themes/_azure-ember-theme.scss +4 -0
- package/core/styles/themes/_brick-rose-cyan-theme.scss +4 -0
- package/core/styles/themes/_carbon-cobalt-theme.scss +4 -0
- package/effects/effects.css +120 -8
- package/fesm2022/filip.mazev-blocks-core.mjs +20 -31
- package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs +167 -46
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-forms.mjs +12 -12
- package/fesm2022/filip.mazev-blocks-forms.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks.mjs +1 -1
- package/fesm2022/filip.mazev-blocks.mjs.map +1 -1
- package/package.json +1 -1
- package/schematics/ng-add/index.d.ts +1 -10
- package/schematics/ng-add/index.js +4 -13
- package/schematics/ng-add/schema.json +11 -17
- package/types/filip.mazev-blocks-core.d.ts +4 -13
- package/types/filip.mazev-blocks-effects-runtime.d.ts +2 -0
- package/types/filip.mazev-blocks.d.ts +1 -1
- package/core/styles/themes/_azure-coral-theme.scss +0 -4
- package/core/styles/themes/_blue-theme.scss +0 -5
- package/core/styles/themes/_graphite-sky-blue-theme.scss +0 -19
- package/core/styles/themes/_green-theme.scss +0 -5
- package/core/styles/themes/_orange-theme.scss +0 -5
- package/core/styles/themes/_purple-theme.scss +0 -5
- package/core/styles/themes/_red-theme.scss +0 -5
- package/core/styles/themes/_scarlet-cyan-theme.scss +0 -4
- package/core/styles/themes/_white-theme.scss +0 -5
|
@@ -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:
|
|
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: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-hover-text: var(--bx-on-primary-hover);--btn-theme-active-text: var(--bx-on-primary-active);--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-accent{--btn-theme-base: var(--bx-accent);--btn-theme-hover: var(--bx-accent-hover);--btn-theme-active: var(--bx-accent-active);--btn-theme-text: var(--bx-on-accent);--btn-theme-hover-text: var(--bx-on-accent-hover);--btn-theme-active-text: var(--bx-on-accent-active);--btn-theme-tonal-bg: var(--bx-accent-subtle);--btn-theme-tonal-text: var(--bx-text-accent);--btn-theme-border: var(--bx-border-accent)}: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: 0;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(var(--bx-glass-min-opacity, 0),var(--bx-glass-opacity, var(--bx-glass-material-opacity, .5)))*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(--btn-theme-border, 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: 1}: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);--bx-glass-text: var(--btn-theme-hover-text, var(--btn-theme-text))}: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);--bx-glass-text: var(--btn-theme-active-text, var(--btn-theme-text))}: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:
|
|
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: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-hover-text: var(--bx-on-primary-hover);--btn-theme-active-text: var(--bx-on-primary-active);--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-accent{--btn-theme-base: var(--bx-accent);--btn-theme-hover: var(--bx-accent-hover);--btn-theme-active: var(--bx-accent-active);--btn-theme-text: var(--bx-on-accent);--btn-theme-hover-text: var(--bx-on-accent-hover);--btn-theme-active-text: var(--bx-on-accent-active);--btn-theme-tonal-bg: var(--bx-accent-subtle);--btn-theme-tonal-text: var(--bx-text-accent);--btn-theme-border: var(--bx-border-accent)}: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: 0;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(var(--bx-glass-min-opacity, 0),var(--bx-glass-opacity, var(--bx-glass-material-opacity, .5)))*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(--btn-theme-border, 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: 1}: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);--bx-glass-text: var(--btn-theme-hover-text, var(--btn-theme-text))}: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);--bx-glass-text: var(--btn-theme-active-text, var(--btn-theme-text))}: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: {
|
|
@@ -517,7 +517,7 @@ var Checkbox = class Checkbox extends BxBaseControl {
|
|
|
517
517
|
usesInheritance: true,
|
|
518
518
|
ngImport: i0,
|
|
519
519
|
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 [bxSurfaceEmission]=\"errorMessage ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\" [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>",
|
|
520
|
-
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:
|
|
520
|
+
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: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-accent);border-color:var(--bx-accent);color:var(--bx-on-accent)}.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-accent-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-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-on-accent)}.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)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid).is-checked{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent)}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}\n"],
|
|
521
521
|
dependencies: [
|
|
522
522
|
{
|
|
523
523
|
kind: "directive",
|
|
@@ -586,7 +586,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
586
586
|
],
|
|
587
587
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
588
588
|
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 [bxSurfaceEmission]=\"errorMessage ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\" [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>",
|
|
589
|
-
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:
|
|
589
|
+
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: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-accent);border-color:var(--bx-accent);color:var(--bx-on-accent)}.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-accent-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-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-on-accent)}.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)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid).is-checked{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent)}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}\n"]
|
|
590
590
|
}]
|
|
591
591
|
}]
|
|
592
592
|
});
|
|
@@ -716,7 +716,7 @@ var InputField = class InputField extends BxBaseControl {
|
|
|
716
716
|
usesInheritance: true,
|
|
717
717
|
ngImport: i0,
|
|
718
718
|
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",
|
|
719
|
-
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)
|
|
719
|
+
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)}.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"],
|
|
720
720
|
dependencies: [
|
|
721
721
|
{
|
|
722
722
|
kind: "directive",
|
|
@@ -785,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
785
785
|
],
|
|
786
786
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
787
787
|
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",
|
|
788
|
-
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)
|
|
788
|
+
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)}.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"]
|
|
789
789
|
}]
|
|
790
790
|
}],
|
|
791
791
|
ctorParameters: () => [],
|
|
@@ -921,7 +921,7 @@ var Radio = class Radio extends BxBaseControl {
|
|
|
921
921
|
usesInheritance: true,
|
|
922
922
|
ngImport: i0,
|
|
923
923
|
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 [bxSurfaceEmission]=\"errorMessage ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\" [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>",
|
|
924
|
-
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:
|
|
924
|
+
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: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-accent)}.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-accent-subtle)}.bx-radio-inner{width:.5rem;height:.5rem;background-color:var(--bx-on-accent);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-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-text-accent)}.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-accent)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-accent-hover)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-color:var(--bx-accent-hover)}.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-accent-subtle);border-top-color:var(--bx-accent);border-inline-color:var(--bx-border-accent);border-bottom-color:var(--bx-border-accent)}.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent);background-color:var(--bx-accent)}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner,:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-image:none!important;border-color:ButtonText}}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}\n"],
|
|
925
925
|
dependencies: [
|
|
926
926
|
{
|
|
927
927
|
kind: "directive",
|
|
@@ -975,7 +975,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
975
975
|
],
|
|
976
976
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
977
977
|
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 [bxSurfaceEmission]=\"errorMessage ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\" [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>",
|
|
978
|
-
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:
|
|
978
|
+
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: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-accent)}.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-accent-subtle)}.bx-radio-inner{width:.5rem;height:.5rem;background-color:var(--bx-on-accent);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-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-text-accent)}.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-accent)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-accent-hover)}.bx-inline-wrapper:not(.is-disabled):hover .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-color:var(--bx-accent-hover)}.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-accent-subtle);border-top-color:var(--bx-accent);border-inline-color:var(--bx-border-accent);border-bottom-color:var(--bx-border-accent)}.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent);background-color:var(--bx-accent)}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner,:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid).is-checked .bx-radio-inner{background-image:none!important;border-color:ButtonText}}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-radio-circle[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}\n"]
|
|
979
979
|
}]
|
|
980
980
|
}],
|
|
981
981
|
ctorParameters: () => [],
|
|
@@ -1452,7 +1452,7 @@ var Select = class Select extends BxBaseControl {
|
|
|
1452
1452
|
usesInheritance: true,
|
|
1453
1453
|
ngImport: i0,
|
|
1454
1454
|
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 [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\"\n [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n\n <div class=\"bx-select-panel\" data-bx-surface=\"solid\" 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 <button type=\"button\" class=\"bx-select-option\" role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" (click)=\"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 </button>\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",
|
|
1455
|
-
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);
|
|
1455
|
+
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);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-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;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{min-height:0;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-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.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-text-accent)}.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-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.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-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"],
|
|
1456
1456
|
dependencies: [
|
|
1457
1457
|
{
|
|
1458
1458
|
kind: "directive",
|
|
@@ -1580,7 +1580,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1580
1580
|
],
|
|
1581
1581
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1582
1582
|
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 [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\"\n [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n\n <div class=\"bx-select-panel\" data-bx-surface=\"solid\" 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 <button type=\"button\" class=\"bx-select-option\" role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" (click)=\"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 </button>\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",
|
|
1583
|
-
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);
|
|
1583
|
+
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);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-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;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{min-height:0;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-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.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-text-accent)}.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-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.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-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"]
|
|
1584
1584
|
}]
|
|
1585
1585
|
}],
|
|
1586
1586
|
propDecorators: {
|
|
@@ -1675,7 +1675,7 @@ var SlideToggle = class SlideToggle extends BxBaseControl {
|
|
|
1675
1675
|
usesInheritance: true,
|
|
1676
1676
|
ngImport: i0,
|
|
1677
1677
|
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 [bxSurfaceEmission]=\"errorMessage ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\" [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>",
|
|
1678
|
-
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-accent)}.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:
|
|
1678
|
+
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-accent)}.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: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-accent)}.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-accent-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--bx-text-secondary);border:1px solid var(--bx-bg-surface);box-sizing:border-box;border-radius:9999px;transition:transform .2s cubic-bezier(.25,.8,.25,1);box-shadow:var(--bx-shadow-sm)}.is-checked .bx-slide-toggle-thumb{background:var(--bx-on-accent);border-color:var(--bx-on-accent)}.bx-slide-toggle-track[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-text-secondary);--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-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-text-accent)}.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-accent)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-accent-hover)}.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){--bx-glass-rim-visibility: .25;--bx-toggle-thumb-surface: var(--bx-color-neutral-200);--bx-toggle-thumb-edge: color-mix(in srgb, var(--bx-accent) 18%, var(--bx-border-strong));background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 6%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 6%,var(--bx-glass-surface)))!important;border-color:var(--bx-glass-edge)}.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb{background:radial-gradient(circle at 35% 0%,color-mix(in srgb,var(--bx-color-neutral-50) 24%,transparent),transparent 65%),var(--bx-toggle-thumb-surface);border-color:var(--bx-toggle-thumb-edge)}:host-context(.high-contrast) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb,:host-context(.bx-high-contrast-scope) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb{background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb{background-image:none!important;border-color:ButtonText}}.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-toggle-thumb-surface: var(--bx-color-accent-100);--bx-toggle-thumb-edge: var(--bx-color-accent-200)}:host-context(.high-contrast) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}:host-context(.high-contrast) .bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb,:host-context(.bx-high-contrast-scope) .bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{background-color:var(--bx-on-accent)}@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"],
|
|
1679
1679
|
dependencies: [
|
|
1680
1680
|
{
|
|
1681
1681
|
kind: "directive",
|
|
@@ -1729,7 +1729,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1729
1729
|
],
|
|
1730
1730
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1731
1731
|
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 [bxSurfaceEmission]=\"errorMessage ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\" [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>",
|
|
1732
|
-
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-accent)}.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:
|
|
1732
|
+
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-accent)}.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: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-accent)}.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-accent-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--bx-text-secondary);border:1px solid var(--bx-bg-surface);box-sizing:border-box;border-radius:9999px;transition:transform .2s cubic-bezier(.25,.8,.25,1);box-shadow:var(--bx-shadow-sm)}.is-checked .bx-slide-toggle-thumb{background:var(--bx-on-accent);border-color:var(--bx-on-accent)}.bx-slide-toggle-track[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-text-secondary);--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-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-text-accent)}.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-accent)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-accent-hover)}.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){--bx-glass-rim-visibility: .25;--bx-toggle-thumb-surface: var(--bx-color-neutral-200);--bx-toggle-thumb-edge: color-mix(in srgb, var(--bx-accent) 18%, var(--bx-border-strong));background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 6%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 6%,var(--bx-glass-surface)))!important;border-color:var(--bx-glass-edge)}.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb{background:radial-gradient(circle at 35% 0%,color-mix(in srgb,var(--bx-color-neutral-50) 24%,transparent),transparent 65%),var(--bx-toggle-thumb-surface);border-color:var(--bx-toggle-thumb-edge)}:host-context(.high-contrast) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb,:host-context(.bx-high-contrast-scope) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb{background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid) .bx-slide-toggle-thumb{background-image:none!important;border-color:ButtonText}}.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-toggle-thumb-surface: var(--bx-color-accent-100);--bx-toggle-thumb-edge: var(--bx-color-accent-200)}:host-context(.high-contrast) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}:host-context(.high-contrast) .bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb,:host-context(.bx-high-contrast-scope) .bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{background-color:var(--bx-on-accent)}@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"]
|
|
1733
1733
|
}]
|
|
1734
1734
|
}]
|
|
1735
1735
|
});
|