@skyux/layout 12.38.1 → 12.39.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.
|
@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT } 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, computed, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, Inject, contentChildren, effect } from '@angular/core';
|
|
6
|
+
import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, computed, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, Inject, contentChildren, effect, input, signal, 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';
|
|
@@ -415,7 +415,7 @@ class SkyBackToTopComponent {
|
|
|
415
415
|
this.#_scrollToTopClick.complete();
|
|
416
416
|
}
|
|
417
417
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
418
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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:
|
|
418
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
|
|
419
419
|
}
|
|
420
420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
|
|
421
421
|
type: Component,
|
|
@@ -758,7 +758,7 @@ class SkyBoxComponent {
|
|
|
758
758
|
return idService.generateId();
|
|
759
759
|
},
|
|
760
760
|
},
|
|
761
|
-
], 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-theme-modern:not(.sky-theme-brand-base) sky-box{--sky-override-box-header-padding-right: var(--sky-margin-inline-xl)}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$
|
|
761
|
+
], 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-theme-modern:not(.sky-theme-brand-base) sky-box{--sky-override-box-header-padding-right: var(--sky-margin-inline-xl)}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 }); }
|
|
762
762
|
}
|
|
763
763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
764
764
|
type: Component,
|
|
@@ -1052,7 +1052,7 @@ class SkyInlineDeleteComponent {
|
|
|
1052
1052
|
}
|
|
1053
1053
|
}
|
|
1054
1054
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1055
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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:
|
|
1055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: [
|
|
1056
1056
|
trigger('inlineDeleteAnimation', [
|
|
1057
1057
|
transition('* => shown', [
|
|
1058
1058
|
style({
|
|
@@ -1252,7 +1252,7 @@ class SkyCardComponent {
|
|
|
1252
1252
|
}
|
|
1253
1253
|
}
|
|
1254
1254
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1255
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-card{--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: var(--sky-font-size-heading-1);--sky-override-card-header-font-weight: var(--sky-font-style-heading-1);--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$
|
|
1255
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-card{--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: var(--sky-font-size-heading-1);--sky-override-card-header-font-weight: var(--sky-font-style-heading-1);--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", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1256
1256
|
}
|
|
1257
1257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyCardComponent, decorators: [{
|
|
1258
1258
|
type: Component,
|
|
@@ -1386,7 +1386,7 @@ class SkyDefinitionListValueComponent {
|
|
|
1386
1386
|
this.service = service;
|
|
1387
1387
|
}
|
|
1388
1388
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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:
|
|
1389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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" }] }); }
|
|
1390
1390
|
}
|
|
1391
1391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyDefinitionListValueComponent, decorators: [{
|
|
1392
1392
|
type: Component,
|
|
@@ -1519,7 +1519,7 @@ class SkyDescriptionListDescriptionComponent {
|
|
|
1519
1519
|
this.#ngUnsubscribe.complete();
|
|
1520
1520
|
}
|
|
1521
1521
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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:
|
|
1522
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
|
|
1523
1523
|
}
|
|
1524
1524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
|
|
1525
1525
|
type: Component,
|
|
@@ -1546,7 +1546,7 @@ class SkyDescriptionListTermComponent {
|
|
|
1546
1546
|
});
|
|
1547
1547
|
}
|
|
1548
1548
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1549
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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$
|
|
1549
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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]" }] }); }
|
|
1550
1550
|
}
|
|
1551
1551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
|
|
1552
1552
|
type: Component,
|
|
@@ -2337,8 +2337,8 @@ class SkyTextExpandModalComponent {
|
|
|
2337
2337
|
close() {
|
|
2338
2338
|
this.instance.close();
|
|
2339
2339
|
}
|
|
2340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$
|
|
2341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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$
|
|
2340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$4.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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" }] }); }
|
|
2342
2342
|
}
|
|
2343
2343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandModalComponent, decorators: [{
|
|
2344
2344
|
type: Component,
|
|
@@ -2346,7 +2346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2346
2346
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2347
2347
|
type: Inject,
|
|
2348
2348
|
args: [SKY_TEXT_EXPAND_MODAL_CONTEXT]
|
|
2349
|
-
}] }, { type: i1$
|
|
2349
|
+
}] }, { type: i1$4.SkyModalInstance }] });
|
|
2350
2350
|
|
|
2351
2351
|
/**
|
|
2352
2352
|
* Auto-incrementing integer used to generate unique ids for text expand components.
|
|
@@ -2593,7 +2593,7 @@ class SkyTextExpandComponent {
|
|
|
2593
2593
|
this.isExpanded = expanding;
|
|
2594
2594
|
}
|
|
2595
2595
|
}
|
|
2596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token:
|
|
2596
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i3$1.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2597
2597
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: [
|
|
2598
2598
|
trigger('expansionAnimation', [
|
|
2599
2599
|
transition(':enter', []),
|
|
@@ -2625,7 +2625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2625
2625
|
transition('void => *', []),
|
|
2626
2626
|
]),
|
|
2627
2627
|
], 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"] }]
|
|
2628
|
-
}], ctorParameters: () => [{ type:
|
|
2628
|
+
}], ctorParameters: () => [{ type: i3$1.SkyLibResourcesService }, { type: i1$4.SkyModalService }, { type: SkyTextExpandAdapterService }], propDecorators: { expandModalTitle: [{
|
|
2629
2629
|
type: Input
|
|
2630
2630
|
}], maxExpandedLength: [{
|
|
2631
2631
|
type: Input
|
|
@@ -2699,91 +2699,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2699
2699
|
*/
|
|
2700
2700
|
let nextId = 0;
|
|
2701
2701
|
class SkyTextExpandRepeaterComponent {
|
|
2702
|
-
|
|
2703
|
-
* The data to truncate.
|
|
2704
|
-
*/
|
|
2705
|
-
set data(value) {
|
|
2706
|
-
this.#_data = value;
|
|
2707
|
-
// Wait for the dom to render the new items based on the updated data
|
|
2708
|
-
setTimeout(() => {
|
|
2709
|
-
this.#htmlItems = this.#textExpandRepeaterAdapter.getItems(this.#elRef);
|
|
2710
|
-
this.#setup(value);
|
|
2711
|
-
});
|
|
2712
|
-
}
|
|
2713
|
-
get data() {
|
|
2714
|
-
return this.#_data;
|
|
2715
|
-
}
|
|
2716
|
-
/**
|
|
2717
|
-
* The number of items to display before truncating the list. If not supplied, all items are shown.
|
|
2718
|
-
*/
|
|
2719
|
-
set maxItems(value) {
|
|
2720
|
-
this.#_maxItems = value;
|
|
2721
|
-
this.#setup(this.data);
|
|
2722
|
-
}
|
|
2723
|
-
get maxItems() {
|
|
2724
|
-
return this.#_maxItems;
|
|
2725
|
-
}
|
|
2702
|
+
#resources;
|
|
2726
2703
|
#seeMoreText;
|
|
2727
2704
|
#seeLessText;
|
|
2705
|
+
#dataIndices;
|
|
2728
2706
|
#htmlItems;
|
|
2729
|
-
#_data;
|
|
2730
|
-
#_maxItems;
|
|
2731
|
-
#resources;
|
|
2732
2707
|
#elRef;
|
|
2733
2708
|
#textExpandRepeaterAdapter;
|
|
2734
2709
|
#changeDetector;
|
|
2735
|
-
constructor(
|
|
2710
|
+
constructor() {
|
|
2711
|
+
/**
|
|
2712
|
+
* The data to truncate.
|
|
2713
|
+
*/
|
|
2714
|
+
this.data = input();
|
|
2715
|
+
/**
|
|
2716
|
+
* The template for items in the list.
|
|
2717
|
+
*/
|
|
2718
|
+
this.itemTemplate = input();
|
|
2736
2719
|
/**
|
|
2737
2720
|
* The style of bullet to use
|
|
2738
2721
|
* @default "unordered"
|
|
2739
2722
|
*/
|
|
2740
|
-
this.listStyle = 'unordered';
|
|
2741
|
-
|
|
2723
|
+
this.listStyle = input('unordered');
|
|
2724
|
+
/**
|
|
2725
|
+
* The number of items to display before truncating the list. If not supplied, all items are shown.
|
|
2726
|
+
*/
|
|
2727
|
+
this.maxItems = input(0, {
|
|
2728
|
+
transform: numberAttribute,
|
|
2729
|
+
});
|
|
2742
2730
|
this.expandable = false;
|
|
2743
2731
|
this.contentSectionId = `sky-text-expand-repeater-content-${++nextId}`;
|
|
2732
|
+
this.isExpanded = signal(false);
|
|
2744
2733
|
this.transitionHeight = 1;
|
|
2745
|
-
this.#
|
|
2746
|
-
this.#
|
|
2747
|
-
this.#
|
|
2748
|
-
this
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
this.#
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
}
|
|
2766
|
-
else {
|
|
2767
|
-
this.buttonText = this.#seeLessText;
|
|
2768
|
-
}
|
|
2769
|
-
this.#changeDetector.detectChanges();
|
|
2734
|
+
this.#resources = inject(SkyLibResourcesService);
|
|
2735
|
+
this.#seeMoreText = toSignal(this.#resources.getString('skyux_text_expand_see_more'), { initialValue: '' });
|
|
2736
|
+
this.#seeLessText = toSignal(this.#resources.getString('skyux_text_expand_see_less'), { initialValue: '' });
|
|
2737
|
+
this.buttonText = computed(() => {
|
|
2738
|
+
const seeLessText = this.#seeLessText();
|
|
2739
|
+
const seeMoreText = this.#seeMoreText();
|
|
2740
|
+
return this.isExpanded() ? seeLessText : seeMoreText;
|
|
2741
|
+
});
|
|
2742
|
+
this.containerEl = viewChild('container');
|
|
2743
|
+
this.#dataIndices = 0;
|
|
2744
|
+
this.#elRef = inject(ElementRef);
|
|
2745
|
+
this.#textExpandRepeaterAdapter = inject(SkyTextExpandRepeaterAdapterService);
|
|
2746
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2747
|
+
this.trackedData = computed(() => (this.data() ?? []).map((item) => ({
|
|
2748
|
+
item,
|
|
2749
|
+
index: ++this.#dataIndices,
|
|
2750
|
+
})));
|
|
2751
|
+
afterRenderEffect(() => {
|
|
2752
|
+
this.#htmlItems = this.#textExpandRepeaterAdapter.getItems(this.#elRef);
|
|
2753
|
+
this.#setup();
|
|
2770
2754
|
});
|
|
2771
2755
|
}
|
|
2772
2756
|
animationEnd() {
|
|
2773
2757
|
// Ensure all items that should be hidden are hidden. This is because we need them shown during the animation window for visual purposes.
|
|
2774
|
-
if (!this.isExpanded) {
|
|
2758
|
+
if (!this.isExpanded()) {
|
|
2775
2759
|
this.#hideItems();
|
|
2776
2760
|
}
|
|
2777
2761
|
// 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
|
|
2778
2762
|
setTimeout(() => {
|
|
2779
|
-
|
|
2763
|
+
const containerEl = this.containerEl();
|
|
2764
|
+
if (containerEl) {
|
|
2780
2765
|
// Set height back to auto so the browser can change the height as needed with window changes
|
|
2781
|
-
this.#textExpandRepeaterAdapter.removeContainerMaxHeight(
|
|
2766
|
+
this.#textExpandRepeaterAdapter.removeContainerMaxHeight(containerEl);
|
|
2782
2767
|
}
|
|
2783
2768
|
});
|
|
2784
2769
|
}
|
|
2785
2770
|
repeaterExpand() {
|
|
2786
|
-
if (!this.isExpanded) {
|
|
2771
|
+
if (!this.isExpanded()) {
|
|
2787
2772
|
this.#animateRepeater(true);
|
|
2788
2773
|
}
|
|
2789
2774
|
else {
|
|
@@ -2792,7 +2777,7 @@ class SkyTextExpandRepeaterComponent {
|
|
|
2792
2777
|
}
|
|
2793
2778
|
#animateRepeater(expanding) {
|
|
2794
2779
|
const adapter = this.#textExpandRepeaterAdapter;
|
|
2795
|
-
const container = this.containerEl;
|
|
2780
|
+
const container = this.containerEl();
|
|
2796
2781
|
if (container) {
|
|
2797
2782
|
if (expanding) {
|
|
2798
2783
|
this.#showItems();
|
|
@@ -2800,61 +2785,49 @@ class SkyTextExpandRepeaterComponent {
|
|
|
2800
2785
|
else {
|
|
2801
2786
|
this.#hideItems();
|
|
2802
2787
|
}
|
|
2803
|
-
|
|
2804
|
-
this.transitionHeight = newHeight;
|
|
2805
|
-
if (!expanding) {
|
|
2806
|
-
this.buttonText = this.#seeMoreText;
|
|
2807
|
-
}
|
|
2808
|
-
else {
|
|
2809
|
-
this.buttonText = this.#seeLessText;
|
|
2810
|
-
}
|
|
2788
|
+
this.transitionHeight = adapter.getContainerHeight(container);
|
|
2811
2789
|
if (!expanding) {
|
|
2812
2790
|
// Show all items during animation for visual purposes.
|
|
2813
2791
|
this.#showItems();
|
|
2814
2792
|
}
|
|
2815
|
-
this.isExpanded
|
|
2793
|
+
this.isExpanded.set(expanding);
|
|
2816
2794
|
}
|
|
2817
2795
|
}
|
|
2818
|
-
#setup(
|
|
2819
|
-
|
|
2796
|
+
#setup() {
|
|
2797
|
+
const container = this.containerEl();
|
|
2798
|
+
const maxItems = this.maxItems();
|
|
2799
|
+
const value = this.trackedData();
|
|
2800
|
+
this.expandable = false;
|
|
2801
|
+
this.isExpanded.set(false);
|
|
2802
|
+
if (value.length > 0) {
|
|
2820
2803
|
const length = value.length;
|
|
2821
|
-
if (
|
|
2804
|
+
if (maxItems && length > maxItems) {
|
|
2822
2805
|
this.expandable = true;
|
|
2823
|
-
this.buttonText = this.#seeMoreText;
|
|
2824
2806
|
this.#hideItems();
|
|
2825
|
-
if (
|
|
2807
|
+
if (container) {
|
|
2826
2808
|
this.transitionHeight =
|
|
2827
|
-
this.#textExpandRepeaterAdapter.getContainerHeight(
|
|
2809
|
+
this.#textExpandRepeaterAdapter.getContainerHeight(container);
|
|
2828
2810
|
}
|
|
2829
|
-
this.isExpanded = false;
|
|
2830
2811
|
}
|
|
2831
|
-
else {
|
|
2832
|
-
this.expandable = false;
|
|
2833
|
-
this.isExpanded = undefined;
|
|
2834
|
-
}
|
|
2835
|
-
}
|
|
2836
|
-
else {
|
|
2837
|
-
this.expandable = false;
|
|
2838
|
-
this.isExpanded = undefined;
|
|
2839
2812
|
}
|
|
2840
|
-
this.#changeDetector.
|
|
2813
|
+
this.#changeDetector.detectChanges();
|
|
2841
2814
|
}
|
|
2842
2815
|
#hideItems() {
|
|
2843
|
-
if (this.#htmlItems && this.maxItems) {
|
|
2844
|
-
for (let i = this.maxItems; i < this.#htmlItems.length; i++) {
|
|
2816
|
+
if (this.#htmlItems && this.maxItems()) {
|
|
2817
|
+
for (let i = this.maxItems(); i < this.#htmlItems.length; i++) {
|
|
2845
2818
|
this.#textExpandRepeaterAdapter.hideItem(this.#htmlItems[i]);
|
|
2846
2819
|
}
|
|
2847
2820
|
}
|
|
2848
2821
|
}
|
|
2849
2822
|
#showItems() {
|
|
2850
|
-
if (this.#htmlItems && this.maxItems) {
|
|
2851
|
-
for (let i = this.maxItems; i < this.#htmlItems.length; i++) {
|
|
2823
|
+
if (this.#htmlItems && this.maxItems()) {
|
|
2824
|
+
for (let i = this.maxItems(); i < this.#htmlItems.length; i++) {
|
|
2852
2825
|
this.#textExpandRepeaterAdapter.showItem(this.#htmlItems[i]);
|
|
2853
2826
|
}
|
|
2854
2827
|
}
|
|
2855
2828
|
}
|
|
2856
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [
|
|
2857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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,
|
|
2829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: [
|
|
2858
2831
|
trigger('expansionAnimation', [
|
|
2859
2832
|
transition(':enter', []),
|
|
2860
2833
|
state('true', style({
|
|
@@ -2884,22 +2857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2884
2857
|
transition('false => true', animate('250ms ease')),
|
|
2885
2858
|
transition('void => *', []),
|
|
2886
2859
|
]),
|
|
2887
|
-
], 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]=\"
|
|
2888
|
-
}], ctorParameters: () => [
|
|
2889
|
-
type: Input
|
|
2890
|
-
}], itemTemplate: [{
|
|
2891
|
-
type: Input
|
|
2892
|
-
}], listStyle: [{
|
|
2893
|
-
type: Input
|
|
2894
|
-
}], maxItems: [{
|
|
2895
|
-
type: Input
|
|
2896
|
-
}], containerEl: [{
|
|
2897
|
-
type: ViewChild,
|
|
2898
|
-
args: ['container', {
|
|
2899
|
-
read: ElementRef,
|
|
2900
|
-
static: false,
|
|
2901
|
-
}]
|
|
2902
|
-
}] } });
|
|
2860
|
+
], 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"] }]
|
|
2861
|
+
}], ctorParameters: () => [] });
|
|
2903
2862
|
|
|
2904
2863
|
class SkyTextExpandRepeaterModule {
|
|
2905
2864
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyTextExpandRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|