@skyux/lists 9.25.0 → 9.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +662 -583
- package/esm2022/lib/modules/sort/sort-item.component.mjs +7 -4
- package/esm2022/lib/modules/sort/sort.component.mjs +8 -4
- package/fesm2022/skyux-lists.mjs +11 -5
- package/fesm2022/skyux-lists.mjs.map +1 -1
- package/lib/modules/sort/sort-item.component.d.ts +2 -1
- package/lib/modules/sort/sort.component.d.ts +4 -1
- package/package.json +10 -10
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef, ViewChild, } 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,14 +53,17 @@ export class SkySortItemComponent {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", 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: "16.2.9", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n
|
|
56
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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 }); }
|
|
57
57
|
}
|
|
58
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
|
-
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
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" }]
|
|
61
61
|
}], ctorParameters: function () { return [{ type: i1.SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
62
62
|
type: Input
|
|
63
63
|
}], itemSelect: [{
|
|
64
64
|
type: Output
|
|
65
|
+
}], itemTemplate: [{
|
|
66
|
+
type: ViewChild,
|
|
67
|
+
args: [(TemplateRef)]
|
|
65
68
|
}] } });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9saXN0cy9zcmMvbGliL21vZHVsZXMvc29ydC9zb3J0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2xpc3RzL3NyYy9saWIvbW9kdWxlcy9zb3J0L3NvcnQtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUlMLE1BQU0sRUFFTixXQUFXLEVBQ1gsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxlQUFlLEVBQWdCLE1BQU0sTUFBTSxDQUFDOzs7O0FBSXJELE1BQU0sbUJBQW1CLEdBQUcsZ0JBQWdCLENBQUM7QUFFN0MsSUFBSSxnQkFBZ0IsR0FBRyxDQUFDLENBQUM7QUFPekIsTUFBTSxPQUFPLG9CQUFvQjtJQW9CL0IsYUFBYSxDQUEyQjtJQUV4QyxXQUFXLENBQXFCO0lBRWhDLFlBQVksQ0FBaUI7SUFDN0IsU0FBUyxDQUFvQjtJQUU3QixZQUFZLFdBQTJCLEVBQUUsUUFBMkI7UUFwQnBFOztXQUVHO1FBRUksZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDLENBQUMsNkRBQTZEO1FBRWpILGVBQVUsR0FBNkIsSUFBSSxlQUFlLENBQy9ELEtBQUssQ0FDTixDQUFDO1FBYUEsSUFBSSxDQUFDLFlBQVksR0FBRyxXQUFXLENBQUM7UUFDaEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7SUFDNUIsQ0FBQztJQUVNLFFBQVE7UUFDYixnQkFBZ0IsRUFBRSxDQUFDO1FBQ25CLElBQUksQ0FBQyxXQUFXLEdBQUcsbUJBQW1CLEdBQUcsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDckUsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQzNELENBQUMsTUFBYyxFQUFFLEVBQUU7WUFDakIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsTUFBTSxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztZQUNsRCxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ2pDLENBQUMsQ0FDRixDQUFDO1FBRUYsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2YsSUFBSSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQ2hEO0lBQ0gsQ0FBQztJQUVNLFdBQVcsQ0FBQyxPQUFzQjtRQUN2QyxJQUNFLElBQUksQ0FBQyxXQUFXO1lBQ2hCLE9BQU87WUFDUCxPQUFPLENBQUMsUUFBUSxDQUFDO1lBQ2pCLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxZQUFZO1lBQzlCLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxZQUFZLEtBQUssT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLGFBQWEsRUFDbEU7WUFDQSxJQUFJLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7U0FDaEQ7SUFDSCxDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQy9DLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDeEI7SUFDSCxDQUFDO0lBRU0sV0FBVztRQUNoQiwwQkFBMEI7UUFDMUIsa0JBQWtCO1FBQ2xCLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzs4R0F4RVUsb0JBQW9CO2tHQUFwQixvQkFBb0Isd0tBaUJwQixDQUFBLFdBQWdCLENBQUEscUVDN0M3QiwyYUFnQkE7OzJGRFlhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxlQUFlLG1CQUVSLHVCQUF1QixDQUFDLE1BQU07cUlBT3hDLE1BQU07c0JBRFosS0FBSztnQkFPQyxVQUFVO3NCQURoQixNQUFNO2dCQVFBLFlBQVk7c0JBRGxCLFNBQVM7dUJBQUMsQ0FBQSxXQUFnQixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IFNreVNvcnRTZXJ2aWNlIH0gZnJvbSAnLi9zb3J0LnNlcnZpY2UnO1xuXG5jb25zdCBTT1JUX0lURU1fSURfUFJFRklYID0gJ3NreS1zb3J0LWl0ZW0tJztcblxubGV0IHNvcnRJdGVtSWROdW1iZXIgPSAwO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktc29ydC1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NvcnQtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lTb3J0SXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICAvKipcbiAgICogV2hldGhlciB0aGUgc29ydGluZyBvcHRpb24gaXMgYWN0aXZlLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGFjdGl2ZTogYm9vbGVhbiB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogRmlyZXMgd2hlbiBhIHNvcnQgaXRlbSBpcyBzZWxlY3RlZC5cbiAgICovXG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgaXRlbVNlbGVjdDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7IC8vIFRPRE86IENoYW5nZSB0byBgRXZlbnRFbWl0dGVyPHZvaWQ+YCBpbiBhIGJyZWFraW5nIGNoYW5nZS5cblxuICBwdWJsaWMgaXNTZWxlY3RlZDogQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+ID0gbmV3IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPihcbiAgICBmYWxzZSxcbiAgKTtcblxuICBAVmlld0NoaWxkKFRlbXBsYXRlUmVmPGFueT4pXG4gIHB1YmxpYyBpdGVtVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjxhbnk+IHwgbnVsbDtcblxuICAjc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb24gfCB1bmRlZmluZWQ7XG5cbiAgI3NvcnRJdGVtSWQ6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAjc29ydFNlcnZpY2U6IFNreVNvcnRTZXJ2aWNlO1xuICAjZGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmO1xuXG4gIGNvbnN0cnVjdG9yKHNvcnRTZXJ2aWNlOiBTa3lTb3J0U2VydmljZSwgZGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgdGhpcy4jc29ydFNlcnZpY2UgPSBzb3J0U2VydmljZTtcbiAgICB0aGlzLiNkZXRlY3RvciA9IGRldGVjdG9yO1xuICB9XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHNvcnRJdGVtSWROdW1iZXIrKztcbiAgICB0aGlzLiNzb3J0SXRlbUlkID0gU09SVF9JVEVNX0lEX1BSRUZJWCArIHNvcnRJdGVtSWROdW1iZXIudG9TdHJpbmcoKTtcbiAgICB0aGlzLiNzdWJzY3JpcHRpb24gPSB0aGlzLiNzb3J0U2VydmljZS5zZWxlY3RlZEl0ZW0uc3Vic2NyaWJlKFxuICAgICAgKGl0ZW1JZDogc3RyaW5nKSA9PiB7XG4gICAgICAgIHRoaXMuaXNTZWxlY3RlZC5uZXh0KGl0ZW1JZCA9PT0gdGhpcy4jc29ydEl0ZW1JZCk7XG4gICAgICAgIHRoaXMuI2RldGVjdG9yLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH0sXG4gICAgKTtcblxuICAgIGlmICh0aGlzLmFjdGl2ZSkge1xuICAgICAgdGhpcy4jc29ydFNlcnZpY2Uuc2VsZWN0SXRlbSh0aGlzLiNzb3J0SXRlbUlkKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChcbiAgICAgIHRoaXMuI3NvcnRJdGVtSWQgJiZcbiAgICAgIGNoYW5nZXMgJiZcbiAgICAgIGNoYW5nZXNbJ2FjdGl2ZSddICYmXG4gICAgICBjaGFuZ2VzWydhY3RpdmUnXS5jdXJyZW50VmFsdWUgJiZcbiAgICAgIGNoYW5nZXNbJ2FjdGl2ZSddLmN1cnJlbnRWYWx1ZSAhPT0gY2hhbmdlc1snYWN0aXZlJ10ucHJldmlvdXNWYWx1ZVxuICAgICkge1xuICAgICAgdGhpcy4jc29ydFNlcnZpY2Uuc2VsZWN0SXRlbSh0aGlzLiNzb3J0SXRlbUlkKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgaXRlbUNsaWNrZWQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuI3NvcnRJdGVtSWQpIHtcbiAgICAgIHRoaXMuI3NvcnRTZXJ2aWNlLnNlbGVjdEl0ZW0odGhpcy4jc29ydEl0ZW1JZCk7XG4gICAgICB0aGlzLml0ZW1TZWxlY3QuZW1pdCgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAvKiBpc3RhbmJ1bCBpZ25vcmUgZWxzZSAqL1xuICAgIC8qIHNhbml0eSBjaGVjayAqL1xuICAgIGlmICh0aGlzLiNzdWJzY3JpcHRpb24pIHtcbiAgICAgIHRoaXMuI3N1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxufVxuIiwiPG5nLXRlbXBsYXRlICNpdGVtVGVtcGxhdGU+XG4gIDxkaXZcbiAgICBjbGFzcz1cInNreS1zb3J0LWl0ZW1cIlxuICAgIHJvbGU9XCJtZW51aXRlbXJhZGlvXCJcbiAgICBbYXR0ci5hcmlhLWNoZWNrZWRdPVwiaXNTZWxlY3RlZCB8IGFzeW5jXCJcbiAgICBbbmdDbGFzc109XCJ7ICdza3ktc29ydC1pdGVtLXNlbGVjdGVkJzogKGlzU2VsZWN0ZWQgfCBhc3luYykgfVwiXG4gID5cbiAgICA8YnV0dG9uXG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIFtuZ0NsYXNzXT1cInsgJ3NreS1mb250LWVtcGhhc2l6ZWQnOiAoaXNTZWxlY3RlZCB8IGFzeW5jKSB9XCJcbiAgICAgIChjbGljayk9XCJpdGVtQ2xpY2tlZCgpXCJcbiAgICA+XG4gICAgICA8bmctY29udGVudCAvPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, Input, inject, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ContentChildren, Input, inject, } from '@angular/core';
|
|
2
2
|
import { SkyContentInfoProvider } from '@skyux/core';
|
|
3
3
|
import { SkyDropdownMessageType } from '@skyux/popovers';
|
|
4
4
|
import { Subject } from 'rxjs';
|
|
5
|
+
import { SkySortItemComponent } from './sort-item.component';
|
|
5
6
|
import { SkySortService } from './sort.service';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
import * as i1 from "@angular/common";
|
|
@@ -28,14 +29,17 @@ export class SkySortComponent {
|
|
|
28
29
|
});
|
|
29
30
|
}
|
|
30
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkySortComponent, selector: "sky-sort", inputs: { ariaLabel: "ariaLabel", showButtonText: "showButtonText" }, providers: [SkySortService], 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-content />\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "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: "16.2.9", 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.λ4, selector: "sky-icon", inputs: ["icon", "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
33
|
}
|
|
33
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
34
35
|
type: Component,
|
|
35
|
-
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-
|
|
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}::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"] }]
|
|
36
37
|
}], ctorParameters: function () { return []; }, propDecorators: { ariaLabel: [{
|
|
37
38
|
type: Input
|
|
38
39
|
}], showButtonText: [{
|
|
39
40
|
type: Input
|
|
41
|
+
}], sortItems: [{
|
|
42
|
+
type: ContentChildren,
|
|
43
|
+
args: [SkySortItemComponent, { descendants: true }]
|
|
40
44
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbGlzdHMvc3JjL2xpYi9tb2R1bGVzL3NvcnQvc29ydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbGlzdHMvc3JjL2xpYi9tb2R1bGVzL3NvcnQvc29ydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQWtCLHNCQUFzQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3JFLE9BQU8sRUFBc0Isc0JBQXNCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU3RSxPQUFPLEVBQWMsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTNDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzdELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7O0FBU2hELE1BQU0sT0FBTyxnQkFBZ0I7SUF5QjNCLG9CQUFvQixDQUFzRDtJQUUxRTtRQWZBOztXQUVHO1FBRUksbUJBQWMsR0FBd0IsS0FBSyxDQUFDO1FBRTVDLHVCQUFrQixHQUFHLElBQUksT0FBTyxFQUFzQixDQUFDO1FBTzlELHlCQUFvQixHQUFHLE1BQU0sQ0FBQyxzQkFBc0IsRUFBRSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBR3hFLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixFQUFFLE9BQU8sRUFBRSxDQUFDO0lBQzdELENBQUM7SUFFTSxlQUFlO1FBQ3BCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUM7WUFDM0IsSUFBSSxFQUFFLHNCQUFzQixDQUFDLEtBQUs7U0FDbkMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0FuQ1UsZ0JBQWdCO2tHQUFoQixnQkFBZ0IseUdBSGhCLENBQUMsY0FBYyxDQUFDLG9EQXVCVixvQkFBb0IsZ0RDM0N2QywweENBcUNBOzsyRkRkYSxnQkFBZ0I7a0JBUDVCLFNBQVM7K0JBQ0UsVUFBVSxhQUdULENBQUMsY0FBYyxDQUFDLG1CQUNWLHVCQUF1QixDQUFDLE1BQU07MEVBWXhDLFNBQVM7c0JBRGYsS0FBSztnQkFPQyxjQUFjO3NCQURwQixLQUFLO2dCQU1DLFNBQVM7c0JBRGYsZUFBZTt1QkFBQyxvQkFBb0IsRUFBRSxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIElucHV0LFxuICBRdWVyeUxpc3QsXG4gIGluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTa3lDb250ZW50SW5mbywgU2t5Q29udGVudEluZm9Qcm92aWRlciB9IGZyb20gJ0Bza3l1eC9jb3JlJztcbmltcG9ydCB7IFNreURyb3Bkb3duTWVzc2FnZSwgU2t5RHJvcGRvd25NZXNzYWdlVHlwZSB9IGZyb20gJ0Bza3l1eC9wb3BvdmVycyc7XG5cbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgU2t5U29ydEl0ZW1Db21wb25lbnQgfSBmcm9tICcuL3NvcnQtaXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2t5U29ydFNlcnZpY2UgfSBmcm9tICcuL3NvcnQuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1zb3J0JyxcbiAgc3R5bGVVcmxzOiBbJy4vc29ydC5jb21wb25lbnQuc2NzcyddLFxuICB0ZW1wbGF0ZVVybDogJy4vc29ydC5jb21wb25lbnQuaHRtbCcsXG4gIHByb3ZpZGVyczogW1NreVNvcnRTZXJ2aWNlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNreVNvcnRDb21wb25lbnQge1xuICAvKipcbiAgICogVGhlIEFSSUEgbGFiZWwgZm9yIHRoZSBzb3J0IGJ1dHRvbi4gVGhpcyBzZXRzIHRoZVxuICAgKiBzb3J0IGJ1dHRvbidzIGBhcmlhLWxhYmVsYCBhdHRyaWJ1dGUgdG8gcHJvdmlkZSBhIHRleHQgZXF1aXZhbGVudCBmb3Igc2NyZWVuIHJlYWRlcnNcbiAgICogW3RvIHN1cHBvcnQgYWNjZXNzaWJpbGl0eV0oaHR0cHM6Ly9kZXZlbG9wZXIuYmxhY2tiYXVkLmNvbS9za3l1eC9sZWFybi9hY2Nlc3NpYmlsaXR5KS5cbiAgICogVXNlIGEgY29udGV4dC1zZW5zaXRpdmUgbGFiZWwsIHN1Y2ggYXMgXCJTb3J0IGNvbnN0aXR1ZW50cy5cIiBDb250ZXh0IGlzIGVzcGVjaWFsbHkgaW1wb3J0YW50IHdoZW4gbXVsdGlwbGUgZmlsdGVyIGJ1dHRvbnMgYXJlIGluIGNsb3NlIHByb3hpbWl0eS5cbiAgICogSW4gdG9vbGJhcnMsIHNvcnQgYnV0dG9ucyB1c2UgdGhlIGBsaXN0RGVzY3JpcHRvcmAgdG8gcHJvdmlkZSBjb250ZXh0LCBhbmQgdGhlIEFSSUEgbGFiZWwgZGVmYXVsdHMgdG8gXCJTb3J0IDxsaXN0RGVzY3JpcHRvcj4uXCJcbiAgICogRm9yIG1vcmUgaW5mb3JtYXRpb24gYWJvdXQgdGhlIGBhcmlhLWxhYmVsYCBhdHRyaWJ1dGUsIHNlZSB0aGUgW1dBSS1BUklBIGRlZmluaXRpb25dKGh0dHBzOi8vd3d3LnczLm9yZy9UUi93YWktYXJpYS8jYXJpYS1sYWJlbCkuXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgYXJpYUxhYmVsOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdG8gZGlzcGxheSBhIFwiU29ydFwiIGxhYmVsIGJlc2lkZSB0aGUgaWNvbiBvbiB0aGUgc29ydCBidXR0b24uXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2hvd0J1dHRvblRleHQ6IGJvb2xlYW4gfCB1bmRlZmluZWQgPSBmYWxzZTtcblxuICBwdWJsaWMgZHJvcGRvd25Db250cm9sbGVyID0gbmV3IFN1YmplY3Q8U2t5RHJvcGRvd25NZXNzYWdlPigpO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2t5U29ydEl0ZW1Db21wb25lbnQsIHsgZGVzY2VuZGFudHM6IHRydWUgfSlcbiAgcHVibGljIHNvcnRJdGVtcyE6IFF1ZXJ5TGlzdDxTa3lTb3J0SXRlbUNvbXBvbmVudD47XG5cbiAgcHJvdGVjdGVkIGNvbnRlbnRJbmZvT2JzOiBPYnNlcnZhYmxlPFNreUNvbnRlbnRJbmZvPiB8IHVuZGVmaW5lZDtcblxuICAjY29udGVudEluZm9Qcm92aWRlciA9IGluamVjdChTa3lDb250ZW50SW5mb1Byb3ZpZGVyLCB7IG9wdGlvbmFsOiB0cnVlIH0pO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuY29udGVudEluZm9PYnMgPSB0aGlzLiNjb250ZW50SW5mb1Byb3ZpZGVyPy5nZXRJbmZvKCk7XG4gIH1cblxuICBwdWJsaWMgZHJvcGRvd25DbGlja2VkKCk6IHZvaWQge1xuICAgIHRoaXMuZHJvcGRvd25Db250cm9sbGVyLm5leHQoe1xuICAgICAgdHlwZTogU2t5RHJvcGRvd25NZXNzYWdlVHlwZS5DbG9zZSxcbiAgICB9KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNreS1zb3J0XCI+XG4gIDxza3ktZHJvcGRvd25cbiAgICBidXR0b25UeXBlPVwic2VsZWN0XCJcbiAgICBbbGFiZWxdPVwiXG4gICAgICBhcmlhTGFiZWwgfHxcbiAgICAgICgoY29udGVudEluZm9PYnMgfCBhc3luYyk/LmRlc2NyaXB0b3I/LnR5cGUgPT09ICd0ZXh0J1xuICAgICAgICA/ICgnc2t5dXhfc29ydF9hcmlhX2xhYmVsX2Rlc2NyaXB0b3InXG4gICAgICAgICAgfCBza3lMaWJSZXNvdXJjZXMgOiAoY29udGVudEluZm9PYnMgfCBhc3luYyk/LmRlc2NyaXB0b3I/LnZhbHVlKVxuICAgICAgICA6ICgnc2t5dXhfc29ydF9idXR0b25fbGFiZWwnIHwgc2t5TGliUmVzb3VyY2VzKSlcbiAgICBcIlxuICAgIFttZXNzYWdlU3RyZWFtXT1cImRyb3Bkb3duQ29udHJvbGxlclwiXG4gICAgW3RpdGxlXT1cIidza3l1eF9zb3J0X2J1dHRvbl9sYWJlbCcgfCBza3lMaWJSZXNvdXJjZXNcIlxuICA+XG4gICAgPHNreS1kcm9wZG93bi1idXR0b24+XG4gICAgICA8c2t5LWljb24gaWNvbj1cInNvcnRcIiAvPlxuICAgICAgPHNwYW4gKm5nSWY9XCJzaG93QnV0dG9uVGV4dFwiIGNsYXNzPVwic2t5LXNvcnQtYnRuLXRleHRcIj5cbiAgICAgICAge3sgJ3NreXV4X3NvcnRfYnV0dG9uX2xhYmVsJyB8IHNreUxpYlJlc291cmNlcyB9fVxuICAgICAgPC9zcGFuPlxuICAgIDwvc2t5LWRyb3Bkb3duLWJ1dHRvbj5cbiAgICA8c2t5LWRyb3Bkb3duLW1lbnVcbiAgICAgIGFyaWFSb2xlPVwibWVudVwiXG4gICAgICBbYXJpYUxhYmVsbGVkQnldPVwic29ydE1lbnVIZWFkaW5nLmlkXCJcbiAgICAgIChjbGljayk9XCJkcm9wZG93bkNsaWNrZWQoKVwiXG4gICAgPlxuICAgICAgPHNreS1zb3J0LW1lbnUtaGVhZGluZ1xuICAgICAgICBza3lJZFxuICAgICAgICAjc29ydE1lbnVIZWFkaW5nPVwic2t5SWRcIlxuICAgICAgPjwvc2t5LXNvcnQtbWVudS1oZWFkaW5nPlxuICAgICAgPGRpdiAqc2t5VGhlbWVJZj1cIidkZWZhdWx0J1wiIGNsYXNzPVwic2t5LXNvcnQtaGVhZGluZy1kaXZpZGVyXCI+PC9kaXY+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpdGVtIG9mIHNvcnRJdGVtc1wiPlxuICAgICAgICA8c2t5LWRyb3Bkb3duLWl0ZW0+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJpdGVtLml0ZW1UZW1wbGF0ZSFcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9za3ktZHJvcGRvd24taXRlbT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvc2t5LWRyb3Bkb3duLW1lbnU+XG4gIDwvc2t5LWRyb3Bkb3duPlxuPC9kaXY+XG4iXX0=
|
package/fesm2022/skyux-lists.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, EventEmitter, inject, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewChild, ViewEncapsulation, ContentChild, HostBinding, ContentChildren, HostListener, ChangeDetectorRef, Renderer2 } from '@angular/core';
|
|
4
|
+
import { NgModule, EventEmitter, inject, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewChild, ViewEncapsulation, ContentChild, HostBinding, ContentChildren, HostListener, ChangeDetectorRef, Renderer2, TemplateRef } from '@angular/core';
|
|
5
5
|
import * as i2 from '@skyux/indicators';
|
|
6
6
|
import { SkyIconModule, SkyTokensModule, SkyWaitModule, SkyChevronModule } from '@skyux/indicators';
|
|
7
7
|
import * as i3 from '@skyux/theme';
|
|
@@ -1937,15 +1937,18 @@ class SkySortItemComponent {
|
|
|
1937
1937
|
}
|
|
1938
1938
|
}
|
|
1939
1939
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n
|
|
1940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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
1941
|
}
|
|
1942
1942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1943
1943
|
type: Component,
|
|
1944
|
-
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
1944
|
+
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
1945
|
}], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
1946
1946
|
type: Input
|
|
1947
1947
|
}], itemSelect: [{
|
|
1948
1948
|
type: Output
|
|
1949
|
+
}], itemTemplate: [{
|
|
1950
|
+
type: ViewChild,
|
|
1951
|
+
args: [(TemplateRef)]
|
|
1949
1952
|
}] } });
|
|
1950
1953
|
|
|
1951
1954
|
class SkySortMenuHeadingComponent {
|
|
@@ -1974,15 +1977,18 @@ class SkySortComponent {
|
|
|
1974
1977
|
});
|
|
1975
1978
|
}
|
|
1976
1979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1977
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkySortComponent, selector: "sky-sort", inputs: { ariaLabel: "ariaLabel", showButtonText: "showButtonText" }, providers: [SkySortService], 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-content />\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ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 }); }
|
|
1980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ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 }); }
|
|
1978
1981
|
}
|
|
1979
1982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1980
1983
|
type: Component,
|
|
1981
|
-
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-
|
|
1984
|
+
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}::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"] }]
|
|
1982
1985
|
}], ctorParameters: function () { return []; }, propDecorators: { ariaLabel: [{
|
|
1983
1986
|
type: Input
|
|
1984
1987
|
}], showButtonText: [{
|
|
1985
1988
|
type: Input
|
|
1989
|
+
}], sortItems: [{
|
|
1990
|
+
type: ContentChildren,
|
|
1991
|
+
args: [SkySortItemComponent, { descendants: true }]
|
|
1986
1992
|
}] } });
|
|
1987
1993
|
|
|
1988
1994
|
class SkySortModule {
|