@skyux/indicators 13.11.5 → 13.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -269,11 +269,11 @@ class SkyAlertComponent {
|
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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-
|
|
272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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
273
|
}
|
|
274
274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAlertComponent, decorators: [{
|
|
275
275
|
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-
|
|
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-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
277
|
}], propDecorators: { alertType: [{
|
|
278
278
|
type: Input
|
|
279
279
|
}], closeable: [{
|
|
@@ -694,11 +694,11 @@ class SkyLabelComponent {
|
|
|
694
694
|
}
|
|
695
695
|
}
|
|
696
696
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
697
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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-
|
|
697
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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
698
|
}
|
|
699
699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLabelComponent, decorators: [{
|
|
700
700
|
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-
|
|
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-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
702
|
}], propDecorators: { labelType: [{
|
|
703
703
|
type: Input
|
|
704
704
|
}], descriptionType: [{
|
|
@@ -813,11 +813,11 @@ class SkyStatusIndicatorComponent {
|
|
|
813
813
|
}
|
|
814
814
|
}
|
|
815
815
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
816
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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-
|
|
816
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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
817
|
}
|
|
818
818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
|
|
819
819
|
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-
|
|
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-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
821
|
}], propDecorators: { indicatorType: [{
|
|
822
822
|
type: Input
|
|
823
823
|
}], descriptionType: [{
|