@skyux/code-examples 12.0.0-alpha.10 → 12.0.0-alpha.12
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-code-examples.mjs +30 -20
- package/fesm2022/skyux-code-examples.mjs.map +1 -1
- package/lib/modules/layout/back-to-top/infinite-scroll/example.component.d.ts +1 -0
- package/lib/modules/layout/back-to-top/repeater/example.component.d.ts +1 -0
- package/lib/modules/layout/page/layout-fit/example.component.d.ts +1 -0
- package/lib/modules/pages/action-hub/example.component.d.ts +1 -0
- package/lib/modules/pages/page/home-page-blocks-layout-demo/example.component.d.ts +1 -0
- package/lib/modules/pages/page/list-page-list-layout-demo/example.component.d.ts +1 -0
- package/lib/modules/pages/page/list-page-tabs-layout-demo/example.component.d.ts +1 -0
- package/lib/modules/pages/page/record-page-blocks-layout-demo/example.component.d.ts +1 -0
- package/lib/modules/pages/page/record-page-tabs-layout-demo/example.component.d.ts +1 -0
- package/lib/modules/pages/page/split-view-page-fit-layout-demo/example.component.d.ts +1 -0
- package/package.json +33 -33
|
@@ -54,7 +54,7 @@ import * as i2$7 from '@skyux/lists';
|
|
|
54
54
|
import { SkyPagingModule, SkyRepeaterModule, SkyInfiniteScrollModule, SkyFilterModule, SkySortModule } from '@skyux/lists';
|
|
55
55
|
import { map, filter, takeUntil as takeUntil$1, delay as delay$1, take } from 'rxjs/operators';
|
|
56
56
|
import * as i1$c from '@angular/common';
|
|
57
|
-
import { CommonModule
|
|
57
|
+
import { CommonModule } from '@angular/common';
|
|
58
58
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
59
59
|
import * as i3$5 from '@skyux/datetime';
|
|
60
60
|
import { SkyDateRangeCalculatorId, SkyDateRangePickerModule, SkyDateRangeService, SkyDateRangeCalculatorType, SkyDatepickerModule, SkyDatePipeModule, SkyTimepickerModule } from '@skyux/datetime';
|
|
@@ -313,6 +313,7 @@ const pastHours = Array.from(Array(5).keys()).map((i) => {
|
|
|
313
313
|
});
|
|
314
314
|
/**
|
|
315
315
|
* @title Action hub with basic setup
|
|
316
|
+
* @docsDemoHidden
|
|
316
317
|
*/
|
|
317
318
|
class PagesActionHubExampleComponent {
|
|
318
319
|
constructor() {
|
|
@@ -8029,11 +8030,11 @@ class IndicatorsWaitElementExampleComponent {
|
|
|
8029
8030
|
this.isWaiting = false;
|
|
8030
8031
|
}
|
|
8031
8032
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IndicatorsWaitElementExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: IndicatorsWaitElementExampleComponent, isStandalone: true, selector: "app-indicators-wait-element-example", ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"isWaiting = !isWaiting\"\n>\n Toggle wait\n</button>\n\n<div
|
|
8033
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: IndicatorsWaitElementExampleComponent, isStandalone: true, selector: "app-indicators-wait-element-example", ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"isWaiting = !isWaiting\"\n>\n Toggle wait\n</button>\n\n<div class=\"wrapper\">\n The <code>sky-wait</code> directive can apply to a large area.\n <sky-wait data-sky-id=\"wait-example\" [isWaiting]=\"isWaiting\" />\n</div>\n", styles: [".wrapper{height:200px;width:200px;margin:10px}\n"], dependencies: [{ kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
|
|
8033
8034
|
}
|
|
8034
8035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IndicatorsWaitElementExampleComponent, decorators: [{
|
|
8035
8036
|
type: Component,
|
|
8036
|
-
args: [{ selector: 'app-indicators-wait-element-example', imports: [SkyWaitModule], template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"isWaiting = !isWaiting\"\n>\n Toggle wait\n</button>\n\n<div
|
|
8037
|
+
args: [{ selector: 'app-indicators-wait-element-example', imports: [SkyWaitModule], template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"isWaiting = !isWaiting\"\n>\n Toggle wait\n</button>\n\n<div class=\"wrapper\">\n The <code>sky-wait</code> directive can apply to a large area.\n <sky-wait data-sky-id=\"wait-example\" [isWaiting]=\"isWaiting\" />\n</div>\n", styles: [".wrapper{height:200px;width:200px;margin:10px}\n"] }]
|
|
8037
8038
|
}] });
|
|
8038
8039
|
|
|
8039
8040
|
/**
|
|
@@ -8120,6 +8121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
8120
8121
|
|
|
8121
8122
|
/**
|
|
8122
8123
|
* @title Infinite scroll with back to top directive
|
|
8124
|
+
* @docsDemoHidden
|
|
8123
8125
|
*/
|
|
8124
8126
|
class LayoutBackToTopInfiniteScrollExampleComponent {
|
|
8125
8127
|
constructor() {
|
|
@@ -8233,10 +8235,10 @@ class LayoutBackToTopInfiniteScrollExampleComponent {
|
|
|
8233
8235
|
];
|
|
8234
8236
|
}
|
|
8235
8237
|
ngOnInit() {
|
|
8236
|
-
void this.#addData(0,
|
|
8238
|
+
void this.#addData(0, 10);
|
|
8237
8239
|
}
|
|
8238
8240
|
onScrollEnd() {
|
|
8239
|
-
void this.#addData(this.personList.length,
|
|
8241
|
+
void this.#addData(this.personList.length, 10);
|
|
8240
8242
|
}
|
|
8241
8243
|
async #addData(start, rowSize) {
|
|
8242
8244
|
if (this.hasMore) {
|
|
@@ -8265,11 +8267,11 @@ class LayoutBackToTopInfiniteScrollExampleComponent {
|
|
|
8265
8267
|
});
|
|
8266
8268
|
}
|
|
8267
8269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutBackToTopInfiniteScrollExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8268
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: LayoutBackToTopInfiniteScrollExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-infinite-scroll-example", ngImport: i0, template: "<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\" />\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }] }); }
|
|
8270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: LayoutBackToTopInfiniteScrollExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-infinite-scroll-example", ngImport: i0, template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\" />\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }] }); }
|
|
8269
8271
|
}
|
|
8270
8272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutBackToTopInfiniteScrollExampleComponent, decorators: [{
|
|
8271
8273
|
type: Component,
|
|
8272
|
-
args: [{ selector: 'app-layout-back-to-top-infinite-scroll-example', imports: [SkyBackToTopModule, SkyInfiniteScrollModule, SkyRepeaterModule], template: "<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\" />\n" }]
|
|
8274
|
+
args: [{ selector: 'app-layout-back-to-top-infinite-scroll-example', imports: [SkyBackToTopModule, SkyInfiniteScrollModule, SkyRepeaterModule], template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\" />\n" }]
|
|
8273
8275
|
}] });
|
|
8274
8276
|
|
|
8275
8277
|
/**
|
|
@@ -8356,6 +8358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
8356
8358
|
|
|
8357
8359
|
/**
|
|
8358
8360
|
* @title Repeater with back to top directive
|
|
8361
|
+
* @docsDemoHidden
|
|
8359
8362
|
*/
|
|
8360
8363
|
class LayoutBackToTopRepeaterExampleComponent {
|
|
8361
8364
|
constructor() {
|
|
@@ -8467,11 +8470,11 @@ class LayoutBackToTopRepeaterExampleComponent {
|
|
|
8467
8470
|
];
|
|
8468
8471
|
}
|
|
8469
8472
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutBackToTopRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8470
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: LayoutBackToTopRepeaterExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-repeater-example", ngImport: i0, template: "<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }] }); }
|
|
8473
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: LayoutBackToTopRepeaterExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-repeater-example", ngImport: i0, template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }] }); }
|
|
8471
8474
|
}
|
|
8472
8475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutBackToTopRepeaterExampleComponent, decorators: [{
|
|
8473
8476
|
type: Component,
|
|
8474
|
-
args: [{ selector: 'app-layout-back-to-top-repeater-example', imports: [SkyBackToTopModule, SkyRepeaterModule], template: "<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
|
|
8477
|
+
args: [{ selector: 'app-layout-back-to-top-repeater-example', imports: [SkyBackToTopModule, SkyRepeaterModule], template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n @for (person of personList; track person) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ person.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ person.address }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
|
|
8475
8478
|
}] });
|
|
8476
8479
|
|
|
8477
8480
|
/**
|
|
@@ -8753,11 +8756,11 @@ class LayoutInlineDeleteRepeaterExampleComponent {
|
|
|
8753
8756
|
this.repeaterDemoShownInlineDeletes = [];
|
|
8754
8757
|
}
|
|
8755
8758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutInlineDeleteRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: LayoutInlineDeleteRepeaterExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-repeater-example", ngImport: i0, template: "<sky-repeater
|
|
8759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: LayoutInlineDeleteRepeaterExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-repeater-example", ngImport: i0, template: "<sky-repeater>\n @for (item of repeaterDemoItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-context-menu>\n <sky-dropdown buttonType=\"context-menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-title class=\"sky-example-inline-delete-flex\">\n <div>\n {{ item.title }}\n </div>\n <div>\n {{ item.cost }}\n </div>\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ item.description }}\n </sky-repeater-item-content>\n @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n <sky-inline-delete\n (cancelTriggered)=\"cancelDeletion(item.title)\"\n (deleteTriggered)=\"deleteItem(item.title)\"\n />\n }\n </sky-repeater-item>\n }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n Reset Repeater\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$7.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$7.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$7.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$7.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }] }); }
|
|
8757
8760
|
}
|
|
8758
8761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutInlineDeleteRepeaterExampleComponent, decorators: [{
|
|
8759
8762
|
type: Component,
|
|
8760
|
-
args: [{ selector: 'app-layout-inline-delete-repeater-example', imports: [SkyDropdownModule, SkyInlineDeleteModule, SkyRepeaterModule], template: "<sky-repeater
|
|
8763
|
+
args: [{ selector: 'app-layout-inline-delete-repeater-example', imports: [SkyDropdownModule, SkyInlineDeleteModule, SkyRepeaterModule], template: "<sky-repeater>\n @for (item of repeaterDemoItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-context-menu>\n <sky-dropdown buttonType=\"context-menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-title class=\"sky-example-inline-delete-flex\">\n <div>\n {{ item.title }}\n </div>\n <div>\n {{ item.cost }}\n </div>\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ item.description }}\n </sky-repeater-item-content>\n @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n <sky-inline-delete\n (cancelTriggered)=\"cancelDeletion(item.title)\"\n (deleteTriggered)=\"deleteItem(item.title)\"\n />\n }\n </sky-repeater-item>\n }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n Reset Repeater\n</button>\n" }]
|
|
8761
8764
|
}] });
|
|
8762
8765
|
|
|
8763
8766
|
/**
|
|
@@ -8795,6 +8798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
8795
8798
|
|
|
8796
8799
|
/**
|
|
8797
8800
|
* @title Page with basic setup
|
|
8801
|
+
* @docsDemoHidden
|
|
8798
8802
|
*/
|
|
8799
8803
|
class LayoutPageLayoutFitExampleComponent {
|
|
8800
8804
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutPageLayoutFitExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -9435,11 +9439,11 @@ class ListsInfiniteScrollRepeaterExampleComponent {
|
|
|
9435
9439
|
});
|
|
9436
9440
|
}
|
|
9437
9441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsInfiniteScrollRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsInfiniteScrollRepeaterExampleComponent, isStandalone: true, selector: "app-lists-infinite-scroll-repeater-example", ngImport: i0, template: "<div
|
|
9442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsInfiniteScrollRepeaterExampleComponent, isStandalone: true, selector: "app-lists-infinite-scroll-repeater-example", ngImport: i0, template: "<div class=\"wrapper\">\n <sky-repeater>\n @for (item of items; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"onScrollEnd()\" />\n</div>\n", styles: [".wrapper{overflow-y:auto;max-height:500px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }] }); }
|
|
9439
9443
|
}
|
|
9440
9444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsInfiniteScrollRepeaterExampleComponent, decorators: [{
|
|
9441
9445
|
type: Component,
|
|
9442
|
-
args: [{ selector: 'app-lists-infinite-scroll-repeater-example', imports: [SkyInfiniteScrollModule, SkyRepeaterModule], template: "<div
|
|
9446
|
+
args: [{ selector: 'app-lists-infinite-scroll-repeater-example', imports: [SkyInfiniteScrollModule, SkyRepeaterModule], template: "<div class=\"wrapper\">\n <sky-repeater>\n @for (item of items; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"onScrollEnd()\" />\n</div>\n", styles: [".wrapper{overflow-y:auto;max-height:500px;position:relative}\n"] }]
|
|
9443
9447
|
}] });
|
|
9444
9448
|
|
|
9445
9449
|
/**
|
|
@@ -9653,11 +9657,11 @@ class ListsSortBasicExampleComponent {
|
|
|
9653
9657
|
});
|
|
9654
9658
|
}
|
|
9655
9659
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsSortBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9656
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsSortBasicExampleComponent, isStandalone: true, selector: "app-lists-sort-basic-example", ngImport: i0, template: "<sky-toolbar>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortOptions; track item) {\n <sky-sort-item\n [active]=\"initialState === item.id\"\n (itemSelect)=\"sortItems(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of sortedItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.title }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <div
|
|
9660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsSortBasicExampleComponent, isStandalone: true, selector: "app-lists-sort-basic-example", ngImport: i0, template: "<sky-toolbar>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortOptions; track item) {\n <sky-sort-item\n [active]=\"initialState === item.id\"\n (itemSelect)=\"sortItems(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of sortedItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.title }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <div class=\"item-wrapper\">\n <div>Assigned to {{ item.assignee }}</div>\n <div>Created {{ item.date | date }}</div>\n </div>\n <div>\n {{ item.note }}\n </div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n", styles: [".item-wrapper{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$c.DatePipe, name: "date" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$7.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$7.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
|
|
9657
9661
|
}
|
|
9658
9662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsSortBasicExampleComponent, decorators: [{
|
|
9659
9663
|
type: Component,
|
|
9660
|
-
args: [{ selector: 'app-lists-sort-basic-example', imports: [CommonModule, SkyRepeaterModule, SkySortModule, SkyToolbarModule], template: "<sky-toolbar>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortOptions; track item) {\n <sky-sort-item\n [active]=\"initialState === item.id\"\n (itemSelect)=\"sortItems(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of sortedItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.title }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <div
|
|
9664
|
+
args: [{ selector: 'app-lists-sort-basic-example', imports: [CommonModule, SkyRepeaterModule, SkySortModule, SkyToolbarModule], template: "<sky-toolbar>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortOptions; track item) {\n <sky-sort-item\n [active]=\"initialState === item.id\"\n (itemSelect)=\"sortItems(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of sortedItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.title }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <div class=\"item-wrapper\">\n <div>Assigned to {{ item.assignee }}</div>\n <div>Created {{ item.date | date }}</div>\n </div>\n <div>\n {{ item.note }}\n </div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n", styles: [".item-wrapper{display:flex;justify-content:space-between}\n"] }]
|
|
9661
9665
|
}] });
|
|
9662
9666
|
|
|
9663
9667
|
/**
|
|
@@ -11721,11 +11725,12 @@ class HomePageContentComponent {
|
|
|
11721
11725
|
}
|
|
11722
11726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: HomePageContentComponent, decorators: [{
|
|
11723
11727
|
type: Component,
|
|
11724
|
-
args: [{ selector: 'app-home-page-content', imports: [
|
|
11728
|
+
args: [{ selector: 'app-home-page-content', imports: [SkyTilesModule], template: "<sky-tile-dashboard [(config)]=\"dashboardConfig\" />\n" }]
|
|
11725
11729
|
}] });
|
|
11726
11730
|
|
|
11727
11731
|
/**
|
|
11728
11732
|
* @title Home page with blocks layout, using tile dashboard and recently accessed links
|
|
11733
|
+
* @docsDemoHidden
|
|
11729
11734
|
*/
|
|
11730
11735
|
class PagesPageHomePageBlocksLayoutExampleComponent {
|
|
11731
11736
|
constructor() {
|
|
@@ -11934,6 +11939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
11934
11939
|
|
|
11935
11940
|
/**
|
|
11936
11941
|
* @title List page with tabs layout using data manager
|
|
11942
|
+
* @docsDemoHidden
|
|
11937
11943
|
*/
|
|
11938
11944
|
class PagesPageListPageTabsLayoutExampleComponent {
|
|
11939
11945
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PagesPageListPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -12078,6 +12084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
12078
12084
|
|
|
12079
12085
|
/**
|
|
12080
12086
|
* @title List page with list layout using data manager
|
|
12087
|
+
* @docsDemoHidden
|
|
12081
12088
|
*/
|
|
12082
12089
|
class PagesPageListPageListLayoutExampleComponent {
|
|
12083
12090
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PagesPageListPageListLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -12177,6 +12184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
12177
12184
|
|
|
12178
12185
|
/**
|
|
12179
12186
|
* @title Record page with blocks layout using box components
|
|
12187
|
+
* @docsDemoHidden
|
|
12180
12188
|
*/
|
|
12181
12189
|
class PagesPageRecordPageBlocksLayoutExampleComponent {
|
|
12182
12190
|
constructor() {
|
|
@@ -12458,6 +12466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
12458
12466
|
|
|
12459
12467
|
/**
|
|
12460
12468
|
* @title Record page with tabs layout using data manager
|
|
12469
|
+
* @docsDemoHidden
|
|
12461
12470
|
*/
|
|
12462
12471
|
class PagesPageRecordPageTabsLayoutExampleComponent {
|
|
12463
12472
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -12656,6 +12665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
12656
12665
|
|
|
12657
12666
|
/**
|
|
12658
12667
|
* @title Split view page with fit layout
|
|
12668
|
+
* @docsDemoHidden
|
|
12659
12669
|
*/
|
|
12660
12670
|
class PagesPageSplitViewPageFitLayoutExampleComponent {
|
|
12661
12671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PagesPageSplitViewPageFitLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -13529,11 +13539,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
13529
13539
|
*/
|
|
13530
13540
|
class TabsVerticalTabsBasicExampleComponent {
|
|
13531
13541
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13532
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset>\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\"
|
|
13542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n Tab 3 content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$9.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$9.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
|
|
13533
13543
|
}
|
|
13534
13544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, decorators: [{
|
|
13535
13545
|
type: Component,
|
|
13536
|
-
args: [{ selector: 'app-tabs-vertical-tabs-basic-example', imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset>\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\"
|
|
13546
|
+
args: [{ selector: 'app-tabs-vertical-tabs-basic-example', imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n Tab 3 content\n </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
|
|
13537
13547
|
}] });
|
|
13538
13548
|
|
|
13539
13549
|
class ModalComponent {
|
|
@@ -13652,11 +13662,11 @@ class TabsVerticalTabsGroupedExampleComponent {
|
|
|
13652
13662
|
];
|
|
13653
13663
|
}
|
|
13654
13664
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13655
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset showTabsText=\"Tab list\">\n @for (group of groups; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$9.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$9.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$9.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
|
|
13665
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n @for (group of groups; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$9.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$9.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$9.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
|
|
13656
13666
|
}
|
|
13657
13667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, decorators: [{
|
|
13658
13668
|
type: Component,
|
|
13659
|
-
args: [{ selector: 'app-tabs-vertical-tabs-grouped-example', imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset showTabsText=\"Tab list\">\n @for (group of groups; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n</sky-vertical-tabset>\n" }]
|
|
13669
|
+
args: [{ selector: 'app-tabs-vertical-tabs-grouped-example', imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n @for (group of groups; track group) {\n <sky-vertical-tabset-group\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n @for (tab of group.subTabs; track tab) {\n <sky-vertical-tab\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n }\n </sky-vertical-tabset-group>\n }\n</sky-vertical-tabset>\n" }]
|
|
13660
13670
|
}] });
|
|
13661
13671
|
|
|
13662
13672
|
class Tile1Component {
|