@skyux/layout 13.0.0-alpha.9 → 13.0.0-beta.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-layout.mjs +83 -124
- package/fesm2022/skyux-layout.mjs.map +1 -1
- package/index.d.ts +17 -31
- package/package.json +11 -11
|
@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, contentChildren, effect, Inject } from '@angular/core';
|
|
6
|
+
import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, contentChildren, effect, Inject, input, signal, computed, viewChild, ChangeDetectorRef, afterRenderEffect } from '@angular/core';
|
|
7
7
|
import * as i2 from '@angular/router';
|
|
8
8
|
import { RouterModule } from '@angular/router';
|
|
9
9
|
import * as i3 from '@skyux/router';
|
|
@@ -17,18 +17,18 @@ import { SkyMediaQueryService, SkyContentInfoProvider, SkyLogService, SkyIdServi
|
|
|
17
17
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
18
18
|
import * as i1$2 from '@skyux/icon';
|
|
19
19
|
import { SkyIconModule } from '@skyux/icon';
|
|
20
|
-
import * as
|
|
20
|
+
import * as i3$1 from '@skyux/i18n';
|
|
21
21
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
22
|
-
import * as i1$
|
|
22
|
+
import * as i1$3 from '@skyux/help-inline';
|
|
23
23
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
24
|
-
import * as i3$
|
|
24
|
+
import * as i3$2 from '@angular/forms';
|
|
25
25
|
import { FormsModule } from '@angular/forms';
|
|
26
26
|
import * as i4 from '@skyux/forms';
|
|
27
27
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
28
28
|
import * as i2$2 from '@skyux/indicators';
|
|
29
29
|
import { SkyWaitModule } from '@skyux/indicators';
|
|
30
30
|
import { trigger, transition, style, query, group, animate, state } from '@angular/animations';
|
|
31
|
-
import * as i1$
|
|
31
|
+
import * as i1$4 from '@skyux/modals';
|
|
32
32
|
import { SkyModalModule } from '@skyux/modals';
|
|
33
33
|
|
|
34
34
|
const RESPONSIVE_CLASS_SM = 'sky-action-button-container-sm';
|
|
@@ -407,7 +407,7 @@ class SkyBackToTopComponent {
|
|
|
407
407
|
this.#_scrollToTopClick.complete();
|
|
408
408
|
}
|
|
409
409
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyBackToTopComponent, isStandalone: false, selector: "sky-back-to-top", ngImport: i0, template: "<div\n class=\"sky-back-to-top\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-3': 'modern'\n }\"\n>\n <button\n class=\"sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"onScrollToTopClick()\"\n >\n {{ 'skyux_back_to_top' | skyLibResources }}\n </button>\n</div>\n", styles: [".sky-back-to-top:not(.sky-theme-modern *){--sky-override-back-to-top-padding: var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg);--sky-override-back-to-top-background-color: #ffffff}.sky-back-to-top{display:flex;align-items:center;width:100%;background-color:var(--sky-override-back-to-top-background-color, var(--sky-color-background-container-base));padding:var(--sky-override-back-to-top-padding, var(--sky-comp-back_to_top-space-inset-top) var(--sky-comp-back_to_top-space-inset-right) var(--sky-comp-back_to_top-space-inset-bottom) var(--sky-comp-back_to_top-space-inset-left))}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type:
|
|
410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyBackToTopComponent, isStandalone: false, selector: "sky-back-to-top", ngImport: i0, template: "<div\n class=\"sky-back-to-top\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-3': 'modern'\n }\"\n>\n <button\n class=\"sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"onScrollToTopClick()\"\n >\n {{ 'skyux_back_to_top' | skyLibResources }}\n </button>\n</div>\n", styles: [".sky-back-to-top:not(.sky-theme-modern *){--sky-override-back-to-top-padding: var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg);--sky-override-back-to-top-background-color: #ffffff}.sky-back-to-top{display:flex;align-items:center;width:100%;background-color:var(--sky-override-back-to-top-background-color, var(--sky-color-background-container-base));padding:var(--sky-override-back-to-top-padding, var(--sky-comp-back_to_top-space-inset-top) var(--sky-comp-back_to_top-space-inset-right) var(--sky-comp-back_to_top-space-inset-bottom) var(--sky-comp-back_to_top-space-inset-left))}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
411
411
|
}
|
|
412
412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
|
|
413
413
|
type: Component,
|
|
@@ -750,7 +750,7 @@ class SkyBoxComponent {
|
|
|
750
750
|
return idService.generateId();
|
|
751
751
|
},
|
|
752
752
|
},
|
|
753
|
-
], queries: [{ propertyName: "boxHeaderRef", first: true, predicate: SkyBoxHeaderComponent, descendants: true, read: ElementRef }, { propertyName: "boxControls", first: true, predicate: SkyBoxControlsComponent, descendants: true }], ngImport: i0, template: "<section\n class=\"sky-box\"\n [attr.aria-label]=\"headingText || ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? headerId : ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n @if (headingText) {\n <div class=\"sky-box-header-right\">\n @switch (headingLevel) {\n @case (3) {\n <!-- display: inline -->\n <h3\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h3\n >\n }\n @case (4) {\n <!-- display: inline -->\n <h4\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h4\n >\n }\n @case (5) {\n <!-- display: inline -->\n <h5\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h5\n >\n }\n @default {\n <!-- display: inline -->\n <h2\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h2\n >\n }\n }\n @if ((helpPopoverContent || helpKey) && !headingHidden) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n } @else {\n <ng-content select=\"sky-box-header\" />\n }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box:not(.sky-theme-modern *){--sky-override-box-content-padding: var(--sky-padding-even-xl);--sky-override-box-header-container-padding: var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);--sky-override-box-header-padding-right: var(--sky-margin-inline-xl);--sky-override-box-background-color-default: #fff}sky-box{display:block}.sky-box{--sky-background-color-page-default: var( --sky-override-box-background-color-default, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-override-box-header-container-padding, var(--sky-comp-box-header-space-inset-top) var(--sky-comp-box-header-space-inset-right) var(--sky-comp-box-header-space-inset-bottom) var(--sky-comp-box-header-space-inset-left))}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box .sky-box-header-content .sky-box-header-right{flex:1 0;padding-right:var(--sky-override-box-header-padding-right, var(--sky-space-gap-text_action-l))}.sky-box .sky-box-header-content h2,.sky-box .sky-box-header-content h3,.sky-box .sky-box-header-content h4,.sky-box .sky-box-header-content h5{display:inline;margin-block:0}.sky-box sky-box-content .sky-box-content{padding:var(--sky-override-box-content-padding, var(--sky-comp-box-content-space-inset-top) var(--sky-comp-box-content-space-inset-right) var(--sky-comp-box-content-space-inset-bottom) var(--sky-comp-box-content-space-inset-left))}\n"], dependencies: [{ kind: "component", type: i1$
|
|
753
|
+
], queries: [{ propertyName: "boxHeaderRef", first: true, predicate: SkyBoxHeaderComponent, descendants: true, read: ElementRef }, { propertyName: "boxControls", first: true, predicate: SkyBoxControlsComponent, descendants: true }], ngImport: i0, template: "<section\n class=\"sky-box\"\n [attr.aria-label]=\"headingText || ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? headerId : ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n @if (headingText) {\n <div class=\"sky-box-header-right\">\n @switch (headingLevel) {\n @case (3) {\n <!-- display: inline -->\n <h3\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h3\n >\n }\n @case (4) {\n <!-- display: inline -->\n <h4\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h4\n >\n }\n @case (5) {\n <!-- display: inline -->\n <h5\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h5\n >\n }\n @default {\n <!-- display: inline -->\n <h2\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h2\n >\n }\n }\n @if ((helpPopoverContent || helpKey) && !headingHidden) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n } @else {\n <ng-content select=\"sky-box-header\" />\n }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box:not(.sky-theme-modern *){--sky-override-box-content-padding: var(--sky-padding-even-xl);--sky-override-box-header-container-padding: var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);--sky-override-box-header-padding-right: var(--sky-margin-inline-xl);--sky-override-box-background-color-default: #fff}sky-box{display:block}.sky-box{--sky-background-color-page-default: var( --sky-override-box-background-color-default, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-override-box-header-container-padding, var(--sky-comp-box-header-space-inset-top) var(--sky-comp-box-header-space-inset-right) var(--sky-comp-box-header-space-inset-bottom) var(--sky-comp-box-header-space-inset-left))}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box .sky-box-header-content .sky-box-header-right{flex:1 0;padding-right:var(--sky-override-box-header-padding-right, var(--sky-space-gap-text_action-l))}.sky-box .sky-box-header-content h2,.sky-box .sky-box-header-content h3,.sky-box .sky-box-header-content h4,.sky-box .sky-box-header-content h5{display:inline;margin-block:0}.sky-box sky-box-content .sky-box-content{padding:var(--sky-override-box-content-padding, var(--sky-comp-box-content-space-inset-top) var(--sky-comp-box-content-space-inset-right) var(--sky-comp-box-content-space-inset-bottom) var(--sky-comp-box-content-space-inset-left))}\n"], dependencies: [{ kind: "component", type: i1$3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
754
754
|
}
|
|
755
755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
756
756
|
type: Component,
|
|
@@ -1044,7 +1044,7 @@ class SkyInlineDeleteComponent {
|
|
|
1044
1044
|
}
|
|
1045
1045
|
}
|
|
1046
1046
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1047
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyInlineDeleteComponent, isStandalone: false, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n role=\"alertdialog\"\n [@inlineDeleteAnimation]=\"animationState\"\n [attr.aria-describedby]=\"assistiveTextId\"\n [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n>\n <span\n class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n [id]=\"assistiveTextId\"\n >\n {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n </span>\n <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n <div class=\"sky-inline-delete-content\">\n <div class=\"sky-inline-delete-content-animation-container\">\n <button\n #delete\n class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n type=\"button\"\n (click)=\"onDeleteClick()\"\n >\n {{ 'skyux_inline_delete_delete' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n </button>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}\n"], dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type:
|
|
1047
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyInlineDeleteComponent, isStandalone: false, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n role=\"alertdialog\"\n [@inlineDeleteAnimation]=\"animationState\"\n [attr.aria-describedby]=\"assistiveTextId\"\n [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n>\n <span\n class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n [id]=\"assistiveTextId\"\n >\n {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n </span>\n <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n <div class=\"sky-inline-delete-content\">\n <div class=\"sky-inline-delete-content-animation-container\">\n <button\n #delete\n class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n type=\"button\"\n (click)=\"onDeleteClick()\"\n >\n {{ 'skyux_inline_delete_delete' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n </button>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}\n"], dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
1048
1048
|
trigger('inlineDeleteAnimation', [
|
|
1049
1049
|
transition('* => shown', [
|
|
1050
1050
|
style({
|
|
@@ -1244,7 +1244,7 @@ class SkyCardComponent {
|
|
|
1244
1244
|
}
|
|
1245
1245
|
}
|
|
1246
1246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyCardComponent, isStandalone: false, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n class=\"sky-card sky-shadow\"\n [ngClass]=\"\n {\n 'sky-card-small': size === 'small',\n 'sky-card-selectable': selectable,\n 'sky-card-selected': selectable && selected\n }\"\n>\n <ng-content select=\"sky-inline-delete\" />\n <header>\n @if (selectable || showTitle) {\n <div class=\"sky-card-header\" (click)=\"contentClick()\">\n <div class=\"sky-card-heading-middle\">\n @if (showTitle) {\n <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n <ng-content select=\"sky-card-title\" />\n </h1>\n }\n </div>\n @if (selectable) {\n <div class=\"sky-card-check\">\n <sky-checkbox\n [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n [ngModel]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (ngModelChange)=\"onCheckboxChange($event)\"\n />\n </div>\n }\n </div>\n }\n </header>\n <div\n class=\"sky-card-content sky-padding-even-default\"\n (click)=\"contentClick()\"\n >\n <ng-content select=\"sky-card-content\" />\n </div>\n <div\n #actionsEl\n class=\"sky-card-actions\"\n [hidden]=\"actionsEl.children.length === 0\"\n >\n <ng-content select=\"sky-card-actions\" />\n </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color .15s;vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$
|
|
1247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyCardComponent, isStandalone: false, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n class=\"sky-card sky-shadow\"\n [ngClass]=\"\n {\n 'sky-card-small': size === 'small',\n 'sky-card-selectable': selectable,\n 'sky-card-selected': selectable && selected\n }\"\n>\n <ng-content select=\"sky-inline-delete\" />\n <header>\n @if (selectable || showTitle) {\n <div class=\"sky-card-header\" (click)=\"contentClick()\">\n <div class=\"sky-card-heading-middle\">\n @if (showTitle) {\n <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n <ng-content select=\"sky-card-title\" />\n </h1>\n }\n </div>\n @if (selectable) {\n <div class=\"sky-card-check\">\n <sky-checkbox\n [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n [ngModel]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (ngModelChange)=\"onCheckboxChange($event)\"\n />\n </div>\n }\n </div>\n }\n </header>\n <div\n class=\"sky-card-content sky-padding-even-default\"\n (click)=\"contentClick()\"\n >\n <ng-content select=\"sky-card-content\" />\n </div>\n <div\n #actionsEl\n class=\"sky-card-actions\"\n [hidden]=\"actionsEl.children.length === 0\"\n >\n <ng-content select=\"sky-card-actions\" />\n </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color .15s;vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1248
1248
|
}
|
|
1249
1249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyCardComponent, decorators: [{
|
|
1250
1250
|
type: Component,
|
|
@@ -1378,7 +1378,7 @@ class SkyDefinitionListValueComponent {
|
|
|
1378
1378
|
this.service = service;
|
|
1379
1379
|
}
|
|
1380
1380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1381
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyDefinitionListValueComponent, isStandalone: false, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n <span #valueEl>\n <ng-content />\n </span>\n @if (!valueEl.textContent?.trim()) {\n <span class=\"sky-deemphasized\">\n {{\n (service.defaultValue | async) ||\n ('skyux_definition_list_none_found' | skyLibResources)\n }}\n </span>\n }\n</div>\n", styles: [":host{flex:1}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type:
|
|
1381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyDefinitionListValueComponent, isStandalone: false, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n <span #valueEl>\n <ng-content />\n </span>\n @if (!valueEl.textContent?.trim()) {\n <span class=\"sky-deemphasized\">\n {{\n (service.defaultValue | async) ||\n ('skyux_definition_list_none_found' | skyLibResources)\n }}\n </span>\n }\n</div>\n", styles: [":host{flex:1}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1382
1382
|
}
|
|
1383
1383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyDefinitionListValueComponent, decorators: [{
|
|
1384
1384
|
type: Component,
|
|
@@ -1511,7 +1511,7 @@ class SkyDescriptionListDescriptionComponent {
|
|
|
1511
1511
|
this.#ngUnsubscribe.complete();
|
|
1512
1512
|
}
|
|
1513
1513
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyDescriptionListDescriptionComponent, isStandalone: false, selector: "sky-description-list-description", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #descriptionTemplateRef>\n <span skyTrim class=\"sky-description-list-description\"\n ><ng-content></ng-content\n ></span>\n <span\n class=\"sky-description-list-default-value\"\n data-sky-id=\"sky-description-list-default-value\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n {{\n (service.defaultDescription | async) ||\n ('skyux_description_list_none_found' | skyLibResources)\n }}\n </span>\n</ng-template>\n", styles: [".sky-description-list-description:not(:empty)+.sky-description-list-default-value{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type:
|
|
1514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyDescriptionListDescriptionComponent, isStandalone: false, selector: "sky-description-list-description", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #descriptionTemplateRef>\n <span skyTrim class=\"sky-description-list-description\"\n ><ng-content></ng-content\n ></span>\n <span\n class=\"sky-description-list-default-value\"\n data-sky-id=\"sky-description-list-default-value\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n {{\n (service.defaultDescription | async) ||\n ('skyux_description_list_none_found' | skyLibResources)\n }}\n </span>\n</ng-template>\n", styles: [".sky-description-list-description:not(:empty)+.sky-description-list-default-value{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1515
1515
|
}
|
|
1516
1516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
|
|
1517
1517
|
type: Component,
|
|
@@ -1538,7 +1538,7 @@ class SkyDescriptionListTermComponent {
|
|
|
1538
1538
|
});
|
|
1539
1539
|
}
|
|
1540
1540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyDescriptionListTermComponent, isStandalone: false, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef\n ><span #term=\"skyId\" skyTrim skyId class=\"description-list-term\"\n ><ng-content /></span\n ><span class=\"sky-control-help-container\">\n @if (content?.helpPopoverContent || content?.helpKey) {\n <sky-help-inline\n [labelledBy]=\"term.id\"\n [helpKey]=\"content?.helpKey\"\n [popoverTitle]=\"content?.helpPopoverTitle\"\n [popoverContent]=\"content?.helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }</span\n></ng-template>\n", styles: ["span.description-list-term{display:contents;white-space:normal}:host-context(.sky-description-list-long-description-mode) span.description-list-term{overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1$
|
|
1541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyDescriptionListTermComponent, isStandalone: false, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef\n ><span #term=\"skyId\" skyTrim skyId class=\"description-list-term\"\n ><ng-content /></span\n ><span class=\"sky-control-help-container\">\n @if (content?.helpPopoverContent || content?.helpKey) {\n <sky-help-inline\n [labelledBy]=\"term.id\"\n [helpKey]=\"content?.helpKey\"\n [popoverTitle]=\"content?.helpPopoverTitle\"\n [popoverContent]=\"content?.helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }</span\n></ng-template>\n", styles: ["span.description-list-term{display:contents;white-space:normal}:host-context(.sky-description-list-long-description-mode) span.description-list-term{overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1$3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }] }); }
|
|
1542
1542
|
}
|
|
1543
1543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
|
|
1544
1544
|
type: Component,
|
|
@@ -2230,8 +2230,8 @@ class SkyTextExpandModalComponent {
|
|
|
2230
2230
|
close() {
|
|
2231
2231
|
this.instance.close();
|
|
2232
2232
|
}
|
|
2233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$
|
|
2234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyTextExpandModalComponent, isStandalone: true, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n <sky-modal-header>{{ context.header }}</sky-modal-header>\n <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n context.text\n }}</sky-modal-content>\n <sky-modal-footer>\n <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n {{ 'skyux_text_expand_close_text' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1$
|
|
2233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$4.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyTextExpandModalComponent, isStandalone: true, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n <sky-modal-header>{{ context.header }}</sky-modal-header>\n <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n context.text\n }}</sky-modal-content>\n <sky-modal-footer>\n <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n {{ 'skyux_text_expand_close_text' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1$4.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i1$4.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$4.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$4.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyLayoutResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
2235
2235
|
}
|
|
2236
2236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandModalComponent, decorators: [{
|
|
2237
2237
|
type: Component,
|
|
@@ -2239,7 +2239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2239
2239
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2240
2240
|
type: Inject,
|
|
2241
2241
|
args: [SKY_TEXT_EXPAND_MODAL_CONTEXT]
|
|
2242
|
-
}] }, { type: i1$
|
|
2242
|
+
}] }, { type: i1$4.SkyModalInstance }] });
|
|
2243
2243
|
|
|
2244
2244
|
/**
|
|
2245
2245
|
* Auto-incrementing integer used to generate unique ids for text expand components.
|
|
@@ -2486,7 +2486,7 @@ class SkyTextExpandComponent {
|
|
|
2486
2486
|
this.isExpanded = expanding;
|
|
2487
2487
|
}
|
|
2488
2488
|
}
|
|
2489
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token:
|
|
2489
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i3$1.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2490
2490
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyTextExpandComponent, isStandalone: false, selector: "sky-text-expand", inputs: { expandModalTitle: "expandModalTitle", maxExpandedLength: "maxExpandedLength", maxExpandedNewlines: "maxExpandedNewlines", maxLength: "maxLength", text: "text", truncateNewlines: "truncateNewlines" }, providers: [SkyTextExpandAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "textEl", first: true, predicate: ["text"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n #container\n class=\"sky-text-expand-container\"\n [@expansionAnimation]=\"{\n value: isExpanded,\n params: { transitionHeight: transitionHeight }\n }\"\n (@expansionAnimation.done)=\"animationEnd()\"\n>\n <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n @if (expandable) {\n @if (!isExpanded) {\n <span class=\"sky-text-expand-ellipsis\">... </span>\n }\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n [attr.aria-expanded]=\"isModal ? undefined : !!isExpanded\"\n [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n (click)=\"textExpand()\"\n >\n {{ buttonText }}\n </button>\n }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], animations: [
|
|
2491
2491
|
trigger('expansionAnimation', [
|
|
2492
2492
|
transition(':enter', []),
|
|
@@ -2518,7 +2518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2518
2518
|
transition('void => *', []),
|
|
2519
2519
|
]),
|
|
2520
2520
|
], selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], standalone: false, template: "<div\n #container\n class=\"sky-text-expand-container\"\n [@expansionAnimation]=\"{\n value: isExpanded,\n params: { transitionHeight: transitionHeight }\n }\"\n (@expansionAnimation.done)=\"animationEnd()\"\n>\n <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n @if (expandable) {\n @if (!isExpanded) {\n <span class=\"sky-text-expand-ellipsis\">... </span>\n }\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n [attr.aria-expanded]=\"isModal ? undefined : !!isExpanded\"\n [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n (click)=\"textExpand()\"\n >\n {{ buttonText }}\n </button>\n }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
|
|
2521
|
-
}], ctorParameters: () => [{ type:
|
|
2521
|
+
}], ctorParameters: () => [{ type: i3$1.SkyLibResourcesService }, { type: i1$4.SkyModalService }, { type: SkyTextExpandAdapterService }], propDecorators: { expandModalTitle: [{
|
|
2522
2522
|
type: Input
|
|
2523
2523
|
}], maxExpandedLength: [{
|
|
2524
2524
|
type: Input
|
|
@@ -2592,91 +2592,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2592
2592
|
*/
|
|
2593
2593
|
let nextId = 0;
|
|
2594
2594
|
class SkyTextExpandRepeaterComponent {
|
|
2595
|
-
|
|
2596
|
-
* The data to truncate.
|
|
2597
|
-
*/
|
|
2598
|
-
set data(value) {
|
|
2599
|
-
this.#_data = value;
|
|
2600
|
-
// Wait for the dom to render the new items based on the updated data
|
|
2601
|
-
setTimeout(() => {
|
|
2602
|
-
this.#htmlItems = this.#textExpandRepeaterAdapter.getItems(this.#elRef);
|
|
2603
|
-
this.#setup(value);
|
|
2604
|
-
});
|
|
2605
|
-
}
|
|
2606
|
-
get data() {
|
|
2607
|
-
return this.#_data;
|
|
2608
|
-
}
|
|
2609
|
-
/**
|
|
2610
|
-
* The number of items to display before truncating the list. If not supplied, all items are shown.
|
|
2611
|
-
*/
|
|
2612
|
-
set maxItems(value) {
|
|
2613
|
-
this.#_maxItems = value;
|
|
2614
|
-
this.#setup(this.data);
|
|
2615
|
-
}
|
|
2616
|
-
get maxItems() {
|
|
2617
|
-
return this.#_maxItems;
|
|
2618
|
-
}
|
|
2595
|
+
#resources;
|
|
2619
2596
|
#seeMoreText;
|
|
2620
2597
|
#seeLessText;
|
|
2598
|
+
#dataIndices;
|
|
2621
2599
|
#htmlItems;
|
|
2622
|
-
#_data;
|
|
2623
|
-
#_maxItems;
|
|
2624
|
-
#resources;
|
|
2625
2600
|
#elRef;
|
|
2626
2601
|
#textExpandRepeaterAdapter;
|
|
2627
2602
|
#changeDetector;
|
|
2628
|
-
constructor(
|
|
2603
|
+
constructor() {
|
|
2604
|
+
/**
|
|
2605
|
+
* The data to truncate.
|
|
2606
|
+
*/
|
|
2607
|
+
this.data = input();
|
|
2608
|
+
/**
|
|
2609
|
+
* The template for items in the list.
|
|
2610
|
+
*/
|
|
2611
|
+
this.itemTemplate = input();
|
|
2629
2612
|
/**
|
|
2630
2613
|
* The style of bullet to use
|
|
2631
2614
|
* @default "unordered"
|
|
2632
2615
|
*/
|
|
2633
|
-
this.listStyle = 'unordered';
|
|
2634
|
-
|
|
2616
|
+
this.listStyle = input('unordered');
|
|
2617
|
+
/**
|
|
2618
|
+
* The number of items to display before truncating the list. If not supplied, all items are shown.
|
|
2619
|
+
*/
|
|
2620
|
+
this.maxItems = input(0, {
|
|
2621
|
+
transform: numberAttribute,
|
|
2622
|
+
});
|
|
2635
2623
|
this.expandable = false;
|
|
2636
2624
|
this.contentSectionId = `sky-text-expand-repeater-content-${++nextId}`;
|
|
2625
|
+
this.isExpanded = signal(false);
|
|
2637
2626
|
this.transitionHeight = 1;
|
|
2638
|
-
this.#
|
|
2639
|
-
this.#
|
|
2640
|
-
this.#
|
|
2641
|
-
this
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
this.#
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
}
|
|
2659
|
-
else {
|
|
2660
|
-
this.buttonText = this.#seeLessText;
|
|
2661
|
-
}
|
|
2662
|
-
this.#changeDetector.detectChanges();
|
|
2627
|
+
this.#resources = inject(SkyLibResourcesService);
|
|
2628
|
+
this.#seeMoreText = toSignal(this.#resources.getString('skyux_text_expand_see_more'), { initialValue: '' });
|
|
2629
|
+
this.#seeLessText = toSignal(this.#resources.getString('skyux_text_expand_see_less'), { initialValue: '' });
|
|
2630
|
+
this.buttonText = computed(() => {
|
|
2631
|
+
const seeLessText = this.#seeLessText();
|
|
2632
|
+
const seeMoreText = this.#seeMoreText();
|
|
2633
|
+
return this.isExpanded() ? seeLessText : seeMoreText;
|
|
2634
|
+
});
|
|
2635
|
+
this.containerEl = viewChild('container');
|
|
2636
|
+
this.#dataIndices = 0;
|
|
2637
|
+
this.#elRef = inject(ElementRef);
|
|
2638
|
+
this.#textExpandRepeaterAdapter = inject(SkyTextExpandRepeaterAdapterService);
|
|
2639
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2640
|
+
this.trackedData = computed(() => (this.data() ?? []).map((item) => ({
|
|
2641
|
+
item,
|
|
2642
|
+
index: ++this.#dataIndices,
|
|
2643
|
+
})));
|
|
2644
|
+
afterRenderEffect(() => {
|
|
2645
|
+
this.#htmlItems = this.#textExpandRepeaterAdapter.getItems(this.#elRef);
|
|
2646
|
+
this.#setup();
|
|
2663
2647
|
});
|
|
2664
2648
|
}
|
|
2665
2649
|
animationEnd() {
|
|
2666
2650
|
// Ensure all items that should be hidden are hidden. This is because we need them shown during the animation window for visual purposes.
|
|
2667
|
-
if (!this.isExpanded) {
|
|
2651
|
+
if (!this.isExpanded()) {
|
|
2668
2652
|
this.#hideItems();
|
|
2669
2653
|
}
|
|
2670
2654
|
// This set timeout is needed as the `animationEnd` function is called by the angular animation callback prior to the animation setting the style on the element
|
|
2671
2655
|
setTimeout(() => {
|
|
2672
|
-
|
|
2656
|
+
const containerEl = this.containerEl();
|
|
2657
|
+
if (containerEl) {
|
|
2673
2658
|
// Set height back to auto so the browser can change the height as needed with window changes
|
|
2674
|
-
this.#textExpandRepeaterAdapter.removeContainerMaxHeight(
|
|
2659
|
+
this.#textExpandRepeaterAdapter.removeContainerMaxHeight(containerEl);
|
|
2675
2660
|
}
|
|
2676
2661
|
});
|
|
2677
2662
|
}
|
|
2678
2663
|
repeaterExpand() {
|
|
2679
|
-
if (!this.isExpanded) {
|
|
2664
|
+
if (!this.isExpanded()) {
|
|
2680
2665
|
this.#animateRepeater(true);
|
|
2681
2666
|
}
|
|
2682
2667
|
else {
|
|
@@ -2685,7 +2670,7 @@ class SkyTextExpandRepeaterComponent {
|
|
|
2685
2670
|
}
|
|
2686
2671
|
#animateRepeater(expanding) {
|
|
2687
2672
|
const adapter = this.#textExpandRepeaterAdapter;
|
|
2688
|
-
const container = this.containerEl;
|
|
2673
|
+
const container = this.containerEl();
|
|
2689
2674
|
if (container) {
|
|
2690
2675
|
if (expanding) {
|
|
2691
2676
|
this.#showItems();
|
|
@@ -2693,61 +2678,49 @@ class SkyTextExpandRepeaterComponent {
|
|
|
2693
2678
|
else {
|
|
2694
2679
|
this.#hideItems();
|
|
2695
2680
|
}
|
|
2696
|
-
|
|
2697
|
-
this.transitionHeight = newHeight;
|
|
2698
|
-
if (!expanding) {
|
|
2699
|
-
this.buttonText = this.#seeMoreText;
|
|
2700
|
-
}
|
|
2701
|
-
else {
|
|
2702
|
-
this.buttonText = this.#seeLessText;
|
|
2703
|
-
}
|
|
2681
|
+
this.transitionHeight = adapter.getContainerHeight(container);
|
|
2704
2682
|
if (!expanding) {
|
|
2705
2683
|
// Show all items during animation for visual purposes.
|
|
2706
2684
|
this.#showItems();
|
|
2707
2685
|
}
|
|
2708
|
-
this.isExpanded
|
|
2686
|
+
this.isExpanded.set(expanding);
|
|
2709
2687
|
}
|
|
2710
2688
|
}
|
|
2711
|
-
#setup(
|
|
2712
|
-
|
|
2689
|
+
#setup() {
|
|
2690
|
+
const container = this.containerEl();
|
|
2691
|
+
const maxItems = this.maxItems();
|
|
2692
|
+
const value = this.trackedData();
|
|
2693
|
+
this.expandable = false;
|
|
2694
|
+
this.isExpanded.set(false);
|
|
2695
|
+
if (value.length > 0) {
|
|
2713
2696
|
const length = value.length;
|
|
2714
|
-
if (
|
|
2697
|
+
if (maxItems && length > maxItems) {
|
|
2715
2698
|
this.expandable = true;
|
|
2716
|
-
this.buttonText = this.#seeMoreText;
|
|
2717
2699
|
this.#hideItems();
|
|
2718
|
-
if (
|
|
2700
|
+
if (container) {
|
|
2719
2701
|
this.transitionHeight =
|
|
2720
|
-
this.#textExpandRepeaterAdapter.getContainerHeight(
|
|
2702
|
+
this.#textExpandRepeaterAdapter.getContainerHeight(container);
|
|
2721
2703
|
}
|
|
2722
|
-
this.isExpanded = false;
|
|
2723
2704
|
}
|
|
2724
|
-
else {
|
|
2725
|
-
this.expandable = false;
|
|
2726
|
-
this.isExpanded = undefined;
|
|
2727
|
-
}
|
|
2728
|
-
}
|
|
2729
|
-
else {
|
|
2730
|
-
this.expandable = false;
|
|
2731
|
-
this.isExpanded = undefined;
|
|
2732
2705
|
}
|
|
2733
|
-
this.#changeDetector.
|
|
2706
|
+
this.#changeDetector.detectChanges();
|
|
2734
2707
|
}
|
|
2735
2708
|
#hideItems() {
|
|
2736
|
-
if (this.#htmlItems && this.maxItems) {
|
|
2737
|
-
for (let i = this.maxItems; i < this.#htmlItems.length; i++) {
|
|
2709
|
+
if (this.#htmlItems && this.maxItems()) {
|
|
2710
|
+
for (let i = this.maxItems(); i < this.#htmlItems.length; i++) {
|
|
2738
2711
|
this.#textExpandRepeaterAdapter.hideItem(this.#htmlItems[i]);
|
|
2739
2712
|
}
|
|
2740
2713
|
}
|
|
2741
2714
|
}
|
|
2742
2715
|
#showItems() {
|
|
2743
|
-
if (this.#htmlItems && this.maxItems) {
|
|
2744
|
-
for (let i = this.maxItems; i < this.#htmlItems.length; i++) {
|
|
2716
|
+
if (this.#htmlItems && this.maxItems()) {
|
|
2717
|
+
for (let i = this.maxItems(); i < this.#htmlItems.length; i++) {
|
|
2745
2718
|
this.#textExpandRepeaterAdapter.showItem(this.#htmlItems[i]);
|
|
2746
2719
|
}
|
|
2747
2720
|
}
|
|
2748
2721
|
}
|
|
2749
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [
|
|
2750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyTextExpandRepeaterComponent, isStandalone: false, selector: "sky-text-expand-repeater", inputs: { data: "data", itemTemplate: "itemTemplate", listStyle: "listStyle", maxItems: "maxItems" }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true,
|
|
2722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyTextExpandRepeaterComponent, isStandalone: false, selector: "sky-text-expand-repeater", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n @if (listStyle() !== 'ordered') {\n <ul\n #container\n class=\"sky-text-expand-repeater-container\"\n [@expansionAnimation]=\"{\n value: isExpanded(),\n params: { transitionHeight: transitionHeight }\n }\"\n [id]=\"contentSectionId\"\n [ngClass]=\"{\n 'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n }\"\n (@expansionAnimation.done)=\"animationEnd()\"\n >\n <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n </ul>\n } @else {\n <ol\n #container\n class=\"sky-text-expand-repeater-container\"\n [@expansionAnimation]=\"{\n value: isExpanded(),\n params: { transitionHeight: transitionHeight }\n }\"\n [id]=\"contentSectionId\"\n (@expansionAnimation.done)=\"animationEnd()\"\n >\n <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n </ol>\n }\n @if (expandable) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"contentSectionId\"\n [ngClass]=\"{\n 'sky-text-expand-repeater-see-more-list-style-none':\n listStyle() === 'unstyled'\n }\"\n (click)=\"repeaterExpand()\"\n >\n {{ buttonText() }}\n </button>\n }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n @for (item of trackedData(); track item.index) {\n <li class=\"sky-text-expand-repeater-item\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n />\n </li>\n }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
2751
2724
|
trigger('expansionAnimation', [
|
|
2752
2725
|
transition(':enter', []),
|
|
2753
2726
|
state('true', style({
|
|
@@ -2777,22 +2750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2777
2750
|
transition('false => true', animate('250ms ease')),
|
|
2778
2751
|
transition('void => *', []),
|
|
2779
2752
|
]),
|
|
2780
|
-
], selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], standalone: false, template: "<div class=\"sky-text-expand-repeater\">\n @if (listStyle !== 'ordered') {\n <ul\n #container\n class=\"sky-text-expand-repeater-container\"\n [@expansionAnimation]=\"{\n value: isExpanded,\n params: { transitionHeight: transitionHeight }\n }\"\n [id]=\"contentSectionId\"\n [ngClass]=\"{\n 'sky-text-expand-repeater-list-style-none': listStyle === 'unstyled'\n }\"\n (@expansionAnimation.done)=\"animationEnd()\"\n >\n <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n </ul>\n } @else {\n <ol\n #container\n class=\"sky-text-expand-repeater-container\"\n [@expansionAnimation]=\"{\n value: isExpanded,\n params: { transitionHeight: transitionHeight }\n }\"\n [id]=\"contentSectionId\"\n (@expansionAnimation.done)=\"animationEnd()\"\n >\n <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n </ol>\n }\n @if (expandable) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n [attr.aria-expanded]=\"
|
|
2781
|
-
}], ctorParameters: () => [
|
|
2782
|
-
type: Input
|
|
2783
|
-
}], itemTemplate: [{
|
|
2784
|
-
type: Input
|
|
2785
|
-
}], listStyle: [{
|
|
2786
|
-
type: Input
|
|
2787
|
-
}], maxItems: [{
|
|
2788
|
-
type: Input
|
|
2789
|
-
}], containerEl: [{
|
|
2790
|
-
type: ViewChild,
|
|
2791
|
-
args: ['container', {
|
|
2792
|
-
read: ElementRef,
|
|
2793
|
-
static: false,
|
|
2794
|
-
}]
|
|
2795
|
-
}] } });
|
|
2753
|
+
], selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], standalone: false, template: "<div class=\"sky-text-expand-repeater\">\n @if (listStyle() !== 'ordered') {\n <ul\n #container\n class=\"sky-text-expand-repeater-container\"\n [@expansionAnimation]=\"{\n value: isExpanded(),\n params: { transitionHeight: transitionHeight }\n }\"\n [id]=\"contentSectionId\"\n [ngClass]=\"{\n 'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n }\"\n (@expansionAnimation.done)=\"animationEnd()\"\n >\n <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n </ul>\n } @else {\n <ol\n #container\n class=\"sky-text-expand-repeater-container\"\n [@expansionAnimation]=\"{\n value: isExpanded(),\n params: { transitionHeight: transitionHeight }\n }\"\n [id]=\"contentSectionId\"\n (@expansionAnimation.done)=\"animationEnd()\"\n >\n <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n </ol>\n }\n @if (expandable) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"contentSectionId\"\n [ngClass]=\"{\n 'sky-text-expand-repeater-see-more-list-style-none':\n listStyle() === 'unstyled'\n }\"\n (click)=\"repeaterExpand()\"\n >\n {{ buttonText() }}\n </button>\n }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n @for (item of trackedData(); track item.index) {\n <li class=\"sky-text-expand-repeater-item\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n />\n </li>\n }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"] }]
|
|
2754
|
+
}], ctorParameters: () => [] });
|
|
2796
2755
|
|
|
2797
2756
|
class SkyTextExpandRepeaterModule {
|
|
2798
2757
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTextExpandRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|