@skyux/indicators 11.19.2 → 11.21.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.
|
@@ -94,11 +94,11 @@ export class SkyTokenComponent {
|
|
|
94
94
|
});
|
|
95
95
|
}
|
|
96
96
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTokenComponent, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;padding:0;display:inline-block}.sky-token:hover,.sky-token.sky-token-focused{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token.sky-token-focused{box-shadow:0 0 8px #00b4f199;border:1px solid var(--sky-highlight-color-info);outline:none}.sky-token.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn{background-color:transparent;border:0;padding:2px 8px}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close{margin-left:-2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;font-size:14px}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible{padding-right:1px}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token.sky-token-focused,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}:host-context(.sky-theme-modern) .sky-token-btn.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token-btn-action{font-size:14px}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon{width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;font-size:14px}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}.sky-theme-modern .sky-token.sky-token-dismissible{padding-right:1px}.sky-theme-modern .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token.sky-token-focused,.sky-theme-modern .sky-token:hover{background-color:#ebfbff}.sky-theme-modern .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}.sky-theme-modern .sky-token-btn.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token-btn-action{font-size:14px}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}.sky-theme-modern .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus-visible{outline:none}.sky-theme-modern .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon{width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTokenComponent, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token:not(.sky-theme-modern *){--sky-override-token-background-color: #c1e8fb;--sky-override-token-active-background-color: #91d6f8;--sky-override-token-focused-background-color: #91d6f8;--sky-override-token-hover-background-color: #91d6f8;--sky-override-token-font-size: 15px;--sky-override-token-padding: 0;--sky-override-token-close-margin-left: -2px;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-align-items: inherit;--sky-override-token-display: inline-block;--sky-override-token-button-padding: 2px 8px;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-hover-border: 1px solid #008ebe;--sky-override-token-box-shadow: none;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-box-shadow: none;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-close-icon-width: initial;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-close-padding: 2px 8px;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-display: inline-block;--sky-override-token-close-align-items: inherit;--sky-override-token-close-size: \"\";--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-focus-background-color: transparent --sky-override-token-close-focus-box-shadow: none}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-token{--sky-override-token-font-size: var(--modern-font-size-150);--sky-override-token-padding: 0;--sky-override-token-button-padding: var(--modern-size-1) var(--modern-size-5);--sky-override-token-close-padding: 0;--sky-override-token-close-size: var(--modern-size-20);--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-hover-box-shadow: inset 0 0 0 1px transparent}.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-space-inset-pillarbox-1_4-top-xs) var(--sky-space-inset-pillarbox-1_4-right-xs) var(--sky-space-inset-pillarbox-1_4-bottom-xs) var(--sky-space-inset-pillarbox-1_4-left-xs));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-space-inset-balanced-xxs));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-action-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);height:var(--sky-override-token-close-size, \"\");width:var(--sky-override-token-close-size, \"\");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), var(--sky-elevation-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-action-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: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
|
-
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token{background-color
|
|
101
|
+
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token:not(.sky-theme-modern *){--sky-override-token-background-color: #c1e8fb;--sky-override-token-active-background-color: #91d6f8;--sky-override-token-focused-background-color: #91d6f8;--sky-override-token-hover-background-color: #91d6f8;--sky-override-token-font-size: 15px;--sky-override-token-padding: 0;--sky-override-token-close-margin-left: -2px;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-align-items: inherit;--sky-override-token-display: inline-block;--sky-override-token-button-padding: 2px 8px;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-hover-border: 1px solid #008ebe;--sky-override-token-box-shadow: none;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-box-shadow: none;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-close-icon-width: initial;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-close-padding: 2px 8px;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-display: inline-block;--sky-override-token-close-align-items: inherit;--sky-override-token-close-size: \"\";--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-focus-background-color: transparent --sky-override-token-close-focus-box-shadow: none}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-token{--sky-override-token-font-size: var(--modern-font-size-150);--sky-override-token-padding: 0;--sky-override-token-button-padding: var(--modern-size-1) var(--modern-size-5);--sky-override-token-close-padding: 0;--sky-override-token-close-size: var(--modern-size-20);--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-hover-box-shadow: inset 0 0 0 1px transparent}.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-space-inset-pillarbox-1_4-top-xs) var(--sky-space-inset-pillarbox-1_4-right-xs) var(--sky-space-inset-pillarbox-1_4-bottom-xs) var(--sky-space-inset-pillarbox-1_4-left-xs));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-space-inset-balanced-xxs));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-action-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);height:var(--sky-override-token-close-size, \"\");width:var(--sky-override-token-close-size, \"\");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), var(--sky-elevation-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-action-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"] }]
|
|
102
102
|
}], propDecorators: { disabled: [{
|
|
103
103
|
type: Input
|
|
104
104
|
}], ariaLabel: [{
|
|
@@ -1088,11 +1088,11 @@ class SkyTokenComponent {
|
|
|
1088
1088
|
});
|
|
1089
1089
|
}
|
|
1090
1090
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1091
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTokenComponent, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;padding:0;display:inline-block}.sky-token:hover,.sky-token.sky-token-focused{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token.sky-token-focused{box-shadow:0 0 8px #00b4f199;border:1px solid var(--sky-highlight-color-info);outline:none}.sky-token.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn{background-color:transparent;border:0;padding:2px 8px}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close{margin-left:-2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;font-size:14px}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible{padding-right:1px}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token.sky-token-focused,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}:host-context(.sky-theme-modern) .sky-token-btn.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token-btn-action{font-size:14px}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon{width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;font-size:14px}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}.sky-theme-modern .sky-token.sky-token-dismissible{padding-right:1px}.sky-theme-modern .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token.sky-token-focused,.sky-theme-modern .sky-token:hover{background-color:#ebfbff}.sky-theme-modern .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}.sky-theme-modern .sky-token-btn.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token-btn-action{font-size:14px}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}.sky-theme-modern .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus-visible{outline:none}.sky-theme-modern .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon{width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3$1.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTokenComponent, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token:not(.sky-theme-modern *){--sky-override-token-background-color: #c1e8fb;--sky-override-token-active-background-color: #91d6f8;--sky-override-token-focused-background-color: #91d6f8;--sky-override-token-hover-background-color: #91d6f8;--sky-override-token-font-size: 15px;--sky-override-token-padding: 0;--sky-override-token-close-margin-left: -2px;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-align-items: inherit;--sky-override-token-display: inline-block;--sky-override-token-button-padding: 2px 8px;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-hover-border: 1px solid #008ebe;--sky-override-token-box-shadow: none;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-box-shadow: none;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-close-icon-width: initial;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-close-padding: 2px 8px;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-display: inline-block;--sky-override-token-close-align-items: inherit;--sky-override-token-close-size: \"\";--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-focus-background-color: transparent --sky-override-token-close-focus-box-shadow: none}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-token{--sky-override-token-font-size: var(--modern-font-size-150);--sky-override-token-padding: 0;--sky-override-token-button-padding: var(--modern-size-1) var(--modern-size-5);--sky-override-token-close-padding: 0;--sky-override-token-close-size: var(--modern-size-20);--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-hover-box-shadow: inset 0 0 0 1px transparent}.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-space-inset-pillarbox-1_4-top-xs) var(--sky-space-inset-pillarbox-1_4-right-xs) var(--sky-space-inset-pillarbox-1_4-bottom-xs) var(--sky-space-inset-pillarbox-1_4-left-xs));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-space-inset-balanced-xxs));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-action-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);height:var(--sky-override-token-close-size, \"\");width:var(--sky-override-token-close-size, \"\");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), var(--sky-elevation-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-action-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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3$1.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1092
1092
|
}
|
|
1093
1093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
1094
1094
|
type: Component,
|
|
1095
|
-
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token{background-color
|
|
1095
|
+
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"sky-token-btn-close-icon\" icon=\"close\" />\n </button>\n </span>\n }\n</div>\n<span\n #screenReaderLabelDismiss=\"skyId\"\n skyScreenReaderLabel\n skyId\n [createLabel]=\"dismissible && !ariaLabel\"\n>\n {{ 'skyux_tokens_dismiss_button_default_label' | skyLibResources }}\n</span>\n", styles: [".sky-token:not(.sky-theme-modern *){--sky-override-token-background-color: #c1e8fb;--sky-override-token-active-background-color: #91d6f8;--sky-override-token-focused-background-color: #91d6f8;--sky-override-token-hover-background-color: #91d6f8;--sky-override-token-font-size: 15px;--sky-override-token-padding: 0;--sky-override-token-close-margin-left: -2px;--sky-override-token-dismissible-padding-right: 0;--sky-override-token-align-items: inherit;--sky-override-token-display: inline-block;--sky-override-token-button-padding: 2px 8px;--sky-override-token-border: 1px solid #00b4f1;--sky-override-token-active-border: 1px solid #00b4f1;--sky-override-token-focused-border: 1px solid #00b4f1;--sky-override-token-hover-border: 1px solid #008ebe;--sky-override-token-box-shadow: none;--sky-override-token-active-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-hover-box-shadow: none;--sky-override-token-focused-box-shadow: 0 0 8px rgba(0, 180, 241, .6);--sky-override-token-close-icon-width: initial;--sky-override-token-disabled-background-color: #c1e8fb;--sky-override-token-close-padding: 2px 8px;--sky-override-token-close-border-radius: 3px;--sky-override-token-close-display: inline-block;--sky-override-token-close-align-items: inherit;--sky-override-token-close-size: \"\";--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-active-background-color: transparent;--sky-override-token-close-active-box-shadow: none;--sky-override-token-close-hover-box-shadow: none;--sky-override-token-close-hover-background-color: transparent;--sky-override-token-close-focus-outline: auto;--sky-override-token-close-focus-background-color: transparent --sky-override-token-close-focus-box-shadow: none}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-token{--sky-override-token-font-size: var(--modern-font-size-150);--sky-override-token-padding: 0;--sky-override-token-button-padding: var(--modern-size-1) var(--modern-size-5);--sky-override-token-close-padding: 0;--sky-override-token-close-size: var(--modern-size-20);--sky-override-token-close-line-height: calc(20 / 14);--sky-override-token-close-button-opacity: .9;--sky-override-token-close-hover-box-shadow: inset 0 0 0 1px transparent}.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-space-inset-pillarbox-1_4-top-xs) var(--sky-space-inset-pillarbox-1_4-right-xs) var(--sky-space-inset-pillarbox-1_4-bottom-xs) var(--sky-space-inset-pillarbox-1_4-left-xs));align-items:var(--sky-override-token-align-items, center);display:var(--sky-override-token-display, inline-flex)}.sky-token.sky-token-focused:not(:active){background-color:var(--sky-override-token-focused-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-focused-border, none);box-shadow:var(--sky-override-token-focused-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus));cursor:pointer}.sky-token:hover{background-color:var(--sky-override-token-hover-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-hover-border, none);box-shadow:var(--sky-override-token-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover));cursor:pointer}.sky-token.sky-token-active{background-color:var(--sky-override-token-active-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-token-active-border, none);box-shadow:var(--sky-override-token-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));cursor:pointer}.sky-token .sky-token-btn{background-color:transparent;border:0;box-shadow:none}.sky-token-btn{padding:var(--sky-override-token-button-padding, 0)}.sky-btn-disabled{background-color:var(--sky-override-token-disabled-background-color, var(--sky-color-background-action-tertiary-disabled));cursor:default;-webkit-user-select:none;user-select:none}.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled .sky-token-btn-action{color:var(--sky-color-text-deemphasized)}.sky-btn-disabled .sky-token-btn-close{color:var(--sky-color-icon-deemphasized)}.sky-token-btn-close{margin-left:var(--sky-override-token-close-margin-left, var(--sky-space-gap-text_action-xs));opacity:var(--sky-override-token-close-button-opacity, 1);padding:var(--sky-override-token-close-padding, var(--sky-space-inset-balanced-xxs));border-radius:var(--sky-override-token-close-border-radius, calc(var(--sky-border-radius-s) - var(--sky-border-width-action-selected-s)));align-items:var(--sky-override-token-close-align-items, center);display:var(--sky-override-token-close-display, flex);height:var(--sky-override-token-close-size, \"\");width:var(--sky-override-token-close-size, \"\");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), var(--sky-elevation-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-action-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"] }]
|
|
1096
1096
|
}], propDecorators: { disabled: [{
|
|
1097
1097
|
type: Input
|
|
1098
1098
|
}], ariaLabel: [{
|