@filip.mazev/blocks 1.4.7 → 1.4.8
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/core/styles/themes/_high-contrast-theme.scss +18 -20
- package/fesm2022/filip.mazev-blocks-core.mjs +10 -5
- package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-forms.mjs +53 -15
- package/fesm2022/filip.mazev-blocks-forms.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-primitives.mjs +163 -10
- 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/types/filip.mazev-blocks-core.d.ts +4 -1
- package/types/filip.mazev-blocks-forms.d.ts +8 -1
- package/types/filip.mazev-blocks-primitives.d.ts +19 -2
- package/types/filip.mazev-blocks.d.ts +1 -1
|
@@ -4,10 +4,10 @@ import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef,
|
|
|
4
4
|
import { BX_I18N, BxA11yService, BxBaseControl, DEFAULT_DEBOUNCE_TIME, ThemingService, inheritOverlayTheme, isTextWithKey, uuidv4 } from "@filip.mazev/blocks/core";
|
|
5
5
|
import { CommonModule } from "@angular/common";
|
|
6
6
|
import { Icon } from "@filip.mazev/blocks/icons";
|
|
7
|
-
import { MenuItem, TooltipDirective } from "@filip.mazev/blocks/primitives";
|
|
8
|
-
import { createGlassTransition, observeGlassLighting, refreshGlassLighting } from "@filip.mazev/blocks/effects/runtime";
|
|
7
|
+
import { BX_OVERLAY_CONTEXT, MenuItem, TooltipDirective } from "@filip.mazev/blocks/primitives";
|
|
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, OverlayModule } from "@angular/cdk/overlay";
|
|
10
|
+
import { CdkConnectedOverlay, ConnectionPositionPair, FlexibleConnectedPositionStrategy, 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 {
|
|
@@ -1132,6 +1132,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1132
1132
|
var Select = class Select extends BxBaseControl {
|
|
1133
1133
|
a11y = inject(BxA11yService);
|
|
1134
1134
|
zone = inject(NgZone);
|
|
1135
|
+
overlay = inject(Overlay);
|
|
1136
|
+
overlayContext = inject(BX_OVERLAY_CONTEXT, { optional: true });
|
|
1137
|
+
panelScrollStrategy = this.overlay.scrollStrategies.noop();
|
|
1135
1138
|
isPanelAttached = signal(false, ...ngDevMode ? [{ debugName: "isPanelAttached" }] : /* istanbul ignore next */ []);
|
|
1136
1139
|
i18n = inject(BX_I18N, { optional: true });
|
|
1137
1140
|
searchTerm = signal("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
|
|
@@ -1203,6 +1206,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1203
1206
|
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
1204
1207
|
transition;
|
|
1205
1208
|
disconnectTheme;
|
|
1209
|
+
disconnectLighting;
|
|
1210
|
+
disconnectScroll;
|
|
1206
1211
|
transitionRevision = 0;
|
|
1207
1212
|
focusOnOpen = null;
|
|
1208
1213
|
connectedOverlay;
|
|
@@ -1254,16 +1259,23 @@ var Select = class Select extends BxBaseControl {
|
|
|
1254
1259
|
}
|
|
1255
1260
|
onPanelAttach() {
|
|
1256
1261
|
const revision = this.transitionRevision;
|
|
1262
|
+
const origin = this.originRef?.nativeElement;
|
|
1263
|
+
const overlay = this.connectedOverlay?.overlayRef;
|
|
1264
|
+
if (origin && overlay?.hasAttached()) {
|
|
1265
|
+
this.disconnectLighting?.();
|
|
1266
|
+
this.disconnectLighting = inheritGlassLighting(overlay.overlayElement, origin);
|
|
1267
|
+
this.trackPanelScroll(overlay, origin);
|
|
1268
|
+
}
|
|
1257
1269
|
queueMicrotask(() => {
|
|
1258
|
-
const
|
|
1259
|
-
const
|
|
1260
|
-
if (!
|
|
1270
|
+
const attachedOverlay = this.connectedOverlay?.overlayRef;
|
|
1271
|
+
const attachedOrigin = this.originRef?.nativeElement;
|
|
1272
|
+
if (!attachedOverlay?.hasAttached() || !attachedOrigin || !this.isOpen() || revision !== this.transitionRevision) return;
|
|
1261
1273
|
this.disconnectTheme?.();
|
|
1262
|
-
this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(
|
|
1263
|
-
|
|
1274
|
+
this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(attachedOrigin, attachedOverlay.overlayElement));
|
|
1275
|
+
attachedOverlay.updatePosition();
|
|
1264
1276
|
if (!this.a11y.isReducedMotion()) {
|
|
1265
1277
|
this.transition?.destroy();
|
|
1266
|
-
this.transition = this.zone.runOutsideAngular(() => createGlassTransition(
|
|
1278
|
+
this.transition = this.zone.runOutsideAngular(() => createGlassTransition(attachedOrigin, attachedOverlay.overlayElement));
|
|
1267
1279
|
const transition = this.transition;
|
|
1268
1280
|
this.zone.runOutsideAngular(() => transition.enter()).catch(() => {
|
|
1269
1281
|
if (revision === this.transitionRevision) {
|
|
@@ -1285,6 +1297,13 @@ var Select = class Select extends BxBaseControl {
|
|
|
1285
1297
|
this.transition = void 0;
|
|
1286
1298
|
this.disconnectTheme?.();
|
|
1287
1299
|
this.disconnectTheme = void 0;
|
|
1300
|
+
this.disconnectLighting?.();
|
|
1301
|
+
this.disconnectLighting = void 0;
|
|
1302
|
+
this.disconnectScroll?.();
|
|
1303
|
+
this.disconnectScroll = void 0;
|
|
1304
|
+
}
|
|
1305
|
+
overlayPopoverLocation(origin) {
|
|
1306
|
+
return !!this.overlayContext?.useTopLayer || !!origin.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]") ? "global" : null;
|
|
1288
1307
|
}
|
|
1289
1308
|
refreshPanel() {
|
|
1290
1309
|
this.transition?.refresh();
|
|
@@ -1345,6 +1364,25 @@ var Select = class Select extends BxBaseControl {
|
|
|
1345
1364
|
onSearchChange(value) {
|
|
1346
1365
|
this.searchSubject.next(value);
|
|
1347
1366
|
}
|
|
1367
|
+
trackPanelScroll(overlay, origin) {
|
|
1368
|
+
const view = origin.ownerDocument.defaultView;
|
|
1369
|
+
if (!view) return;
|
|
1370
|
+
this.disconnectScroll?.();
|
|
1371
|
+
this.zone.runOutsideAngular(() => {
|
|
1372
|
+
const reposition = (event) => {
|
|
1373
|
+
const target = event.target;
|
|
1374
|
+
if (!overlay.hasAttached() || !(target === view || target instanceof Node && target.contains(origin))) return;
|
|
1375
|
+
const positionStrategy = overlay.getConfig().positionStrategy;
|
|
1376
|
+
if (positionStrategy instanceof FlexibleConnectedPositionStrategy) positionStrategy.reapplyLastPosition();
|
|
1377
|
+
else overlay.updatePosition();
|
|
1378
|
+
};
|
|
1379
|
+
view.addEventListener("scroll", reposition, {
|
|
1380
|
+
capture: true,
|
|
1381
|
+
passive: true
|
|
1382
|
+
});
|
|
1383
|
+
this.disconnectScroll = () => view.removeEventListener("scroll", reposition, true);
|
|
1384
|
+
});
|
|
1385
|
+
}
|
|
1348
1386
|
panelItems() {
|
|
1349
1387
|
return Array.from(this.connectedOverlay?.overlayRef?.overlayElement.querySelectorAll(".bx-select-menu-container button:not(:disabled)") ?? []);
|
|
1350
1388
|
}
|
|
@@ -1427,8 +1465,8 @@ var Select = class Select extends BxBaseControl {
|
|
|
1427
1465
|
],
|
|
1428
1466
|
usesInheritance: true,
|
|
1429
1467
|
ngImport: i0,
|
|
1430
|
-
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n [class.is-invalid]=\"!!errorMessage\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\"\n [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\"\n [disabled]=\"isDisabled() || loading()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? inputId() + '-options' : null\">\n\n <div class=\"bx-select-container\">\n @if (label()) {\n <span class=\"bx-floating-label\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </span>\n }\n\n <span class=\"bx-select-value\" [attr.title]=\"selectedOptionLabel() || resolvedPlaceholder()\" [class.is-placeholder]=\"internalValue() === null\">\n @if (internalValue() === null && isFloating()) {\n {{ resolvedPlaceholder() }}\n } @else {\n {{ selectedOptionLabel() }}\n }\n </span>\n </div>\n\n <bx-icon class=\"bx-select-caret\" name=\"chevron-down\" size=\"16\"></bx-icon>\n </button>\n\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n\n <div class=\"bx-select-panel\" bxSurface role=\"listbox\" tabindex=\"0\" [attr.aria-label]=\"resolvedLabel()\" [id]=\"inputId() + '-options'\" (keydown)=\"onPanelKey($event)\">\n\n @if (isSearchable()) {\n <div class=\"bx-select-search-container\">\n <bx-search-input #searchInput [placeholder]=\"resolvedSearchPlaceholder()\"\n (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\">\n </bx-search-input>\n </div>\n }\n\n <div class=\"bx-select-menu-container\">\n @for (option of filteredOptions(); track option.value) {\n\n <bx-menu-item role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" [wrapLabel]=\"true\" (action)=\"selectOption(option)\">\n <div class=\"bx-select-item-inner\">\n <div class=\"bx-select-check-placeholder\">\n @if (internalValue() === option.value) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n <span [title]=\"option.resolvedStr\">{{ option.resolvedStr }}</span>\n </div>\n </bx-menu-item>\n\n } @empty {\n <div class=\"bx-select-empty\">\n <span class=\"bx-empty-text\">{{ resolvedEmptyMessage() }}</span>\n </div>\n }\n </div>\n\n </div>\n </ng-template>\n\n</bx-form-field>\n",
|
|
1431
|
-
styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease;padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-
|
|
1468
|
+
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\" bxSurface role=\"listbox\" tabindex=\"0\" [attr.aria-label]=\"resolvedLabel()\" [id]=\"inputId() + '-options'\" (keydown)=\"onPanelKey($event)\">\n\n @if (isSearchable()) {\n <div class=\"bx-select-search-container\">\n <bx-search-input #searchInput [placeholder]=\"resolvedSearchPlaceholder()\"\n (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\">\n </bx-search-input>\n </div>\n }\n\n <div class=\"bx-select-menu-container\">\n @for (option of filteredOptions(); track option.value) {\n\n <bx-menu-item role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" [wrapLabel]=\"true\" (action)=\"selectOption(option)\">\n <div class=\"bx-select-item-inner\">\n <div class=\"bx-select-check-placeholder\">\n @if (internalValue() === option.value) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n <span [title]=\"option.resolvedStr\">{{ option.resolvedStr }}</span>\n </div>\n </bx-menu-item>\n\n } @empty {\n <div class=\"bx-select-empty\">\n <span class=\"bx-empty-text\">{{ resolvedEmptyMessage() }}</span>\n </div>\n }\n </div>\n\n </div>\n </ng-template>\n\n</bx-form-field>\n",
|
|
1469
|
+
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);--bx-glass-min-opacity: 0;--bx-glass-decoration-opacity: 1;--bx-glass-rim-visibility: 1;--bx-glass-unified-lighting: 0}.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"],
|
|
1432
1470
|
dependencies: [
|
|
1433
1471
|
{
|
|
1434
1472
|
kind: "directive",
|
|
@@ -1571,8 +1609,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1571
1609
|
SearchInput
|
|
1572
1610
|
],
|
|
1573
1611
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1574
|
-
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n [class.is-invalid]=\"!!errorMessage\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\"\n [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\"\n [disabled]=\"isDisabled() || loading()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? inputId() + '-options' : null\">\n\n <div class=\"bx-select-container\">\n @if (label()) {\n <span class=\"bx-floating-label\">\n {{ resolvedLabel() }}\n @if (isFieldRequired()) { <span class=\"bx-field-required\">*</span> }\n </span>\n }\n\n <span class=\"bx-select-value\" [attr.title]=\"selectedOptionLabel() || resolvedPlaceholder()\" [class.is-placeholder]=\"internalValue() === null\">\n @if (internalValue() === null && isFloating()) {\n {{ resolvedPlaceholder() }}\n } @else {\n {{ selectedOptionLabel() }}\n }\n </span>\n </div>\n\n <bx-icon class=\"bx-select-caret\" name=\"chevron-down\" size=\"16\"></bx-icon>\n </button>\n\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n\n <div class=\"bx-select-panel\" bxSurface role=\"listbox\" tabindex=\"0\" [attr.aria-label]=\"resolvedLabel()\" [id]=\"inputId() + '-options'\" (keydown)=\"onPanelKey($event)\">\n\n @if (isSearchable()) {\n <div class=\"bx-select-search-container\">\n <bx-search-input #searchInput [placeholder]=\"resolvedSearchPlaceholder()\"\n (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\">\n </bx-search-input>\n </div>\n }\n\n <div class=\"bx-select-menu-container\">\n @for (option of filteredOptions(); track option.value) {\n\n <bx-menu-item role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" [wrapLabel]=\"true\" (action)=\"selectOption(option)\">\n <div class=\"bx-select-item-inner\">\n <div class=\"bx-select-check-placeholder\">\n @if (internalValue() === option.value) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n <span [title]=\"option.resolvedStr\">{{ option.resolvedStr }}</span>\n </div>\n </bx-menu-item>\n\n } @empty {\n <div class=\"bx-select-empty\">\n <span class=\"bx-empty-text\">{{ resolvedEmptyMessage() }}</span>\n </div>\n }\n </div>\n\n </div>\n </ng-template>\n\n</bx-form-field>\n",
|
|
1575
|
-
styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);transition:background-color .15s ease;padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-
|
|
1612
|
+
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\" bxSurface role=\"listbox\" tabindex=\"0\" [attr.aria-label]=\"resolvedLabel()\" [id]=\"inputId() + '-options'\" (keydown)=\"onPanelKey($event)\">\n\n @if (isSearchable()) {\n <div class=\"bx-select-search-container\">\n <bx-search-input #searchInput [placeholder]=\"resolvedSearchPlaceholder()\"\n (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\">\n </bx-search-input>\n </div>\n }\n\n <div class=\"bx-select-menu-container\">\n @for (option of filteredOptions(); track option.value) {\n\n <bx-menu-item role=\"option\" [attr.aria-selected]=\"internalValue() === option.value\" [disabled]=\"option.disabled ?? false\" [wrapLabel]=\"true\" (action)=\"selectOption(option)\">\n <div class=\"bx-select-item-inner\">\n <div class=\"bx-select-check-placeholder\">\n @if (internalValue() === option.value) {\n <bx-icon name=\"check\" size=\"16\"></bx-icon>\n }\n </div>\n <span [title]=\"option.resolvedStr\">{{ option.resolvedStr }}</span>\n </div>\n </bx-menu-item>\n\n } @empty {\n <div class=\"bx-select-empty\">\n <span class=\"bx-empty-text\">{{ resolvedEmptyMessage() }}</span>\n </div>\n }\n </div>\n\n </div>\n </ng-template>\n\n</bx-form-field>\n",
|
|
1613
|
+
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);--bx-glass-min-opacity: 0;--bx-glass-decoration-opacity: 1;--bx-glass-rim-visibility: 1;--bx-glass-unified-lighting: 0}.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"]
|
|
1576
1614
|
}]
|
|
1577
1615
|
}],
|
|
1578
1616
|
propDecorators: {
|
|
@@ -1667,7 +1705,7 @@ var SlideToggle = class SlideToggle extends BxBaseControl {
|
|
|
1667
1705
|
usesInheritance: true,
|
|
1668
1706
|
ngImport: i0,
|
|
1669
1707
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"checkbox\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\" [checked]=\"internalValue() === true\"\n (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n\n <div class=\"bx-slide-toggle-track\" bxSurface [class.is-checked]=\"internalValue() === true\" [class.is-invalid]=\"!!errorMessage\">\n <div class=\"bx-slide-toggle-thumb\"></div>\n </div>\n\n @if (resolvedLabel() || tooltip()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n\n\n </label>\n\n</bx-form-field>",
|
|
1670
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary)}.bx-inline-required{color:var(--bx-text-danger)}.bx-inline-tooltip-trigger{position:relative;display:inline-flex;color:var(--bx-text-secondary);cursor:help;outline:none}.bx-inline-tooltip-trigger:hover,.bx-inline-tooltip-trigger:focus-visible{color:var(--bx-text-brand)}.bx-inline-tooltip-trigger bx-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bx-slide-toggle-track{position:relative;width:42px;height:24px;background-color:var(--bx-border-strong);border-radius:9999px;transition:background-color .2s ease,border-color .2s ease}.bx-slide-toggle-track.is-invalid{background-color:var(--bx-bg-danger-subtle);box-shadow:inset 0 0 0 2px var(--bx-border-danger)}.bx-slide-toggle-track.is-checked{background-color:var(--bx-primary)}.bx-slide-toggle-track.is-checked.is-invalid{background-color:var(--bx-bg-danger)}.bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{transform:translate(18px)}input:focus-visible~.bx-slide-toggle-track{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:
|
|
1708
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary)}.bx-inline-required{color:var(--bx-text-danger)}.bx-inline-tooltip-trigger{position:relative;display:inline-flex;color:var(--bx-text-secondary);cursor:help;outline:none}.bx-inline-tooltip-trigger:hover,.bx-inline-tooltip-trigger:focus-visible{color:var(--bx-text-brand)}.bx-inline-tooltip-trigger bx-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bx-slide-toggle-track{position:relative;width:42px;height:24px;background-color:var(--bx-border-strong);border-radius:9999px;transition:background-color .2s ease,border-color .2s ease}.bx-slide-toggle-track.is-invalid{background-color:var(--bx-bg-danger-subtle);box-shadow:inset 0 0 0 2px var(--bx-border-danger)}.bx-slide-toggle-track.is-checked{background-color:var(--bx-primary)}.bx-slide-toggle-track.is-checked.is-invalid{background-color:var(--bx-bg-danger)}.bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{transform:translate(18px)}input:focus-visible~.bx-slide-toggle-track{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background: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-primary);border-color:var(--bx-on-primary)}.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-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-brand)}.bx-slide-toggle-track[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-brand)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-primary-hover)}@media(forced-colors:active){.bx-slide-toggle-thumb{background:ButtonText}.is-checked .bx-slide-toggle-thumb{background:Highlight}}.bx-field-tooltip-trigger,.bx-inline-tooltip-trigger{border:0;padding:.25rem;background:transparent;color:var(--bx-text-secondary);cursor:help}\n"],
|
|
1671
1709
|
dependencies: [
|
|
1672
1710
|
{
|
|
1673
1711
|
kind: "directive",
|
|
@@ -1721,7 +1759,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1721
1759
|
],
|
|
1722
1760
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1723
1761
|
template: "<bx-form-field [inline]=\"true\" [tooltip]=\"tooltip()\" [error]=\"errorMessage\" [loading]=\"loading()\" [forId]=\"inputId()\">\n\n <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"isDisabled()\">\n <input type=\"checkbox\" class=\"bx-visually-hidden\" [attr.id]=\"inputId()\" [attr.data-testid]=\"dataTestId()\"\n [attr.aria-label]=\"ariaLabel()\" [disabled]=\"isDisabled()\" [checked]=\"internalValue() === true\"\n (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n\n <div class=\"bx-slide-toggle-track\" bxSurface [class.is-checked]=\"internalValue() === true\" [class.is-invalid]=\"!!errorMessage\">\n <div class=\"bx-slide-toggle-thumb\"></div>\n </div>\n\n @if (resolvedLabel() || tooltip()) {\n <span class=\"bx-inline-label\">\n {{ resolvedLabel() }}\n @if (required()) { <span class=\"bx-inline-required\">*</span> }\n </span>\n }\n\n\n </label>\n\n</bx-form-field>",
|
|
1724
|
-
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary)}.bx-inline-required{color:var(--bx-text-danger)}.bx-inline-tooltip-trigger{position:relative;display:inline-flex;color:var(--bx-text-secondary);cursor:help;outline:none}.bx-inline-tooltip-trigger:hover,.bx-inline-tooltip-trigger:focus-visible{color:var(--bx-text-brand)}.bx-inline-tooltip-trigger bx-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bx-slide-toggle-track{position:relative;width:42px;height:24px;background-color:var(--bx-border-strong);border-radius:9999px;transition:background-color .2s ease,border-color .2s ease}.bx-slide-toggle-track.is-invalid{background-color:var(--bx-bg-danger-subtle);box-shadow:inset 0 0 0 2px var(--bx-border-danger)}.bx-slide-toggle-track.is-checked{background-color:var(--bx-primary)}.bx-slide-toggle-track.is-checked.is-invalid{background-color:var(--bx-bg-danger)}.bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{transform:translate(18px)}input:focus-visible~.bx-slide-toggle-track{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:
|
|
1762
|
+
styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary)}.bx-inline-required{color:var(--bx-text-danger)}.bx-inline-tooltip-trigger{position:relative;display:inline-flex;color:var(--bx-text-secondary);cursor:help;outline:none}.bx-inline-tooltip-trigger:hover,.bx-inline-tooltip-trigger:focus-visible{color:var(--bx-text-brand)}.bx-inline-tooltip-trigger bx-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bx-slide-toggle-track{position:relative;width:42px;height:24px;background-color:var(--bx-border-strong);border-radius:9999px;transition:background-color .2s ease,border-color .2s ease}.bx-slide-toggle-track.is-invalid{background-color:var(--bx-bg-danger-subtle);box-shadow:inset 0 0 0 2px var(--bx-border-danger)}.bx-slide-toggle-track.is-checked{background-color:var(--bx-primary)}.bx-slide-toggle-track.is-checked.is-invalid{background-color:var(--bx-bg-danger)}.bx-slide-toggle-track.is-checked .bx-slide-toggle-thumb{transform:translate(18px)}input:focus-visible~.bx-slide-toggle-track{box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-slide-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background: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-primary);border-color:var(--bx-on-primary)}.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-primary);--bx-glass-min-opacity: .55;--bx-glass-edge: var(--bx-border-brand);--bx-glass-text: var(--bx-text-brand)}.bx-slide-toggle-track[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid){--bx-glass-surface: var(--bx-bg-neutral-hover);--bx-glass-edge: var(--bx-border-brand)}.bx-inline-wrapper:not(.is-disabled):hover .bx-slide-toggle-track[data-bx-surface]:not(.is-invalid).is-checked{--bx-glass-surface: var(--bx-primary-hover)}@media(forced-colors:active){.bx-slide-toggle-thumb{background:ButtonText}.is-checked .bx-slide-toggle-thumb{background:Highlight}}.bx-field-tooltip-trigger,.bx-inline-tooltip-trigger{border:0;padding:.25rem;background:transparent;color:var(--bx-text-secondary);cursor:help}\n"]
|
|
1725
1763
|
}]
|
|
1726
1764
|
}]
|
|
1727
1765
|
});
|