ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
76 lines • 8.87 kB
JavaScript
import { Component, forwardRef, HostBinding, HostListener, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
export class ToggleComponent {
constructor() {
this.on = false;
this.small = false;
this.disabled = false;
this.isActive = false;
}
onclick() {
if (this.disabled) {
return;
}
this.writeValue(!this.on);
this.onChange(this.on);
this.isActive = this.on;
this.onTouched();
}
writeValue(value) {
this.on = value;
}
onChange(value) {
}
onTouched() {
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
ngOnInit() {
this.on = this.isActive;
}
}
ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ToggleComponent, selector: "sdk-toggle", inputs: { small: "small", disabled: "disabled", isActive: "isActive" }, host: { listeners: { "click": "onclick()", "keyup.enter": "onclick()" }, properties: { "class.sdk-switch--on": "this.on", "class.sdk-switch--small": "this.small", "class.disabled": "this.disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToggleComponent),
multi: true
}
], ngImport: i0, template: "<div class=\"sdk-switch__thumb\"></div>\n", styles: [":host{display:flex;flex:none;width:38px;height:24px;padding:1px;border-radius:12px;background-color:var(--background-a90);cursor:pointer;box-sizing:border-box;transition:background-color .2s}:host.sdk-switch--on{background-color:var(--primary)}:host.sdk-switch--on .sdk-switch__thumb{transform:translate(14px)}:host.disabled{opacity:.5;cursor:default}.sdk-switch__thumb{width:20px;height:20px;border-radius:50%;margin-top:2px;margin-left:2px;background-color:#fff;transition:transform .2s;box-shadow:0 2px 2px rgba(var(--base-rgb),.24),0 1px 0 rgba(var(--base-rgb),.16)}:host.sdk-switch--small{height:16px}:host.sdk-switch--small .sdk-switch__thumb{width:18px;height:12px;border-radius:17px}:host.sdk-switch--small.sdk-switch--on .sdk-switch__thumb{transform:translate(16px)}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-toggle', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToggleComponent),
multi: true
}
], template: "<div class=\"sdk-switch__thumb\"></div>\n", styles: [":host{display:flex;flex:none;width:38px;height:24px;padding:1px;border-radius:12px;background-color:var(--background-a90);cursor:pointer;box-sizing:border-box;transition:background-color .2s}:host.sdk-switch--on{background-color:var(--primary)}:host.sdk-switch--on .sdk-switch__thumb{transform:translate(14px)}:host.disabled{opacity:.5;cursor:default}.sdk-switch__thumb{width:20px;height:20px;border-radius:50%;margin-top:2px;margin-left:2px;background-color:#fff;transition:transform .2s;box-shadow:0 2px 2px rgba(var(--base-rgb),.24),0 1px 0 rgba(var(--base-rgb),.16)}:host.sdk-switch--small{height:16px}:host.sdk-switch--small .sdk-switch__thumb{width:18px;height:12px;border-radius:17px}:host.sdk-switch--small.sdk-switch--on .sdk-switch__thumb{transform:translate(16px)}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { on: [{
type: HostBinding,
args: ['class.sdk-switch--on']
}], small: [{
type: HostBinding,
args: ['class.sdk-switch--small']
}, {
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.disabled']
}, {
type: Input
}], isActive: [{
type: Input
}], onclick: [{
type: HostListener,
args: ['click']
}, {
type: HostListener,
args: ['keyup.enter']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LXNsaWNlLWtpdC9zcmMvbGliL2lucHV0cy90b2dnbGUvdG9nZ2xlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LXNsaWNlLWtpdC9zcmMvbGliL2lucHV0cy90b2dnbGUvdG9nZ2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQWNuRCxNQUFNLE9BQU8sZUFBZTtJQWdCeEI7UUFiTyxPQUFFLEdBQVksS0FBSyxDQUFDO1FBSXBCLFVBQUssR0FBWSxLQUFLLENBQUM7UUFJdkIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUcxQixhQUFRLEdBQVksS0FBSyxDQUFDO0lBR2pDLENBQUM7SUFJTSxPQUFPO1FBQ1YsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2YsT0FBTztTQUNWO1FBQ0QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN2QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFTSxVQUFVLENBQUMsS0FBSztRQUNuQixJQUFJLENBQUMsRUFBRSxHQUFHLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBRU0sUUFBUSxDQUFDLEtBQUs7SUFDckIsQ0FBQztJQUVNLFNBQVM7SUFDaEIsQ0FBQztJQUVNLGdCQUFnQixDQUFDLEVBQUU7UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVNLGlCQUFpQixDQUFDLEVBQUU7UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLFFBQVE7UUFDWCxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDNUIsQ0FBQzs7NEdBbkRRLGVBQWU7Z0dBQWYsZUFBZSx1VEFSYjtRQUNQO1lBQ0ksT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztZQUM5QyxLQUFLLEVBQUUsSUFBSTtTQUNkO0tBQ0osMEJDYkwsMkNBQ0E7MkZEY2EsZUFBZTtrQkFaM0IsU0FBUzsrQkFDSSxZQUFZLGFBR1g7d0JBQ1A7NEJBQ0ksT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZ0JBQWdCLENBQUM7NEJBQzlDLEtBQUssRUFBRSxJQUFJO3lCQUNkO3FCQUNKOzBFQUtNLEVBQUU7c0JBRFIsV0FBVzt1QkFBQyxzQkFBc0I7Z0JBSzVCLEtBQUs7c0JBRlgsV0FBVzt1QkFBQyx5QkFBeUI7O3NCQUNyQyxLQUFLO2dCQUtDLFFBQVE7c0JBRmQsV0FBVzt1QkFBQyxnQkFBZ0I7O3NCQUM1QixLQUFLO2dCQUlDLFFBQVE7c0JBRGQsS0FBSztnQkFRQyxPQUFPO3NCQUZiLFlBQVk7dUJBQUMsT0FBTzs7c0JBQ3BCLFlBQVk7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RrLXRvZ2dsZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdG9nZ2xlLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gVG9nZ2xlQ29tcG9uZW50KSxcbiAgICAgICAgICAgIG11bHRpOiB0cnVlXG4gICAgICAgIH1cbiAgICBdXG59KVxuZXhwb3J0IGNsYXNzIFRvZ2dsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNkay1zd2l0Y2gtLW9uJylcbiAgICBwdWJsaWMgb246IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3Muc2RrLXN3aXRjaC0tc21hbGwnKVxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNtYWxsOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLmRpc2FibGVkJylcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaXNBY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgICBASG9zdExpc3RlbmVyKCdrZXl1cC5lbnRlcicpXG4gICAgcHVibGljIG9uY2xpY2soKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy53cml0ZVZhbHVlKCF0aGlzLm9uKTtcbiAgICAgICAgdGhpcy5vbkNoYW5nZSh0aGlzLm9uKTtcbiAgICAgICAgdGhpcy5pc0FjdGl2ZSA9IHRoaXMub247XG4gICAgICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gICAgfVxuXG4gICAgcHVibGljIHdyaXRlVmFsdWUodmFsdWUpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vbiA9IHZhbHVlO1xuICAgIH1cblxuICAgIHB1YmxpYyBvbkNoYW5nZSh2YWx1ZSk6IHZvaWQge1xuICAgIH1cblxuICAgIHB1YmxpYyBvblRvdWNoZWQoKTogdm9pZCB7XG4gICAgfVxuXG4gICAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICAgIH1cblxuICAgIHB1YmxpYyByZWdpc3Rlck9uVG91Y2hlZChmbik6IHZvaWQge1xuICAgICAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICAgIH1cblxuICAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vbiA9IHRoaXMuaXNBY3RpdmU7XG4gICAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwic2RrLXN3aXRjaF9fdGh1bWJcIj48L2Rpdj5cbiJdfQ==