@skyux/lists 9.29.0 → 9.30.1
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.
|
@@ -29,11 +29,11 @@ export class SkySortComponent {
|
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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
|
+
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;color:var(--sky-text-color-default);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;color:var(--sky-text-color-default);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 }); }
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", 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}::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
|
+
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;color:var(--sky-text-color-default);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;color:var(--sky-text-color-default);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"] }]
|
|
37
37
|
}], ctorParameters: function () { return []; }, propDecorators: { ariaLabel: [{
|
|
38
38
|
type: Input
|
|
39
39
|
}], showButtonText: [{
|
package/fesm2022/skyux-lists.mjs
CHANGED
|
@@ -1977,11 +1977,11 @@ class SkySortComponent {
|
|
|
1977
1977
|
});
|
|
1978
1978
|
}
|
|
1979
1979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
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;color:var(--sky-text-color-default);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;color:var(--sky-text-color-default);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 }); }
|
|
1981
1981
|
}
|
|
1982
1982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1983
1983
|
type: Component,
|
|
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"] }]
|
|
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;color:var(--sky-text-color-default);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;color:var(--sky-text-color-default);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"] }]
|
|
1985
1985
|
}], ctorParameters: function () { return []; }, propDecorators: { ariaLabel: [{
|
|
1986
1986
|
type: Input
|
|
1987
1987
|
}], showButtonText: [{
|