@skyux/forms 14.20.0 → 14.21.0
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/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_A
|
|
|
7
7
|
import * as i6 from '@skyux/i18n';
|
|
8
8
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
9
9
|
import * as i5 from '@skyux/core';
|
|
10
|
-
import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyFileReaderService, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyCoreAdapterService, SkyMediaBreakpoints, SkyMutationObserverService } from '@skyux/core';
|
|
10
|
+
import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyFileReaderService, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyCoreAdapterService, SkyMediaBreakpoints, SkyMutationObserverService, SkyResizeObserverService } from '@skyux/core';
|
|
11
11
|
import * as i4 from '@skyux/help-inline';
|
|
12
12
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
13
13
|
import * as i4$1 from '@skyux/icon';
|
|
@@ -4493,15 +4493,18 @@ class SkySelectionBoxGridComponent {
|
|
|
4493
4493
|
set containerElementRef(value) {
|
|
4494
4494
|
this.#_containerElementRef = value;
|
|
4495
4495
|
this.#destroyMutationObserver();
|
|
4496
|
+
this.#destroyResizeObserver();
|
|
4496
4497
|
if (value) {
|
|
4497
4498
|
this.#updateBreakpointClass();
|
|
4498
4499
|
this.#initMutationObserver();
|
|
4500
|
+
this.#initResizeObserver(value);
|
|
4499
4501
|
}
|
|
4500
4502
|
}
|
|
4501
4503
|
get containerElementRef() {
|
|
4502
4504
|
return this.#_containerElementRef;
|
|
4503
4505
|
}
|
|
4504
4506
|
#mutationObserver;
|
|
4507
|
+
#resizeSubscription;
|
|
4505
4508
|
#ngUnsubscribe = new Subject();
|
|
4506
4509
|
#_alignItems = 'center';
|
|
4507
4510
|
#_containerElementRef;
|
|
@@ -4510,6 +4513,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4510
4513
|
#hostElRef = inject(ElementRef);
|
|
4511
4514
|
#mutationObserverSvc = inject(SkyMutationObserverService);
|
|
4512
4515
|
#ngZone = inject(NgZone);
|
|
4516
|
+
#resizeObserverSvc = inject(SkyResizeObserverService);
|
|
4513
4517
|
#themeSvc = inject(SkyThemeService, { optional: true });
|
|
4514
4518
|
ngOnInit() {
|
|
4515
4519
|
/* istanbul ignore else */
|
|
@@ -4525,9 +4529,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4525
4529
|
this.#ngUnsubscribe.next();
|
|
4526
4530
|
this.#ngUnsubscribe.complete();
|
|
4527
4531
|
this.#destroyMutationObserver();
|
|
4528
|
-
|
|
4529
|
-
onWindowResize() {
|
|
4530
|
-
this.#updateBreakpointClass();
|
|
4532
|
+
this.#destroyResizeObserver();
|
|
4531
4533
|
}
|
|
4532
4534
|
#initMutationObserver() {
|
|
4533
4535
|
/* istanbul ignore else */
|
|
@@ -4554,6 +4556,17 @@ class SkySelectionBoxGridComponent {
|
|
|
4554
4556
|
this.#mutationObserver = undefined;
|
|
4555
4557
|
}
|
|
4556
4558
|
}
|
|
4559
|
+
#initResizeObserver(containerElementRef) {
|
|
4560
|
+
this.#resizeSubscription = this.#resizeObserverSvc
|
|
4561
|
+
.observe(containerElementRef)
|
|
4562
|
+
.subscribe(() => {
|
|
4563
|
+
this.#updateBreakpointClass();
|
|
4564
|
+
});
|
|
4565
|
+
}
|
|
4566
|
+
#destroyResizeObserver() {
|
|
4567
|
+
this.#resizeSubscription?.unsubscribe();
|
|
4568
|
+
this.#resizeSubscription = undefined;
|
|
4569
|
+
}
|
|
4557
4570
|
#updateBreakpointClass() {
|
|
4558
4571
|
const parentWidth = this.#selectionBoxAdapter.getParentWidth(this.#hostElRef);
|
|
4559
4572
|
if (this.containerElementRef) {
|
|
@@ -4568,7 +4581,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4568
4581
|
}
|
|
4569
4582
|
}
|
|
4570
4583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" },
|
|
4584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n #container\n class=\"sky-selection-box-grid\"\n [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n>\n <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-family-no-icon: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-collapsed-space-inset-top) var(--sky-comp-selection_box-collapsed-space-inset-right) var(--sky-comp-selection_box-collapsed-space-inset-bottom) var(--sky-comp-selection_box-collapsed-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4572
4585
|
}
|
|
4573
4586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
4574
4587
|
type: Component,
|
|
@@ -4586,9 +4599,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4586
4599
|
read: ElementRef,
|
|
4587
4600
|
static: true,
|
|
4588
4601
|
}]
|
|
4589
|
-
}], onWindowResize: [{
|
|
4590
|
-
type: HostListener,
|
|
4591
|
-
args: ['window:resize']
|
|
4592
4602
|
}] } });
|
|
4593
4603
|
|
|
4594
4604
|
/**
|