@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
88 lines • 13.2 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SwitchComponent {
constructor() {
/**
* @ignore
*/
this.switchClassName = 'nj-switch';
/**
* Switch variant theme
*/
this.variant = 'primary';
/**
* Whether switch is checked or not
*/
this.isChecked = false;
/**
* Output that emits a SwitchValue when switch value change occurs
*/
this.valueChange = new EventEmitter();
}
/**
* @ignore
*/
getButtonMainClass() {
if (!this.variant) {
return '';
}
return `${this.switchClassName}--${this.variant}`;
}
/**
* @ignore
*/
_onChangeEvent(event) {
event.stopPropagation();
if (this._inputElement?.nativeElement) {
this.isChecked = this._inputElement.nativeElement.checked;
if (this.values) {
this.valueChange.emit(this.isChecked ? this.values.right : this.values.left);
}
}
}
/**
* @ignore
*/
_onInputClick(event) {
// We have to stop propagation for click events on the visually hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `slide-toggle` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchComponent, isStandalone: true, selector: "nj-switch", inputs: { variant: "variant", isDisabled: "isDisabled", values: "values", isChecked: "isChecked", id: "id", name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", title: "title" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"nj-switch\" [ngClass]=\"getButtonMainClass()\">\n <label>\n <input type=\"checkbox\" #input\n [disabled]=\"isDisabled\"\n [checked]=\"isChecked\"\n [title]=\"title\"\n [name]=\"name\"\n [attr.id]=\"id\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\">\n <span class=\"nj-switch__slider\">\n <span class=\"nj-switch__slider-left\">\n <ng-content select=\"[left-label]\"></ng-content>\n </span>\n <span class=\"nj-switch__slider-right\">\n <ng-content select=\"[right-label]\"></ng-content>\n </span>\n </span>\n </label>\n</div>\n", styles: [".nj-switch{display:inline-flex}.nj-switch__slider{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-switch\" [ngClass]=\"getButtonMainClass()\">\n <label>\n <input type=\"checkbox\" #input\n [disabled]=\"isDisabled\"\n [checked]=\"isChecked\"\n [title]=\"title\"\n [name]=\"name\"\n [attr.id]=\"id\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\">\n <span class=\"nj-switch__slider\">\n <span class=\"nj-switch__slider-left\">\n <ng-content select=\"[left-label]\"></ng-content>\n </span>\n <span class=\"nj-switch__slider-right\">\n <ng-content select=\"[right-label]\"></ng-content>\n </span>\n </span>\n </label>\n</div>\n", styles: [".nj-switch{display:inline-flex}.nj-switch__slider{-webkit-user-select:none;user-select:none}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { variant: [{
type: Input
}], isDisabled: [{
type: Input
}], values: [{
type: Input
}], isChecked: [{
type: Input
}], id: [{
type: Input
}], name: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], title: [{
type: Input
}], valueChange: [{
type: Output
}], _inputElement: [{
type: ViewChild,
args: ['input']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC9zd2l0Y2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc3dpdGNoL3N3aXRjaC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULGlCQUFpQixFQUNsQixNQUFNLGVBQWUsQ0FBQzs7O0FBWXZCLE1BQU0sT0FBTyxlQUFlO0lBK0QxQjtRQTdEQTs7V0FFRztRQUNjLG9CQUFlLEdBQUcsV0FBVyxDQUFDO1FBRS9DOztXQUVHO1FBQ00sWUFBTyxHQUFrQixTQUFTLENBQUM7UUFZNUM7O1dBRUc7UUFDTSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBMkIzQjs7V0FFRztRQUNPLGdCQUFXLEdBQThCLElBQUksWUFBWSxFQUFlLENBQUM7SUFTbkYsQ0FBQztJQUVEOztPQUVHO0lBQ0gsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2pCLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFDRCxPQUFPLEdBQUcsSUFBSSxDQUFDLGVBQWUsS0FBSyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDcEQsQ0FBQztJQUVEOztPQUVHO0lBQ0gsY0FBYyxDQUFDLEtBQVk7UUFDekIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRSxhQUFhLEVBQUU7WUFDckMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUM7WUFDMUQsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUNmLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO2FBQzlFO1NBQ0Y7SUFDSCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxhQUFhLENBQUMsS0FBWTtRQUN4QixxRkFBcUY7UUFDckYscUZBQXFGO1FBQ3JGLHdGQUF3RjtRQUN4RixnRkFBZ0Y7UUFDaEYsOEZBQThGO1FBQzlGLDJDQUEyQztRQUMzQyxrRUFBa0U7UUFDbEUsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQzFCLENBQUM7K0dBckdVLGVBQWU7bUdBQWYsZUFBZSw0WkN0QjVCLCt3QkFzQkEsdUpERlksWUFBWTs7NEZBRVgsZUFBZTtrQkFUM0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOzBFQVlkLE9BQU87c0JBQWYsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFLRyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLEVBQUU7c0JBQVYsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSztnQkFLRyxjQUFjO3NCQUF0QixLQUFLO2dCQUtHLEtBQUs7c0JBQWIsS0FBSztnQkFLSSxXQUFXO3NCQUFwQixNQUFNO2dCQU1DLGFBQWE7c0JBRHBCLFNBQVM7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtTd2l0Y2hWYWx1ZSwgU3dpdGNoVmFsdWVzLCBTd2l0Y2hWYXJpYW50fSBmcm9tICcuL3N3aXRjaC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25qLXN3aXRjaCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zd2l0Y2guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zd2l0Y2guY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFN3aXRjaENvbXBvbmVudCB7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHByaXZhdGUgcmVhZG9ubHkgc3dpdGNoQ2xhc3NOYW1lID0gJ25qLXN3aXRjaCc7XG5cbiAgLyoqXG4gICAqIFN3aXRjaCB2YXJpYW50IHRoZW1lXG4gICAqL1xuICBASW5wdXQoKSB2YXJpYW50OiBTd2l0Y2hWYXJpYW50ID0gJ3ByaW1hcnknO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHN3aXRjaCBpcyBkaXNhYmxlZCBvciBub3RcbiAgICovXG4gIEBJbnB1dCgpIGlzRGlzYWJsZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFZhbHVlcyB0aGF0IHdpbGwgYmUgZW1pdHRlZCBieSB0aGUgc3dpdGNoIG9uIHRvZ2dsZVxuICAgKi9cbiAgQElucHV0KCkgdmFsdWVzOiBTd2l0Y2hWYWx1ZXM7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgc3dpdGNoIGlzIGNoZWNrZWQgb3Igbm90XG4gICAqL1xuICBASW5wdXQoKSBpc0NoZWNrZWQgPSBmYWxzZTtcblxuICAvKipcbiAgICogaWQgb2YgdGhlIGlucHV0IGluc2lkZSBvZiB0aGUgc3dpdGNoXG4gICAqL1xuICBASW5wdXQoKSBpZDogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBuYW1lIG9mIHRoZSBpbnB1dCBpbnNpZGUgb2YgdGhlIHN3aXRjaFxuICAgKi9cbiAgQElucHV0KCkgbmFtZTogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBBcmlhIGxhYmVsLCBmb3IgYWNjZXNzaWJpbGl0eSByZWFzb25zXG4gICAqL1xuICBASW5wdXQoKSBhcmlhTGFiZWw6IHN0cmluZztcblxuICAvKipcbiAgICogQXJpYSBsYWJlbGxlZCBieSwgZm9yIGFjY2Vzc2liaWxpdHkgcmVhc29uc1xuICAgKi9cbiAgQElucHV0KCkgYXJpYUxhYmVsbGVkQnk6IHN0cmluZztcblxuICAvKipcbiAgICogdGl0bGUgb2YgdGhlIGlucHV0IGluc2lkZSBvZiB0aGUgc3dpdGNoXG4gICAqL1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBPdXRwdXQgdGhhdCBlbWl0cyBhIFN3aXRjaFZhbHVlIHdoZW4gc3dpdGNoIHZhbHVlIGNoYW5nZSBvY2N1cnNcbiAgICovXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPFN3aXRjaFZhbHVlPiA9IG5ldyBFdmVudEVtaXR0ZXI8U3dpdGNoVmFsdWU+KCk7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ2lucHV0JylcbiAgcHJpdmF0ZSBfaW5wdXRFbGVtZW50OiBFbGVtZW50UmVmPEhUTUxJbnB1dEVsZW1lbnQ+O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldEJ1dHRvbk1haW5DbGFzcygpOiBzdHJpbmcge1xuICAgIGlmICghdGhpcy52YXJpYW50KSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuICAgIHJldHVybiBgJHt0aGlzLnN3aXRjaENsYXNzTmFtZX0tLSR7dGhpcy52YXJpYW50fWA7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgX29uQ2hhbmdlRXZlbnQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKHRoaXMuX2lucHV0RWxlbWVudD8ubmF0aXZlRWxlbWVudCkge1xuICAgICAgdGhpcy5pc0NoZWNrZWQgPSB0aGlzLl9pbnB1dEVsZW1lbnQubmF0aXZlRWxlbWVudC5jaGVja2VkO1xuICAgICAgaWYgKHRoaXMudmFsdWVzKSB7XG4gICAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLmlzQ2hlY2tlZCA/IHRoaXMudmFsdWVzLnJpZ2h0IDogdGhpcy52YWx1ZXMubGVmdCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIF9vbklucHV0Q2xpY2soZXZlbnQ6IEV2ZW50KSB7XG4gICAgLy8gV2UgaGF2ZSB0byBzdG9wIHByb3BhZ2F0aW9uIGZvciBjbGljayBldmVudHMgb24gdGhlIHZpc3VhbGx5IGhpZGRlbiBpbnB1dCBlbGVtZW50LlxuICAgIC8vIEJ5IGRlZmF1bHQsIHdoZW4gYSB1c2VyIGNsaWNrcyBvbiBhIGxhYmVsIGVsZW1lbnQsIGEgZ2VuZXJhdGVkIGNsaWNrIGV2ZW50IHdpbGwgYmVcbiAgICAvLyBkaXNwYXRjaGVkIG9uIHRoZSBhc3NvY2lhdGVkIGlucHV0IGVsZW1lbnQuIFNpbmNlIHdlIGFyZSB1c2luZyBhIGxhYmVsIGVsZW1lbnQgYXMgb3VyXG4gICAgLy8gcm9vdCBjb250YWluZXIsIHRoZSBjbGljayBldmVudCBvbiB0aGUgYHNsaWRlLXRvZ2dsZWAgd2lsbCBiZSBleGVjdXRlZCB0d2ljZS5cbiAgICAvLyBUaGUgcmVhbCBjbGljayBldmVudCB3aWxsIGJ1YmJsZSB1cCwgYW5kIHRoZSBnZW5lcmF0ZWQgY2xpY2sgZXZlbnQgYWxzbyB0cmllcyB0byBidWJibGUgdXAuXG4gICAgLy8gVGhpcyB3aWxsIGxlYWQgdG8gbXVsdGlwbGUgY2xpY2sgZXZlbnRzLlxuICAgIC8vIFByZXZlbnRpbmcgYnViYmxpbmcgZm9yIHRoZSBzZWNvbmQgZXZlbnQgd2lsbCBzb2x2ZSB0aGF0IGlzc3VlLlxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmotc3dpdGNoXCIgW25nQ2xhc3NdPVwiZ2V0QnV0dG9uTWFpbkNsYXNzKClcIj5cbiAgPGxhYmVsPlxuICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiAjaW5wdXRcbiAgICAgICAgICAgW2Rpc2FibGVkXT1cImlzRGlzYWJsZWRcIlxuICAgICAgICAgICBbY2hlY2tlZF09XCJpc0NoZWNrZWRcIlxuICAgICAgICAgICBbdGl0bGVdPVwidGl0bGVcIlxuICAgICAgICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgICAgICAgW2F0dHIuaWRdPVwiaWRcIlxuICAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG4gICAgICAgICAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRCeVwiXG4gICAgICAgICAgIChjaGFuZ2UpPVwiX29uQ2hhbmdlRXZlbnQoJGV2ZW50KVwiXG4gICAgICAgICAgIChjbGljayk9XCJfb25JbnB1dENsaWNrKCRldmVudClcIj5cbiAgICA8c3BhbiBjbGFzcz1cIm5qLXN3aXRjaF9fc2xpZGVyXCI+XG4gICAgICA8c3BhbiBjbGFzcz1cIm5qLXN3aXRjaF9fc2xpZGVyLWxlZnRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2xlZnQtbGFiZWxdXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJuai1zd2l0Y2hfX3NsaWRlci1yaWdodFwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbcmlnaHQtbGFiZWxdXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9zcGFuPlxuICAgIDwvc3Bhbj5cbiAgPC9sYWJlbD5cbjwvZGl2PlxuIl19