@clr/angular
Version:
Angular components for Clarity
101 lines • 11.8 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Component, HostBinding, HostListener, Input } from '@angular/core';
import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
import { OptionData as OptionProxy } from './providers/combobox-focus-handler.service';
import * as i0 from "@angular/core";
import * as i1 from "../../utils/i18n/common-strings.service";
import * as i2 from "./providers/combobox-focus-handler.service";
import * as i3 from "./providers/option-selection.service";
import * as i4 from "@angular/common";
export class ClrOption {
constructor(elRef, commonStrings, focusHandler, optionSelectionService) {
this.elRef = elRef;
this.commonStrings = commonStrings;
this.focusHandler = focusHandler;
this.optionSelectionService = optionSelectionService;
// A proxy with only the necessary data to be used for a11y and the focus handler service.
this.optionProxy = new OptionProxy(null, null);
this.optionProxy.el = this.elRef.nativeElement;
}
get optionId() {
return this._id;
}
set optionId(id) {
this._id = id;
this.optionProxy.id = this._id;
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.optionProxy.value = value;
}
get selected() {
return (this.optionSelectionService.selectionModel && this.optionSelectionService.selectionModel.containsItem(this.value));
}
get focusClass() {
return this.focusHandler.pseudoFocus.containsItem(this.optionProxy);
}
ngOnInit() {
if (!this._id) {
this._id = 'clr-option-' + uniqueIdFactory();
this.optionProxy.id = this._id;
}
}
onClick() {
if (this.optionSelectionService.multiselectable) {
this.optionSelectionService.toggle(this.value);
}
else {
this.optionSelectionService.select(this.value);
}
// As the popover stays open in multi-select mode now, we have to take focus back to the input
// This way we achieve two things:
// - do not lose focus
// - we're still able to use onBlur for "outside-click" handling
this.focusHandler.focusInput();
}
}
ClrOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: i1.ClrCommonStringsService }, { token: i2.ComboboxFocusHandler }, { token: i3.OptionSelectionService }], target: i0.ɵɵFactoryTarget.Component });
ClrOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrOption, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, ngImport: i0, template: `
<ng-content></ng-content>
<span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
`, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrOption, decorators: [{
type: Component,
args: [{
selector: 'clr-option',
template: `
<ng-content></ng-content>
<span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
`,
host: {
'[class.clr-combobox-option]': 'true',
'[attr.role]': '"option"',
// Do not remove. Or click-selection will not work.
'[attr.tabindex]': '-1',
'[attr.id]': 'optionId',
},
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ClrCommonStringsService }, { type: i2.ComboboxFocusHandler }, { type: i3.OptionSelectionService }]; }, propDecorators: { optionId: [{
type: Input,
args: ['id']
}], value: [{
type: Input,
args: ['clrValue']
}], selected: [{
type: HostBinding,
args: ['class.active']
}], focusClass: [{
type: HostBinding,
args: ['class.clr-focus']
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvZm9ybXMvY29tYm9ib3gvb3B0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBQUUsU0FBUyxFQUFjLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBR2hHLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQztBQUNoRixPQUFPLEVBQXdCLFVBQVUsSUFBSSxXQUFXLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7Ozs7O0FBZ0I3RyxNQUFNLE9BQU8sU0FBUztJQU9wQixZQUNTLEtBQWlCLEVBQ2pCLGFBQXNDLEVBQ3JDLFlBQXFDLEVBQ3JDLHNCQUFpRDtRQUhsRCxVQUFLLEdBQUwsS0FBSyxDQUFZO1FBQ2pCLGtCQUFhLEdBQWIsYUFBYSxDQUF5QjtRQUNyQyxpQkFBWSxHQUFaLFlBQVksQ0FBeUI7UUFDckMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUEyQjtRQVYzRCwwRkFBMEY7UUFDMUYsZ0JBQVcsR0FBbUIsSUFBSSxXQUFXLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBV3hELElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDO0lBQ2pELENBQUM7SUFFRCxJQUNJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUM7SUFDbEIsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLEVBQVU7UUFDckIsSUFBSSxDQUFDLEdBQUcsR0FBRyxFQUFFLENBQUM7UUFDZCxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQ2pDLENBQUM7SUFFRCxJQUNJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUNELElBQUksS0FBSyxDQUFDLEtBQVE7UUFDaEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ2pDLENBQUM7SUFFRCxJQUNJLFFBQVE7UUFDVixPQUFPLENBQ0wsSUFBSSxDQUFDLHNCQUFzQixDQUFDLGNBQWMsSUFBSSxJQUFJLENBQUMsc0JBQXNCLENBQUMsY0FBYyxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQ2xILENBQUM7SUFDSixDQUFDO0lBRUQsSUFDSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3RFLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUU7WUFDYixJQUFJLENBQUMsR0FBRyxHQUFHLGFBQWEsR0FBRyxlQUFlLEVBQUUsQ0FBQztZQUM3QyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO1NBQ2hDO0lBQ0gsQ0FBQztJQUdELE9BQU87UUFDTCxJQUFJLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLEVBQUU7WUFDL0MsSUFBSSxDQUFDLHNCQUFzQixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDaEQ7YUFBTTtZQUNMLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ2hEO1FBQ0QsOEZBQThGO1FBQzlGLGtDQUFrQztRQUNsQyxzQkFBc0I7UUFDdEIsZ0VBQWdFO1FBQ2hFLElBQUksQ0FBQyxZQUFZLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDakMsQ0FBQzs7c0dBakVVLFNBQVM7MEZBQVQsU0FBUyw4V0FaVjs7O0dBR1Q7MkZBU1UsU0FBUztrQkFkckIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtvQkFDdEIsUUFBUSxFQUFFOzs7R0FHVDtvQkFDRCxJQUFJLEVBQUU7d0JBQ0osNkJBQTZCLEVBQUUsTUFBTTt3QkFDckMsYUFBYSxFQUFFLFVBQVU7d0JBQ3pCLG1EQUFtRDt3QkFDbkQsaUJBQWlCLEVBQUUsSUFBSTt3QkFDdkIsV0FBVyxFQUFFLFVBQVU7cUJBQ3hCO2lCQUNGOytNQWtCSyxRQUFRO3NCQURYLEtBQUs7dUJBQUMsSUFBSTtnQkFVUCxLQUFLO3NCQURSLEtBQUs7dUJBQUMsVUFBVTtnQkFVYixRQUFRO3NCQURYLFdBQVc7dUJBQUMsY0FBYztnQkFRdkIsVUFBVTtzQkFEYixXQUFXO3VCQUFDLGlCQUFpQjtnQkFhOUIsT0FBTztzQkFETixZQUFZO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LTIwMjMgVk13YXJlLCBJbmMuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDbHJDb21tb25TdHJpbmdzU2VydmljZSB9IGZyb20gJy4uLy4uL3V0aWxzL2kxOG4vY29tbW9uLXN0cmluZ3Muc2VydmljZSc7XG5pbXBvcnQgeyB1bmlxdWVJZEZhY3RvcnkgfSBmcm9tICcuLi8uLi91dGlscy9pZC1nZW5lcmF0b3IvaWQtZ2VuZXJhdG9yLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ29tYm9ib3hGb2N1c0hhbmRsZXIsIE9wdGlvbkRhdGEgYXMgT3B0aW9uUHJveHkgfSBmcm9tICcuL3Byb3ZpZGVycy9jb21ib2JveC1mb2N1cy1oYW5kbGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgT3B0aW9uU2VsZWN0aW9uU2VydmljZSB9IGZyb20gJy4vcHJvdmlkZXJzL29wdGlvbi1zZWxlY3Rpb24uc2VydmljZSc7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjbHItb3B0aW9uJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPHNwYW4gKm5nSWY9XCJzZWxlY3RlZFwiIGNsYXNzPVwiY2xyLXNyLW9ubHlcIj57eyBjb21tb25TdHJpbmdzLmtleXMuY29tYm9ib3hTZWxlY3RlZCB9fTwvc3Bhbj5cbiAgYCxcbiAgaG9zdDoge1xuICAgICdbY2xhc3MuY2xyLWNvbWJvYm94LW9wdGlvbl0nOiAndHJ1ZScsXG4gICAgJ1thdHRyLnJvbGVdJzogJ1wib3B0aW9uXCInLFxuICAgIC8vIERvIG5vdCByZW1vdmUuIE9yIGNsaWNrLXNlbGVjdGlvbiB3aWxsIG5vdCB3b3JrLlxuICAgICdbYXR0ci50YWJpbmRleF0nOiAnLTEnLFxuICAgICdbYXR0ci5pZF0nOiAnb3B0aW9uSWQnLFxuICB9LFxufSlcbmV4cG9ydCBjbGFzcyBDbHJPcHRpb248VD4gaW1wbGVtZW50cyBPbkluaXQge1xuICAvLyBBIHByb3h5IHdpdGggb25seSB0aGUgbmVjZXNzYXJ5IGRhdGEgdG8gYmUgdXNlZCBmb3IgYTExeSBhbmQgdGhlIGZvY3VzIGhhbmRsZXIgc2VydmljZS5cbiAgb3B0aW9uUHJveHk6IE9wdGlvblByb3h5PFQ+ID0gbmV3IE9wdGlvblByb3h5KG51bGwsIG51bGwpO1xuXG4gIHByaXZhdGUgX2lkOiBzdHJpbmc7XG4gIHByaXZhdGUgX3ZhbHVlOiBUO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBlbFJlZjogRWxlbWVudFJlZixcbiAgICBwdWJsaWMgY29tbW9uU3RyaW5nczogQ2xyQ29tbW9uU3RyaW5nc1NlcnZpY2UsXG4gICAgcHJpdmF0ZSBmb2N1c0hhbmRsZXI6IENvbWJvYm94Rm9jdXNIYW5kbGVyPFQ+LFxuICAgIHByaXZhdGUgb3B0aW9uU2VsZWN0aW9uU2VydmljZTogT3B0aW9uU2VsZWN0aW9uU2VydmljZTxUPlxuICApIHtcbiAgICB0aGlzLm9wdGlvblByb3h5LmVsID0gdGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50O1xuICB9XG5cbiAgQElucHV0KCdpZCcpXG4gIGdldCBvcHRpb25JZCgpIHtcbiAgICByZXR1cm4gdGhpcy5faWQ7XG4gIH1cbiAgc2V0IG9wdGlvbklkKGlkOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9pZCA9IGlkO1xuICAgIHRoaXMub3B0aW9uUHJveHkuaWQgPSB0aGlzLl9pZDtcbiAgfVxuXG4gIEBJbnB1dCgnY2xyVmFsdWUnKVxuICBnZXQgdmFsdWUoKTogVCB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG4gIHNldCB2YWx1ZSh2YWx1ZTogVCkge1xuICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5vcHRpb25Qcm94eS52YWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hY3RpdmUnKVxuICBnZXQgc2VsZWN0ZWQoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMub3B0aW9uU2VsZWN0aW9uU2VydmljZS5zZWxlY3Rpb25Nb2RlbCAmJiB0aGlzLm9wdGlvblNlbGVjdGlvblNlcnZpY2Uuc2VsZWN0aW9uTW9kZWwuY29udGFpbnNJdGVtKHRoaXMudmFsdWUpXG4gICAgKTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuY2xyLWZvY3VzJylcbiAgZ2V0IGZvY3VzQ2xhc3MoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9jdXNIYW5kbGVyLnBzZXVkb0ZvY3VzLmNvbnRhaW5zSXRlbSh0aGlzLm9wdGlvblByb3h5KTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICghdGhpcy5faWQpIHtcbiAgICAgIHRoaXMuX2lkID0gJ2Nsci1vcHRpb24tJyArIHVuaXF1ZUlkRmFjdG9yeSgpO1xuICAgICAgdGhpcy5vcHRpb25Qcm94eS5pZCA9IHRoaXMuX2lkO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgb25DbGljaygpIHtcbiAgICBpZiAodGhpcy5vcHRpb25TZWxlY3Rpb25TZXJ2aWNlLm11bHRpc2VsZWN0YWJsZSkge1xuICAgICAgdGhpcy5vcHRpb25TZWxlY3Rpb25TZXJ2aWNlLnRvZ2dsZSh0aGlzLnZhbHVlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5vcHRpb25TZWxlY3Rpb25TZXJ2aWNlLnNlbGVjdCh0aGlzLnZhbHVlKTtcbiAgICB9XG4gICAgLy8gQXMgdGhlIHBvcG92ZXIgc3RheXMgb3BlbiBpbiBtdWx0aS1zZWxlY3QgbW9kZSBub3csIHdlIGhhdmUgdG8gdGFrZSBmb2N1cyBiYWNrIHRvIHRoZSBpbnB1dFxuICAgIC8vIFRoaXMgd2F5IHdlIGFjaGlldmUgdHdvIHRoaW5nczpcbiAgICAvLyAtIGRvIG5vdCBsb3NlIGZvY3VzXG4gICAgLy8gLSB3ZSdyZSBzdGlsbCBhYmxlIHRvIHVzZSBvbkJsdXIgZm9yIFwib3V0c2lkZS1jbGlja1wiIGhhbmRsaW5nXG4gICAgdGhpcy5mb2N1c0hhbmRsZXIuZm9jdXNJbnB1dCgpO1xuICB9XG59XG4iXX0=