@skyux/layout 14.9.1 → 14.9.2
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.
|
@@ -11,7 +11,7 @@ import { SkyHrefModule } from '@skyux/router';
|
|
|
11
11
|
import * as i1$1 from '@skyux/theme';
|
|
12
12
|
import { SkyThemeService, SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
|
|
13
13
|
import * as i2$2 from '@skyux/core';
|
|
14
|
-
import { SkyCoreAdapterService, SkyMediaQueryService, SkyScrollableHostService, SkyAppWindowRef, SkyDockService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, _SkyAnimationEndHandlerDirective, SkyIdModule, _SkyTransitionEndHandlerDirective } from '@skyux/core';
|
|
14
|
+
import { SkyCoreAdapterService, SkyMediaQueryService, SkyScrollableHostService, SkyAppWindowRef, SkyDockService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, _SkyAnimationEndHandlerDirective, SkyResizeObserverService, SkyIdModule, _SkyTransitionEndHandlerDirective } from '@skyux/core';
|
|
15
15
|
import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
|
|
16
16
|
import { takeUntil, take } from 'rxjs/operators';
|
|
17
17
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
@@ -1560,6 +1560,7 @@ class SkyDescriptionListComponent {
|
|
|
1560
1560
|
#adapterService = inject(SkyDescriptionListAdapterService);
|
|
1561
1561
|
#changeDetector = inject(ChangeDetectorRef);
|
|
1562
1562
|
#descriptionListService = inject(SkyDescriptionListService);
|
|
1563
|
+
#resizeObserverSvc = inject(SkyResizeObserverService);
|
|
1563
1564
|
ngAfterContentInit() {
|
|
1564
1565
|
// Wait for all content to render before detecting parent width.
|
|
1565
1566
|
setTimeout(() => {
|
|
@@ -1574,13 +1575,24 @@ class SkyDescriptionListComponent {
|
|
|
1574
1575
|
});
|
|
1575
1576
|
}
|
|
1576
1577
|
}
|
|
1578
|
+
ngAfterViewInit() {
|
|
1579
|
+
// Recalculate the responsive class whenever the container size changes so
|
|
1580
|
+
// the layout stays correct for containers that are hidden (width 0) or
|
|
1581
|
+
// resized after the initial measurement, such as inactive tab content that
|
|
1582
|
+
// is later revealed — not just on window resize.
|
|
1583
|
+
if (this.elementRef) {
|
|
1584
|
+
this.#resizeObserverSvc
|
|
1585
|
+
.observe(this.elementRef)
|
|
1586
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1587
|
+
.subscribe(() => {
|
|
1588
|
+
this.#updateResponsiveClass();
|
|
1589
|
+
});
|
|
1590
|
+
}
|
|
1591
|
+
}
|
|
1577
1592
|
ngOnDestroy() {
|
|
1578
1593
|
this.#ngUnsubscribe.next();
|
|
1579
1594
|
this.#ngUnsubscribe.complete();
|
|
1580
1595
|
}
|
|
1581
|
-
onWindowResize() {
|
|
1582
|
-
this.#updateResponsiveClass();
|
|
1583
|
-
}
|
|
1584
1596
|
#updateResponsiveClass() {
|
|
1585
1597
|
if (this.elementRef) {
|
|
1586
1598
|
this.#adapterService.setResponsiveClass(this.elementRef);
|
|
@@ -1588,7 +1600,7 @@ class SkyDescriptionListComponent {
|
|
|
1588
1600
|
}
|
|
1589
1601
|
}
|
|
1590
1602
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDescriptionListComponent, isStandalone: false, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" },
|
|
1603
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDescriptionListComponent, isStandalone: false, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n #descriptionListElement\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n @for (contentComponent of contentComponents; track contentComponent) {\n <div\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n @for (\n termComponent of contentComponent?.termComponents;\n track termComponent\n ) {\n <dt>\n @if (termComponent.templateRef) {\n <ng-container *ngTemplateOutlet=\"termComponent.templateRef\" />\n }\n </dt>\n }\n @for (\n descriptionComponent of contentComponent?.descriptionComponents;\n track descriptionComponent\n ) {\n <dd>\n @if (descriptionComponent.templateRef) {\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n />\n }\n </dd>\n }\n </div>\n }\n</dl>\n", styles: [".sky-description-list:not(.sky-theme-modern *){--sky-override-description-list-term-color: #686c73;--sky-override-description-list-term-font-size: 14px;--sky-override-description-list-term-font-weight: 400;--sky-override-description-list-term-font-line-height: normal;--sky-override-description-list-term-bottom-margin: 3px;--sky-override-description-list-pair-bottom-margin: 15px;--sky-override-description-list-horizontal-pair-padding-right: 60px;--sky-override-description-list-long-bottom-margin: 10px;--sky-override-description-list-long-term-font-weight: 600;--sky-override-description-list-long-term-font-size: 16px;--sky-override-description-list-long-term-font-color: #212327;--sky-override-description-list-long-term-right-margin: 20px;--sky-override-description-list-long-term-bottom-margin-xs: 3px;--sky-override-description-list-long-pair-bottom-margin: 10px}:host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:var(--sky-override-description-list-term-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-description-list-term-font-size, var(--sky-font-size-body-s));font-weight:var(--sky-override-description-list-term-font-weight, var(--sky-font-style-body-s));line-height:var(--sky-override-description-list-term-font-line-height, var(--sky-font-line_height-body-s));margin:0 0 var(--sky-override-description-list-term-bottom-margin, var(--sky-space-gap-label-xs));white-space:nowrap}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 var(--sky-override-description-list-pair-bottom-margin, var(--sky-space-stacked-l))}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 calc(-1 * var(--sky-override-description-list-pair-bottom-margin, var(--sky-space-stacked-l)))}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 var(--sky-override-description-list-pair-bottom-margin, var(--sky-space-stacked-l));padding:0 var(--sky-override-description-list-horizontal-pair-padding-right, var(--sky-space-inline-xxl)) 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 var(--sky-override-description-list-long-bottom-margin, var(--sky-space-stacked-s))}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:var(--sky-override-description-list-long-term-font-color, inherit);font-size:var(--sky-override-description-list-long-term-font-size, inherit);font-weight:var(--sky-override-description-list-long-term-font-weight, var(--sky-font-style-emphasized));margin:0 var(--sky-override-description-list-long-term-right-margin, var(--sky-space-inline-l)) 0 0;width:25%;overflow-wrap:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 var(--sky-override-description-list-long-term-bottom-margin-xs, var(--sky-space-stacked-xs));width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 var(--sky-override-description-list-long-pair-bottom-margin, var(--sky-space-stacked-l))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1592
1604
|
}
|
|
1593
1605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
|
|
1594
1606
|
type: Component,
|
|
@@ -1608,9 +1620,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1608
1620
|
read: ElementRef,
|
|
1609
1621
|
static: true,
|
|
1610
1622
|
}]
|
|
1611
|
-
}], onWindowResize: [{
|
|
1612
|
-
type: HostListener,
|
|
1613
|
-
args: ['window:resize']
|
|
1614
1623
|
}] } });
|
|
1615
1624
|
|
|
1616
1625
|
class SkyDescriptionListModule {
|