@filip.mazev/blocks 1.4.10 → 1.4.11
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 +15 -3
- package/core/styles/_index.scss +7 -0
- package/core/styles/_overlay.scss +4 -0
- package/core/styles/_palettes.scss +42 -0
- package/core/styles/_theme-engine.scss +180 -149
- package/core/styles/themes/_azure-coral-theme.scss +4 -0
- package/core/styles/themes/_blue-theme.scss +4 -3
- package/core/styles/themes/_cyberpunk-theme.scss +3 -2
- package/core/styles/themes/_graphite-sky-blue-theme.scss +19 -0
- package/core/styles/themes/_green-theme.scss +4 -3
- package/core/styles/themes/_high-contrast-theme.scss +25 -6
- package/core/styles/themes/_lime-violet-theme.scss +4 -0
- package/core/styles/themes/_orange-theme.scss +4 -3
- package/core/styles/themes/_purple-theme.scss +4 -3
- package/core/styles/themes/_red-theme.scss +4 -3
- package/core/styles/themes/_scarlet-cyan-theme.scss +4 -0
- package/core/styles/themes/_tangerine-indigo-theme.scss +4 -0
- package/core/styles/themes/_violet-teal-theme.scss +4 -0
- package/core/styles/themes/_white-theme.scss +4 -27
- package/fesm2022/filip.mazev-blocks-core.mjs +139 -35
- package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs +1 -1
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-forms.mjs +16 -34
- package/fesm2022/filip.mazev-blocks-forms.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-primitives.mjs +496 -41
- package/fesm2022/filip.mazev-blocks-primitives.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 +10 -1
- package/schematics/ng-add/index.js +15 -4
- package/schematics/ng-add/schema.json +23 -17
- package/types/filip.mazev-blocks-core.d.ts +20 -7
- package/types/filip.mazev-blocks-forms.d.ts +2 -3
- package/types/filip.mazev-blocks-primitives.d.ts +118 -4
- package/types/filip.mazev-blocks.d.ts +1 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { BxGlassLightingService, BxSurfaceDirective, injectComponentSurface } from "@filip.mazev/blocks/effects";
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostListener, Injectable, NgZone, ViewChild, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, inject, input, output, signal, viewChild } from "@angular/core";
|
|
4
|
-
import { BX_I18N, BxA11yService, BxBaseControl, DEFAULT_DEBOUNCE_TIME, ThemingService, inheritOverlayTheme, isTextWithKey, uuidv4 } from "@filip.mazev/blocks/core";
|
|
4
|
+
import { BX_I18N, BxA11yService, BxBaseControl, DEFAULT_DEBOUNCE_TIME, ThemingService, inheritOverlayTheme, isTextWithKey, trackOverlayOrigin, uuidv4 } from "@filip.mazev/blocks/core";
|
|
5
5
|
import { CommonModule } from "@angular/common";
|
|
6
6
|
import { Icon } from "@filip.mazev/blocks/icons";
|
|
7
7
|
import { BX_OVERLAY_CONTEXT, MenuItem, TooltipDirective } from "@filip.mazev/blocks/primitives";
|
|
8
8
|
import { createGlassTransition, inheritGlassLighting, observeGlassLighting, refreshGlassLighting } from "@filip.mazev/blocks/effects/runtime";
|
|
9
9
|
import * as i1 from "@angular/cdk/overlay";
|
|
10
|
-
import { CdkConnectedOverlay, ConnectionPositionPair,
|
|
10
|
+
import { CdkConnectedOverlay, ConnectionPositionPair, Overlay, OverlayModule } from "@angular/cdk/overlay";
|
|
11
11
|
import { Subject } from "rxjs";
|
|
12
12
|
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
|
|
13
13
|
var Button = class Button {
|
|
14
14
|
appearance = injectComponentSurface(() => ({
|
|
15
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
|
|
16
|
+
emission: this.variant() !== "text" && this.interactive() && !this.disabled() ? this.color() === "primary" || this.color() === "grayscale" ? "var(--bx-primary)" : this.color() === "accent" ? "var(--bx-accent)" : `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 / 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:
|
|
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-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: .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(--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: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:
|
|
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-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: .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(--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 [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: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:
|
|
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: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);color:var(--bx-on-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: 1;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-on-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"],
|
|
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 [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: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:
|
|
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: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);color:var(--bx-on-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: 1;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-on-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"]
|
|
590
590
|
}]
|
|
591
591
|
}]
|
|
592
592
|
});
|
|
@@ -1211,7 +1211,7 @@ var Select = class Select extends BxBaseControl {
|
|
|
1211
1211
|
transition;
|
|
1212
1212
|
disconnectTheme;
|
|
1213
1213
|
disconnectLighting;
|
|
1214
|
-
|
|
1214
|
+
disconnectOrigin;
|
|
1215
1215
|
transitionRevision = 0;
|
|
1216
1216
|
focusOnOpen = null;
|
|
1217
1217
|
connectedOverlay;
|
|
@@ -1268,7 +1268,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1268
1268
|
if (origin && overlay?.hasAttached()) {
|
|
1269
1269
|
this.disconnectLighting?.();
|
|
1270
1270
|
this.disconnectLighting = inheritGlassLighting(overlay.overlayElement, origin);
|
|
1271
|
-
this.
|
|
1271
|
+
this.disconnectOrigin?.();
|
|
1272
|
+
this.disconnectOrigin = this.zone.runOutsideAngular(() => trackOverlayOrigin(overlay, origin));
|
|
1272
1273
|
}
|
|
1273
1274
|
queueMicrotask(() => {
|
|
1274
1275
|
const attachedOverlay = this.connectedOverlay?.overlayRef;
|
|
@@ -1303,8 +1304,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1303
1304
|
this.disconnectTheme = void 0;
|
|
1304
1305
|
this.disconnectLighting?.();
|
|
1305
1306
|
this.disconnectLighting = void 0;
|
|
1306
|
-
this.
|
|
1307
|
-
this.
|
|
1307
|
+
this.disconnectOrigin?.();
|
|
1308
|
+
this.disconnectOrigin = void 0;
|
|
1308
1309
|
}
|
|
1309
1310
|
overlayPopoverLocation(origin) {
|
|
1310
1311
|
return !!this.overlayContext?.useTopLayer || !!origin.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]") ? "global" : null;
|
|
@@ -1368,25 +1369,6 @@ var Select = class Select extends BxBaseControl {
|
|
|
1368
1369
|
onSearchChange(value) {
|
|
1369
1370
|
this.searchSubject.next(value);
|
|
1370
1371
|
}
|
|
1371
|
-
trackPanelScroll(overlay, origin) {
|
|
1372
|
-
const view = origin.ownerDocument.defaultView;
|
|
1373
|
-
if (!view) return;
|
|
1374
|
-
this.disconnectScroll?.();
|
|
1375
|
-
this.zone.runOutsideAngular(() => {
|
|
1376
|
-
const reposition = (event) => {
|
|
1377
|
-
const target = event.target;
|
|
1378
|
-
if (!overlay.hasAttached() || !(target === view || target instanceof Node && target.contains(origin))) return;
|
|
1379
|
-
const positionStrategy = overlay.getConfig().positionStrategy;
|
|
1380
|
-
if (positionStrategy instanceof FlexibleConnectedPositionStrategy) positionStrategy.reapplyLastPosition();
|
|
1381
|
-
else overlay.updatePosition();
|
|
1382
|
-
};
|
|
1383
|
-
view.addEventListener("scroll", reposition, {
|
|
1384
|
-
capture: true,
|
|
1385
|
-
passive: true
|
|
1386
|
-
});
|
|
1387
|
-
this.disconnectScroll = () => view.removeEventListener("scroll", reposition, true);
|
|
1388
|
-
});
|
|
1389
|
-
}
|
|
1390
1372
|
panelItems() {
|
|
1391
1373
|
return Array.from(this.connectedOverlay?.overlayRef?.overlayElement.querySelectorAll(".bx-select-menu-container button:not(:disabled)") ?? []);
|
|
1392
1374
|
}
|
|
@@ -1469,8 +1451,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1469
1451
|
],
|
|
1470
1452
|
usesInheritance: true,
|
|
1471
1453
|
ngImport: i0,
|
|
1472
|
-
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\"
|
|
1473
|
-
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-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{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-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)
|
|
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 <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",
|
|
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);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-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{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-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"],
|
|
1474
1456
|
dependencies: [
|
|
1475
1457
|
{
|
|
1476
1458
|
kind: "directive",
|
|
@@ -1613,8 +1595,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1613
1595
|
SearchInput
|
|
1614
1596
|
],
|
|
1615
1597
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1616
|
-
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\"
|
|
1617
|
-
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-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{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-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)
|
|
1598
|
+
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 <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",
|
|
1599
|
+
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-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{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-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"]
|
|
1618
1600
|
}]
|
|
1619
1601
|
}],
|
|
1620
1602
|
propDecorators: {
|