@skyux/indicators 5.1.0 → 5.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-indicators.umd.js +8 -2
- package/bundles/skyux-indicators.umd.js.map +1 -1
- package/documentation.json +340 -254
- package/esm2015/modules/tokens/token.component.js +8 -2
- package/fesm2015/skyux-indicators.js +7 -1
- package/fesm2015/skyux-indicators.js.map +1 -1
- package/modules/tokens/token.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -74,13 +74,19 @@ export class SkyTokenComponent {
|
|
|
74
74
|
focusElement() {
|
|
75
75
|
this.elementRef.nativeElement.querySelector('.sky-token').focus();
|
|
76
76
|
}
|
|
77
|
+
setTokenActive(tokenActive) {
|
|
78
|
+
this.tokenActive = tokenActive;
|
|
79
|
+
}
|
|
80
|
+
setCloseActive(closeActive) {
|
|
81
|
+
this.closeActive = closeActive;
|
|
82
|
+
}
|
|
77
83
|
getString(key) {
|
|
78
84
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
79
85
|
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
|
|
80
86
|
}
|
|
81
87
|
}
|
|
82
88
|
SkyTokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTokenComponent, deps: [{ token: i0.ElementRef }, { token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
-
SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n role=\"button\"\n [attr.aria-disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-dismissable': dismissible,\n 'sky-token-active': tokenActive && !closeActive\n }\"\n (document:mouseup)=\"
|
|
89
|
+
SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n role=\"button\"\n [attr.aria-disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-dismissable': dismissible,\n 'sky-token-active': tokenActive && !closeActive\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focus)=\"tokenFocus.emit()\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <ng-content></ng-content>\n <button\n *ngIf=\"dismissible\"\n class=\"sky-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\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-default\" icon=\"times\"></sky-icon>\n <sky-icon\n class=\"sky-token-btn-close-icon-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n</div>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;overflow:hidden;padding:2px 8px;display:inline-block;-webkit-user-select:none;user-select:none}.sky-token:hover,.sky-token:focus{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token:focus{box-shadow:0 0 8px #00b4f199;border:1px solid #00b4f1;outline:none}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn-close{background:transparent;padding:0;border:0;margin-left:2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus{opacity:1}.sky-token-btn-close-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}:host-context(.sky-theme-modern) .sky-token.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissable{padding-right:1px}: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:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token:focus,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}: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{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus: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-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}.sky-theme-modern .sky-token.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}.sky-theme-modern .sky-token.sky-token-dismissable{padding-right:1px}.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:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token:focus,.sky-theme-modern .sky-token:hover{background-color:#c1e8fb}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}.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{outline:none}.sky-theme-modern .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;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"], components: [{ type: i2.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
84
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
85
91
|
type: Component,
|
|
86
92
|
args: [{
|
|
@@ -102,4 +108,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
|
|
|
102
108
|
}], tokenFocus: [{
|
|
103
109
|
type: Output
|
|
104
110
|
}] } });
|
|
105
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
111
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9rZW4uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW5kaWNhdG9ycy9zcmMvbW9kdWxlcy90b2tlbnMvdG9rZW4uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW5kaWNhdG9ycy9zcmMvbW9kdWxlcy90b2tlbnMvdG9rZW4uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVXZCLE1BQU0sT0FBTyxpQkFBaUI7SUE4RjVCLFlBQ1UsVUFBc0IsRUFDdEIsZ0JBQXdDO1FBRHhDLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUF3QjtRQXBDbEQ7O1dBRUc7UUFFSSxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUUxQzs7V0FFRztRQUVJLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBMkIxQyxDQUFDO0lBaEdKOzs7OztPQUtHO0lBQ0gsSUFDVyxRQUFRLENBQUMsS0FBYztRQUNoQyxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBRUQsSUFBVyxRQUFRO1FBQ2pCLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDMUIsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxJQUNXLFNBQVMsQ0FBQyxLQUFhO1FBQ2hDLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRCxJQUFXLFNBQVM7UUFDbEIsT0FBTyxDQUNMLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxtQ0FBbUMsQ0FBQyxDQUN2RSxDQUFDO0lBQ0osQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxJQUNXLFdBQVcsQ0FBQyxLQUFjO1FBQ25DLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFXLFdBQVc7UUFDcEIsT0FBTyxJQUFJLENBQUMsWUFBWSxLQUFLLEtBQUssQ0FBQztJQUNyQyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUNILElBQ1csU0FBUyxDQUFDLEtBQWM7UUFDakMsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQUVELElBQVcsU0FBUztRQUNsQixPQUFPLElBQUksQ0FBQyxVQUFVLEtBQUssS0FBSyxDQUFDO0lBQ25DLENBQUM7SUFjRDs7T0FFRztJQUNILElBQVcsUUFBUTtRQUNqQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQXNCTSxZQUFZLENBQUMsS0FBWTtRQUM5QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDcEUsQ0FBQztJQUVNLGNBQWMsQ0FBQyxXQUFvQjtRQUN4QyxJQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztJQUNqQyxDQUFDO0lBRU0sY0FBYyxDQUFDLFdBQW9CO1FBQ3hDLElBQUksQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFDO0lBQ2pDLENBQUM7SUFFTyxTQUFTLENBQUMsR0FBVztRQUMzQiw2RUFBNkU7UUFDN0UsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLENBQUMsRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDNUUsQ0FBQzs7K0dBdkhVLGlCQUFpQjttR0FBakIsaUJBQWlCLDBOQ2pCOUIsbW5DQXVDQTs0RkR0QmEsaUJBQWlCO2tCQU43QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO29CQUNyQixXQUFXLEVBQUUsd0JBQXdCO29CQUNyQyxTQUFTLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztvQkFDckMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2hEO3NJQVNZLFFBQVE7c0JBRGxCLEtBQUs7Z0JBZUssU0FBUztzQkFEbkIsS0FBSztnQkFpQkssV0FBVztzQkFEckIsS0FBSztnQkFlSyxTQUFTO3NCQURuQixLQUFLO2dCQWFDLE9BQU87c0JBRGIsTUFBTTtnQkFPQSxVQUFVO3NCQURoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgU2t5TGliUmVzb3VyY2VzU2VydmljZSB9IGZyb20gJ0Bza3l1eC9pMThuJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LXRva2VuJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Rva2VuLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdG9rZW4uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNreVRva2VuQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIEluZGljYXRlcyB3aGV0aGVyIHRvIGRpc2FibGUgdGhlIHRva2VuIHRvIHByZXZlbnQgdXNlcnMgZnJvbSBzZWxlY3RpbmcgaXQsIGRpc21pc3NpbmcgaXQsXG4gICAqIG9yIG5hdmlnYXRpbmcgdG8gaXQgd2l0aCB0aGUgYXJyb3cga2V5cy4gV2hlbiB0aGUgdG9rZW4gaXMgZGlzYWJsZWQsXG4gICAqIHVzZXJzIGNhbiBzdGlsbCBwbGFjZSBmb2N1cyBvbiBpdCB1c2luZyB0aGUgYFRhYmAga2V5LlxuICAgKiBAZGVmYXVsdCB0cnVlXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2V0IGRpc2FibGVkKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fZGlzYWJsZWQgPSB2YWx1ZTtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgZGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhdGhpcy5fZGlzYWJsZWQ7XG4gIH1cblxuICAvKipcbiAgICogU3BlY2lmaWVzIGFuIEFSSUEgbGFiZWwgZm9yIHRoZSB0b2tlbidzIGNsb3NlIGJ1dHRvbi4gVGhpcyBzZXRzIHRoZSBidXR0b24ncyBgYXJpYS1sYWJlbGBcbiAgICogW3RvIHN1cHBvcnQgYWNjZXNzaWJpbGl0eV0oaHR0cHM6Ly9kZXZlbG9wZXIuYmxhY2tiYXVkLmNvbS9za3l1eC9sZWFybi9hY2Nlc3NpYmlsaXR5KS5cbiAgICogQGRlZmF1bHQgXCJSZW1vdmUgaXRlbVwiXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2V0IGFyaWFMYWJlbCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5fYXJpYUxhYmVsID0gdmFsdWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0IGFyaWFMYWJlbCgpOiBzdHJpbmcge1xuICAgIHJldHVybiAoXG4gICAgICB0aGlzLl9hcmlhTGFiZWwgfHwgdGhpcy5nZXRTdHJpbmcoJ3NreXV4X3Rva2Vuc19kaXNtaXNzX2J1dHRvbl90aXRsZScpXG4gICAgKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB1c2VycyBjYW4gcmVtb3ZlIHRoZSB0b2tlbiBmcm9tIHRoZSBsaXN0IGJ5IHNlbGVjdGluZyB0aGUgY2xvc2UgYnV0dG9uXG4gICAqIG9yIHByZXNzaW5nIHRoZSBgQmFja3NwYWNlYCBrZXkuXG4gICAqIEBkZWZhdWx0IHRydWVcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgZGlzbWlzc2libGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNtaXNzaWJsZSA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIGdldCBkaXNtaXNzaWJsZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fZGlzbWlzc2libGUgIT09IGZhbHNlO1xuICB9XG5cbiAgLyoqXG4gICAqIEluZGljYXRlcyB3aGV0aGVyIHVzZXJzIGNhbiBwcmVzcyB0aGUgYFRhYmAga2V5IHRvIHBsYWNlIGZvY3VzIG9uIHRoZSB0b2tlbi4gVGhpcyBkb2VzIG5vdFxuICAgKiBhZmZlY3QgdGhlIGFiaWxpdHkgdG8gc2VsZWN0IHRoZSB0b2tlbiwgZGlzbWlzcyBpdCwgb3IgbmF2aWdhdGUgdG8gaXQgd2l0aCB0aGUgYXJyb3cga2V5cy5cbiAgICogQGRlZmF1bHQgdHJ1ZVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBmb2N1c2FibGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9mb2N1c2FibGUgPSB2YWx1ZTtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgZm9jdXNhYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9mb2N1c2FibGUgIT09IGZhbHNlO1xuICB9XG5cbiAgLyoqXG4gICAqIEZpcmVzIHdoZW4gdXNlcnMgY2xpY2sgdGhlIGNsb3NlIGJ1dHRvbiBvciBwcmVzcyB0aGUgYEJhY2tzcGFjZWAga2V5IHRvIGRpc21pc3MgdGhlIHRva2VuLlxuICAgKi9cbiAgQE91dHB1dCgpXG4gIHB1YmxpYyBkaXNtaXNzID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIC8qKlxuICAgKiBGaXJlcyB3aGVuIHVzZXJzIHBsYWNlIGZvY3VzIG9uIHRoZSB0b2tlbiBieSBuYXZpZ2F0aW5nIHRvIGl0IHdpdGggdGhlIGBUYWJgIGtleS5cbiAgICovXG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgdG9rZW5Gb2N1cyA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAvKipcbiAgICogQGludGVybmFsXG4gICAqL1xuICBwdWJsaWMgZ2V0IHRhYkluZGV4KCk6IG51bWJlciB8IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmZvY3VzYWJsZSA/IDAgOiAtMTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHB1YmxpYyB0b2tlbkFjdGl2ZTogYm9vbGVhbjtcblxuICAvKipcbiAgICogQGludGVybmFsXG4gICAqL1xuICBwdWJsaWMgY2xvc2VBY3RpdmU6IGJvb2xlYW47XG5cbiAgcHJpdmF0ZSBfYXJpYUxhYmVsOiBzdHJpbmc7XG4gIHByaXZhdGUgX2Rpc2FibGVkOiBib29sZWFuO1xuICBwcml2YXRlIF9kaXNtaXNzaWJsZTogYm9vbGVhbjtcbiAgcHJpdmF0ZSBfZm9jdXNhYmxlOiBib29sZWFuO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlc291cmNlc1NlcnZpY2U6IFNreUxpYlJlc291cmNlc1NlcnZpY2VcbiAgKSB7fVxuXG4gIHB1YmxpYyBkaXNtaXNzVG9rZW4oZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5kaXNtaXNzLmVtaXQoKTtcbiAgfVxuXG4gIHB1YmxpYyBmb2N1c0VsZW1lbnQoKTogdm9pZCB7XG4gICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignLnNreS10b2tlbicpLmZvY3VzKCk7XG4gIH1cblxuICBwdWJsaWMgc2V0VG9rZW5BY3RpdmUodG9rZW5BY3RpdmU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnRva2VuQWN0aXZlID0gdG9rZW5BY3RpdmU7XG4gIH1cblxuICBwdWJsaWMgc2V0Q2xvc2VBY3RpdmUoY2xvc2VBY3RpdmU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmNsb3NlQWN0aXZlID0gY2xvc2VBY3RpdmU7XG4gIH1cblxuICBwcml2YXRlIGdldFN0cmluZyhrZXk6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgLy8gVE9ETzogTmVlZCB0byBpbXBsZW1lbnQgdGhlIGFzeW5jIGBnZXRTdHJpbmdgIG1ldGhvZCBpbiBhIGJyZWFraW5nIGNoYW5nZS5cbiAgICByZXR1cm4gdGhpcy5yZXNvdXJjZXNTZXJ2aWNlLmdldFN0cmluZ0ZvckxvY2FsZSh7IGxvY2FsZTogJ2VuLVVTJyB9LCBrZXkpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic2t5LXRva2VuIHNreS1idG4gc2t5LWJ0bi1kZWZhdWx0XCJcbiAgcm9sZT1cImJ1dHRvblwiXG4gIFthdHRyLmFyaWEtZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICBbYXR0ci50YWJpbmRleF09XCJ0YWJJbmRleFwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAnc2t5LWJ0bi1kaXNhYmxlZCc6IGRpc2FibGVkLFxuICAgICdza3ktdG9rZW4tZGlzbWlzc2FibGUnOiBkaXNtaXNzaWJsZSxcbiAgICAnc2t5LXRva2VuLWFjdGl2ZSc6IHRva2VuQWN0aXZlICYmICFjbG9zZUFjdGl2ZVxuICB9XCJcbiAgKGRvY3VtZW50Om1vdXNldXApPVwic2V0VG9rZW5BY3RpdmUoZmFsc2UpXCJcbiAgKGZvY3VzKT1cInRva2VuRm9jdXMuZW1pdCgpXCJcbiAgKG1vdXNlZG93bik9XCJzZXRUb2tlbkFjdGl2ZSh0cnVlKVwiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPGJ1dHRvblxuICAgICpuZ0lmPVwiZGlzbWlzc2libGVcIlxuICAgIGNsYXNzPVwic2t5LWJ0biBza3ktdG9rZW4tYnRuLWNsb3NlXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG4gICAgW2F0dHIudGFiaW5kZXhdPVwidGFiSW5kZXhcIlxuICAgIFthdHRyLnRpdGxlXT1cImFyaWFMYWJlbFwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbbmdDbGFzc109XCJ7XG4gICAgICAnc2t5LXRva2VuLWJ0bi1jbG9zZS1hY3RpdmUnOiBjbG9zZUFjdGl2ZVxuICAgIH1cIlxuICAgIChjbGljayk9XCJkaXNtaXNzVG9rZW4oJGV2ZW50KVwiXG4gICAgKGRvY3VtZW50Om1vdXNldXApPVwic2V0Q2xvc2VBY3RpdmUoZmFsc2UpXCJcbiAgICAobW91c2Vkb3duKT1cInNldENsb3NlQWN0aXZlKHRydWUpXCJcbiAgPlxuICAgIDxza3ktaWNvbiBjbGFzcz1cInNreS10b2tlbi1idG4tY2xvc2UtaWNvbi1kZWZhdWx0XCIgaWNvbj1cInRpbWVzXCI+PC9za3ktaWNvbj5cbiAgICA8c2t5LWljb25cbiAgICAgIGNsYXNzPVwic2t5LXRva2VuLWJ0bi1jbG9zZS1pY29uLW1vZGVyblwiXG4gICAgICBpY29uPVwiY2xvc2VcIlxuICAgICAgaWNvblR5cGU9XCJza3l1eFwiXG4gICAgPlxuICAgIDwvc2t5LWljb24+XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=
|
|
@@ -922,13 +922,19 @@ class SkyTokenComponent {
|
|
|
922
922
|
focusElement() {
|
|
923
923
|
this.elementRef.nativeElement.querySelector('.sky-token').focus();
|
|
924
924
|
}
|
|
925
|
+
setTokenActive(tokenActive) {
|
|
926
|
+
this.tokenActive = tokenActive;
|
|
927
|
+
}
|
|
928
|
+
setCloseActive(closeActive) {
|
|
929
|
+
this.closeActive = closeActive;
|
|
930
|
+
}
|
|
925
931
|
getString(key) {
|
|
926
932
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
927
933
|
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
|
|
928
934
|
}
|
|
929
935
|
}
|
|
930
936
|
SkyTokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTokenComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
931
|
-
SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n role=\"button\"\n [attr.aria-disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-dismissable': dismissible,\n 'sky-token-active': tokenActive && !closeActive\n }\"\n (document:mouseup)=\"
|
|
937
|
+
SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n role=\"button\"\n [attr.aria-disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-dismissable': dismissible,\n 'sky-token-active': tokenActive && !closeActive\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focus)=\"tokenFocus.emit()\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <ng-content></ng-content>\n <button\n *ngIf=\"dismissible\"\n class=\"sky-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\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-default\" icon=\"times\"></sky-icon>\n <sky-icon\n class=\"sky-token-btn-close-icon-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n</div>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;overflow:hidden;padding:2px 8px;display:inline-block;-webkit-user-select:none;user-select:none}.sky-token:hover,.sky-token:focus{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token:focus{box-shadow:0 0 8px #00b4f199;border:1px solid #00b4f1;outline:none}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn-close{background:transparent;padding:0;border:0;margin-left:2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus{opacity:1}.sky-token-btn-close-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}:host-context(.sky-theme-modern) .sky-token.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissable{padding-right:1px}: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:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token:focus,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}: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{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus: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-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}.sky-theme-modern .sky-token.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}.sky-theme-modern .sky-token.sky-token-dismissable{padding-right:1px}.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:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token:focus,.sky-theme-modern .sky-token:hover{background-color:#c1e8fb}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}.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{outline:none}.sky-theme-modern .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;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"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
932
938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
933
939
|
type: Component,
|
|
934
940
|
args: [{
|