@skyux/forms 15.0.0-alpha.12 → 15.0.0-alpha.14
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 i3 from '@skyux/help-inline';
|
|
12
12
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
13
13
|
import * as i4 from '@skyux/icon';
|
|
@@ -4516,15 +4516,18 @@ class SkySelectionBoxGridComponent {
|
|
|
4516
4516
|
set containerElementRef(value) {
|
|
4517
4517
|
this.#_containerElementRef = value;
|
|
4518
4518
|
this.#destroyMutationObserver();
|
|
4519
|
+
this.#destroyResizeObserver();
|
|
4519
4520
|
if (value) {
|
|
4520
4521
|
this.#updateBreakpointClass();
|
|
4521
4522
|
this.#initMutationObserver();
|
|
4523
|
+
this.#initResizeObserver(value);
|
|
4522
4524
|
}
|
|
4523
4525
|
}
|
|
4524
4526
|
get containerElementRef() {
|
|
4525
4527
|
return this.#_containerElementRef;
|
|
4526
4528
|
}
|
|
4527
4529
|
#mutationObserver;
|
|
4530
|
+
#resizeSubscription;
|
|
4528
4531
|
#ngUnsubscribe = new Subject();
|
|
4529
4532
|
#_alignItems = 'center';
|
|
4530
4533
|
#_containerElementRef;
|
|
@@ -4533,6 +4536,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4533
4536
|
#hostElRef = inject(ElementRef);
|
|
4534
4537
|
#mutationObserverSvc = inject(SkyMutationObserverService);
|
|
4535
4538
|
#ngZone = inject(NgZone);
|
|
4539
|
+
#resizeObserverSvc = inject(SkyResizeObserverService);
|
|
4536
4540
|
#themeSvc = inject(SkyThemeService, { optional: true });
|
|
4537
4541
|
ngOnInit() {
|
|
4538
4542
|
/* istanbul ignore else */
|
|
@@ -4548,9 +4552,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4548
4552
|
this.#ngUnsubscribe.next();
|
|
4549
4553
|
this.#ngUnsubscribe.complete();
|
|
4550
4554
|
this.#destroyMutationObserver();
|
|
4551
|
-
|
|
4552
|
-
onWindowResize() {
|
|
4553
|
-
this.#updateBreakpointClass();
|
|
4555
|
+
this.#destroyResizeObserver();
|
|
4554
4556
|
}
|
|
4555
4557
|
#initMutationObserver() {
|
|
4556
4558
|
/* istanbul ignore else */
|
|
@@ -4577,6 +4579,17 @@ class SkySelectionBoxGridComponent {
|
|
|
4577
4579
|
this.#mutationObserver = undefined;
|
|
4578
4580
|
}
|
|
4579
4581
|
}
|
|
4582
|
+
#initResizeObserver(containerElementRef) {
|
|
4583
|
+
this.#resizeSubscription = this.#resizeObserverSvc
|
|
4584
|
+
.observe(containerElementRef)
|
|
4585
|
+
.subscribe(() => {
|
|
4586
|
+
this.#updateBreakpointClass();
|
|
4587
|
+
});
|
|
4588
|
+
}
|
|
4589
|
+
#destroyResizeObserver() {
|
|
4590
|
+
this.#resizeSubscription?.unsubscribe();
|
|
4591
|
+
this.#resizeSubscription = undefined;
|
|
4592
|
+
}
|
|
4580
4593
|
#updateBreakpointClass() {
|
|
4581
4594
|
const parentWidth = this.#selectionBoxAdapter.getParentWidth(this.#hostElRef);
|
|
4582
4595
|
if (this.containerElementRef) {
|
|
@@ -4591,7 +4604,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4591
4604
|
}
|
|
4592
4605
|
}
|
|
4593
4606
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4594
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" },
|
|
4607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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 }); }
|
|
4595
4608
|
}
|
|
4596
4609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
4597
4610
|
type: Component,
|
|
@@ -4609,9 +4622,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
4609
4622
|
read: ElementRef,
|
|
4610
4623
|
static: true,
|
|
4611
4624
|
}]
|
|
4612
|
-
}], onWindowResize: [{
|
|
4613
|
-
type: HostListener,
|
|
4614
|
-
args: ['window:resize']
|
|
4615
4625
|
}] } });
|
|
4616
4626
|
|
|
4617
4627
|
/**
|