@skyux/indicators 15.0.0-alpha.8 → 15.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,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, ChangeDetectorRef, Output, Input, ChangeDetectionStrategy, Component, Injectable, input, ViewEncapsulation, ElementRef, HostBinding, Directive,
|
|
4
|
+
import { NgModule, EventEmitter, inject, ChangeDetectorRef, Output, Input, ChangeDetectionStrategy, Component, Injectable, input, ViewEncapsulation, ElementRef, HostBinding, Directive, InjectionToken, computed, ViewChild, signal, contentChildren, Injector, afterNextRender, ViewChildren, RendererFactory2, 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';
|
|
@@ -72,6 +72,56 @@ const RESOURCES = {
|
|
|
72
72
|
message: 'Page loading complete.',
|
|
73
73
|
},
|
|
74
74
|
},
|
|
75
|
+
ES: {
|
|
76
|
+
skyux_alert_close: { message: 'Cerrar la alerta' },
|
|
77
|
+
skyux_alert_sr_attention: { message: 'Atención:' },
|
|
78
|
+
skyux_alert_sr_caution: { message: 'Precaución:' },
|
|
79
|
+
skyux_alert_sr_completed: { message: 'Completado:' },
|
|
80
|
+
skyux_alert_sr_danger: { message: 'Peligro:' },
|
|
81
|
+
skyux_alert_sr_error: { message: 'Error:' },
|
|
82
|
+
skyux_alert_sr_important_info: { message: 'Información importante:' },
|
|
83
|
+
skyux_alert_sr_important_warning: { message: 'Advertencia importante:' },
|
|
84
|
+
skyux_alert_sr_success: { message: 'Éxito:' },
|
|
85
|
+
skyux_alert_sr_warning: { message: 'Advertencia:' },
|
|
86
|
+
skyux_help_inline_button_title: { message: 'Mostrar contenido de ayuda' },
|
|
87
|
+
skyux_label_sr_attention: { message: 'Atención:' },
|
|
88
|
+
skyux_label_sr_caution: { message: 'Precaución:' },
|
|
89
|
+
skyux_label_sr_completed: { message: 'Completado:' },
|
|
90
|
+
skyux_label_sr_danger: { message: 'Peligro:' },
|
|
91
|
+
skyux_label_sr_error: { message: 'Error:' },
|
|
92
|
+
skyux_label_sr_important_info: { message: 'Información importante:' },
|
|
93
|
+
skyux_label_sr_important_warning: { message: 'Advertencia importante:' },
|
|
94
|
+
skyux_label_sr_success: { message: 'Éxito:' },
|
|
95
|
+
skyux_label_sr_warning: { message: 'Advertencia:' },
|
|
96
|
+
skyux_status_indicator_sr_attention: { message: 'Atención:' },
|
|
97
|
+
skyux_status_indicator_sr_caution: { message: 'Precaución:' },
|
|
98
|
+
skyux_status_indicator_sr_completed: { message: 'Completado:' },
|
|
99
|
+
skyux_status_indicator_sr_danger: { message: 'Peligro:' },
|
|
100
|
+
skyux_status_indicator_sr_error: { message: 'Error:' },
|
|
101
|
+
skyux_status_indicator_sr_important_info: {
|
|
102
|
+
message: 'Información importante:',
|
|
103
|
+
},
|
|
104
|
+
skyux_status_indicator_sr_important_warning: {
|
|
105
|
+
message: 'Advertencia importante:',
|
|
106
|
+
},
|
|
107
|
+
skyux_status_indicator_sr_success: { message: 'Éxito:' },
|
|
108
|
+
skyux_status_indicator_sr_warning: { message: 'Advertencia:' },
|
|
109
|
+
skyux_tokens_dismiss_button_default_label: { message: 'Eliminar ' },
|
|
110
|
+
skyux_tokens_dismiss_button_title: { message: 'Eliminar elemento' },
|
|
111
|
+
skyux_tokens_token_dismissed: { message: 'Se eliminó {0}' },
|
|
112
|
+
skyux_wait_aria_alt_text: { message: 'Cargando.' },
|
|
113
|
+
skyux_wait_blocking_aria_alt_text: {
|
|
114
|
+
message: 'Cargando. Por favor espere.',
|
|
115
|
+
},
|
|
116
|
+
skyux_wait_page_aria_alt_text: { message: 'Cargando página.' },
|
|
117
|
+
skyux_wait_page_blocking_aria_alt_text: {
|
|
118
|
+
message: 'Cargando página. Por favor espere.',
|
|
119
|
+
},
|
|
120
|
+
skyux_wait_screen_reader_completed_text: { message: 'Carga completada.' },
|
|
121
|
+
skyux_wait_page_screen_reader_completed_text: {
|
|
122
|
+
message: 'Carga de la página completada.',
|
|
123
|
+
},
|
|
124
|
+
},
|
|
75
125
|
'FR-CA': {
|
|
76
126
|
skyux_alert_close: { message: 'Fermer l’alerte' },
|
|
77
127
|
skyux_alert_sr_attention: { message: 'Attention :' },
|
|
@@ -271,11 +321,11 @@ class SkyAlertComponent {
|
|
|
271
321
|
}
|
|
272
322
|
}
|
|
273
323
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
324
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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{--sky-icon-svg-path-2-color-input: var(--sky-color-icon-on_status);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-on_status);display:flex;flex-direction:row;align-items:center}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{--sky-comp-override-link-text-decoration-line: var( --sky-font-text_decoration-action-tertiary-on_status-base );--sky-comp-override-link-text-decoration-line-hover: var( --sky-font-text_decoration-action-tertiary-on_status-hover );--sky-comp-override-link-text-decoration-line-active: var( --sky-font-text_decoration-action-tertiary-on_status-active );--sky-comp-override-link-text-decoration-line-focus: var( --sky-font-text_decoration-action-tertiary-on_status-focus );--sky-comp-override-link-text-decoration-line-disabled: var( --sky-font-text_decoration-action-tertiary-on_status-disabled );--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-action-tertiary-on_status-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-action-tertiary-on_status-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-action-tertiary-on_status-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-action-tertiary-on_status-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-action-tertiary-on_status-disabled );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,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline{color:var(--sky-color-text-action_on_status)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:hover,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:active,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:hover,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:active,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline:hover,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline:active{color:var(--sky-color-text-action_on_status)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:focus-visible:not(:active),:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline:focus-visible:not(:active){box-shadow:0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:hover{box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-on_status-hover),var(--sky-elevation-action-tertiary-hover)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:active,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link.sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-on_status-active),var(--sky-elevation-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:focus-visible:not(:active){box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus),var(--sky-elevation-action-tertiary-focus)}: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)}: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)}: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)}: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-text-on_status);border-style:solid;border-color:var(--sky-color-border-action-on_status-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-on_status-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-on_status-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-on_status-active);border-width:var(--sky-border-width-action-active)}: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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
275
325
|
}
|
|
276
326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAlertComponent, decorators: [{
|
|
277
327
|
type: Component,
|
|
278
|
-
args: [{ selector: 'sky-alert', hostDirectives: [SkyThemeComponentClassDirective], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
|
|
328
|
+
args: [{ selector: 'sky-alert', hostDirectives: [SkyThemeComponentClassDirective], changeDetection: ChangeDetectionStrategy.Eager, 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{--sky-icon-svg-path-2-color-input: var(--sky-color-icon-on_status);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-on_status);display:flex;flex-direction:row;align-items:center}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{--sky-comp-override-link-text-decoration-line: var( --sky-font-text_decoration-action-tertiary-on_status-base );--sky-comp-override-link-text-decoration-line-hover: var( --sky-font-text_decoration-action-tertiary-on_status-hover );--sky-comp-override-link-text-decoration-line-active: var( --sky-font-text_decoration-action-tertiary-on_status-active );--sky-comp-override-link-text-decoration-line-focus: var( --sky-font-text_decoration-action-tertiary-on_status-focus );--sky-comp-override-link-text-decoration-line-disabled: var( --sky-font-text_decoration-action-tertiary-on_status-disabled );--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-action-tertiary-on_status-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-action-tertiary-on_status-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-action-tertiary-on_status-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-action-tertiary-on_status-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-action-tertiary-on_status-disabled );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,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline{color:var(--sky-color-text-action_on_status)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:hover,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:active,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:hover,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:active,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline:hover,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline:active{color:var(--sky-color-text-action_on_status)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep a:focus-visible:not(:active),:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link-inline:focus-visible:not(:active){box-shadow:0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:hover{box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-on_status-hover),var(--sky-elevation-action-tertiary-hover)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:active,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link.sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-on_status-active),var(--sky-elevation-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content ::ng-deep .sky-btn-link:focus-visible:not(:active){box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus),var(--sky-elevation-action-tertiary-focus)}: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)}: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)}: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)}: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-text-on_status);border-style:solid;border-color:var(--sky-color-border-action-on_status-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-on_status-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-on_status-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-on_status-active);border-width:var(--sky-border-width-action-active)}: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"] }]
|
|
279
329
|
}], propDecorators: { alertType: [{
|
|
280
330
|
type: Input
|
|
281
331
|
}], closeable: [{
|
|
@@ -704,11 +754,11 @@ class SkyLabelComponent {
|
|
|
704
754
|
}
|
|
705
755
|
}
|
|
706
756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
707
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-
|
|
757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-color: #212327;--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)}:host-context(.sky-theme-modern) .sky-label ::ng-deep a:focus-visible:not(:active){box-shadow:0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus)}.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-theme-modern .sky-label ::ng-deep a:focus-visible:not(:active){box-shadow:0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus)}.sky-label{--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-action-tertiary-on_status-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-action-tertiary-on_status-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-action-tertiary-on_status-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-action-tertiary-on_status-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-action-tertiary-on_status-disabled );color:var(--sky-override-label-text-color, var(--sky-color-text-on_status));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_on_status));text-decoration-line:var(--sky-override-label-link-text-decoration, var(--sky-font-text_decoration-action-tertiary-on_status-base))}.sky-label ::ng-deep a:hover{color:var(--sky-override-label-link-hover-color, var(--sky-color-text-action_on_status))}.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-on_status) )}.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-on_status) )}.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-on_status) )}.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-on_status) )}.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
708
758
|
}
|
|
709
759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyLabelComponent, decorators: [{
|
|
710
760
|
type: Component,
|
|
711
|
-
args: [{ selector: 'sky-label', changeDetection: ChangeDetectionStrategy.Eager, 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-
|
|
761
|
+
args: [{ selector: 'sky-label', changeDetection: ChangeDetectionStrategy.Eager, 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-color: #212327;--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)}:host-context(.sky-theme-modern) .sky-label ::ng-deep a:focus-visible:not(:active){box-shadow:0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus)}.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-theme-modern .sky-label ::ng-deep a:focus-visible:not(:active){box-shadow:0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-on_status-focus)}.sky-label{--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-action-tertiary-on_status-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-action-tertiary-on_status-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-action-tertiary-on_status-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-action-tertiary-on_status-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-action-tertiary-on_status-disabled );color:var(--sky-override-label-text-color, var(--sky-color-text-on_status));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_on_status));text-decoration-line:var(--sky-override-label-link-text-decoration, var(--sky-font-text_decoration-action-tertiary-on_status-base))}.sky-label ::ng-deep a:hover{color:var(--sky-override-label-link-hover-color, var(--sky-color-text-action_on_status))}.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-on_status) )}.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-on_status) )}.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-on_status) )}.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-on_status) )}.sky-label-text{display:inline-block;padding-left:var(--sky-override-label-text-padding-left, var(--sky-space-gap-icon-s))}\n"] }]
|
|
712
762
|
}], propDecorators: { labelType: [{
|
|
713
763
|
type: Input
|
|
714
764
|
}], descriptionType: [{
|
|
@@ -823,11 +873,11 @@ class SkyStatusIndicatorComponent {
|
|
|
823
873
|
}
|
|
824
874
|
}
|
|
825
875
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
826
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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))}
|
|
876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-override-status-indicator-inner-icon-color: #fff}.sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{--sky-icon-svg-path-2-color-input: var( --sky-override-status-indicator-inner-icon-color, var(--sky-color-icon-on_status) );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))}\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 }); }
|
|
827
877
|
}
|
|
828
878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
|
|
829
879
|
type: Component,
|
|
830
|
-
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))}
|
|
880
|
+
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-override-status-indicator-inner-icon-color: #fff}.sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{--sky-icon-svg-path-2-color-input: var( --sky-override-status-indicator-inner-icon-color, var(--sky-color-icon-on_status) );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))}\n"] }]
|
|
831
881
|
}], propDecorators: { indicatorType: [{
|
|
832
882
|
type: Input
|
|
833
883
|
}], descriptionType: [{
|
|
@@ -1045,8 +1095,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1045
1095
|
}]
|
|
1046
1096
|
}] });
|
|
1047
1097
|
|
|
1098
|
+
/** @internal */
|
|
1099
|
+
const SKY_TOKENS_ROLE_CONTEXT = new InjectionToken('SkyTokensRoleContext');
|
|
1100
|
+
|
|
1048
1101
|
class SkyTokenComponent {
|
|
1049
1102
|
constructor() {
|
|
1103
|
+
/**
|
|
1104
|
+
* Used by the tokens component to set the appropriate role for each token
|
|
1105
|
+
* generated from the `tokens` input.
|
|
1106
|
+
* @internal
|
|
1107
|
+
*/
|
|
1108
|
+
this.role = input(/* @ts-ignore */
|
|
1109
|
+
...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
|
|
1110
|
+
/**
|
|
1111
|
+
* The role to apply to the token's host element. Tokens generated from the
|
|
1112
|
+
* `tokens` input receive their role directly through the `role` input above.
|
|
1113
|
+
* Manually projected tokens never receive that binding (Angular does not
|
|
1114
|
+
* apply template bindings to projected content), so they fall back to
|
|
1115
|
+
* asking the ancestor `sky-tokens` component whether its grid role is
|
|
1116
|
+
* active. Reading `#roleContext`'s signal-backed value here (rather than
|
|
1117
|
+
* having `sky-tokens` push the value in imperatively) lets this OnPush
|
|
1118
|
+
* component's view update automatically when that ancestor state changes.
|
|
1119
|
+
* @internal
|
|
1120
|
+
*/
|
|
1121
|
+
this.effectiveRole = computed(() => this.role() ?? (this.#roleContext?.gridRoleActive() ? 'row' : undefined), /* @ts-ignore */
|
|
1122
|
+
...(ngDevMode ? [{ debugName: "effectiveRole" }] : /* istanbul ignore next */ []));
|
|
1050
1123
|
/**
|
|
1051
1124
|
* Fires when users click the close button.
|
|
1052
1125
|
*/
|
|
@@ -1062,6 +1135,7 @@ class SkyTokenComponent {
|
|
|
1062
1135
|
this.#elementRef = inject(ElementRef);
|
|
1063
1136
|
this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
|
|
1064
1137
|
this.#resourcesSvc = inject(SkyLibResourcesService);
|
|
1138
|
+
this.#roleContext = inject(SKY_TOKENS_ROLE_CONTEXT, { optional: true });
|
|
1065
1139
|
this.#_disabled = false;
|
|
1066
1140
|
this.#_dismissible = true;
|
|
1067
1141
|
}
|
|
@@ -1098,6 +1172,7 @@ class SkyTokenComponent {
|
|
|
1098
1172
|
#elementRef;
|
|
1099
1173
|
#liveAnnouncerSvc;
|
|
1100
1174
|
#resourcesSvc;
|
|
1175
|
+
#roleContext;
|
|
1101
1176
|
#_disabled;
|
|
1102
1177
|
#_dismissible;
|
|
1103
1178
|
onFocusIn() {
|
|
@@ -1132,11 +1207,11 @@ class SkyTokenComponent {
|
|
|
1132
1207
|
});
|
|
1133
1208
|
}
|
|
1134
1209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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),.sky-token:focus-visible: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{cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled.sky-token{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));border:var(--sky-override-token-border, 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 }); }
|
|
1210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyTokenComponent, isStandalone: false, selector: "sky-token", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: false, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, 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]=\"effectiveRole()\"\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]=\"effectiveRole() === '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]=\"effectiveRole() === '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),.sky-token:focus-visible: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{cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled.sky-token{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));border:var(--sky-override-token-border, 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 }); }
|
|
1136
1211
|
}
|
|
1137
1212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
1138
1213
|
type: Component,
|
|
1139
|
-
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"
|
|
1214
|
+
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"effectiveRole()\"\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]=\"effectiveRole() === '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]=\"effectiveRole() === '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),.sky-token:focus-visible: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{cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled.sky-token{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));border:var(--sky-override-token-border, 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"] }]
|
|
1140
1215
|
}], propDecorators: { disabled: [{
|
|
1141
1216
|
type: Input
|
|
1142
1217
|
}], ariaLabel: [{
|
|
@@ -1145,9 +1220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1145
1220
|
type: Input
|
|
1146
1221
|
}], focusable: [{
|
|
1147
1222
|
type: Input
|
|
1148
|
-
}], role: [{
|
|
1149
|
-
type: Input
|
|
1150
|
-
}], dismiss: [{
|
|
1223
|
+
}], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], dismiss: [{
|
|
1151
1224
|
type: Output
|
|
1152
1225
|
}], tokenFocus: [{
|
|
1153
1226
|
type: Output
|
|
@@ -1235,7 +1308,7 @@ class SkyTokensComponent {
|
|
|
1235
1308
|
* The array of tokens to include in the list.
|
|
1236
1309
|
*/
|
|
1237
1310
|
set tokens(value) {
|
|
1238
|
-
this.#
|
|
1311
|
+
this.#tokens.set(value || []);
|
|
1239
1312
|
// The previous behavior was to set `this._tokens = value`, then emit `this._tokens`,
|
|
1240
1313
|
// which would emit `undefined` instead of a default value of `[]` returned by the
|
|
1241
1314
|
// get accessor when set to `undefined`. Emitting `value` instead of `this.#_tokensOrDefault`
|
|
@@ -1244,7 +1317,7 @@ class SkyTokensComponent {
|
|
|
1244
1317
|
this.#queueTokensRenderedEmit();
|
|
1245
1318
|
}
|
|
1246
1319
|
get tokens() {
|
|
1247
|
-
return this.#
|
|
1320
|
+
return this.#tokens();
|
|
1248
1321
|
}
|
|
1249
1322
|
/**
|
|
1250
1323
|
* The observable of `SkyTokensMessage` that can place focus on a
|
|
@@ -1261,8 +1334,8 @@ class SkyTokensComponent {
|
|
|
1261
1334
|
return this.#_activeIndex;
|
|
1262
1335
|
}
|
|
1263
1336
|
set activeIndex(value) {
|
|
1264
|
-
if (value >= this.#
|
|
1265
|
-
value = this.#
|
|
1337
|
+
if (value >= this.#tokens().length) {
|
|
1338
|
+
value = this.#tokens().length - 1;
|
|
1266
1339
|
this.focusIndexOverRange.emit();
|
|
1267
1340
|
}
|
|
1268
1341
|
if (value < 0) {
|
|
@@ -1274,8 +1347,8 @@ class SkyTokensComponent {
|
|
|
1274
1347
|
#_disabled;
|
|
1275
1348
|
#_dismissible;
|
|
1276
1349
|
#_focusable;
|
|
1277
|
-
#_tokens;
|
|
1278
1350
|
#_displayWith;
|
|
1351
|
+
#tokens;
|
|
1279
1352
|
#messageStreamSub;
|
|
1280
1353
|
#ngUnsubscribe;
|
|
1281
1354
|
#tokensRenderedQueued;
|
|
@@ -1311,8 +1384,24 @@ class SkyTokensComponent {
|
|
|
1311
1384
|
this.#_disabled = false;
|
|
1312
1385
|
this.#_dismissible = true;
|
|
1313
1386
|
this.#_focusable = true;
|
|
1314
|
-
this.#_tokens = [];
|
|
1315
1387
|
this.#_displayWith = DISPLAY_WITH_DEFAULT;
|
|
1388
|
+
this.#tokens = signal([], /* @ts-ignore */
|
|
1389
|
+
...(ngDevMode ? [{ debugName: "#tokens" }] : /* istanbul ignore next */ []));
|
|
1390
|
+
/**
|
|
1391
|
+
* The tokens manually projected into the component via
|
|
1392
|
+
* `<ng-content select="sky-token" />`, as opposed to the ones generated from
|
|
1393
|
+
* the `tokens` input.
|
|
1394
|
+
*/
|
|
1395
|
+
this.projectedTokenComponents = contentChildren(SkyTokenComponent, /* @ts-ignore */
|
|
1396
|
+
...(ngDevMode ? [{ debugName: "projectedTokenComponents" }] : /* istanbul ignore next */ []));
|
|
1397
|
+
/**
|
|
1398
|
+
* Whether the grid role is active on this component's host element. A
|
|
1399
|
+
* `sky-token` element (whether generated from the `tokens` input or
|
|
1400
|
+
* manually projected) reads this to determine its own `row` role, since
|
|
1401
|
+
* Angular does not apply template bindings to projected content.
|
|
1402
|
+
*/
|
|
1403
|
+
this.gridRoleActive = computed(() => this.#tokens().length > 0 || this.projectedTokenComponents().length > 0, /* @ts-ignore */
|
|
1404
|
+
...(ngDevMode ? [{ debugName: "gridRoleActive" }] : /* istanbul ignore next */ []));
|
|
1316
1405
|
this.#ngUnsubscribe = new Subject();
|
|
1317
1406
|
this.#tokensRenderedQueued = false;
|
|
1318
1407
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
@@ -1462,11 +1551,15 @@ class SkyTokensComponent {
|
|
|
1462
1551
|
});
|
|
1463
1552
|
}
|
|
1464
1553
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTokensComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1465
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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" },
|
|
1554
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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" }, providers: [
|
|
1555
|
+
{ provide: SKY_TOKENS_ROLE_CONTEXT, useExisting: SkyTokensComponent },
|
|
1556
|
+
], queries: [{ propertyName: "projectedTokenComponents", predicate: SkyTokenComponent, isSignal: true }], 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]=\"gridRoleActive() ? '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 <ng-content select=\"sky-token\" />\n <div class=\"sky-tokens-content\" [attr.role]=\"gridRoleActive() ? 'row' : null\">\n <div [attr.role]=\"gridRoleActive() ? '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-global-duration-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-global-duration-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 }); }
|
|
1466
1557
|
}
|
|
1467
1558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTokensComponent, decorators: [{
|
|
1468
1559
|
type: Component,
|
|
1469
|
-
args: [{ selector: 'sky-tokens', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false,
|
|
1560
|
+
args: [{ selector: 'sky-tokens', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, providers: [
|
|
1561
|
+
{ provide: SKY_TOKENS_ROLE_CONTEXT, useExisting: SkyTokensComponent },
|
|
1562
|
+
], template: "<div\n class=\"sky-tokens\"\n [class.sky-tokens-animation-ready]=\"animationReady()\"\n [class.sky-tokens-animation-enabled]=\"trackWith\"\n [attr.role]=\"gridRoleActive() ? '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 <ng-content select=\"sky-token\" />\n <div class=\"sky-tokens-content\" [attr.role]=\"gridRoleActive() ? 'row' : null\">\n <div [attr.role]=\"gridRoleActive() ? '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-global-duration-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-global-duration-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"] }]
|
|
1470
1563
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
1471
1564
|
type: Input
|
|
1472
1565
|
}], dismissible: [{
|
|
@@ -1494,7 +1587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1494
1587
|
}], tokenComponents: [{
|
|
1495
1588
|
type: ViewChildren,
|
|
1496
1589
|
args: [SkyTokenComponent]
|
|
1497
|
-
}] } });
|
|
1590
|
+
}], projectedTokenComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyTokenComponent), { isSignal: true }] }] } });
|
|
1498
1591
|
|
|
1499
1592
|
class SkyTokensModule {
|
|
1500
1593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTokensModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|