ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
47 lines • 7.92 kB
JavaScript
import { Component, Input } from '@angular/core';
import { FormControl } from "@angular/forms";
import { BaseComponent } from "../base/base.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
/**
* The toggle component provides a custom toggle-look for checkboxes,
* in line with the Fluid UI theming.
*/
export class ToggleComponent extends BaseComponent {
constructor() {
super();
/** The boolean form control to bind to the toggle (checkbox) */
this.ctrl = new FormControl(false, { nonNullable: true });
/**
* The unique id to reference the input with (necessary for label binding). If you have multiple
* toggles, like in each row of a table, you'd typically use the for-index for this
*/
this.id = '';
/** The label to display next to the toggle (clickable) */
this.label = '';
/** The label position, to the left or right of the toggle */
this.labelPosition = 'right';
/** Smaller subtext for underneath the label, usually to provide a more detailed description */
this.subText = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToggleComponent, selector: "spaas-toggle", inputs: { ctrl: "ctrl", id: "id", label: "label", labelPosition: "labelPosition", subText: "subText" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex column-gap-7 width-fit-content\"\r\n [ngClass]=\"labelPosition === 'right' ? 'row' : 'row-reverse txt-right'\">\r\n\r\n <input type=\"checkbox\"\r\n class=\"tgl tgl-flat\"\r\n [formControl]=\"ctrl\"\r\n [id]=\"'toggle_' + id\">\r\n <label [for]=\"'toggle_' + id\" class=\"tgl-btn\"></label>\r\n\r\n @if (label) {\r\n <label [for]=\"'toggle_' + id\">\r\n {{ label }}\r\n @if (subText) {\r\n <div class=\"tgl-subtxt\">\r\n {{ subText }}\r\n </div>\r\n }\r\n </label>\r\n }\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-toggle', template: "<div class=\"flex column-gap-7 width-fit-content\"\r\n [ngClass]=\"labelPosition === 'right' ? 'row' : 'row-reverse txt-right'\">\r\n\r\n <input type=\"checkbox\"\r\n class=\"tgl tgl-flat\"\r\n [formControl]=\"ctrl\"\r\n [id]=\"'toggle_' + id\">\r\n <label [for]=\"'toggle_' + id\" class=\"tgl-btn\"></label>\r\n\r\n @if (label) {\r\n <label [for]=\"'toggle_' + id\">\r\n {{ label }}\r\n @if (subText) {\r\n <div class=\"tgl-subtxt\">\r\n {{ subText }}\r\n </div>\r\n }\r\n </label>\r\n }\r\n\r\n</div>\r\n" }]
}], ctorParameters: () => [], propDecorators: { ctrl: [{
type: Input,
args: [{ required: true }]
}], id: [{
type: Input,
args: [{ required: true }]
}], label: [{
type: Input
}], labelPosition: [{
type: Input
}], subText: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1nZW0tc3BhYXMvc3JjL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMvQyxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7O0FBRXJEOzs7R0FHRztBQU1ILE1BQU0sT0FBTyxlQUFnQixTQUFRLGFBQWE7SUFpQmhEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFoQlYsZ0VBQWdFO1FBQ3ZDLFNBQUksR0FBeUIsSUFBSSxXQUFXLENBQVUsS0FBSyxFQUFFLEVBQUMsV0FBVyxFQUFFLElBQUksRUFBQyxDQUFDLENBQUM7UUFDM0c7OztXQUdHO1FBQ3NCLE9BQUUsR0FBVyxFQUFFLENBQUM7UUFFekMsMERBQTBEO1FBQ2pELFVBQUssR0FBRyxFQUFFLENBQUM7UUFDcEIsNkRBQTZEO1FBQ3BELGtCQUFhLEdBQXFCLE9BQU8sQ0FBQztRQUNuRCwrRkFBK0Y7UUFDdEYsWUFBTyxHQUFHLEVBQUUsQ0FBQztJQUl0QixDQUFDOytHQW5CVSxlQUFlO21HQUFmLGVBQWUsbUxDYjVCLHdrQkFxQkE7OzRGRFJhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsY0FBYzt3REFPQyxJQUFJO3NCQUE1QixLQUFLO3VCQUFDLEVBQUMsUUFBUSxFQUFFLElBQUksRUFBQztnQkFLRSxFQUFFO3NCQUExQixLQUFLO3VCQUFDLEVBQUMsUUFBUSxFQUFFLElBQUksRUFBQztnQkFHZCxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsYUFBYTtzQkFBckIsS0FBSztnQkFFRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0Zvcm1Db250cm9sfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcclxuaW1wb3J0IHtCYXNlQ29tcG9uZW50fSBmcm9tIFwiLi4vYmFzZS9iYXNlLmNvbXBvbmVudFwiO1xyXG5cclxuLyoqXHJcbiAqIFRoZSB0b2dnbGUgY29tcG9uZW50IHByb3ZpZGVzIGEgY3VzdG9tIHRvZ2dsZS1sb29rIGZvciBjaGVja2JveGVzLFxyXG4gKiBpbiBsaW5lIHdpdGggdGhlIEZsdWlkIFVJIHRoZW1pbmcuXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NwYWFzLXRvZ2dsZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RvZ2dsZS5jb21wb25lbnQuaHRtbCcsXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgVG9nZ2xlQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCB7XHJcblxyXG4gIC8qKiBUaGUgYm9vbGVhbiBmb3JtIGNvbnRyb2wgdG8gYmluZCB0byB0aGUgdG9nZ2xlIChjaGVja2JveCkgKi9cclxuICBASW5wdXQoe3JlcXVpcmVkOiB0cnVlfSkgY3RybDogRm9ybUNvbnRyb2w8Ym9vbGVhbj4gPSBuZXcgRm9ybUNvbnRyb2w8Ym9vbGVhbj4oZmFsc2UsIHtub25OdWxsYWJsZTogdHJ1ZX0pO1xyXG4gIC8qKlxyXG4gICAqIFRoZSB1bmlxdWUgaWQgdG8gcmVmZXJlbmNlIHRoZSBpbnB1dCB3aXRoIChuZWNlc3NhcnkgZm9yIGxhYmVsIGJpbmRpbmcpLiBJZiB5b3UgaGF2ZSBtdWx0aXBsZVxyXG4gICAqICB0b2dnbGVzLCBsaWtlIGluIGVhY2ggcm93IG9mIGEgdGFibGUsIHlvdSdkIHR5cGljYWxseSB1c2UgdGhlIGZvci1pbmRleCBmb3IgdGhpc1xyXG4gICAqL1xyXG4gIEBJbnB1dCh7cmVxdWlyZWQ6IHRydWV9KSBpZDogc3RyaW5nID0gJyc7XHJcblxyXG4gIC8qKiBUaGUgbGFiZWwgdG8gZGlzcGxheSBuZXh0IHRvIHRoZSB0b2dnbGUgKGNsaWNrYWJsZSkgKi9cclxuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xyXG4gIC8qKiBUaGUgbGFiZWwgcG9zaXRpb24sIHRvIHRoZSBsZWZ0IG9yIHJpZ2h0IG9mIHRoZSB0b2dnbGUgKi9cclxuICBASW5wdXQoKSBsYWJlbFBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnID0gJ3JpZ2h0JztcclxuICAvKiogU21hbGxlciBzdWJ0ZXh0IGZvciB1bmRlcm5lYXRoIHRoZSBsYWJlbCwgdXN1YWxseSB0byBwcm92aWRlIGEgbW9yZSBkZXRhaWxlZCBkZXNjcmlwdGlvbiAqL1xyXG4gIEBJbnB1dCgpIHN1YlRleHQgPSAnJztcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICBzdXBlcigpO1xyXG4gIH1cclxuXHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImZsZXggY29sdW1uLWdhcC03IHdpZHRoLWZpdC1jb250ZW50XCJcclxuICAgICBbbmdDbGFzc109XCJsYWJlbFBvc2l0aW9uID09PSAncmlnaHQnID8gJ3JvdycgOiAncm93LXJldmVyc2UgdHh0LXJpZ2h0J1wiPlxyXG5cclxuICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCJcclxuICAgICAgICAgY2xhc3M9XCJ0Z2wgdGdsLWZsYXRcIlxyXG4gICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY3RybFwiXHJcbiAgICAgICAgIFtpZF09XCIndG9nZ2xlXycgKyBpZFwiPlxyXG4gIDxsYWJlbCBbZm9yXT1cIid0b2dnbGVfJyArIGlkXCIgY2xhc3M9XCJ0Z2wtYnRuXCI+PC9sYWJlbD5cclxuXHJcbiAgQGlmIChsYWJlbCkge1xyXG4gICAgPGxhYmVsIFtmb3JdPVwiJ3RvZ2dsZV8nICsgaWRcIj5cclxuICAgICAge3sgbGFiZWwgfX1cclxuICAgICAgQGlmIChzdWJUZXh0KSB7XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInRnbC1zdWJ0eHRcIj5cclxuICAgICAgICAgIHt7IHN1YlRleHQgfX1cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgfVxyXG4gICAgPC9sYWJlbD5cclxuICB9XHJcblxyXG48L2Rpdj5cclxuIl19