@skyux/indicators 14.0.0-alpha.0 → 14.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, NgClass } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, EventEmitter, inject, Output, Input, Component, Injectable, input, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, HostBinding, Directive, ViewChild, ViewChildren, EnvironmentInjector } from '@angular/core';
|
|
4
|
+
import { NgModule, EventEmitter, inject, Output, Input, Component, Injectable, input, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, HostBinding, Directive, ViewChild, Injector, signal, afterNextRender, ViewChildren, EnvironmentInjector } from '@angular/core';
|
|
5
5
|
import * as i3 from '@skyux/icon';
|
|
6
6
|
import { SkyIconModule } from '@skyux/icon';
|
|
7
7
|
import * as i1$1 from '@skyux/theme';
|
|
@@ -14,7 +14,6 @@ import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
|
14
14
|
import { switchMap, from, of, catchError, take, Subject, BehaviorSubject, defer } from 'rxjs';
|
|
15
15
|
import * as i1$2 from '@skyux/help-inline';
|
|
16
16
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
17
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
18
17
|
import { takeUntil, take as take$1, finalize } from 'rxjs/operators';
|
|
19
18
|
|
|
20
19
|
/* istanbul ignore file */
|
|
@@ -133,11 +132,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
133
132
|
* Import into any component library module that needs to use resource strings.
|
|
134
133
|
*/
|
|
135
134
|
class SkyIndicatorsResourcesModule {
|
|
136
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
137
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
138
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIndicatorsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
136
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyIndicatorsResourcesModule, exports: [SkyI18nModule] }); }
|
|
137
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIndicatorsResourcesModule, imports: [SkyI18nModule] }); }
|
|
139
138
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIndicatorsResourcesModule, decorators: [{
|
|
141
140
|
type: NgModule,
|
|
142
141
|
args: [{
|
|
143
142
|
exports: [SkyI18nModule],
|
|
@@ -268,12 +267,12 @@ class SkyAlertComponent {
|
|
|
268
267
|
this.#descriptionTypeResourceSubscription = undefined;
|
|
269
268
|
}
|
|
270
269
|
}
|
|
271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
270
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
271
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyAlertComponent, isStandalone: false, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div\n class=\"sky-alert\"\n role=\"alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div *skyThemeIf=\"'modern'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n <sky-icon iconSize=\"xl\" variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n <div *skyThemeIf=\"'default'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <div class=\"sky-alert-content\">\n <ng-content />\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon iconName=\"close\" />\n </span>\n </button>\n</div>\n", styles: [":host.sky-cmp-theme-default{display:block}.sky-alert:not(.sky-theme-modern *){padding:0 10px;border-left:solid 30px;color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert:not(.sky-theme-modern *) .sky-alert-content{padding:10px 0;width:100%}.sky-alert:not(.sky-theme-modern *) .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert:not(.sky-theme-modern *) .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert:not(.sky-theme-modern *) button{margin-left:auto;width:32px;height:32px}.sky-alert:not(.sky-theme-modern *):not(.sky-alert-danger){--sky-icon-svg-path-2-color-input: #212327}.sky-alert:not(.sky-theme-modern *).sky-alert-info{background-color:var(--sky-background-color-info);border-color:var(--sky-highlight-color-info)}.sky-alert:not(.sky-theme-modern *).sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert:not(.sky-theme-modern *).sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert:not(.sky-theme-modern *).sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert:not(.sky-theme-modern *) .sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;border-radius:3px;background-color:transparent;display:none;flex-shrink:0}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:hover{opacity:1;border:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:focus-visible{border:var(--sky-background-color-primary-dark) solid 2px;outline:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:active{border:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:focus-visible:not(:active){box-shadow:none}.sky-alert:not(.sky-theme-modern *).sky-alert-closeable .sky-alert-close{display:block}.sky-alert:not(.sky-theme-modern *) .sky-alert-icon{color:#fff;margin-left:-35px;margin-right:17px}.sky-alert:not(.sky-theme-modern *).sky-alert-info .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-info)}.sky-alert:not(.sky-theme-modern *).sky-alert-success .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-success)}.sky-alert:not(.sky-theme-modern *).sky-alert-warning .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-warning)}.sky-alert:not(.sky-theme-modern *).sky-alert-danger .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-danger)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-alert{padding:var(--sky-comp-alert-space-inset-top) var(--sky-comp-alert-space-inset-right) var(--sky-comp-alert-space-inset-bottom) var(--sky-comp-alert-space-inset-left);border-left:solid var(--sky-border-width-accent);color:var(--sky-color-text-default);display:flex;flex-direction:row;align-items:center}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:0 var(--sky-space-gap-text_action-m) 0 var(--sky-space-gap-icon-l);width:100%}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a{color:var(--sky-color-text-action_contrast);text-decoration:var(--sky-font-text_decoration-visible_link)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-color-text-action_contrast)}:host-context(.sky-theme-modern) .sky-alert button{margin-left:auto}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:var(--sky-color-background-container-info);border-color:var(--sky-color-border-info);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-success{background-color:var(--sky-color-background-container-success);border-color:var(--sky-color-border-success);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-warning{background-color:var(--sky-color-background-container-warning);border-color:var(--sky-color-border-warning);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-default)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-danger{background-color:var(--sky-color-background-container-danger);border-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close{cursor:pointer;line-height:1;padding:var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left);color:var(--sky-color-icon-default);border-style:solid;border-color:var(--sky-color-border-action-tertiary-base);border-radius:var(--sky-border-radius-s);border-width:var(--sky-border-width-action-base);background-color:var(--sky-color-background-action-tertiary-base);display:none;flex-shrink:0}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:hover{opacity:1;border-color:var(--sky-color-border-action-tertiary-hover);border-width:var(--sky-border-width-action-hover)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:focus-visible{outline:none;border-color:var(--sky-color-border-action-tertiary-focus);border-width:var(--sky-border-width-action-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:active{border-color:var(--sky-color-border-action-tertiary-focus);border-width:var(--sky-border-width-action-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:focus-visible:not(:active){box-shadow:var(--sky-elevation-raised-100)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-closeable .sky-alert-close{display:block}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info .sky-alert-icon{color:var(--sky-color-background-icon_matte-info)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-success .sky-alert-icon{color:var(--sky-color-background-icon_matte-success)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-warning .sky-alert-icon{color:var(--sky-color-background-icon_matte-warning)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-danger .sky-alert-icon{color:var(--sky-color-background-icon_matte-danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
273
272
|
}
|
|
274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAlertComponent, decorators: [{
|
|
275
274
|
type: Component,
|
|
276
|
-
args: [{ selector: 'sky-alert', hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<div\n class=\"sky-alert\"\n role=\"alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div *skyThemeIf=\"'modern'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n <sky-icon iconSize=\"xl\" variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n <div *skyThemeIf=\"'default'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <div class=\"sky-alert-content\">\n <ng-content />\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon iconName=\"close\" />\n </span>\n </button>\n</div>\n", styles: [":host.sky-cmp-theme-default{display:block}.sky-alert:not(.sky-theme-modern *){padding:0 10px;border-left:solid 30px;color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert:not(.sky-theme-modern *) .sky-alert-content{padding:10px 0;width:100%}.sky-alert:not(.sky-theme-modern *) .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert:not(.sky-theme-modern *) .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert:not(.sky-theme-modern *) button{margin-left:auto;width:32px;height:32px}.sky-alert:not(.sky-theme-modern *):not(.sky-alert-danger){--sky-icon-svg-path-2-color-input: #212327}.sky-alert:not(.sky-theme-modern *).sky-alert-info{background-color:var(--sky-background-color-info);border-color:var(--sky-highlight-color-info)}.sky-alert:not(.sky-theme-modern *).sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert:not(.sky-theme-modern *).sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert:not(.sky-theme-modern *).sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert:not(.sky-theme-modern *) .sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;border-radius:3px;background-color:transparent;display:none;flex-shrink:0}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:hover{opacity:1;border:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:focus-visible{border:var(--sky-background-color-primary-dark) solid 2px;outline:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:active{border:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:focus-visible:not(:active){box-shadow:none}.sky-alert:not(.sky-theme-modern *).sky-alert-closeable .sky-alert-close{display:block}.sky-alert:not(.sky-theme-modern *) .sky-alert-icon{color:#fff;margin-left:-35px;margin-right:17px}.sky-alert:not(.sky-theme-modern *).sky-alert-info .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-info)}.sky-alert:not(.sky-theme-modern *).sky-alert-success .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-success)}.sky-alert:not(.sky-theme-modern *).sky-alert-warning .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-warning)}.sky-alert:not(.sky-theme-modern *).sky-alert-danger .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-danger)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-alert{padding:var(--sky-comp-alert-space-inset-top) var(--sky-comp-alert-space-inset-right) var(--sky-comp-alert-space-inset-bottom) var(--sky-comp-alert-space-inset-left);border-left:solid var(--sky-border-width-accent);color:var(--sky-color-text-default);display:flex;flex-direction:row;align-items:center}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:0 var(--sky-space-gap-text_action-m) 0 var(--sky-space-gap-icon-l);width:100%}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a{color:var(--sky-color-text-action_contrast);text-decoration:var(--sky-font-text_decoration-visible_link)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-color-text-action_contrast)}:host-context(.sky-theme-modern) .sky-alert button{margin-left:auto}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:var(--sky-color-background-container-info);border-color:var(--sky-color-border-info);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-success{background-color:var(--sky-color-background-container-success);border-color:var(--sky-color-border-success);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-warning{background-color:var(--sky-color-background-container-warning);border-color:var(--sky-color-border-warning);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-default)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-danger{background-color:var(--sky-color-background-container-danger);border-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close{cursor:pointer;line-height:1;padding:var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left);color:var(--sky-color-icon-default);border-style:solid;border-color:var(--sky-color-border-action-tertiary-base);border-radius:var(--sky-border-radius-s);border-width:var(--sky-border-width-action-base);background-color:var(--sky-color-background-action-tertiary-base);display:none;flex-shrink:0}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:hover{opacity:1;border-color:var(--sky-color-border-action-tertiary-hover);border-width:var(--sky-border-width-action-hover)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:focus-visible{outline:none;border-color:var(--sky-color-border-action-tertiary-focus);border-width:var(--sky-border-width-action-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:active{border-color:var(--sky-color-border-action-tertiary-focus);border-width:var(--sky-border-width-action-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:focus-visible:not(:active){box-shadow:var(--sky-elevation-raised-100)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-closeable .sky-alert-close{display:block}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info .sky-alert-icon{color:var(--sky-color-background-icon_matte-
|
|
275
|
+
args: [{ selector: 'sky-alert', hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<div\n class=\"sky-alert\"\n role=\"alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div *skyThemeIf=\"'modern'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n <sky-icon iconSize=\"xl\" variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n <div *skyThemeIf=\"'default'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <div class=\"sky-alert-content\">\n <ng-content />\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon iconName=\"close\" />\n </span>\n </button>\n</div>\n", styles: [":host.sky-cmp-theme-default{display:block}.sky-alert:not(.sky-theme-modern *){padding:0 10px;border-left:solid 30px;color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert:not(.sky-theme-modern *) .sky-alert-content{padding:10px 0;width:100%}.sky-alert:not(.sky-theme-modern *) .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert:not(.sky-theme-modern *) .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert:not(.sky-theme-modern *) button{margin-left:auto;width:32px;height:32px}.sky-alert:not(.sky-theme-modern *):not(.sky-alert-danger){--sky-icon-svg-path-2-color-input: #212327}.sky-alert:not(.sky-theme-modern *).sky-alert-info{background-color:var(--sky-background-color-info);border-color:var(--sky-highlight-color-info)}.sky-alert:not(.sky-theme-modern *).sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert:not(.sky-theme-modern *).sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert:not(.sky-theme-modern *).sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert:not(.sky-theme-modern *) .sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;border-radius:3px;background-color:transparent;display:none;flex-shrink:0}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:hover{opacity:1;border:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:focus-visible{border:var(--sky-background-color-primary-dark) solid 2px;outline:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:active{border:none}.sky-alert:not(.sky-theme-modern *) .sky-alert-close:focus-visible:not(:active){box-shadow:none}.sky-alert:not(.sky-theme-modern *).sky-alert-closeable .sky-alert-close{display:block}.sky-alert:not(.sky-theme-modern *) .sky-alert-icon{color:#fff;margin-left:-35px;margin-right:17px}.sky-alert:not(.sky-theme-modern *).sky-alert-info .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-info)}.sky-alert:not(.sky-theme-modern *).sky-alert-success .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-success)}.sky-alert:not(.sky-theme-modern *).sky-alert-warning .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-warning)}.sky-alert:not(.sky-theme-modern *).sky-alert-danger .sky-alert-icon{--sky-icon-svg-path-2-color-input: var(--sky-highlight-color-danger)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-alert{padding:var(--sky-comp-alert-space-inset-top) var(--sky-comp-alert-space-inset-right) var(--sky-comp-alert-space-inset-bottom) var(--sky-comp-alert-space-inset-left);border-left:solid var(--sky-border-width-accent);color:var(--sky-color-text-default);display:flex;flex-direction:row;align-items:center}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:0 var(--sky-space-gap-text_action-m) 0 var(--sky-space-gap-icon-l);width:100%}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a{color:var(--sky-color-text-action_contrast);text-decoration:var(--sky-font-text_decoration-visible_link)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-color-text-action_contrast)}:host-context(.sky-theme-modern) .sky-alert button{margin-left:auto}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:var(--sky-color-background-container-info);border-color:var(--sky-color-border-info);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-success{background-color:var(--sky-color-background-container-success);border-color:var(--sky-color-border-success);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-warning{background-color:var(--sky-color-background-container-warning);border-color:var(--sky-color-border-warning);--sky-icon-svg-path-2-color-input: var(--sky-color-icon-default)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-danger{background-color:var(--sky-color-background-container-danger);border-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close{cursor:pointer;line-height:1;padding:var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left);color:var(--sky-color-icon-default);border-style:solid;border-color:var(--sky-color-border-action-tertiary-base);border-radius:var(--sky-border-radius-s);border-width:var(--sky-border-width-action-base);background-color:var(--sky-color-background-action-tertiary-base);display:none;flex-shrink:0}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:hover{opacity:1;border-color:var(--sky-color-border-action-tertiary-hover);border-width:var(--sky-border-width-action-hover)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:focus-visible{outline:none;border-color:var(--sky-color-border-action-tertiary-focus);border-width:var(--sky-border-width-action-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:active{border-color:var(--sky-color-border-action-tertiary-focus);border-width:var(--sky-border-width-action-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-close:focus-visible:not(:active){box-shadow:var(--sky-elevation-raised-100)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-closeable .sky-alert-close{display:block}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info .sky-alert-icon{color:var(--sky-color-background-icon_matte-info)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-success .sky-alert-icon{color:var(--sky-color-background-icon_matte-success)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-warning .sky-alert-icon{color:var(--sky-color-background-icon_matte-warning)}:host-context(.sky-theme-modern) .sky-alert.sky-alert-danger .sky-alert-icon{color:var(--sky-color-background-icon_matte-danger)}\n"] }]
|
|
277
276
|
}], propDecorators: { alertType: [{
|
|
278
277
|
type: Input
|
|
279
278
|
}], closeable: [{
|
|
@@ -289,17 +288,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
289
288
|
}] } });
|
|
290
289
|
|
|
291
290
|
class SkyAlertModule {
|
|
292
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
293
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
291
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
292
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyAlertModule, declarations: [SkyAlertComponent], imports: [CommonModule,
|
|
294
293
|
SkyIconModule,
|
|
295
294
|
SkyIndicatorsResourcesModule,
|
|
296
295
|
SkyThemeModule], exports: [SkyAlertComponent] }); }
|
|
297
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
296
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAlertModule, imports: [CommonModule,
|
|
298
297
|
SkyIconModule,
|
|
299
298
|
SkyIndicatorsResourcesModule,
|
|
300
299
|
SkyThemeModule] }); }
|
|
301
300
|
}
|
|
302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAlertModule, decorators: [{
|
|
303
302
|
type: NgModule,
|
|
304
303
|
args: [{
|
|
305
304
|
declarations: [SkyAlertComponent],
|
|
@@ -330,10 +329,10 @@ class SkyExpansionIndicatorComponent {
|
|
|
330
329
|
this.directionOrDefault = value ? value : 'up';
|
|
331
330
|
}
|
|
332
331
|
}
|
|
333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyExpansionIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyExpansionIndicatorComponent, isStandalone: false, selector: "sky-expansion-indicator", inputs: { direction: "direction" }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <span class=\"sky-expansion-indicator-glyph-container\">\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n </span>\n</div>\n", styles: [".sky-expansion-indicator:not(.sky-theme-modern *){--sky-override-expansion-indicator-container-left: 4px;--sky-override-expansion-indicator-container-top: 3.5px;--sky-override-expansion-indicator-leg-left-left: 4px;--sky-override-expansion-indicator-leg-right-left: 10.5px;--sky-override-expansion-indicator-line-height: normal;--sky-override-expansion-indicator-size: 26px;--sky-override-expansion-indicator-size-half: 13px;--sky-override-expansion-indicator-color: var( --sky-expansion-indicator-color, #686c73 )}:host{line-height:var(--sky-override-expansion-indicator-line-height, 1)}.sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s));margin:0;overflow:hidden;position:relative;vertical-align:top;width:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s))}.sky-expansion-indicator-part{background:var(--sky-comp-override-expansion-indicator-color, var(--sky-override-expansion-indicator-color, var(--sky-color-icon-deemphasized)));border:none;border-radius:1px;display:inline-block;height:2px;position:absolute;top:var(--sky-override-expansion-indicator-size-half, calc(var(--sky-size-icon-s) / 2));transition:transform .25s,left .25s;vertical-align:top;width:11px}.sky-expansion-indicator-glyph-container{left:var(--sky-override-expansion-indicator-container-left, 0);display:inline-block;position:absolute;top:var(--sky-override-expansion-indicator-container-top, 1.5px);transform:scale(.68)}.sky-expansion-indicator-left{left:var(--sky-override-expansion-indicator-leg-left-left, 2.75px)}.sky-expansion-indicator-right{left:var(--sky-override-expansion-indicator-leg-right-left, 9.25px)}.sky-expansion-indicator-up .sky-expansion-indicator-left{transform:rotate(-45deg)}.sky-expansion-indicator-up .sky-expansion-indicator-right,.sky-expansion-indicator-down .sky-expansion-indicator-left{transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-right{transform:rotate(-45deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
335
334
|
}
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyExpansionIndicatorComponent, decorators: [{
|
|
337
336
|
type: Component,
|
|
338
337
|
args: [{ selector: 'sky-expansion-indicator', hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <span class=\"sky-expansion-indicator-glyph-container\">\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n </span>\n</div>\n", styles: [".sky-expansion-indicator:not(.sky-theme-modern *){--sky-override-expansion-indicator-container-left: 4px;--sky-override-expansion-indicator-container-top: 3.5px;--sky-override-expansion-indicator-leg-left-left: 4px;--sky-override-expansion-indicator-leg-right-left: 10.5px;--sky-override-expansion-indicator-line-height: normal;--sky-override-expansion-indicator-size: 26px;--sky-override-expansion-indicator-size-half: 13px;--sky-override-expansion-indicator-color: var( --sky-expansion-indicator-color, #686c73 )}:host{line-height:var(--sky-override-expansion-indicator-line-height, 1)}.sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s));margin:0;overflow:hidden;position:relative;vertical-align:top;width:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s))}.sky-expansion-indicator-part{background:var(--sky-comp-override-expansion-indicator-color, var(--sky-override-expansion-indicator-color, var(--sky-color-icon-deemphasized)));border:none;border-radius:1px;display:inline-block;height:2px;position:absolute;top:var(--sky-override-expansion-indicator-size-half, calc(var(--sky-size-icon-s) / 2));transition:transform .25s,left .25s;vertical-align:top;width:11px}.sky-expansion-indicator-glyph-container{left:var(--sky-override-expansion-indicator-container-left, 0);display:inline-block;position:absolute;top:var(--sky-override-expansion-indicator-container-top, 1.5px);transform:scale(.68)}.sky-expansion-indicator-left{left:var(--sky-override-expansion-indicator-leg-left-left, 2.75px)}.sky-expansion-indicator-right{left:var(--sky-override-expansion-indicator-leg-right-left, 9.25px)}.sky-expansion-indicator-up .sky-expansion-indicator-left{transform:rotate(-45deg)}.sky-expansion-indicator-up .sky-expansion-indicator-right,.sky-expansion-indicator-down .sky-expansion-indicator-left{transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-right{transform:rotate(-45deg)}\n"] }]
|
|
339
338
|
}], propDecorators: { direction: [{
|
|
@@ -341,11 +340,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
341
340
|
}] } });
|
|
342
341
|
|
|
343
342
|
class SkyExpansionIndicatorModule {
|
|
344
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
345
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
346
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyExpansionIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
344
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyExpansionIndicatorModule, declarations: [SkyExpansionIndicatorComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyExpansionIndicatorComponent] }); }
|
|
345
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyExpansionIndicatorModule, imports: [CommonModule, SkyThemeModule] }); }
|
|
347
346
|
}
|
|
348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyExpansionIndicatorModule, decorators: [{
|
|
349
348
|
type: NgModule,
|
|
350
349
|
args: [{
|
|
351
350
|
declarations: [SkyExpansionIndicatorComponent],
|
|
@@ -408,10 +407,10 @@ class SkyChevronComponent {
|
|
|
408
407
|
}
|
|
409
408
|
}
|
|
410
409
|
}
|
|
411
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyChevronComponent, isStandalone: false, selector: "sky-chevron", inputs: { ariaControls: "ariaControls", ariaLabel: "ariaLabel", direction: "direction", disabled: "disabled" }, outputs: { directionChange: "directionChange" }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<button\n class=\"sky-chevron\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"chevronClick($event)\"\n (keydown)=\"chevronKeyDown($event)\"\n>\n <sky-expansion-indicator [direction]=\"directionOrDefault\" />\n</button>\n", styles: [".sky-chevron:not(.sky-theme-modern *){border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}\n", ":host-context(.sky-theme-modern) .sky-chevron{border:none;background-color:transparent;flex-shrink:0;line-height:1;margin:0;overflow:hidden;cursor:pointer;position:relative;vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: ["direction"] }] }); }
|
|
413
412
|
}
|
|
414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChevronComponent, decorators: [{
|
|
415
414
|
type: Component,
|
|
416
415
|
args: [{ selector: 'sky-chevron', hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<button\n class=\"sky-chevron\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"chevronClick($event)\"\n (keydown)=\"chevronKeyDown($event)\"\n>\n <sky-expansion-indicator [direction]=\"directionOrDefault\" />\n</button>\n", styles: [".sky-chevron:not(.sky-theme-modern *){border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}\n", ":host-context(.sky-theme-modern) .sky-chevron{border:none;background-color:transparent;flex-shrink:0;line-height:1;margin:0;overflow:hidden;cursor:pointer;position:relative;vertical-align:top}\n"] }]
|
|
417
416
|
}], propDecorators: { ariaControls: [{
|
|
@@ -430,17 +429,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
430
429
|
* @internal
|
|
431
430
|
*/
|
|
432
431
|
class SkyChevronModule {
|
|
433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
434
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChevronModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
433
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyChevronModule, declarations: [SkyChevronComponent], imports: [CommonModule,
|
|
435
434
|
SkyIndicatorsResourcesModule,
|
|
436
435
|
SkyThemeModule,
|
|
437
436
|
SkyExpansionIndicatorModule], exports: [SkyChevronComponent] }); }
|
|
438
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
437
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChevronModule, imports: [CommonModule,
|
|
439
438
|
SkyIndicatorsResourcesModule,
|
|
440
439
|
SkyThemeModule,
|
|
441
440
|
SkyExpansionIndicatorModule] }); }
|
|
442
441
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChevronModule, decorators: [{
|
|
444
443
|
type: NgModule,
|
|
445
444
|
args: [{
|
|
446
445
|
declarations: [SkyChevronComponent],
|
|
@@ -465,10 +464,16 @@ class SkyIllustrationResolverService {
|
|
|
465
464
|
resolveHref(name) {
|
|
466
465
|
return Promise.resolve('');
|
|
467
466
|
}
|
|
468
|
-
|
|
469
|
-
|
|
467
|
+
/**
|
|
468
|
+
* Gets the names of all available illustrations.
|
|
469
|
+
*/
|
|
470
|
+
getNames() {
|
|
471
|
+
return Promise.resolve([]);
|
|
472
|
+
}
|
|
473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
474
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationResolverService }); }
|
|
470
475
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationResolverService, decorators: [{
|
|
472
477
|
type: Injectable
|
|
473
478
|
}] });
|
|
474
479
|
|
|
@@ -494,20 +499,20 @@ class SkyIllustrationComponent {
|
|
|
494
499
|
this.svgHref = toSignal(toObservable(this.name).pipe(switchMap((name) => this.#resolverSvc ? from(this.#resolverSvc.resolveHref(name)) : of('')), catchError(() => of(''))));
|
|
495
500
|
}
|
|
496
501
|
#resolverSvc;
|
|
497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyIllustrationComponent, isStandalone: true, selector: "sky-illustration", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div\n [attr.data-sky-illustration-name]=\"name()\"\n [class]=\"'sky-illustration-wrapper sky-illustration-' + size()\"\n>\n @if (svgHref(); as svgHrefValue) {\n <svg aria-hidden=\"true\" class=\"sky-illustration-svg\">\n <use [attr.xlink:href]=\"svgHrefValue\" />\n </svg>\n } @else {\n <img alt=\"\" loading=\"lazy\" class=\"sky-illustration-img\" [src]=\"url()\" />\n }\n</div>\n", styles: [".sky-illustration-wrapper:not(.sky-theme-modern *){--sky-override-illustration-img-size-sm: 48px;--sky-override-illustration-img-size-md: 64px;--sky-override-illustration-img-size-lg: 80px;--sky-override-illustration-img-size-xl: 96px}:host{display:block}.sky-illustration-img{aspect-ratio:auto 1/1;display:block;height:100%;width:100%}.sky-illustration-img[src=\"\"]{visibility:hidden}.sky-illustration-wrapper{--sky-illustration-img-size: var( --sky-override-illustration-img-size-sm, var(--sky-size-illustration-s) );height:var(--sky-illustration-img-size);width:var(--sky-illustration-img-size)}.sky-illustration-wrapper.sky-illustration-md{--sky-illustration-img-size: var( --sky-override-illustration-img-size-md, var(--sky-size-illustration-m) )}.sky-illustration-wrapper.sky-illustration-lg{--sky-illustration-img-size: var( --sky-override-illustration-img-size-lg, var(--sky-size-illustration-l) )}.sky-illustration-wrapper.sky-illustration-xl{--sky-illustration-img-size: var( --sky-override-illustration-img-size-xl, var(--sky-size-illustration-xl) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
499
504
|
}
|
|
500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationComponent, decorators: [{
|
|
501
506
|
type: Component,
|
|
502
507
|
args: [{ selector: 'sky-illustration', imports: [], hostDirectives: [SkyThemeComponentClassDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.data-sky-illustration-name]=\"name()\"\n [class]=\"'sky-illustration-wrapper sky-illustration-' + size()\"\n>\n @if (svgHref(); as svgHrefValue) {\n <svg aria-hidden=\"true\" class=\"sky-illustration-svg\">\n <use [attr.xlink:href]=\"svgHrefValue\" />\n </svg>\n } @else {\n <img alt=\"\" loading=\"lazy\" class=\"sky-illustration-img\" [src]=\"url()\" />\n }\n</div>\n", styles: [".sky-illustration-wrapper:not(.sky-theme-modern *){--sky-override-illustration-img-size-sm: 48px;--sky-override-illustration-img-size-md: 64px;--sky-override-illustration-img-size-lg: 80px;--sky-override-illustration-img-size-xl: 96px}:host{display:block}.sky-illustration-img{aspect-ratio:auto 1/1;display:block;height:100%;width:100%}.sky-illustration-img[src=\"\"]{visibility:hidden}.sky-illustration-wrapper{--sky-illustration-img-size: var( --sky-override-illustration-img-size-sm, var(--sky-size-illustration-s) );height:var(--sky-illustration-img-size);width:var(--sky-illustration-img-size)}.sky-illustration-wrapper.sky-illustration-md{--sky-illustration-img-size: var( --sky-override-illustration-img-size-md, var(--sky-size-illustration-m) )}.sky-illustration-wrapper.sky-illustration-lg{--sky-illustration-img-size: var( --sky-override-illustration-img-size-lg, var(--sky-size-illustration-l) )}.sky-illustration-wrapper.sky-illustration-xl{--sky-illustration-img-size: var( --sky-override-illustration-img-size-xl, var(--sky-size-illustration-xl) )}\n"] }]
|
|
503
508
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
504
509
|
|
|
505
510
|
class SkyIllustrationModule {
|
|
506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
507
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
508
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
511
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
512
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationModule, imports: [SkyIllustrationComponent], exports: [SkyIllustrationComponent] }); }
|
|
513
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationModule }); }
|
|
509
514
|
}
|
|
510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyIllustrationModule, decorators: [{
|
|
511
516
|
type: NgModule,
|
|
512
517
|
args: [{
|
|
513
518
|
imports: [SkyIllustrationComponent],
|
|
@@ -522,10 +527,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
522
527
|
* @required
|
|
523
528
|
*/
|
|
524
529
|
class SkyKeyInfoLabelComponent {
|
|
525
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
531
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyKeyInfoLabelComponent, isStandalone: true, selector: "sky-key-info-label", ngImport: i0, template: '<span skyTrim><ng-content /></span>', isInline: true, dependencies: [{ kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i4$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
527
532
|
}
|
|
528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoLabelComponent, decorators: [{
|
|
529
534
|
type: Component,
|
|
530
535
|
args: [{
|
|
531
536
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -540,10 +545,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
540
545
|
* @required
|
|
541
546
|
*/
|
|
542
547
|
class SkyKeyInfoValueComponent {
|
|
543
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
548
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
549
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyKeyInfoValueComponent, isStandalone: true, selector: "sky-key-info-value", ngImport: i0, template: '<ng-content />', isInline: true, styles: ["sky-key-info-value{font-family:BLKB Sans Condensed,Helvetica Neue Condensed,Arial Narrow;color:var(--sky-text-color-default);font-weight:600;font-size:22px}:host-context(.sky-theme-modern) sky-key-info-value{color:var(--sky-color-text-default);font-family:var(--sky-font-family-primary);font-size:var(--sky-font-size-display-3);font-weight:var(--sky-font-style-display-3);line-height:var(--sky-font-line_height-display-3)}.sky-theme-modern sky-key-info-value{color:var(--sky-color-text-default);font-family:var(--sky-font-family-primary);font-size:var(--sky-font-size-display-3);font-weight:var(--sky-font-style-display-3);line-height:var(--sky-font-line_height-display-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
545
550
|
}
|
|
546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoValueComponent, decorators: [{
|
|
547
552
|
type: Component,
|
|
548
553
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sky-key-info-value', template: '<ng-content />', encapsulation: ViewEncapsulation.None, styles: ["sky-key-info-value{font-family:BLKB Sans Condensed,Helvetica Neue Condensed,Arial Narrow;color:var(--sky-text-color-default);font-weight:600;font-size:22px}:host-context(.sky-theme-modern) sky-key-info-value{color:var(--sky-color-text-default);font-family:var(--sky-font-family-primary);font-size:var(--sky-font-size-display-3);font-weight:var(--sky-font-style-display-3);line-height:var(--sky-font-line_height-display-3)}.sky-theme-modern sky-key-info-value{color:var(--sky-color-text-default);font-family:var(--sky-font-family-primary);font-size:var(--sky-font-size-display-3);font-weight:var(--sky-font-style-display-3);line-height:var(--sky-font-line_height-display-3)}\n"] }]
|
|
549
554
|
}] });
|
|
@@ -557,10 +562,10 @@ class SkyKeyInfoComponent {
|
|
|
557
562
|
*/
|
|
558
563
|
this.layout = 'vertical';
|
|
559
564
|
}
|
|
560
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
561
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyKeyInfoComponent, isStandalone: true, selector: "sky-key-info", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", layout: "layout" }, ngImport: i0, template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info:not(.sky-theme-modern *){--sky-override-key-info-horizontal-gap: var(--sky-margin-inline-xs)}.sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-override-key-info-horizontal-gap, var(--sky-space-gap-label-s))}.sky-key-info:not(.sky-key-info-horizontal) .sky-key-info-label{padding:var(--sky-space-gap-label-0) 0 0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i4$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
562
567
|
}
|
|
563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
|
|
564
569
|
type: Component,
|
|
565
570
|
args: [{ imports: [NgClass, SkyHelpInlineModule, SkyIdModule], selector: 'sky-key-info', template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info:not(.sky-theme-modern *){--sky-override-key-info-horizontal-gap: var(--sky-margin-inline-xs)}.sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-override-key-info-horizontal-gap, var(--sky-space-gap-label-s))}.sky-key-info:not(.sky-key-info-horizontal) .sky-key-info-label{padding:var(--sky-space-gap-label-0) 0 0 0}\n"] }]
|
|
566
571
|
}], propDecorators: { helpKey: [{
|
|
@@ -574,16 +579,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
574
579
|
}] } });
|
|
575
580
|
|
|
576
581
|
class SkyKeyInfoModule {
|
|
577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
578
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
583
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoModule, imports: [SkyKeyInfoComponent,
|
|
579
584
|
SkyKeyInfoLabelComponent,
|
|
580
585
|
SkyKeyInfoValueComponent], exports: [SkyKeyInfoComponent,
|
|
581
586
|
SkyKeyInfoLabelComponent,
|
|
582
587
|
SkyKeyInfoValueComponent] }); }
|
|
583
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
588
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoModule, imports: [SkyKeyInfoComponent,
|
|
584
589
|
SkyKeyInfoLabelComponent] }); }
|
|
585
590
|
}
|
|
586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyKeyInfoModule, decorators: [{
|
|
587
592
|
type: NgModule,
|
|
588
593
|
args: [{
|
|
589
594
|
imports: [
|
|
@@ -693,12 +698,12 @@ class SkyLabelComponent {
|
|
|
693
698
|
this.#descriptionTypeResourceSubscription = undefined;
|
|
694
699
|
}
|
|
695
700
|
}
|
|
696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
697
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
701
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyLabelComponent, isStandalone: false, selector: "sky-label", inputs: { labelType: "labelType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n <span class=\"sky-label-icon\">\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </span>\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <span class=\"sky-label-text\">\n <ng-content />\n </span>\n</span>\n", styles: [".sky-label:not(.sky-theme-modern *){--sky-override-label-align-items: initial;--sky-override-label-border-radius-pill: 10rem;--sky-override-label-color-background-container-danger: var( --sky-background-color-danger );--sky-override-label-color-background-container-info: var( --sky-background-color-info );--sky-override-label-color-background-container-success: var( --sky-background-color-success );--sky-override-label-color-background-container-warning: var( --sky-background-color-warning );--sky-override-label-display: inline;--sky-override-label-icon-info-color: var(--sky-color-icon-info);--sky-override-label-inner-icon-path-color-danger: var( --sky-background-color-danger );--sky-override-label-inner-icon-path-color-info: var( --sky-background-color-info );--sky-override-label-inner-icon-path-color-success: var( --sky-background-color-success );--sky-override-label-inner-icon-path-color-warning: var( --sky-background-color-warning );--sky-override-label-line-height: 2.2;--sky-override-label-link-hover-color: var(--sky-text-color-default);--sky-override-label-link-text-decoration: underline;--sky-override-label-link-text-color: change-color( $sky-text-color-default, $alpha: .8 );--sky-override-label-margin: 0 3px;--sky-override-label-padding: .3em .6em .3em .6em;--sky-override-label-text-padding-left: var(--sky-padding-half)}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon{color:var(--sky-override-label-icon-info-color, var(--sky-color-background-icon_matte-info))}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon{color:var(--sky-color-background-icon_matte-success)}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon{color:var(--sky-color-background-icon_matte-warning)}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon{color:var(--sky-color-background-icon_matte-danger)}.sky-theme-modern .sky-label-info .sky-label-icon{color:var(--sky-override-label-icon-info-color, var(--sky-color-background-icon_matte-info))}.sky-theme-modern .sky-label-success .sky-label-icon{color:var(--sky-color-background-icon_matte-success)}.sky-theme-modern .sky-label-warning .sky-label-icon{color:var(--sky-color-background-icon_matte-warning)}.sky-theme-modern .sky-label-danger .sky-label-icon{color:var(--sky-color-background-icon_matte-danger)}.sky-label{color:var(--sky-text-color-default);display:var(--sky-override-label-display, inline-block);align-items:var(--sky-override-label-align-items, center);border-radius:var(--sky-override-label-border-radius-pill, var(--sky-border-radius-pill));line-height:var(--sky-override-label-line-height, var(--sky-font-line_height-body-m));margin:var(--sky-override-label-margin, 0);white-space:nowrap;padding:var(--sky-override-label-padding, var(--sky-comp-label-space-inset-top) var(--sky-comp-label-space-inset-right) var(--sky-comp-label-space-inset-bottom) var(--sky-comp-label-space-inset-left))}.sky-label ::ng-deep a{color:var(--sky-override-label-link-text-color, var(--sky-color-text-action_contrast));text-decoration:var(--sky-override-label-link-text-decoration, var(--sky-font-text_decoration-visible_link))}.sky-label ::ng-deep a:hover{color:var(--sky-override-label-link-hover-color, var(--sky-color-text-action_contrast))}.sky-label-success{background-color:var(--sky-override-label-color-background-container-success, var(--sky-color-background-container-success));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-success, var(--sky-color-icon-inverse) )}.sky-label-info{background-color:var(--sky-override-label-color-background-container-info, var(--sky-color-background-container-info));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-info, var(--sky-color-icon-inverse) )}.sky-label-warning{background-color:var(--sky-override-label-color-background-container-warning, var(--sky-color-background-container-warning));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-warning, var(--sky-color-icon-default) )}.sky-label-danger{background-color:var(--sky-override-label-color-background-container-danger, var(--sky-color-background-container-danger));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-danger, var(--sky-color-icon-inverse) )}.sky-label-text{display:inline-block;padding-left:var(--sky-override-label-text-padding-left, var(--sky-space-gap-icon-s))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
|
|
698
703
|
}
|
|
699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLabelComponent, decorators: [{
|
|
700
705
|
type: Component,
|
|
701
|
-
args: [{ selector: 'sky-label', standalone: false, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n <span class=\"sky-label-icon\">\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </span>\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <span class=\"sky-label-text\">\n <ng-content />\n </span>\n</span>\n", styles: [".sky-label:not(.sky-theme-modern *){--sky-override-label-align-items: initial;--sky-override-label-border-radius-pill: 10rem;--sky-override-label-color-background-container-danger: var( --sky-background-color-danger );--sky-override-label-color-background-container-info: var( --sky-background-color-info );--sky-override-label-color-background-container-success: var( --sky-background-color-success );--sky-override-label-color-background-container-warning: var( --sky-background-color-warning );--sky-override-label-display: inline;--sky-override-label-icon-info-color: var(--sky-color-icon-info);--sky-override-label-inner-icon-path-color-danger: var( --sky-background-color-danger );--sky-override-label-inner-icon-path-color-info: var( --sky-background-color-info );--sky-override-label-inner-icon-path-color-success: var( --sky-background-color-success );--sky-override-label-inner-icon-path-color-warning: var( --sky-background-color-warning );--sky-override-label-line-height: 2.2;--sky-override-label-link-hover-color: var(--sky-text-color-default);--sky-override-label-link-text-decoration: underline;--sky-override-label-link-text-color: change-color( $sky-text-color-default, $alpha: .8 );--sky-override-label-margin: 0 3px;--sky-override-label-padding: .3em .6em .3em .6em;--sky-override-label-text-padding-left: var(--sky-padding-half)}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon{color:var(--sky-override-label-icon-info-color, var(--sky-color-background-icon_matte-
|
|
706
|
+
args: [{ selector: 'sky-label', standalone: false, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n <span class=\"sky-label-icon\">\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </span>\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <span class=\"sky-label-text\">\n <ng-content />\n </span>\n</span>\n", styles: [".sky-label:not(.sky-theme-modern *){--sky-override-label-align-items: initial;--sky-override-label-border-radius-pill: 10rem;--sky-override-label-color-background-container-danger: var( --sky-background-color-danger );--sky-override-label-color-background-container-info: var( --sky-background-color-info );--sky-override-label-color-background-container-success: var( --sky-background-color-success );--sky-override-label-color-background-container-warning: var( --sky-background-color-warning );--sky-override-label-display: inline;--sky-override-label-icon-info-color: var(--sky-color-icon-info);--sky-override-label-inner-icon-path-color-danger: var( --sky-background-color-danger );--sky-override-label-inner-icon-path-color-info: var( --sky-background-color-info );--sky-override-label-inner-icon-path-color-success: var( --sky-background-color-success );--sky-override-label-inner-icon-path-color-warning: var( --sky-background-color-warning );--sky-override-label-line-height: 2.2;--sky-override-label-link-hover-color: var(--sky-text-color-default);--sky-override-label-link-text-decoration: underline;--sky-override-label-link-text-color: change-color( $sky-text-color-default, $alpha: .8 );--sky-override-label-margin: 0 3px;--sky-override-label-padding: .3em .6em .3em .6em;--sky-override-label-text-padding-left: var(--sky-padding-half)}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon{color:var(--sky-override-label-icon-info-color, var(--sky-color-background-icon_matte-info))}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon{color:var(--sky-color-background-icon_matte-success)}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon{color:var(--sky-color-background-icon_matte-warning)}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon{color:var(--sky-color-background-icon_matte-danger)}.sky-theme-modern .sky-label-info .sky-label-icon{color:var(--sky-override-label-icon-info-color, var(--sky-color-background-icon_matte-info))}.sky-theme-modern .sky-label-success .sky-label-icon{color:var(--sky-color-background-icon_matte-success)}.sky-theme-modern .sky-label-warning .sky-label-icon{color:var(--sky-color-background-icon_matte-warning)}.sky-theme-modern .sky-label-danger .sky-label-icon{color:var(--sky-color-background-icon_matte-danger)}.sky-label{color:var(--sky-text-color-default);display:var(--sky-override-label-display, inline-block);align-items:var(--sky-override-label-align-items, center);border-radius:var(--sky-override-label-border-radius-pill, var(--sky-border-radius-pill));line-height:var(--sky-override-label-line-height, var(--sky-font-line_height-body-m));margin:var(--sky-override-label-margin, 0);white-space:nowrap;padding:var(--sky-override-label-padding, var(--sky-comp-label-space-inset-top) var(--sky-comp-label-space-inset-right) var(--sky-comp-label-space-inset-bottom) var(--sky-comp-label-space-inset-left))}.sky-label ::ng-deep a{color:var(--sky-override-label-link-text-color, var(--sky-color-text-action_contrast));text-decoration:var(--sky-override-label-link-text-decoration, var(--sky-font-text_decoration-visible_link))}.sky-label ::ng-deep a:hover{color:var(--sky-override-label-link-hover-color, var(--sky-color-text-action_contrast))}.sky-label-success{background-color:var(--sky-override-label-color-background-container-success, var(--sky-color-background-container-success));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-success, var(--sky-color-icon-inverse) )}.sky-label-info{background-color:var(--sky-override-label-color-background-container-info, var(--sky-color-background-container-info));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-info, var(--sky-color-icon-inverse) )}.sky-label-warning{background-color:var(--sky-override-label-color-background-container-warning, var(--sky-color-background-container-warning));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-warning, var(--sky-color-icon-default) )}.sky-label-danger{background-color:var(--sky-override-label-color-background-container-danger, var(--sky-color-background-container-danger));--sky-icon-svg-path-2-color-input: var( --sky-override-label-inner-icon-path-color-danger, var(--sky-color-icon-inverse) )}.sky-label-text{display:inline-block;padding-left:var(--sky-override-label-text-padding-left, var(--sky-space-gap-icon-s))}\n"] }]
|
|
702
707
|
}], propDecorators: { labelType: [{
|
|
703
708
|
type: Input
|
|
704
709
|
}], descriptionType: [{
|
|
@@ -708,17 +713,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
708
713
|
}] } });
|
|
709
714
|
|
|
710
715
|
class SkyLabelModule {
|
|
711
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
712
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
716
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
717
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyLabelModule, declarations: [SkyLabelComponent], imports: [CommonModule,
|
|
713
718
|
SkyIconModule,
|
|
714
719
|
SkyIndicatorsResourcesModule,
|
|
715
720
|
SkyThemeModule], exports: [SkyLabelComponent] }); }
|
|
716
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
721
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLabelModule, imports: [CommonModule,
|
|
717
722
|
SkyIconModule,
|
|
718
723
|
SkyIndicatorsResourcesModule,
|
|
719
724
|
SkyThemeModule] }); }
|
|
720
725
|
}
|
|
721
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLabelModule, decorators: [{
|
|
722
727
|
type: NgModule,
|
|
723
728
|
args: [{
|
|
724
729
|
declarations: [SkyLabelComponent],
|
|
@@ -812,12 +817,12 @@ class SkyStatusIndicatorComponent {
|
|
|
812
817
|
this.descriptionComputed = undefined;
|
|
813
818
|
}
|
|
814
819
|
}
|
|
815
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
816
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
820
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
821
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyStatusIndicatorComponent, isStandalone: false, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, ngImport: i0, template: "@if (descriptionType) {\n <div class=\"sky-status-indicator\">\n <div\n aria-hidden=\"true\"\n class=\"sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n >\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n <div class=\"sky-status-indicator-message-wrapper\">\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <span #message=\"skyId\" skyId class=\"sky-status-indicator-message\" skyTrim\n ><ng-content /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"message.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n </div>\n}\n", styles: [".sky-status-indicator:not(.sky-theme-modern *){--sky-override-status-indicator-icon-color-danger: #ef4044;--sky-override-status-indicator-icon-color-info: #00b4f1;--sky-override-status-indicator-icon-color-success: #72bf44;--sky-override-status-indicator-icon-color-warning: #fbb034;--sky-override-status-indicator-icon-padding-right: 5px}.sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1;padding-right:var(--sky-staus-indicator-padding-right, var(--sky-override-status-indicator-icon-padding-right, var(--sky-space-gap-icon-s)))}.sky-status-indicator-icon-info{color:var(--sky-override-status-indicator-icon-color-info, var(--sky-color-background-icon_matte-info))}.sky-status-indicator-icon-success{color:var(--sky-override-status-indicator-icon-color-success, var(--sky-color-background-icon_matte-success))}.sky-status-indicator-icon-warning{color:var(--sky-override-status-indicator-icon-color-warning, var(--sky-color-background-icon_matte-warning))}.sky-status-indicator-icon-danger{color:var(--sky-override-status-indicator-icon-color-danger, var(--sky-color-background-icon_matte-danger))}.sky-status-indicator-icon.sky-status-indicator-icon-warning,.sky-status-indicator-icon.sky-status-indicator-icon-success{--sky-icon-svg-path-2-color-input: var(--sky-color-icon-default)}.sky-status-indicator-icon.sky-status-indicator-icon-danger,.sky-status-indicator-icon.sky-status-indicator-icon-info,.sky-status-indicator-icon.sky-status-indicator-icon-success{--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
817
822
|
}
|
|
818
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
|
|
819
824
|
type: Component,
|
|
820
|
-
args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (descriptionType) {\n <div class=\"sky-status-indicator\">\n <div\n aria-hidden=\"true\"\n class=\"sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n >\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n <div class=\"sky-status-indicator-message-wrapper\">\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <span #message=\"skyId\" skyId class=\"sky-status-indicator-message\" skyTrim\n ><ng-content /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"message.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n </div>\n}\n", styles: [".sky-status-indicator:not(.sky-theme-modern *){--sky-override-status-indicator-icon-color-danger: #ef4044;--sky-override-status-indicator-icon-color-info: #00b4f1;--sky-override-status-indicator-icon-color-success: #72bf44;--sky-override-status-indicator-icon-color-warning: #fbb034;--sky-override-status-indicator-icon-padding-right: 5px}.sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1;padding-right:var(--sky-staus-indicator-padding-right, var(--sky-override-status-indicator-icon-padding-right, var(--sky-space-gap-icon-s)))}.sky-status-indicator-icon-info{color:var(--sky-override-status-indicator-icon-color-info, var(--sky-color-background-icon_matte-
|
|
825
|
+
args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (descriptionType) {\n <div class=\"sky-status-indicator\">\n <div\n aria-hidden=\"true\"\n class=\"sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n >\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n </div>\n <div class=\"sky-status-indicator-message-wrapper\">\n @if (descriptionComputed) {\n <span class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n }\n <span #message=\"skyId\" skyId class=\"sky-status-indicator-message\" skyTrim\n ><ng-content /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"message.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n </div>\n}\n", styles: [".sky-status-indicator:not(.sky-theme-modern *){--sky-override-status-indicator-icon-color-danger: #ef4044;--sky-override-status-indicator-icon-color-info: #00b4f1;--sky-override-status-indicator-icon-color-success: #72bf44;--sky-override-status-indicator-icon-color-warning: #fbb034;--sky-override-status-indicator-icon-padding-right: 5px}.sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1;padding-right:var(--sky-staus-indicator-padding-right, var(--sky-override-status-indicator-icon-padding-right, var(--sky-space-gap-icon-s)))}.sky-status-indicator-icon-info{color:var(--sky-override-status-indicator-icon-color-info, var(--sky-color-background-icon_matte-info))}.sky-status-indicator-icon-success{color:var(--sky-override-status-indicator-icon-color-success, var(--sky-color-background-icon_matte-success))}.sky-status-indicator-icon-warning{color:var(--sky-override-status-indicator-icon-color-warning, var(--sky-color-background-icon_matte-warning))}.sky-status-indicator-icon-danger{color:var(--sky-override-status-indicator-icon-color-danger, var(--sky-color-background-icon_matte-danger))}.sky-status-indicator-icon.sky-status-indicator-icon-warning,.sky-status-indicator-icon.sky-status-indicator-icon-success{--sky-icon-svg-path-2-color-input: var(--sky-color-icon-default)}.sky-status-indicator-icon.sky-status-indicator-icon-danger,.sky-status-indicator-icon.sky-status-indicator-icon-info,.sky-status-indicator-icon.sky-status-indicator-icon-success{--sky-icon-svg-path-2-color-input: var(--sky-color-icon-inverse)}\n"] }]
|
|
821
826
|
}], propDecorators: { indicatorType: [{
|
|
822
827
|
type: Input
|
|
823
828
|
}], descriptionType: [{
|
|
@@ -833,15 +838,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
833
838
|
}] } });
|
|
834
839
|
|
|
835
840
|
class SkyStatusIndicatorModule {
|
|
836
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
837
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
841
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyStatusIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
842
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyStatusIndicatorModule, declarations: [SkyStatusIndicatorComponent], imports: [CommonModule,
|
|
838
843
|
SkyHelpInlineModule,
|
|
839
844
|
SkyIconModule,
|
|
840
845
|
SkyIdModule,
|
|
841
846
|
SkyIndicatorsResourcesModule,
|
|
842
847
|
SkyThemeModule,
|
|
843
848
|
SkyTrimModule], exports: [SkyStatusIndicatorComponent] }); }
|
|
844
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
849
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyStatusIndicatorModule, imports: [CommonModule,
|
|
845
850
|
SkyHelpInlineModule,
|
|
846
851
|
SkyIconModule,
|
|
847
852
|
SkyIdModule,
|
|
@@ -849,7 +854,7 @@ class SkyStatusIndicatorModule {
|
|
|
849
854
|
SkyThemeModule,
|
|
850
855
|
SkyTrimModule] }); }
|
|
851
856
|
}
|
|
852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
857
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyStatusIndicatorModule, decorators: [{
|
|
853
858
|
type: NgModule,
|
|
854
859
|
args: [{
|
|
855
860
|
declarations: [SkyStatusIndicatorComponent],
|
|
@@ -1006,10 +1011,10 @@ class SkyTextHighlightDirective {
|
|
|
1006
1011
|
this.#observer.observe(this.#el.nativeElement, config);
|
|
1007
1012
|
}
|
|
1008
1013
|
}
|
|
1009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1010
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1015
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: SkyTextHighlightDirective, isStandalone: true, selector: "[skyHighlight]", inputs: { skyHighlight: "skyHighlight" }, host: { properties: { "attr.skyHighlight": "this.highlight" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
1011
1016
|
}
|
|
1012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextHighlightDirective, decorators: [{
|
|
1013
1018
|
type: Directive,
|
|
1014
1019
|
args: [{
|
|
1015
1020
|
selector: '[skyHighlight]',
|
|
@@ -1022,11 +1027,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1022
1027
|
}] } });
|
|
1023
1028
|
|
|
1024
1029
|
class SkyTextHighlightModule {
|
|
1025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1026
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
1027
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
1030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1031
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyTextHighlightModule, imports: [SkyTextHighlightDirective], exports: [SkyTextHighlightDirective] }); }
|
|
1032
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextHighlightModule, providers: [SkyMutationObserverService] }); }
|
|
1028
1033
|
}
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextHighlightModule, decorators: [{
|
|
1030
1035
|
type: NgModule,
|
|
1031
1036
|
args: [{
|
|
1032
1037
|
imports: [SkyTextHighlightDirective],
|
|
@@ -1121,12 +1126,12 @@ class SkyTokenComponent {
|
|
|
1121
1126
|
this.#liveAnnouncerSvc.announce(internationalizedString);
|
|
1122
1127
|
});
|
|
1123
1128
|
}
|
|
1124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTokenComponent, isStandalone: false, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable", role: "role" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, viewQueries: [{ propertyName: "actionButtonRef", first: true, predicate: ["actionButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n #actionButton=\"skyId\"\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n skyId\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n >\n <ng-content />\n </button>\n </span>\n @if (dismissible) {\n <span\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"\n !ariaLabel\n ? screenReaderLabelDismiss.id + ' ' + actionButton.id\n : undefined\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon\n class=\"sky-token-btn-close-icon\"\n iconName=\"close\"\n iconSize=\"s\"\n />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [":host{interpolate-size:allow-keywords;flex:0 0 auto;display:inline-flex;padding:var(--sky-token-gutter, 0)}.sky-token:not(.sky-theme-modern *){--sky-override-token-active-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-align-items: inherit;--sky-override-token-background-color: #c1e8fb;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-box-shadow: none;--sky-override-token-button-padding: 2px 8px;--sky-override-token-close-align-items: inherit;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-button-opacity: .9;--sky-override-token-close-display: inline-block;--sky-override-token-close-focus-background-color: transparent;--sky-override-token-close-focus-box-shadow: none;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-icon-width: initial;--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-margin-left: -2px;--sky-override-token-close-padding: 2px 8px;--sky-override-token-display: inline-block;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-font-size: 15px;--sky-override-token-focused-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-hover-border: 1px solid rgb(0, 141.9087136929, 190);--sky-override-token-hover-box-shadow: none;--sky-override-token-padding: 0}.sky-token{background-color:var(--sky-override-token-background-color, var(--sky-color-background-selected-soft));font-size:var(--sky-override-token-font-size, var(--sky-font-size-body-m));border:var(--sky-override-token-border, none);box-shadow:var(--sky-override-token-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-selected_soft));padding:var(--sky-override-token-padding, var(--sky-comp-token-space-inset-top) var(--sky-comp-token-space-inset-right) var(--sky-comp-token-space-inset-bottom) var(--sky-comp-token-space-inset-left));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-comp-token-close-space-inset-top) var(--sky-comp-token-close-space-inset-right) var(--sky-comp-token-close-space-inset-bottom) var(--sky-comp-token-close-space-inset-left));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);line-height:var(--sky-override-token-close-line-height, 1)}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-btn-close:hover{background-color:var(--sky-override-token-close-hover-background-color, var(--sky-color-background-action-tertiary-hover));border:none;box-shadow:var(--sky-override-token-close-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-token-btn-close:focus-visible{outline:var(--sky-override-token-close-focus-outline, none)}.sky-token-btn-close:focus-visible:not(:active){background-color:var(--sky-override-token-close-focus-background-color, var(--sky-color-background-action-tertiary-focus));border:none;box-shadow:var(--sky-override-token-close-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-token-btn-close.sky-token-btn-close-active{background-color:var(--sky-override-token-close-active-background-color, var(--sky-color-background-action-tertiary-active));border:none;box-shadow:var(--sky-override-token-close-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-token-dismissible{padding-right:var(--sky-override-token-dismissible-padding-right, var(--sky-border-width-selected-s))}.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-token-btn-action{font-size:var(--sky-override-token-font-size, var(--sky-font-size-body-m))}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close-icon{width:var(--sky-override-token-close-icon-width, 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4$1.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1126
1131
|
}
|
|
1127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
1128
1133
|
type: Component,
|
|
1129
|
-
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n #actionButton=\"skyId\"\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n skyId\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n >\n <ng-content />\n </button>\n </span>\n @if (dismissible) {\n <span\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"\n !ariaLabel\n ? screenReaderLabelDismiss.id + ' ' + actionButton.id\n : undefined\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon\n class=\"sky-token-btn-close-icon\"\n iconName=\"close\"\n iconSize=\"s\"\n />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token:not(.sky-theme-modern *){--sky-override-token-active-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-align-items: inherit;--sky-override-token-background-color: #c1e8fb;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-box-shadow: none;--sky-override-token-button-padding: 2px 8px;--sky-override-token-close-align-items: inherit;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-button-opacity: .9;--sky-override-token-close-display: inline-block;--sky-override-token-close-focus-background-color: transparent;--sky-override-token-close-focus-box-shadow: none;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-icon-width: initial;--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-margin-left: -2px;--sky-override-token-close-padding: 2px 8px;--sky-override-token-display: inline-block;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-font-size: 15px;--sky-override-token-focused-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-hover-border: 1px solid rgb(0, 141.9087136929, 190);--sky-override-token-hover-box-shadow: none;--sky-override-token-padding: 0}.sky-token{background-color:var(--sky-override-token-background-color, var(--sky-color-background-selected-soft));font-size:var(--sky-override-token-font-size, var(--sky-font-size-body-m));border:var(--sky-override-token-border, none);box-shadow:var(--sky-override-token-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-selected_soft));padding:var(--sky-override-token-padding, var(--sky-comp-token-space-inset-top) var(--sky-comp-token-space-inset-right) var(--sky-comp-token-space-inset-bottom) var(--sky-comp-token-space-inset-left));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-comp-token-close-space-inset-top) var(--sky-comp-token-close-space-inset-right) var(--sky-comp-token-close-space-inset-bottom) var(--sky-comp-token-close-space-inset-left));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);line-height:var(--sky-override-token-close-line-height, 1)}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-btn-close:hover{background-color:var(--sky-override-token-close-hover-background-color, var(--sky-color-background-action-tertiary-hover));border:none;box-shadow:var(--sky-override-token-close-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-token-btn-close:focus-visible{outline:var(--sky-override-token-close-focus-outline, none)}.sky-token-btn-close:focus-visible:not(:active){background-color:var(--sky-override-token-close-focus-background-color, var(--sky-color-background-action-tertiary-focus));border:none;box-shadow:var(--sky-override-token-close-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-token-btn-close.sky-token-btn-close-active{background-color:var(--sky-override-token-close-active-background-color, var(--sky-color-background-action-tertiary-active));border:none;box-shadow:var(--sky-override-token-close-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-token-dismissible{padding-right:var(--sky-override-token-dismissible-padding-right, var(--sky-border-width-selected-s))}.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-token-btn-action{font-size:var(--sky-override-token-font-size, var(--sky-font-size-body-m))}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close-icon{width:var(--sky-override-token-close-icon-width, 100%)}\n"] }]
|
|
1134
|
+
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n #actionButton=\"skyId\"\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n skyId\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n >\n <ng-content />\n </button>\n </span>\n @if (dismissible) {\n <span\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"\n !ariaLabel\n ? screenReaderLabelDismiss.id + ' ' + actionButton.id\n : undefined\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon\n class=\"sky-token-btn-close-icon\"\n iconName=\"close\"\n iconSize=\"s\"\n />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [":host{interpolate-size:allow-keywords;flex:0 0 auto;display:inline-flex;padding:var(--sky-token-gutter, 0)}.sky-token:not(.sky-theme-modern *){--sky-override-token-active-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-align-items: inherit;--sky-override-token-background-color: #c1e8fb;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-box-shadow: none;--sky-override-token-button-padding: 2px 8px;--sky-override-token-close-align-items: inherit;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-button-opacity: .9;--sky-override-token-close-display: inline-block;--sky-override-token-close-focus-background-color: transparent;--sky-override-token-close-focus-box-shadow: none;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-icon-width: initial;--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-margin-left: -2px;--sky-override-token-close-padding: 2px 8px;--sky-override-token-display: inline-block;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-font-size: 15px;--sky-override-token-focused-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-background-color: rgb(145.0909090909, 214.2272727273, 247.9090909091);--sky-override-token-hover-border: 1px solid rgb(0, 141.9087136929, 190);--sky-override-token-hover-box-shadow: none;--sky-override-token-padding: 0}.sky-token{background-color:var(--sky-override-token-background-color, var(--sky-color-background-selected-soft));font-size:var(--sky-override-token-font-size, var(--sky-font-size-body-m));border:var(--sky-override-token-border, none);box-shadow:var(--sky-override-token-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-selected_soft));padding:var(--sky-override-token-padding, var(--sky-comp-token-space-inset-top) var(--sky-comp-token-space-inset-right) var(--sky-comp-token-space-inset-bottom) var(--sky-comp-token-space-inset-left));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-comp-token-close-space-inset-top) var(--sky-comp-token-close-space-inset-right) var(--sky-comp-token-close-space-inset-bottom) var(--sky-comp-token-close-space-inset-left));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);line-height:var(--sky-override-token-close-line-height, 1)}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-btn-close:hover{background-color:var(--sky-override-token-close-hover-background-color, var(--sky-color-background-action-tertiary-hover));border:none;box-shadow:var(--sky-override-token-close-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-token-btn-close:focus-visible{outline:var(--sky-override-token-close-focus-outline, none)}.sky-token-btn-close:focus-visible:not(:active){background-color:var(--sky-override-token-close-focus-background-color, var(--sky-color-background-action-tertiary-focus));border:none;box-shadow:var(--sky-override-token-close-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-token-btn-close.sky-token-btn-close-active{background-color:var(--sky-override-token-close-active-background-color, var(--sky-color-background-action-tertiary-active));border:none;box-shadow:var(--sky-override-token-close-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-token-dismissible{padding-right:var(--sky-override-token-dismissible-padding-right, var(--sky-border-width-selected-s))}.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-token-btn-action{font-size:var(--sky-override-token-font-size, var(--sky-font-size-body-m))}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close-icon{width:var(--sky-override-token-close-icon-width, 100%)}\n"] }]
|
|
1130
1135
|
}], propDecorators: { disabled: [{
|
|
1131
1136
|
type: Input
|
|
1132
1137
|
}], ariaLabel: [{
|
|
@@ -1231,6 +1236,7 @@ class SkyTokensComponent {
|
|
|
1231
1236
|
// get accessor when set to `undefined`. Emitting `value` instead of `this.#_tokensOrDefault`
|
|
1232
1237
|
// preserves that behavior.
|
|
1233
1238
|
this.tokensChange.emit(value);
|
|
1239
|
+
this.#queueTokensRenderedEmit();
|
|
1234
1240
|
}
|
|
1235
1241
|
get tokens() {
|
|
1236
1242
|
return this.#_tokens;
|
|
@@ -1267,7 +1273,9 @@ class SkyTokensComponent {
|
|
|
1267
1273
|
#_displayWith;
|
|
1268
1274
|
#messageStreamSub;
|
|
1269
1275
|
#ngUnsubscribe;
|
|
1276
|
+
#tokensRenderedQueued;
|
|
1270
1277
|
#changeDetector;
|
|
1278
|
+
#injector;
|
|
1271
1279
|
#_activeIndex;
|
|
1272
1280
|
#_messageStream;
|
|
1273
1281
|
constructor() {
|
|
@@ -1301,9 +1309,25 @@ class SkyTokensComponent {
|
|
|
1301
1309
|
this.#_tokens = [];
|
|
1302
1310
|
this.#_displayWith = DISPLAY_WITH_DEFAULT;
|
|
1303
1311
|
this.#ngUnsubscribe = new Subject();
|
|
1312
|
+
this.#tokensRenderedQueued = false;
|
|
1304
1313
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
1314
|
+
this.#injector = inject(Injector);
|
|
1305
1315
|
this.#_activeIndex = 0;
|
|
1306
1316
|
this.#_messageStream = new Subject();
|
|
1317
|
+
/**
|
|
1318
|
+
* Tracks whether the component has completed its initial render.
|
|
1319
|
+
* Used to suppress enter animations on first load.
|
|
1320
|
+
*/
|
|
1321
|
+
this.animationReady = signal(false, ...(ngDevMode ? [{ debugName: "animationReady" }] : []));
|
|
1322
|
+
// Wait for Angular's animation scheduler to remove initial enter classes
|
|
1323
|
+
// before enabling enter animations for future token changes.
|
|
1324
|
+
afterNextRender({
|
|
1325
|
+
read: () => {
|
|
1326
|
+
requestAnimationFrame(() => {
|
|
1327
|
+
this.animationReady.set(true);
|
|
1328
|
+
});
|
|
1329
|
+
},
|
|
1330
|
+
});
|
|
1307
1331
|
this.#initMessageStream();
|
|
1308
1332
|
// Angular calls the trackBy function without applying the component instance's scope.
|
|
1309
1333
|
// Use a fat-arrow function so the current component instance's trackWith property can
|
|
@@ -1325,9 +1349,6 @@ class SkyTokensComponent {
|
|
|
1325
1349
|
}
|
|
1326
1350
|
this.#notifyTokenSelected(token);
|
|
1327
1351
|
}
|
|
1328
|
-
animationDone() {
|
|
1329
|
-
this.tokensRendered.emit();
|
|
1330
|
-
}
|
|
1331
1352
|
onTokenKeyDown(event) {
|
|
1332
1353
|
if (!this.disabled) {
|
|
1333
1354
|
switch (event.key) {
|
|
@@ -1418,52 +1439,28 @@ class SkyTokensComponent {
|
|
|
1418
1439
|
token,
|
|
1419
1440
|
});
|
|
1420
1441
|
}
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
})),
|
|
1440
|
-
]),
|
|
1441
|
-
]),
|
|
1442
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1442
|
+
/**
|
|
1443
|
+
* Debounces the tokensRendered emit so that rapid token changes
|
|
1444
|
+
* (e.g. bulk additions or removals) result in a single event.
|
|
1445
|
+
*/
|
|
1446
|
+
#queueTokensRenderedEmit() {
|
|
1447
|
+
if (this.#tokensRenderedQueued) {
|
|
1448
|
+
return;
|
|
1449
|
+
}
|
|
1450
|
+
this.#tokensRenderedQueued = true;
|
|
1451
|
+
afterNextRender(() => {
|
|
1452
|
+
this.#tokensRenderedQueued = false;
|
|
1453
|
+
this.tokensRendered.emit();
|
|
1454
|
+
}, {
|
|
1455
|
+
injector: this.#injector,
|
|
1456
|
+
});
|
|
1457
|
+
}
|
|
1458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokensComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTokensComponent, isStandalone: false, selector: "sky-tokens", inputs: { disabled: "disabled", dismissible: "dismissible", displayWith: "displayWith", trackWith: "trackWith", focusable: "focusable", tokens: "tokens", messageStream: "messageStream" }, outputs: { focusIndexOverRange: "focusIndexOverRange", focusIndexUnderRange: "focusIndexUnderRange", tokenSelected: "tokenSelected", tokensChange: "tokensChange", tokensRendered: "tokensRendered" }, viewQueries: [{ propertyName: "tokenComponents", predicate: SkyTokenComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-tokens\"\n [class.sky-tokens-animation-ready]=\"animationReady()\"\n [class.sky-tokens-animation-enabled]=\"trackWith\"\n [attr.role]=\"tokens.length ? 'grid' : null\"\n>\n <!--\n The role must use square brackets otherwise Angular sets the native 'role'\n attribute as well as the input attribute of the token, which fails accessibility rules.\n -->\n @for (token of tokens; track trackTokenFn(i, token); let i = $index) {\n <sky-token\n animate.enter=\"sky-token-enter\"\n animate.leave=\"sky-token-leave\"\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\n [role]=\"'row'\"\n (dismiss)=\"removeToken(token)\"\n (click)=\"onTokenClick(token)\"\n (keydown)=\"onTokenKeyDown($event)\"\n (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n (tokenFocus)=\"activeIndex = i\"\n >\n {{ token.value[displayWith] }}\n </sky-token>\n }\n <div class=\"sky-tokens-content\" [attr.role]=\"tokens.length ? 'row' : null\">\n <div [attr.role]=\"tokens.length ? 'gridcell' : null\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes sky-token-enter-animation{0%{opacity:0;width:0;padding:0}to{opacity:1;width:auto}}@keyframes sky-token-leave-animation{0%{opacity:1;width:auto}to{opacity:0;width:0;padding:0}}.sky-tokens{--sky-token-gutter: 2px;display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens.sky-tokens-animation-enabled sky-token.sky-token-leave{animation:sky-token-leave-animation var(--sky-transition-time-short) ease-in forwards;overflow:hidden}.sky-tokens.sky-tokens-animation-ready.sky-tokens-animation-enabled sky-token.sky-token-enter{animation:sky-token-enter-animation var(--sky-transition-time-short) ease-in;overflow:hidden}.sky-tokens .sky-tokens-content{flex:0 0 auto;display:inline-flex;padding:2px;flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content>div{display:contents}.sky-tokens .sky-tokens-content>div:before{content:\"\\200b\"}\n"], dependencies: [{ kind: "component", type: SkyTokenComponent, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable", "role"], outputs: ["dismiss", "tokenFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1443
1460
|
}
|
|
1444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokensComponent, decorators: [{
|
|
1445
1462
|
type: Component,
|
|
1446
|
-
args: [{ selector: 'sky-tokens', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1447
|
-
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
1448
|
-
trigger('dismiss', [
|
|
1449
|
-
transition(':enter', [
|
|
1450
|
-
style({
|
|
1451
|
-
opacity: 0,
|
|
1452
|
-
width: 0,
|
|
1453
|
-
}),
|
|
1454
|
-
animate('150ms ease-in', style({
|
|
1455
|
-
opacity: 1,
|
|
1456
|
-
width: '*',
|
|
1457
|
-
})),
|
|
1458
|
-
]),
|
|
1459
|
-
transition(':leave', [
|
|
1460
|
-
animate('150ms ease-in', style({
|
|
1461
|
-
opacity: 0,
|
|
1462
|
-
width: 0,
|
|
1463
|
-
})),
|
|
1464
|
-
]),
|
|
1465
|
-
]),
|
|
1466
|
-
], standalone: false, template: "<div\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens.length ? 'grid' : null\"\n>\n <!--\n The role must use square brackets otherwise Angular sets the native 'role'\n attribute as well as the input attribute of the token, which fails accessibility rules.\n -->\n @for (token of tokens; track trackTokenFn(i, token); let i = $index) {\n <sky-token\n [@.disabled]=\"!trackWith\"\n [@dismiss]\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\n [role]=\"'row'\"\n (@dismiss.done)=\"animationDone()\"\n (dismiss)=\"removeToken(token)\"\n (click)=\"onTokenClick(token)\"\n (keydown)=\"onTokenKeyDown($event)\"\n (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n (tokenFocus)=\"activeIndex = i\"\n >\n {{ token.value[displayWith] }}\n </sky-token>\n }\n <div class=\"sky-tokens-content\" [attr.role]=\"tokens.length ? 'row' : null\">\n <div [attr.role]=\"tokens.length ? 'gridcell' : null\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content>div{display:contents}.sky-tokens .sky-tokens-content>div:before{content:\"\\200b\"}\n"] }]
|
|
1463
|
+
args: [{ selector: 'sky-tokens', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"sky-tokens\"\n [class.sky-tokens-animation-ready]=\"animationReady()\"\n [class.sky-tokens-animation-enabled]=\"trackWith\"\n [attr.role]=\"tokens.length ? 'grid' : null\"\n>\n <!--\n The role must use square brackets otherwise Angular sets the native 'role'\n attribute as well as the input attribute of the token, which fails accessibility rules.\n -->\n @for (token of tokens; track trackTokenFn(i, token); let i = $index) {\n <sky-token\n animate.enter=\"sky-token-enter\"\n animate.leave=\"sky-token-leave\"\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\n [role]=\"'row'\"\n (dismiss)=\"removeToken(token)\"\n (click)=\"onTokenClick(token)\"\n (keydown)=\"onTokenKeyDown($event)\"\n (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n (tokenFocus)=\"activeIndex = i\"\n >\n {{ token.value[displayWith] }}\n </sky-token>\n }\n <div class=\"sky-tokens-content\" [attr.role]=\"tokens.length ? 'row' : null\">\n <div [attr.role]=\"tokens.length ? 'gridcell' : null\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes sky-token-enter-animation{0%{opacity:0;width:0;padding:0}to{opacity:1;width:auto}}@keyframes sky-token-leave-animation{0%{opacity:1;width:auto}to{opacity:0;width:0;padding:0}}.sky-tokens{--sky-token-gutter: 2px;display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens.sky-tokens-animation-enabled sky-token.sky-token-leave{animation:sky-token-leave-animation var(--sky-transition-time-short) ease-in forwards;overflow:hidden}.sky-tokens.sky-tokens-animation-ready.sky-tokens-animation-enabled sky-token.sky-token-enter{animation:sky-token-enter-animation var(--sky-transition-time-short) ease-in;overflow:hidden}.sky-tokens .sky-tokens-content{flex:0 0 auto;display:inline-flex;padding:2px;flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content>div{display:contents}.sky-tokens .sky-tokens-content>div:before{content:\"\\200b\"}\n"] }]
|
|
1467
1464
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
1468
1465
|
type: Input
|
|
1469
1466
|
}], dismissible: [{
|
|
@@ -1494,18 +1491,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1494
1491
|
}] } });
|
|
1495
1492
|
|
|
1496
1493
|
class SkyTokensModule {
|
|
1497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1498
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
1494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokensModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1495
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyTokensModule, declarations: [SkyTokenComponent, SkyTokensComponent], imports: [CommonModule,
|
|
1499
1496
|
SkyIconModule,
|
|
1500
1497
|
SkyIndicatorsResourcesModule,
|
|
1501
1498
|
SkyIdModule,
|
|
1502
1499
|
SkyScreenReaderLabelDirective], exports: [SkyTokenComponent, SkyTokensComponent] }); }
|
|
1503
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
1500
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokensModule, imports: [CommonModule,
|
|
1504
1501
|
SkyIconModule,
|
|
1505
1502
|
SkyIndicatorsResourcesModule,
|
|
1506
1503
|
SkyIdModule] }); }
|
|
1507
1504
|
}
|
|
1508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTokensModule, decorators: [{
|
|
1509
1506
|
type: NgModule,
|
|
1510
1507
|
args: [{
|
|
1511
1508
|
declarations: [SkyTokenComponent, SkyTokensComponent],
|
|
@@ -1733,11 +1730,11 @@ class SkyWaitAdapterService {
|
|
|
1733
1730
|
delete busyElements[key];
|
|
1734
1731
|
}
|
|
1735
1732
|
}
|
|
1736
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1737
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
1733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1734
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitAdapterService }); }
|
|
1738
1735
|
}
|
|
1739
1736
|
_a = SkyWaitAdapterService;
|
|
1740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitAdapterService, decorators: [{
|
|
1741
1738
|
type: Injectable
|
|
1742
1739
|
}], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
|
|
1743
1740
|
|
|
@@ -1886,10 +1883,10 @@ class SkyWaitComponent {
|
|
|
1886
1883
|
});
|
|
1887
1884
|
}
|
|
1888
1885
|
}
|
|
1889
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1886
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1887
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyWaitComponent, isStandalone: true, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking", screenReaderCompletedText: "screenReaderCompletedText" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div\n class=\"sky-wait-container\"\n [ngClass]=\"{\n 'sky-wait-full-page': isFullPage,\n 'sky-wait-non-blocking': isNonBlocking\n }\"\n>\n @if (isWaiting) {\n <div\n class=\"sky-wait-mask\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".sky-wait-container:not(.sky-theme-modern *){--sky-override-wait-mask-color: rgba(255, 255, 255, .7);--sky-override-wait-height: 50px;--sky-override-wait-width: 50px;--sky-override-wait-margin-top: -25px;--sky-override-wait-margin-left: -25px;--sky-override-wait-double-bounce-border-radius: 50%;--sky-override-wait-double-bounce-opacity: .6;--sky-override-wait-double-bounce-background-color: #72bf44}.sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:var(--sky-override-wait-mask-color, var(--sky-color-background-blocking));z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:var(--sky-override-wait-width, var(--sky-size-icon-xxxl));height:var(--sky-override-wait-height, var(--sky-size-icon-xxxl));margin-top:var(--sky-override-wait-margin-top, calc(var(--sky-size-icon-xxxl) / 2 * -1));margin-left:var(--sky-override-wait-margin-left, calc(var(--sky-size-icon-xxxl) / 2 * -1));position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:var(--sky-override-wait-double-bounce-border-radius, var(--sky-border-radius-round));background-color:var(--sky-override-wait-double-bounce-background-color, var(--sky-color-icon-info));opacity:var(--sky-override-wait-double-bounce-opacity, var(--sky-opacity-wait));position:absolute;top:0;left:0;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIndicatorsResourcesModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
1891
1888
|
}
|
|
1892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitComponent, decorators: [{
|
|
1893
1890
|
type: Component,
|
|
1894
1891
|
args: [{ selector: 'sky-wait', providers: [SkyWaitAdapterService], imports: [CommonModule, SkyIndicatorsResourcesModule], template: "<div\n class=\"sky-wait-container\"\n [ngClass]=\"{\n 'sky-wait-full-page': isFullPage,\n 'sky-wait-non-blocking': isNonBlocking\n }\"\n>\n @if (isWaiting) {\n <div\n class=\"sky-wait-mask\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n }\n</div>\n", styles: [".sky-wait-container:not(.sky-theme-modern *){--sky-override-wait-mask-color: rgba(255, 255, 255, .7);--sky-override-wait-height: 50px;--sky-override-wait-width: 50px;--sky-override-wait-margin-top: -25px;--sky-override-wait-margin-left: -25px;--sky-override-wait-double-bounce-border-radius: 50%;--sky-override-wait-double-bounce-opacity: .6;--sky-override-wait-double-bounce-background-color: #72bf44}.sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:var(--sky-override-wait-mask-color, var(--sky-color-background-blocking));z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:var(--sky-override-wait-width, var(--sky-size-icon-xxxl));height:var(--sky-override-wait-height, var(--sky-size-icon-xxxl));margin-top:var(--sky-override-wait-margin-top, calc(var(--sky-size-icon-xxxl) / 2 * -1));margin-left:var(--sky-override-wait-margin-left, calc(var(--sky-size-icon-xxxl) / 2 * -1));position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:var(--sky-override-wait-double-bounce-border-radius, var(--sky-border-radius-round));background-color:var(--sky-override-wait-double-bounce-background-color, var(--sky-color-icon-info));opacity:var(--sky-override-wait-double-bounce-opacity, var(--sky-opacity-wait));position:absolute;top:0;left:0;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"] }]
|
|
1895
1892
|
}], propDecorators: { ariaLabel: [{
|
|
@@ -1905,11 +1902,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1905
1902
|
}] } });
|
|
1906
1903
|
|
|
1907
1904
|
class SkyWaitModule {
|
|
1908
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1909
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
1910
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
1905
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1906
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitModule, imports: [SkyWaitComponent], exports: [SkyWaitComponent] }); }
|
|
1907
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitModule, imports: [SkyWaitComponent] }); }
|
|
1911
1908
|
}
|
|
1912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitModule, decorators: [{
|
|
1913
1910
|
type: NgModule,
|
|
1914
1911
|
args: [{
|
|
1915
1912
|
imports: [SkyWaitComponent],
|
|
@@ -1921,10 +1918,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1921
1918
|
* @internal
|
|
1922
1919
|
*/
|
|
1923
1920
|
class SkyWaitPageComponent {
|
|
1924
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
1921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyWaitPageComponent, isStandalone: true, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n <sky-wait\n data-sky-id=\"page-wait-non-blocking\"\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n />\n <sky-wait\n data-sky-id=\"page-wait-blocking\"\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n />\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], dependencies: [{ kind: "component", type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
|
|
1926
1923
|
}
|
|
1927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitPageComponent, decorators: [{
|
|
1928
1925
|
type: Component,
|
|
1929
1926
|
args: [{ selector: 'sky-wait-page', imports: [SkyWaitComponent], template: "<div class=\"sky-wait-page\">\n <sky-wait\n data-sky-id=\"page-wait-non-blocking\"\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n />\n <sky-wait\n data-sky-id=\"page-wait-blocking\"\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n />\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"] }]
|
|
1930
1927
|
}], propDecorators: { hasBlockingWait: [{
|
|
@@ -2079,10 +2076,10 @@ class SkyWaitService {
|
|
|
2079
2076
|
}
|
|
2080
2077
|
});
|
|
2081
2078
|
}
|
|
2082
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2083
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
2079
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2080
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitService, providedIn: 'root' }); }
|
|
2084
2081
|
}
|
|
2085
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyWaitService, decorators: [{
|
|
2086
2083
|
type: Injectable,
|
|
2087
2084
|
args: [{
|
|
2088
2085
|
providedIn: 'root',
|