@skyux/lists 10.37.4 → 10.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
|
|
2
2
|
import { BehaviorSubject } from 'rxjs';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "./sort.service";
|
|
@@ -53,11 +53,11 @@ export class SkySortItemComponent {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortItemComponent, deps: [{ token: i1.SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "itemTemplate", first: true, predicate: (TemplateRef), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
56
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "itemTemplate", first: true, predicate: (TemplateRef), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active a,.sky-sort-item.sky-dropdown-item-active button,.sky-sort-item:hover a,.sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}.sky-sort-item button[disabled],.sky-sort-item a[disabled]{cursor:default}.sky-sort-item button[disabled]:hover,.sky-sort-item a[disabled]:hover{background-color:transparent}.sky-sort-item>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item>button[disabled]{color:var(--sky-text-color-deemphasized)}.sky-sort-item>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}.sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item button:focus-visible{outline:none}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
57
57
|
}
|
|
58
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
|
-
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n" }]
|
|
60
|
+
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active a,.sky-sort-item.sky-dropdown-item-active button,.sky-sort-item:hover a,.sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}.sky-sort-item button[disabled],.sky-sort-item a[disabled]{cursor:default}.sky-sort-item button[disabled]:hover,.sky-sort-item a[disabled]:hover{background-color:transparent}.sky-sort-item>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item>button[disabled]{color:var(--sky-text-color-deemphasized)}.sky-sort-item>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}.sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item button:focus-visible{outline:none}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item-selected button{color:#fbfcfe}\n"] }]
|
|
61
61
|
}], ctorParameters: () => [{ type: i1.SkySortService }, { type: i0.ChangeDetectorRef }], propDecorators: { active: [{
|
|
62
62
|
type: Input
|
|
63
63
|
}], itemSelect: [{
|
|
@@ -66,4 +66,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
66
66
|
type: ViewChild,
|
|
67
67
|
args: [(TemplateRef)]
|
|
68
68
|
}] } });
|
|
69
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9saXN0cy9zcmMvbGliL21vZHVsZXMvc29ydC9zb3J0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2xpc3RzL3NyYy9saWIvbW9kdWxlcy9zb3J0L3NvcnQtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUlMLE1BQU0sRUFFTixXQUFXLEVBQ1gsU0FBUyxFQUNULGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsZUFBZSxFQUFnQixNQUFNLE1BQU0sQ0FBQzs7OztBQUlyRCxNQUFNLG1CQUFtQixHQUFHLGdCQUFnQixDQUFDO0FBRTdDLElBQUksZ0JBQWdCLEdBQUcsQ0FBQyxDQUFDO0FBU3pCLE1BQU0sT0FBTyxvQkFBb0I7SUFvQi9CLGFBQWEsQ0FBMkI7SUFFeEMsV0FBVyxDQUFxQjtJQUVoQyxZQUFZLENBQWlCO0lBQzdCLFNBQVMsQ0FBb0I7SUFFN0IsWUFBWSxXQUEyQixFQUFFLFFBQTJCO1FBcEJwRTs7V0FFRztRQUVJLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDLENBQUMsNkRBQTZEO1FBRW5HLGVBQVUsR0FBNkIsSUFBSSxlQUFlLENBQy9ELEtBQUssQ0FDTixDQUFDO1FBYUEsSUFBSSxDQUFDLFlBQVksR0FBRyxXQUFXLENBQUM7UUFDaEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7SUFDNUIsQ0FBQztJQUVNLFFBQVE7UUFDYixnQkFBZ0IsRUFBRSxDQUFDO1FBQ25CLElBQUksQ0FBQyxXQUFXLEdBQUcsbUJBQW1CLEdBQUcsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDckUsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQzNELENBQUMsTUFBYyxFQUFFLEVBQUU7WUFDakIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsTUFBTSxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztZQUNsRCxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ2pDLENBQUMsQ0FDRixDQUFDO1FBRUYsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDaEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ2pELENBQUM7SUFDSCxDQUFDO0lBRU0sV0FBVyxDQUFDLE9BQXNCO1FBQ3ZDLElBQ0UsSUFBSSxDQUFDLFdBQVc7WUFDaEIsT0FBTztZQUNQLE9BQU8sQ0FBQyxRQUFRLENBQUM7WUFDakIsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFlBQVk7WUFDOUIsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFlBQVksS0FBSyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsYUFBYSxFQUNsRSxDQUFDO1lBQ0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ2pELENBQUM7SUFDSCxDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNyQixJQUFJLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7WUFDL0MsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQztJQUVNLFdBQVc7UUFDaEIsMEJBQTBCO1FBQzFCLGtCQUFrQjtRQUNsQixJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsYUFBYSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ25DLENBQUM7SUFDSCxDQUFDOzhHQXhFVSxvQkFBb0I7a0dBQXBCLG9CQUFvQix3S0FpQnBCLENBQUEsV0FBZ0IsQ0FBQSxxRUNoRDdCLDJhQWdCQTs7MkZEZWEsb0JBQW9CO2tCQVBoQyxTQUFTOytCQUNFLGVBQWUsbUJBR1IsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSTttSEFPOUIsTUFBTTtzQkFEWixLQUFLO2dCQU9DLFVBQVU7c0JBRGhCLE1BQU07Z0JBUUEsWUFBWTtzQkFEbEIsU0FBUzt1QkFBQyxDQUFBLFdBQWdCLENBQUEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NoaWxkLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IFNreVNvcnRTZXJ2aWNlIH0gZnJvbSAnLi9zb3J0LnNlcnZpY2UnO1xuXG5jb25zdCBTT1JUX0lURU1fSURfUFJFRklYID0gJ3NreS1zb3J0LWl0ZW0tJztcblxubGV0IHNvcnRJdGVtSWROdW1iZXIgPSAwO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktc29ydC1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NvcnQtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NvcnQtaXRlbS5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5U29ydEl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHNvcnRpbmcgb3B0aW9uIGlzIGFjdGl2ZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBhY3RpdmU6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIEZpcmVzIHdoZW4gYSBzb3J0IGl0ZW0gaXMgc2VsZWN0ZWQuXG4gICAqL1xuICBAT3V0cHV0KClcbiAgcHVibGljIGl0ZW1TZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTsgLy8gVE9ETzogQ2hhbmdlIHRvIGBFdmVudEVtaXR0ZXI8dm9pZD5gIGluIGEgYnJlYWtpbmcgY2hhbmdlLlxuXG4gIHB1YmxpYyBpc1NlbGVjdGVkOiBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+KFxuICAgIGZhbHNlLFxuICApO1xuXG4gIEBWaWV3Q2hpbGQoVGVtcGxhdGVSZWY8YW55PilcbiAgcHVibGljIGl0ZW1UZW1wbGF0ZT86IFRlbXBsYXRlUmVmPGFueT4gfCBudWxsO1xuXG4gICNzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbiB8IHVuZGVmaW5lZDtcblxuICAjc29ydEl0ZW1JZDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICNzb3J0U2VydmljZTogU2t5U29ydFNlcnZpY2U7XG4gICNkZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWY7XG5cbiAgY29uc3RydWN0b3Ioc29ydFNlcnZpY2U6IFNreVNvcnRTZXJ2aWNlLCBkZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICB0aGlzLiNzb3J0U2VydmljZSA9IHNvcnRTZXJ2aWNlO1xuICAgIHRoaXMuI2RldGVjdG9yID0gZGV0ZWN0b3I7XG4gIH1cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgc29ydEl0ZW1JZE51bWJlcisrO1xuICAgIHRoaXMuI3NvcnRJdGVtSWQgPSBTT1JUX0lURU1fSURfUFJFRklYICsgc29ydEl0ZW1JZE51bWJlci50b1N0cmluZygpO1xuICAgIHRoaXMuI3N1YnNjcmlwdGlvbiA9IHRoaXMuI3NvcnRTZXJ2aWNlLnNlbGVjdGVkSXRlbS5zdWJzY3JpYmUoXG4gICAgICAoaXRlbUlkOiBzdHJpbmcpID0+IHtcbiAgICAgICAgdGhpcy5pc1NlbGVjdGVkLm5leHQoaXRlbUlkID09PSB0aGlzLiNzb3J0SXRlbUlkKTtcbiAgICAgICAgdGhpcy4jZGV0ZWN0b3IuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgfSxcbiAgICApO1xuXG4gICAgaWYgKHRoaXMuYWN0aXZlKSB7XG4gICAgICB0aGlzLiNzb3J0U2VydmljZS5zZWxlY3RJdGVtKHRoaXMuI3NvcnRJdGVtSWQpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKFxuICAgICAgdGhpcy4jc29ydEl0ZW1JZCAmJlxuICAgICAgY2hhbmdlcyAmJlxuICAgICAgY2hhbmdlc1snYWN0aXZlJ10gJiZcbiAgICAgIGNoYW5nZXNbJ2FjdGl2ZSddLmN1cnJlbnRWYWx1ZSAmJlxuICAgICAgY2hhbmdlc1snYWN0aXZlJ10uY3VycmVudFZhbHVlICE9PSBjaGFuZ2VzWydhY3RpdmUnXS5wcmV2aW91c1ZhbHVlXG4gICAgKSB7XG4gICAgICB0aGlzLiNzb3J0U2VydmljZS5zZWxlY3RJdGVtKHRoaXMuI3NvcnRJdGVtSWQpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBpdGVtQ2xpY2tlZCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy4jc29ydEl0ZW1JZCkge1xuICAgICAgdGhpcy4jc29ydFNlcnZpY2Uuc2VsZWN0SXRlbSh0aGlzLiNzb3J0SXRlbUlkKTtcbiAgICAgIHRoaXMuaXRlbVNlbGVjdC5lbWl0KCk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIC8qIGlzdGFuYnVsIGlnbm9yZSBlbHNlICovXG4gICAgLyogc2FuaXR5IGNoZWNrICovXG4gICAgaWYgKHRoaXMuI3N1YnNjcmlwdGlvbikge1xuICAgICAgdGhpcy4jc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgfVxuICB9XG59XG4iLCI8bmctdGVtcGxhdGUgI2l0ZW1UZW1wbGF0ZT5cbiAgPGRpdlxuICAgIGNsYXNzPVwic2t5LXNvcnQtaXRlbVwiXG4gICAgcm9sZT1cIm1lbnVpdGVtcmFkaW9cIlxuICAgIFthdHRyLmFyaWEtY2hlY2tlZF09XCJpc1NlbGVjdGVkIHwgYXN5bmNcIlxuICAgIFtuZ0NsYXNzXT1cInsgJ3NreS1zb3J0LWl0ZW0tc2VsZWN0ZWQnOiAoaXNTZWxlY3RlZCB8IGFzeW5jKSB9XCJcbiAgPlxuICAgIDxidXR0b25cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgW25nQ2xhc3NdPVwieyAnc2t5LWZvbnQtZW1waGFzaXplZCc6IChpc1NlbGVjdGVkIHwgYXN5bmMpIH1cIlxuICAgICAgKGNsaWNrKT1cIml0ZW1DbGlja2VkKClcIlxuICAgID5cbiAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -29,11 +29,11 @@ export class SkySortComponent {
|
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortComponent, selector: "sky-sort", inputs: { ariaLabel: "ariaLabel", showButtonText: "showButtonText" }, providers: [SkySortService], queries: [{ propertyName: "sortItems", predicate: SkySortItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}::ng-deep .sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}::ng-deep .sky-sort-item.sky-dropdown-item-active a,::ng-deep .sky-sort-item.sky-dropdown-item-active button,::ng-deep .sky-sort-item:hover a,::ng-deep .sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}::ng-deep .sky-sort-item button[disabled],::ng-deep .sky-sort-item a[disabled]{cursor:default}::ng-deep .sky-sort-item button[disabled]:hover,::ng-deep .sky-sort-item a[disabled]:hover{background-color:transparent}::ng-deep .sky-sort-item ::ng-deep>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}::ng-deep .sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}::ng-deep .sky-sort-item ::ng-deep>button[disabled]:hover{cursor:default}::ng-deep .sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item button{padding:0;color:#686c73}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item button:focus-visible{outline:none}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item-selected button{font-weight:400;color:#212327}::ng-deep .sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}::ng-deep .sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}::ng-deep .sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}::ng-deep .sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}::ng-deep .sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}::ng-deep .sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}::ng-deep .sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}::ng-deep .sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}::ng-deep .sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep .sky-theme-modern .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep .sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}::ng-deep .sky-theme-modern .sky-sort-item button:focus-visible{outline:none}::ng-deep .sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}::ng-deep .sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}::ng-deep :host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item button{color:#c0c2c5}::ng-deep :host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item-selected button{color:#fbfcfe}::ng-deep .sky-theme-modern.sky-theme-mode-dark .sky-sort-item button{color:#c0c2c5}::ng-deep .sky-theme-modern.sky-theme-mode-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i4.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortComponent, selector: "sky-sort", inputs: { ariaLabel: "ariaLabel", showButtonText: "showButtonText" }, providers: [SkySortService], queries: [{ propertyName: "sortItems", predicate: SkySortItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i4.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
|
-
args: [{ selector: 'sky-sort', providers: [SkySortService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}
|
|
36
|
+
args: [{ selector: 'sky-sort', providers: [SkySortService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}\n"] }]
|
|
37
37
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{
|
|
38
38
|
type: Input
|
|
39
39
|
}], showButtonText: [{
|
package/fesm2022/skyux-lists.mjs
CHANGED
|
@@ -1938,11 +1938,11 @@ class SkySortItemComponent {
|
|
|
1938
1938
|
}
|
|
1939
1939
|
}
|
|
1940
1940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "itemTemplate", first: true, predicate: (TemplateRef), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "itemTemplate", first: true, predicate: (TemplateRef), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active a,.sky-sort-item.sky-dropdown-item-active button,.sky-sort-item:hover a,.sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}.sky-sort-item button[disabled],.sky-sort-item a[disabled]{cursor:default}.sky-sort-item button[disabled]:hover,.sky-sort-item a[disabled]:hover{background-color:transparent}.sky-sort-item>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item>button[disabled]{color:var(--sky-text-color-deemphasized)}.sky-sort-item>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}.sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item button:focus-visible{outline:none}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1942
1942
|
}
|
|
1943
1943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1944
1944
|
type: Component,
|
|
1945
|
-
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n" }]
|
|
1945
|
+
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #itemTemplate>\n <div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n >\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content />\n </button>\n </div>\n</ng-template>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active a,.sky-sort-item.sky-dropdown-item-active button,.sky-sort-item:hover a,.sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}.sky-sort-item button[disabled],.sky-sort-item a[disabled]{cursor:default}.sky-sort-item button[disabled]:hover,.sky-sort-item a[disabled]:hover{background-color:transparent}.sky-sort-item>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item>button[disabled]{color:var(--sky-text-color-deemphasized)}.sky-sort-item>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}.sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item button:focus-visible{outline:none}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-modern-dark .sky-sort-item-selected button{color:#fbfcfe}\n"] }]
|
|
1946
1946
|
}], ctorParameters: () => [{ type: SkySortService }, { type: i0.ChangeDetectorRef }], propDecorators: { active: [{
|
|
1947
1947
|
type: Input
|
|
1948
1948
|
}], itemSelect: [{
|
|
@@ -1978,11 +1978,11 @@ class SkySortComponent {
|
|
|
1978
1978
|
});
|
|
1979
1979
|
}
|
|
1980
1980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1981
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortComponent, selector: "sky-sort", inputs: { ariaLabel: "ariaLabel", showButtonText: "showButtonText" }, providers: [SkySortService], queries: [{ propertyName: "sortItems", predicate: SkySortItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}::ng-deep .sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}::ng-deep .sky-sort-item.sky-dropdown-item-active a,::ng-deep .sky-sort-item.sky-dropdown-item-active button,::ng-deep .sky-sort-item:hover a,::ng-deep .sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}::ng-deep .sky-sort-item button[disabled],::ng-deep .sky-sort-item a[disabled]{cursor:default}::ng-deep .sky-sort-item button[disabled]:hover,::ng-deep .sky-sort-item a[disabled]:hover{background-color:transparent}::ng-deep .sky-sort-item ::ng-deep>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}::ng-deep .sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}::ng-deep .sky-sort-item ::ng-deep>button[disabled]:hover{cursor:default}::ng-deep .sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item button{padding:0;color:#686c73}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item button:focus-visible{outline:none}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}::ng-deep :host-context(.sky-theme-modern) .sky-sort-item-selected button{font-weight:400;color:#212327}::ng-deep .sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}::ng-deep .sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}::ng-deep .sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}::ng-deep .sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}::ng-deep .sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}::ng-deep .sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}::ng-deep .sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}::ng-deep .sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}::ng-deep .sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep .sky-theme-modern .sky-sort-item:focus-within{background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}::ng-deep .sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}::ng-deep .sky-theme-modern .sky-sort-item button:focus-visible{outline:none}::ng-deep .sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}::ng-deep .sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}::ng-deep :host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item button{color:#c0c2c5}::ng-deep :host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item-selected button{color:#fbfcfe}::ng-deep .sky-theme-modern.sky-theme-mode-dark .sky-sort-item button{color:#c0c2c5}::ng-deep .sky-theme-modern.sky-theme-mode-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkySortComponent, selector: "sky-sort", inputs: { ariaLabel: "ariaLabel", showButtonText: "showButtonText" }, providers: [SkySortService], queries: [{ propertyName: "sortItems", predicate: SkySortItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1982
1982
|
}
|
|
1983
1983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1984
1984
|
type: Component,
|
|
1985
|
-
args: [{ selector: 'sky-sort', providers: [SkySortService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}
|
|
1985
|
+
args: [{ selector: 'sky-sort', providers: [SkySortService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"\n ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_sort_aria_label_descriptor'\n | skyLibResources: (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_sort_button_label' | skyLibResources))\n \"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"sort\" />\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-container *ngFor=\"let item of sortItems\">\n <sky-dropdown-item>\n <ng-container [ngTemplateOutlet]=\"item.itemTemplate!\"></ng-container>\n </sky-dropdown-item>\n </ng-container>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}\n"] }]
|
|
1986
1986
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{
|
|
1987
1987
|
type: Input
|
|
1988
1988
|
}], showButtonText: [{
|