novo-elements
Version:
146 lines (141 loc) • 42.7 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, EventEmitter, Output, Input, HostBinding, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { BooleanInput } from 'novo-elements/utils';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'novo-elements/elements/icon';
import { NovoIconModule } from 'novo-elements/elements/icon';
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// Value accessor for the component (supports ngModel)
const SWITCH_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NovoSwitchElement),
multi: true,
};
class NovoSwitchElement {
get value() {
return this._value;
}
set value(value) {
this._value = value;
}
constructor(ref) {
this.ref = ref;
this.theme = 'ocean';
this.icons = ['x', 'check'];
this.disabled = false;
this.onChange = new EventEmitter();
this.onModelChange = () => { };
this.onModelTouched = () => { };
}
onKeydown(event) {
if (event.key === " " /* Key.Space */) {
event.preventDefault();
this.toggle(event);
}
}
toggle(event) {
if (event) {
event.stopPropagation();
event.preventDefault();
}
if (this.disabled) {
return;
}
this.value = !this.value;
this.onChange.next(this.value);
this.onModelChange(this.value);
this.ref.markForCheck();
}
writeValue(model) {
this.value = model;
this.ref.markForCheck();
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoSwitchElement, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoSwitchElement, isStandalone: false, selector: "novo-switch", inputs: { theme: "theme", icons: "icons", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { attributes: { "role": "checkbox" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-checked": "value", "attr.aria-disabled": "disabled", "class": "theme", "class.novo-switch-disabled": "this.disabled" }, classAttribute: "novo-switch" }, providers: [SWITCH_VALUE_ACCESSOR], ngImport: i0, template: `
<div (click)="toggle($event)">
<div class="novo-switch-container">
<div class="novo-switch-bar"></div>
<div class="novo-switch-thumb-container">
<div class="novo-switch-thumb">
<novo-icon *ngIf="!value" smaller>{{ icons[0] }}</novo-icon>
<novo-icon *ngIf="value" smaller>{{ icons[1] }}</novo-icon>
</div>
</div>
</div>
<div class="novo-switch-label"><ng-content></ng-content></div>
</div>
`, isInline: true, styles: [":host{display:flex;align-items:center;white-space:nowrap;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:all .5s cubic-bezier(.35,0,.25,1)}:host *{box-sizing:border-box}:host>div{display:flex;align-items:center}:host .novo-switch-container{cursor:grab;width:36px;height:24px;position:relative;-webkit-user-select:none;user-select:none;margin:0 8px}:host:not(.novo-switch-disabled).novo-switch-dragging .novo-switch-container,:host:not(.novo-switch-disabled) .novo-switch-dragging{cursor:grabbing}:host .novo-switch-label{border:0 transparent}:host .novo-switch-bar{left:1px;width:34px;top:5px;height:14px;border-radius:8px;position:absolute}:host .novo-switch-thumb-container{top:2px;left:0;width:16px;position:absolute;transform:translateZ(0);z-index:1}:host[aria-checked=true] .novo-switch-thumb-container{transform:translate3d(100%,0,0)}:host .novo-switch-thumb{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;left:0;top:0;outline:none;height:20px;width:20px;border-radius:50%;box-shadow:0 1px 2px #00000026;color:#3d464d}:host .novo-switch-thumb .novo-icon{color:inherit}:host:not(.novo-switch-dragging) .novo-switch-bar,:host:not(.novo-switch-dragging) .novo-switch-thumb,:host:not(.novo-switch-dragging) .novo-switch-thumb-container{transition:all .5s cubic-bezier(.35,0,.25,1);transition-property:transform,background-color,color}:host:not(.novo-switch-dragging) .novo-switch-bar,:host:not(.novo-switch-dragging) .novo-switch-thumb{transition-delay:.05s}:host.novo-switch-disabled{opacity:.4;cursor:not-allowed}:host.novo-switch-disabled .novo-switch-container{cursor:not-allowed;pointer-events:none}:host.black[aria-checked=true] .novo-switch-thumb{background-color:#000}:host.black[aria-checked=true] .novo-switch-bar{background-color:#2e2e2e}:host.black[aria-checked=true] .novo-switch-thumb{color:#fff}:host.white[aria-checked=true] .novo-switch-thumb{background-color:#fff}:host.white[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.white[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.gray[aria-checked=true] .novo-switch-thumb{background-color:#9e9e9e}:host.gray[aria-checked=true] .novo-switch-bar{background-color:#ccc}:host.gray[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.grey[aria-checked=true] .novo-switch-thumb{background-color:#9e9e9e}:host.grey[aria-checked=true] .novo-switch-bar{background-color:#ccc}:host.grey[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.offWhite[aria-checked=true] .novo-switch-thumb{background-color:#f7f7f7}:host.offWhite[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.offWhite[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.bright[aria-checked=true] .novo-switch-thumb{background-color:#f7f7f7}:host.bright[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.bright[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.light[aria-checked=true] .novo-switch-thumb{background-color:#dbdbdb}:host.light[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.light[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.neutral[aria-checked=true] .novo-switch-thumb{background-color:#4f5361}:host.neutral[aria-checked=true] .novo-switch-bar{background-color:#7a7f92}:host.neutral[aria-checked=true] .novo-switch-thumb{color:#fff}:host.dark[aria-checked=true] .novo-switch-bar{background-color:#667580}:host.dark[aria-checked=true] .novo-switch-thumb{color:#fff}:host.orange[aria-checked=true] .novo-switch-thumb{background-color:#ff6900}:host.orange[aria-checked=true] .novo-switch-bar{background-color:#ff9f5c}:host.orange[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.navigation[aria-checked=true] .novo-switch-thumb{background-color:#202945}:host.navigation[aria-checked=true] .novo-switch-bar{background-color:#3d4e84}:host.navigation[aria-checked=true] .novo-switch-thumb{color:#fff}:host.skyBlue[aria-checked=true] .novo-switch-thumb{background-color:#009bdf}:host.skyBlue[aria-checked=true] .novo-switch-bar{background-color:#3cc3ff}:host.skyBlue[aria-checked=true] .novo-switch-thumb{color:#fff}:host.steel[aria-checked=true] .novo-switch-thumb{background-color:#5b6770}:host.steel[aria-checked=true] .novo-switch-bar{background-color:#88959f}:host.steel[aria-checked=true] .novo-switch-thumb{color:#fff}:host.metal[aria-checked=true] .novo-switch-thumb{background-color:#637893}:host.metal[aria-checked=true] .novo-switch-bar{background-color:#98a7ba}:host.metal[aria-checked=true] .novo-switch-thumb{color:#fff}:host.sand[aria-checked=true] .novo-switch-thumb{background-color:#f4f4f4}:host.sand[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.sand[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.silver[aria-checked=true] .novo-switch-thumb{background-color:#e2e2e2}:host.silver[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.silver[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.stone[aria-checked=true] .novo-switch-thumb{background-color:#bebebe}:host.stone[aria-checked=true] .novo-switch-bar{background-color:#ececec}:host.stone[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.ash[aria-checked=true] .novo-switch-thumb{background-color:#a0a0a0}:host.ash[aria-checked=true] .novo-switch-bar{background-color:#cecece}:host.ash[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.slate[aria-checked=true] .novo-switch-thumb{background-color:#707070}:host.slate[aria-checked=true] .novo-switch-bar{background-color:#9e9e9e}:host.slate[aria-checked=true] .novo-switch-thumb{color:#fff}:host.onyx[aria-checked=true] .novo-switch-thumb{background-color:#526980}:host.onyx[aria-checked=true] .novo-switch-bar{background-color:#8097ae}:host.onyx[aria-checked=true] .novo-switch-thumb{color:#fff}:host.charcoal[aria-checked=true] .novo-switch-thumb{background-color:#282828}:host.charcoal[aria-checked=true] .novo-switch-bar{background-color:#565656}:host.charcoal[aria-checked=true] .novo-switch-thumb{color:#fff}:host.moonlight[aria-checked=true] .novo-switch-thumb{background-color:#1a242f}:host.moonlight[aria-checked=true] .novo-switch-bar{background-color:#3b516a}:host.moonlight[aria-checked=true] .novo-switch-thumb{color:#fff}:host.midnight[aria-checked=true] .novo-switch-thumb{background-color:#202945}:host.midnight[aria-checked=true] .novo-switch-bar{background-color:#3d4e84}:host.midnight[aria-checked=true] .novo-switch-thumb{color:#fff}:host.darkness[aria-checked=true] .novo-switch-thumb{background-color:#161f27}:host.darkness[aria-checked=true] .novo-switch-bar{background-color:#374e62}:host.darkness[aria-checked=true] .novo-switch-thumb{color:#fff}:host.navy[aria-checked=true] .novo-switch-thumb{background-color:#0d2d42}:host.navy[aria-checked=true] .novo-switch-bar{background-color:#1c618f}:host.navy[aria-checked=true] .novo-switch-thumb{color:#fff}:host.aqua[aria-checked=true] .novo-switch-thumb{background-color:#3bafda}:host.aqua[aria-checked=true] .novo-switch-bar{background-color:#88cfe9}:host.aqua[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.ocean[aria-checked=true] .novo-switch-thumb{background-color:#4a89dc}:host.ocean[aria-checked=true] .novo-switch-bar{background-color:#97bbeb}:host.ocean[aria-checked=true] .novo-switch-thumb{color:#fff}:host.mint[aria-checked=true] .novo-switch-thumb{background-color:#37bc9b}:host.mint[aria-checked=true] .novo-switch-bar{background-color:#77d7c0}:host.mint[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.grass[aria-checked=true] .novo-switch-thumb{background-color:#8cc152}:host.grass[aria-checked=true] .novo-switch-bar{background-color:#b9d996}:host.grass[aria-checked=true] .novo-switch-thumb{color:#fff}:host.sunflower[aria-checked=true] .novo-switch-thumb{background-color:#f6b042}:host.sunflower[aria-checked=true] .novo-switch-bar{background-color:#fad59a}:host.sunflower[aria-checked=true] .novo-switch-thumb{color:#fff}:host.bittersweet[aria-checked=true] .novo-switch-thumb{background-color:#eb6845}:host.bittersweet[aria-checked=true] .novo-switch-bar{background-color:#f4ab98}:host.bittersweet[aria-checked=true] .novo-switch-thumb{color:#fff}:host.grapefruit[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.grapefruit[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.grapefruit[aria-checked=true] .novo-switch-thumb{color:#fff}:host.carnation[aria-checked=true] .novo-switch-thumb{background-color:#d770ad}:host.carnation[aria-checked=true] .novo-switch-bar{background-color:#ebb8d6}:host.carnation[aria-checked=true] .novo-switch-thumb{color:#fff}:host.lavender[aria-checked=true] .novo-switch-thumb{background-color:#967adc}:host.lavender[aria-checked=true] .novo-switch-bar{background-color:#cfc3ef}:host.lavender[aria-checked=true] .novo-switch-thumb{color:#fff}:host.mountain[aria-checked=true] .novo-switch-thumb{background-color:#9678b6}:host.mountain[aria-checked=true] .novo-switch-bar{background-color:#c4b4d6}:host.mountain[aria-checked=true] .novo-switch-thumb{color:#fff}:host.info[aria-checked=true] .novo-switch-thumb{background-color:#4a89dc}:host.info[aria-checked=true] .novo-switch-bar{background-color:#97bbeb}:host.info[aria-checked=true] .novo-switch-thumb{color:#fff}:host.positive[aria-checked=true] .novo-switch-thumb{background-color:#4a89dc}:host.positive[aria-checked=true] .novo-switch-bar{background-color:#97bbeb}:host.positive[aria-checked=true] .novo-switch-thumb{color:#fff}:host.success[aria-checked=true] .novo-switch-thumb{background-color:#8cc152}:host.success[aria-checked=true] .novo-switch-bar{background-color:#b9d996}:host.success[aria-checked=true] .novo-switch-thumb{color:#fff}:host.negative[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.negative[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.negative[aria-checked=true] .novo-switch-thumb{color:#fff}:host.danger[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.danger[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.danger[aria-checked=true] .novo-switch-thumb{color:#fff}:host.error[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.error[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.error[aria-checked=true] .novo-switch-thumb{color:#fff}:host.warning[aria-checked=true] .novo-switch-thumb{background-color:#f6b042}:host.warning[aria-checked=true] .novo-switch-bar{background-color:#fad59a}:host.warning[aria-checked=true] .novo-switch-thumb{color:#fff}:host.empty[aria-checked=true] .novo-switch-thumb{background-color:#cccdcc}:host.empty[aria-checked=true] .novo-switch-bar{background-color:#fafafa}:host.empty[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.disabled[aria-checked=true] .novo-switch-thumb{background-color:#bebebe}:host.disabled[aria-checked=true] .novo-switch-bar{background-color:#ececec}:host.disabled[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.background[aria-checked=true] .novo-switch-thumb{background-color:#f7f7f7}:host.background[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.background[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.backgroundDark[aria-checked=true] .novo-switch-thumb{background-color:#e2e2e2}:host.backgroundDark[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.backgroundDark[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.presentation[aria-checked=true] .novo-switch-thumb{background-color:#5b6770}:host.presentation[aria-checked=true] .novo-switch-bar{background-color:#88959f}:host.presentation[aria-checked=true] .novo-switch-thumb{color:#fff}:host.bullhorn[aria-checked=true] .novo-switch-thumb{background-color:#ff6900}:host.bullhorn[aria-checked=true] .novo-switch-bar{background-color:#ff9f5c}:host.bullhorn[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.pulse[aria-checked=true] .novo-switch-thumb{background-color:#3bafda}:host.pulse[aria-checked=true] .novo-switch-bar{background-color:#88cfe9}:host.pulse[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.company[aria-checked=true] .novo-switch-thumb{background-color:#39d}:host.company[aria-checked=true] .novo-switch-bar{background-color:#82c0ea}:host.company[aria-checked=true] .novo-switch-thumb{color:#fff}:host.candidate[aria-checked=true] .novo-switch-thumb{background-color:#4b7}:host.candidate[aria-checked=true] .novo-switch-bar{background-color:#87d3a8}:host.candidate[aria-checked=true] .novo-switch-thumb{color:#fff}:host.lead[aria-checked=true] .novo-switch-thumb{background-color:#a69}:host.lead[aria-checked=true] .novo-switch-bar{background-color:#cba1c0}:host.lead[aria-checked=true] .novo-switch-thumb{color:#fff}:host.contact[aria-checked=true] .novo-switch-thumb{background-color:#fa4}:host.contact[aria-checked=true] .novo-switch-bar{background-color:#ffd4a0}:host.contact[aria-checked=true] .novo-switch-thumb{color:#fff}:host.clientcontact[aria-checked=true] .novo-switch-thumb{background-color:#fa4}:host.clientcontact[aria-checked=true] .novo-switch-bar{background-color:#ffd4a0}:host.clientcontact[aria-checked=true] .novo-switch-thumb{color:#fff}:host.opportunity[aria-checked=true] .novo-switch-thumb{background-color:#625}:host.opportunity[aria-checked=true] .novo-switch-bar{background-color:#ab398e}:host.opportunity[aria-checked=true] .novo-switch-thumb{color:#fff}:host.job[aria-checked=true] .novo-switch-thumb{background-color:#b56}:host.job[aria-checked=true] .novo-switch-bar{background-color:#d597a1}:host.job[aria-checked=true] .novo-switch-thumb{color:#fff}:host.joborder[aria-checked=true] .novo-switch-thumb{background-color:#b56}:host.joborder[aria-checked=true] .novo-switch-bar{background-color:#d597a1}:host.joborder[aria-checked=true] .novo-switch-thumb{color:#fff}:host.submission[aria-checked=true] .novo-switch-thumb{background-color:#a9adbb}:host.submission[aria-checked=true] .novo-switch-bar{background-color:#dcdee4}:host.submission[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.sendout[aria-checked=true] .novo-switch-thumb{background-color:#747884}:host.sendout[aria-checked=true] .novo-switch-bar{background-color:#a4a7af}:host.sendout[aria-checked=true] .novo-switch-thumb{color:#fff}:host.placement[aria-checked=true] .novo-switch-thumb{background-color:#0b344f}:host.placement[aria-checked=true] .novo-switch-bar{background-color:#1669a0}:host.placement[aria-checked=true] .novo-switch-thumb{color:#fff}:host.note[aria-checked=true] .novo-switch-thumb{background-color:#747884}:host.note[aria-checked=true] .novo-switch-bar{background-color:#a4a7af}:host.note[aria-checked=true] .novo-switch-thumb{color:#fff}:host.contract[aria-checked=true] .novo-switch-thumb{background-color:#454ea0}:host.contract[aria-checked=true] .novo-switch-bar{background-color:#7b82c6}:host.contract[aria-checked=true] .novo-switch-thumb{color:#fff}:host.task[aria-checked=true] .novo-switch-thumb{background-color:#4f5361}:host.task[aria-checked=true] .novo-switch-bar{background-color:#7a7f92}:host.task[aria-checked=true] .novo-switch-thumb{color:#fff}:host.jobCode[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.jobCode[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.jobCode[aria-checked=true] .novo-switch-thumb{color:#fff}:host.earnCode[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.earnCode[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.earnCode[aria-checked=true] .novo-switch-thumb{color:#fff}:host.invoiceStatement[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.invoiceStatement[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.invoiceStatement[aria-checked=true] .novo-switch-thumb{color:#fff}:host.billableCharge[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.billableCharge[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.billableCharge[aria-checked=true] .novo-switch-thumb{color:#fff}:host.payableCharge[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.payableCharge[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.payableCharge[aria-checked=true] .novo-switch-thumb{color:#fff}:host.user[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.user[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.user[aria-checked=true] .novo-switch-thumb{color:#fff}:host.corporateUser[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.corporateUser[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.corporateUser[aria-checked=true] .novo-switch-thumb{color:#fff}:host.distributionList[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.distributionList[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.distributionList[aria-checked=true] .novo-switch-thumb{color:#fff}:host.credential[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.credential[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.credential[aria-checked=true] .novo-switch-thumb{color:#fff}:host.person[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.person[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.person[aria-checked=true] .novo-switch-thumb{color:#fff}:host.dark[aria-checked=true] .novo-switch-thumb{background-color:#3d464d}:host.dark[aria-checked=true] .novo-switch-bar{background-color:#32393f}:host.light[aria-checked=true] .novo-switch-thumb{background-color:#d3d3d3}:host.light[aria-checked=true] .novo-switch-bar{background-color:#dbdbdb}:host .novo-switch-thumb{background-color:#dbdbdb}:host .novo-switch-bar{background-color:#f5f5f5}:host:focus .novo-switch-label:not(:empty){border:1px dotted #dbdbdb}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }] }); }
}
__decorate([
BooleanInput(),
__metadata("design:type", Boolean)
], NovoSwitchElement.prototype, "disabled", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoSwitchElement, decorators: [{
type: Component,
args: [{ selector: 'novo-switch', providers: [SWITCH_VALUE_ACCESSOR], template: `
<div (click)="toggle($event)">
<div class="novo-switch-container">
<div class="novo-switch-bar"></div>
<div class="novo-switch-thumb-container">
<div class="novo-switch-thumb">
<novo-icon *ngIf="!value" smaller>{{ icons[0] }}</novo-icon>
<novo-icon *ngIf="value" smaller>{{ icons[1] }}</novo-icon>
</div>
</div>
</div>
<div class="novo-switch-label"><ng-content></ng-content></div>
</div>
`, host: {
role: 'checkbox',
class: 'novo-switch',
'[attr.aria-checked]': 'value',
'[attr.aria-disabled]': 'disabled',
'(keydown)': 'onKeydown($event)',
'[class]': 'theme',
}, standalone: false, styles: [":host{display:flex;align-items:center;white-space:nowrap;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:all .5s cubic-bezier(.35,0,.25,1)}:host *{box-sizing:border-box}:host>div{display:flex;align-items:center}:host .novo-switch-container{cursor:grab;width:36px;height:24px;position:relative;-webkit-user-select:none;user-select:none;margin:0 8px}:host:not(.novo-switch-disabled).novo-switch-dragging .novo-switch-container,:host:not(.novo-switch-disabled) .novo-switch-dragging{cursor:grabbing}:host .novo-switch-label{border:0 transparent}:host .novo-switch-bar{left:1px;width:34px;top:5px;height:14px;border-radius:8px;position:absolute}:host .novo-switch-thumb-container{top:2px;left:0;width:16px;position:absolute;transform:translateZ(0);z-index:1}:host[aria-checked=true] .novo-switch-thumb-container{transform:translate3d(100%,0,0)}:host .novo-switch-thumb{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;left:0;top:0;outline:none;height:20px;width:20px;border-radius:50%;box-shadow:0 1px 2px #00000026;color:#3d464d}:host .novo-switch-thumb .novo-icon{color:inherit}:host:not(.novo-switch-dragging) .novo-switch-bar,:host:not(.novo-switch-dragging) .novo-switch-thumb,:host:not(.novo-switch-dragging) .novo-switch-thumb-container{transition:all .5s cubic-bezier(.35,0,.25,1);transition-property:transform,background-color,color}:host:not(.novo-switch-dragging) .novo-switch-bar,:host:not(.novo-switch-dragging) .novo-switch-thumb{transition-delay:.05s}:host.novo-switch-disabled{opacity:.4;cursor:not-allowed}:host.novo-switch-disabled .novo-switch-container{cursor:not-allowed;pointer-events:none}:host.black[aria-checked=true] .novo-switch-thumb{background-color:#000}:host.black[aria-checked=true] .novo-switch-bar{background-color:#2e2e2e}:host.black[aria-checked=true] .novo-switch-thumb{color:#fff}:host.white[aria-checked=true] .novo-switch-thumb{background-color:#fff}:host.white[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.white[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.gray[aria-checked=true] .novo-switch-thumb{background-color:#9e9e9e}:host.gray[aria-checked=true] .novo-switch-bar{background-color:#ccc}:host.gray[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.grey[aria-checked=true] .novo-switch-thumb{background-color:#9e9e9e}:host.grey[aria-checked=true] .novo-switch-bar{background-color:#ccc}:host.grey[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.offWhite[aria-checked=true] .novo-switch-thumb{background-color:#f7f7f7}:host.offWhite[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.offWhite[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.bright[aria-checked=true] .novo-switch-thumb{background-color:#f7f7f7}:host.bright[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.bright[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.light[aria-checked=true] .novo-switch-thumb{background-color:#dbdbdb}:host.light[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.light[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.neutral[aria-checked=true] .novo-switch-thumb{background-color:#4f5361}:host.neutral[aria-checked=true] .novo-switch-bar{background-color:#7a7f92}:host.neutral[aria-checked=true] .novo-switch-thumb{color:#fff}:host.dark[aria-checked=true] .novo-switch-bar{background-color:#667580}:host.dark[aria-checked=true] .novo-switch-thumb{color:#fff}:host.orange[aria-checked=true] .novo-switch-thumb{background-color:#ff6900}:host.orange[aria-checked=true] .novo-switch-bar{background-color:#ff9f5c}:host.orange[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.navigation[aria-checked=true] .novo-switch-thumb{background-color:#202945}:host.navigation[aria-checked=true] .novo-switch-bar{background-color:#3d4e84}:host.navigation[aria-checked=true] .novo-switch-thumb{color:#fff}:host.skyBlue[aria-checked=true] .novo-switch-thumb{background-color:#009bdf}:host.skyBlue[aria-checked=true] .novo-switch-bar{background-color:#3cc3ff}:host.skyBlue[aria-checked=true] .novo-switch-thumb{color:#fff}:host.steel[aria-checked=true] .novo-switch-thumb{background-color:#5b6770}:host.steel[aria-checked=true] .novo-switch-bar{background-color:#88959f}:host.steel[aria-checked=true] .novo-switch-thumb{color:#fff}:host.metal[aria-checked=true] .novo-switch-thumb{background-color:#637893}:host.metal[aria-checked=true] .novo-switch-bar{background-color:#98a7ba}:host.metal[aria-checked=true] .novo-switch-thumb{color:#fff}:host.sand[aria-checked=true] .novo-switch-thumb{background-color:#f4f4f4}:host.sand[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.sand[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.silver[aria-checked=true] .novo-switch-thumb{background-color:#e2e2e2}:host.silver[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.silver[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.stone[aria-checked=true] .novo-switch-thumb{background-color:#bebebe}:host.stone[aria-checked=true] .novo-switch-bar{background-color:#ececec}:host.stone[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.ash[aria-checked=true] .novo-switch-thumb{background-color:#a0a0a0}:host.ash[aria-checked=true] .novo-switch-bar{background-color:#cecece}:host.ash[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.slate[aria-checked=true] .novo-switch-thumb{background-color:#707070}:host.slate[aria-checked=true] .novo-switch-bar{background-color:#9e9e9e}:host.slate[aria-checked=true] .novo-switch-thumb{color:#fff}:host.onyx[aria-checked=true] .novo-switch-thumb{background-color:#526980}:host.onyx[aria-checked=true] .novo-switch-bar{background-color:#8097ae}:host.onyx[aria-checked=true] .novo-switch-thumb{color:#fff}:host.charcoal[aria-checked=true] .novo-switch-thumb{background-color:#282828}:host.charcoal[aria-checked=true] .novo-switch-bar{background-color:#565656}:host.charcoal[aria-checked=true] .novo-switch-thumb{color:#fff}:host.moonlight[aria-checked=true] .novo-switch-thumb{background-color:#1a242f}:host.moonlight[aria-checked=true] .novo-switch-bar{background-color:#3b516a}:host.moonlight[aria-checked=true] .novo-switch-thumb{color:#fff}:host.midnight[aria-checked=true] .novo-switch-thumb{background-color:#202945}:host.midnight[aria-checked=true] .novo-switch-bar{background-color:#3d4e84}:host.midnight[aria-checked=true] .novo-switch-thumb{color:#fff}:host.darkness[aria-checked=true] .novo-switch-thumb{background-color:#161f27}:host.darkness[aria-checked=true] .novo-switch-bar{background-color:#374e62}:host.darkness[aria-checked=true] .novo-switch-thumb{color:#fff}:host.navy[aria-checked=true] .novo-switch-thumb{background-color:#0d2d42}:host.navy[aria-checked=true] .novo-switch-bar{background-color:#1c618f}:host.navy[aria-checked=true] .novo-switch-thumb{color:#fff}:host.aqua[aria-checked=true] .novo-switch-thumb{background-color:#3bafda}:host.aqua[aria-checked=true] .novo-switch-bar{background-color:#88cfe9}:host.aqua[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.ocean[aria-checked=true] .novo-switch-thumb{background-color:#4a89dc}:host.ocean[aria-checked=true] .novo-switch-bar{background-color:#97bbeb}:host.ocean[aria-checked=true] .novo-switch-thumb{color:#fff}:host.mint[aria-checked=true] .novo-switch-thumb{background-color:#37bc9b}:host.mint[aria-checked=true] .novo-switch-bar{background-color:#77d7c0}:host.mint[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.grass[aria-checked=true] .novo-switch-thumb{background-color:#8cc152}:host.grass[aria-checked=true] .novo-switch-bar{background-color:#b9d996}:host.grass[aria-checked=true] .novo-switch-thumb{color:#fff}:host.sunflower[aria-checked=true] .novo-switch-thumb{background-color:#f6b042}:host.sunflower[aria-checked=true] .novo-switch-bar{background-color:#fad59a}:host.sunflower[aria-checked=true] .novo-switch-thumb{color:#fff}:host.bittersweet[aria-checked=true] .novo-switch-thumb{background-color:#eb6845}:host.bittersweet[aria-checked=true] .novo-switch-bar{background-color:#f4ab98}:host.bittersweet[aria-checked=true] .novo-switch-thumb{color:#fff}:host.grapefruit[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.grapefruit[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.grapefruit[aria-checked=true] .novo-switch-thumb{color:#fff}:host.carnation[aria-checked=true] .novo-switch-thumb{background-color:#d770ad}:host.carnation[aria-checked=true] .novo-switch-bar{background-color:#ebb8d6}:host.carnation[aria-checked=true] .novo-switch-thumb{color:#fff}:host.lavender[aria-checked=true] .novo-switch-thumb{background-color:#967adc}:host.lavender[aria-checked=true] .novo-switch-bar{background-color:#cfc3ef}:host.lavender[aria-checked=true] .novo-switch-thumb{color:#fff}:host.mountain[aria-checked=true] .novo-switch-thumb{background-color:#9678b6}:host.mountain[aria-checked=true] .novo-switch-bar{background-color:#c4b4d6}:host.mountain[aria-checked=true] .novo-switch-thumb{color:#fff}:host.info[aria-checked=true] .novo-switch-thumb{background-color:#4a89dc}:host.info[aria-checked=true] .novo-switch-bar{background-color:#97bbeb}:host.info[aria-checked=true] .novo-switch-thumb{color:#fff}:host.positive[aria-checked=true] .novo-switch-thumb{background-color:#4a89dc}:host.positive[aria-checked=true] .novo-switch-bar{background-color:#97bbeb}:host.positive[aria-checked=true] .novo-switch-thumb{color:#fff}:host.success[aria-checked=true] .novo-switch-thumb{background-color:#8cc152}:host.success[aria-checked=true] .novo-switch-bar{background-color:#b9d996}:host.success[aria-checked=true] .novo-switch-thumb{color:#fff}:host.negative[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.negative[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.negative[aria-checked=true] .novo-switch-thumb{color:#fff}:host.danger[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.danger[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.danger[aria-checked=true] .novo-switch-thumb{color:#fff}:host.error[aria-checked=true] .novo-switch-thumb{background-color:#da4453}:host.error[aria-checked=true] .novo-switch-bar{background-color:#e99199}:host.error[aria-checked=true] .novo-switch-thumb{color:#fff}:host.warning[aria-checked=true] .novo-switch-thumb{background-color:#f6b042}:host.warning[aria-checked=true] .novo-switch-bar{background-color:#fad59a}:host.warning[aria-checked=true] .novo-switch-thumb{color:#fff}:host.empty[aria-checked=true] .novo-switch-thumb{background-color:#cccdcc}:host.empty[aria-checked=true] .novo-switch-bar{background-color:#fafafa}:host.empty[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.disabled[aria-checked=true] .novo-switch-thumb{background-color:#bebebe}:host.disabled[aria-checked=true] .novo-switch-bar{background-color:#ececec}:host.disabled[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.background[aria-checked=true] .novo-switch-thumb{background-color:#f7f7f7}:host.background[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.background[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.backgroundDark[aria-checked=true] .novo-switch-thumb{background-color:#e2e2e2}:host.backgroundDark[aria-checked=true] .novo-switch-bar{background-color:#fff}:host.backgroundDark[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.presentation[aria-checked=true] .novo-switch-thumb{background-color:#5b6770}:host.presentation[aria-checked=true] .novo-switch-bar{background-color:#88959f}:host.presentation[aria-checked=true] .novo-switch-thumb{color:#fff}:host.bullhorn[aria-checked=true] .novo-switch-thumb{background-color:#ff6900}:host.bullhorn[aria-checked=true] .novo-switch-bar{background-color:#ff9f5c}:host.bullhorn[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.pulse[aria-checked=true] .novo-switch-thumb{background-color:#3bafda}:host.pulse[aria-checked=true] .novo-switch-bar{background-color:#88cfe9}:host.pulse[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.company[aria-checked=true] .novo-switch-thumb{background-color:#39d}:host.company[aria-checked=true] .novo-switch-bar{background-color:#82c0ea}:host.company[aria-checked=true] .novo-switch-thumb{color:#fff}:host.candidate[aria-checked=true] .novo-switch-thumb{background-color:#4b7}:host.candidate[aria-checked=true] .novo-switch-bar{background-color:#87d3a8}:host.candidate[aria-checked=true] .novo-switch-thumb{color:#fff}:host.lead[aria-checked=true] .novo-switch-thumb{background-color:#a69}:host.lead[aria-checked=true] .novo-switch-bar{background-color:#cba1c0}:host.lead[aria-checked=true] .novo-switch-thumb{color:#fff}:host.contact[aria-checked=true] .novo-switch-thumb{background-color:#fa4}:host.contact[aria-checked=true] .novo-switch-bar{background-color:#ffd4a0}:host.contact[aria-checked=true] .novo-switch-thumb{color:#fff}:host.clientcontact[aria-checked=true] .novo-switch-thumb{background-color:#fa4}:host.clientcontact[aria-checked=true] .novo-switch-bar{background-color:#ffd4a0}:host.clientcontact[aria-checked=true] .novo-switch-thumb{color:#fff}:host.opportunity[aria-checked=true] .novo-switch-thumb{background-color:#625}:host.opportunity[aria-checked=true] .novo-switch-bar{background-color:#ab398e}:host.opportunity[aria-checked=true] .novo-switch-thumb{color:#fff}:host.job[aria-checked=true] .novo-switch-thumb{background-color:#b56}:host.job[aria-checked=true] .novo-switch-bar{background-color:#d597a1}:host.job[aria-checked=true] .novo-switch-thumb{color:#fff}:host.joborder[aria-checked=true] .novo-switch-thumb{background-color:#b56}:host.joborder[aria-checked=true] .novo-switch-bar{background-color:#d597a1}:host.joborder[aria-checked=true] .novo-switch-thumb{color:#fff}:host.submission[aria-checked=true] .novo-switch-thumb{background-color:#a9adbb}:host.submission[aria-checked=true] .novo-switch-bar{background-color:#dcdee4}:host.submission[aria-checked=true] .novo-switch-thumb{color:#3d464d}:host.sendout[aria-checked=true] .novo-switch-thumb{background-color:#747884}:host.sendout[aria-checked=true] .novo-switch-bar{background-color:#a4a7af}:host.sendout[aria-checked=true] .novo-switch-thumb{color:#fff}:host.placement[aria-checked=true] .novo-switch-thumb{background-color:#0b344f}:host.placement[aria-checked=true] .novo-switch-bar{background-color:#1669a0}:host.placement[aria-checked=true] .novo-switch-thumb{color:#fff}:host.note[aria-checked=true] .novo-switch-thumb{background-color:#747884}:host.note[aria-checked=true] .novo-switch-bar{background-color:#a4a7af}:host.note[aria-checked=true] .novo-switch-thumb{color:#fff}:host.contract[aria-checked=true] .novo-switch-thumb{background-color:#454ea0}:host.contract[aria-checked=true] .novo-switch-bar{background-color:#7b82c6}:host.contract[aria-checked=true] .novo-switch-thumb{color:#fff}:host.task[aria-checked=true] .novo-switch-thumb{background-color:#4f5361}:host.task[aria-checked=true] .novo-switch-bar{background-color:#7a7f92}:host.task[aria-checked=true] .novo-switch-thumb{color:#fff}:host.jobCode[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.jobCode[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.jobCode[aria-checked=true] .novo-switch-thumb{color:#fff}:host.earnCode[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.earnCode[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.earnCode[aria-checked=true] .novo-switch-thumb{color:#fff}:host.invoiceStatement[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.invoiceStatement[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.invoiceStatement[aria-checked=true] .novo-switch-thumb{color:#fff}:host.billableCharge[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.billableCharge[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.billableCharge[aria-checked=true] .novo-switch-thumb{color:#fff}:host.payableCharge[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.payableCharge[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.payableCharge[aria-checked=true] .novo-switch-thumb{color:#fff}:host.user[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.user[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.user[aria-checked=true] .novo-switch-thumb{color:#fff}:host.corporateUser[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.corporateUser[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.corporateUser[aria-checked=true] .novo-switch-thumb{color:#fff}:host.distributionList[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.distributionList[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.distributionList[aria-checked=true] .novo-switch-thumb{color:#fff}:host.credential[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.credential[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.credential[aria-checked=true] .novo-switch-thumb{color:#fff}:host.person[aria-checked=true] .novo-switch-thumb{background-color:#696d79}:host.person[aria-checked=true] .novo-switch-bar{background-color:#989ba6}:host.person[aria-checked=true] .novo-switch-thumb{color:#fff}:host.dark[aria-checked=true] .novo-switch-thumb{background-color:#3d464d}:host.dark[aria-checked=true] .novo-switch-bar{background-color:#32393f}:host.light[aria-checked=true] .novo-switch-thumb{background-color:#d3d3d3}:host.light[aria-checked=true] .novo-switch-bar{background-color:#dbdbdb}:host .novo-switch-thumb{background-color:#dbdbdb}:host .novo-switch-bar{background-color:#f5f5f5}:host:focus .novo-switch-label:not(:empty){border:1px dotted #dbdbdb}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { theme: [{
type: Input
}], icons: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.novo-switch-disabled']
}], onChange: [{
type: Output
}] } });
class NovoSwitchModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: NovoSwitchModule, declarations: [NovoSwitchElement], imports: [CommonModule, FormsModule, NovoIconModule], exports: [NovoSwitchElement] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoSwitchModule, imports: [CommonModule, FormsModule, NovoIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoSwitchModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, NovoIconModule],
declarations: [NovoSwitchElement],
exports: [NovoSwitchElement],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NovoSwitchElement, NovoSwitchModule };
//# sourceMappingURL=novo-elements-elements-switch.mjs.map