ng-devui
Version:
DevUI components based on Angular
153 lines (148 loc) • 16.9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, forwardRef, Component, Input, Output, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i2 from 'ng-devui/utils';
import { AnimationNumberDuration, SafePipeModule } from 'ng-devui/utils';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class ToggleComponent {
constructor() {
this.content = '';
this.size = '';
this.change = new EventEmitter();
this.onTouchedCallback = () => { };
this.onChangeCallback = (v) => { };
this.isMousedown = false;
}
get customTemplate() {
const result = this.checked ? this.checkedContent : this.uncheckedContent;
if (result instanceof TemplateRef) {
this.content = '';
return result;
}
else {
this.content = result || '';
return null;
}
}
set checked(v) {
this._checked = v === true;
}
get checked() {
return this._checked;
}
set disabled(v) {
this._disabled = v === true;
}
get disabled() {
return this._disabled;
}
onToggle() {
if (this.disabled) {
return;
}
this.canChange().then((change) => {
if (!change) {
return;
}
this.checked = !this.checked;
this.change.emit(this.checked);
this.onChangeCallback(this.checked);
this.onTouchedCallback();
});
}
onMousedown() {
this.isMousedown = true;
}
onMouseup() {
setTimeout(() => {
this.isMousedown = false;
}, AnimationNumberDuration.SLOW / 2);
}
canChange() {
let changeResult = Promise.resolve(true);
if (this.beforeChange) {
const result = this.beforeChange(this.checked);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = result.toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
writeValue(obj) {
if (obj !== this.checked) {
this.checked = !!obj;
}
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleComponent, selector: "d-toggle", inputs: { size: "size", color: "color", beforeChange: "beforeChange", checkedContent: "checkedContent", uncheckedContent: "uncheckedContent", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, host: { listeners: { "click": "onToggle()", "mousedown": "onMousedown()", "mouseup": "onMouseup()" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToggleComponent),
multi: true
}], exportAs: ["toggle"], ngImport: i0, template: "<span\n class=\"devui-toggle {{ size ? 'devui-toggle-' + size : '' }}\"\n [ngClass]=\"{ 'devui-checked': checked, 'devui-disabled': disabled }\"\n [style.background]=\"checked && !disabled ? color : ''\"\n [style.border-color]=\"checked && !disabled ? color : ''\"\n>\n <span class=\"devui-toggle-inner-wrapper\">\n <ng-template [ngTemplateOutlet]=\"customTemplate || defaultTemplate\"></ng-template>\n </span>\n <small [class.mouseDown]=\"isMousedown && !disabled\"></small>\n</span>\n\n<ng-template #defaultTemplate>\n <div class=\"devui-toggle-inner\" [innerHTML]=\"content | safe: 'html'\"></div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:inline-block;width:fit-content;font-size:0;line-height:1;vertical-align:middle}.devui-toggle{width:36px;height:18px;border-radius:var(--devui-border-radius-full, 100px);background:var(--devui-line, #dbdbdb);border:1px solid var(--devui-line, #dbdbdb);position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0;cursor:pointer;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle:not(.devui-checked):hover{background-color:#939393;border-color:#939393}.devui-toggle .devui-toggle-inner-wrapper{display:inline-block;width:100%;height:100%;font-size:var(--devui-font-size-sm, 12px);line-height:18px;padding-left:14px}.devui-toggle .devui-toggle-inner-wrapper .devui-toggle-inner{width:100%;height:100%;text-align:center;color:var(--devui-light-text, #ffffff)}.devui-toggle.devui-checked .devui-toggle-inner-wrapper{padding-left:unset;padding-right:14px}.devui-toggle small{width:12px;height:12px;background:var(--devui-light-text, #ffffff);border-radius:var(--devui-border-radius-full, 100px);position:absolute;top:3px;left:3px;transition:var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle small.mouseDown{width:15px}.devui-toggle.devui-checked small{left:21px}.devui-toggle.devui-checked small.mouseDown{left:18px}.devui-toggle.devui-toggle-lg{width:58px;height:30px}.devui-toggle.devui-toggle-lg .devui-toggle-inner-wrapper{font-size:var(--devui-font-size-modal-title, 18px);line-height:30px;padding-left:24px}.devui-toggle.devui-toggle-lg.devui-checked .devui-toggle-inner-wrapper{padding-left:unset;padding-right:24px}.devui-toggle.devui-toggle-lg small{width:22px;height:22px;top:4px;left:4px}.devui-toggle.devui-toggle-lg small.mouseDown{width:26px}.devui-toggle.devui-toggle-lg.devui-checked small{background:var(--devui-light-text, #ffffff);left:32px}.devui-toggle.devui-toggle-lg.devui-checked small.mouseDown{left:28px}.devui-toggle.devui-toggle-sm{width:30px;height:14px}.devui-toggle.devui-toggle-sm .devui-toggle-inner-wrapper{font-size:var(--devui-font-size-sm, 12px);line-height:14px;padding-left:12px}.devui-toggle.devui-toggle-sm.devui-checked .devui-toggle-inner-wrapper{padding-left:unset;padding-right:12px}.devui-toggle.devui-toggle-sm small{width:10px;height:10px;position:absolute;top:2px;left:3px}.devui-toggle.devui-toggle-sm small.mouseDown{width:12px}.devui-toggle.devui-toggle-sm.devui-checked small{left:17px}.devui-toggle.devui-toggle-sm.devui-checked small.mouseDown{left:15px}.devui-toggle.devui-checked{background:var(--devui-brand, #0a59f7);border-color:var(--devui-brand, #0a59f7)}.devui-toggle.devui-checked:hover,.devui-toggle.devui-checked:active{background:var(--devui-primary-hover, #3979f9);border-color:var(--devui-primary-hover, #3979f9)}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active,.devui-toggle.devui-disabled.devui-checked{cursor:not-allowed}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active{background-color:var(--devui-disabled-line, #e6e6e6);border-color:var(--devui-disabled-line, #e6e6e6)}.devui-toggle.devui-disabled small,.devui-toggle.devui-disabled:hover small,.devui-toggle.devui-disabled:active small{background-color:var(--devui-unavailable, #f3f3f3)}.devui-toggle.devui-disabled.devui-checked{background-color:var(--devui-icon-fill-active-disabled, #9dbdfc);border-color:var(--devui-icon-fill-active-disabled, #9dbdfc)}.devui-toggle.devui-disabled.devui-checked small{background-color:var(--devui-light-text, #ffffff)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SafePipe, name: "safe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'd-toggle', exportAs: 'toggle', providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToggleComponent),
multi: true
}], preserveWhitespaces: false, template: "<span\n class=\"devui-toggle {{ size ? 'devui-toggle-' + size : '' }}\"\n [ngClass]=\"{ 'devui-checked': checked, 'devui-disabled': disabled }\"\n [style.background]=\"checked && !disabled ? color : ''\"\n [style.border-color]=\"checked && !disabled ? color : ''\"\n>\n <span class=\"devui-toggle-inner-wrapper\">\n <ng-template [ngTemplateOutlet]=\"customTemplate || defaultTemplate\"></ng-template>\n </span>\n <small [class.mouseDown]=\"isMousedown && !disabled\"></small>\n</span>\n\n<ng-template #defaultTemplate>\n <div class=\"devui-toggle-inner\" [innerHTML]=\"content | safe: 'html'\"></div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:inline-block;width:fit-content;font-size:0;line-height:1;vertical-align:middle}.devui-toggle{width:36px;height:18px;border-radius:var(--devui-border-radius-full, 100px);background:var(--devui-line, #dbdbdb);border:1px solid var(--devui-line, #dbdbdb);position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0;cursor:pointer;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle:not(.devui-checked):hover{background-color:#939393;border-color:#939393}.devui-toggle .devui-toggle-inner-wrapper{display:inline-block;width:100%;height:100%;font-size:var(--devui-font-size-sm, 12px);line-height:18px;padding-left:14px}.devui-toggle .devui-toggle-inner-wrapper .devui-toggle-inner{width:100%;height:100%;text-align:center;color:var(--devui-light-text, #ffffff)}.devui-toggle.devui-checked .devui-toggle-inner-wrapper{padding-left:unset;padding-right:14px}.devui-toggle small{width:12px;height:12px;background:var(--devui-light-text, #ffffff);border-radius:var(--devui-border-radius-full, 100px);position:absolute;top:3px;left:3px;transition:var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle small.mouseDown{width:15px}.devui-toggle.devui-checked small{left:21px}.devui-toggle.devui-checked small.mouseDown{left:18px}.devui-toggle.devui-toggle-lg{width:58px;height:30px}.devui-toggle.devui-toggle-lg .devui-toggle-inner-wrapper{font-size:var(--devui-font-size-modal-title, 18px);line-height:30px;padding-left:24px}.devui-toggle.devui-toggle-lg.devui-checked .devui-toggle-inner-wrapper{padding-left:unset;padding-right:24px}.devui-toggle.devui-toggle-lg small{width:22px;height:22px;top:4px;left:4px}.devui-toggle.devui-toggle-lg small.mouseDown{width:26px}.devui-toggle.devui-toggle-lg.devui-checked small{background:var(--devui-light-text, #ffffff);left:32px}.devui-toggle.devui-toggle-lg.devui-checked small.mouseDown{left:28px}.devui-toggle.devui-toggle-sm{width:30px;height:14px}.devui-toggle.devui-toggle-sm .devui-toggle-inner-wrapper{font-size:var(--devui-font-size-sm, 12px);line-height:14px;padding-left:12px}.devui-toggle.devui-toggle-sm.devui-checked .devui-toggle-inner-wrapper{padding-left:unset;padding-right:12px}.devui-toggle.devui-toggle-sm small{width:10px;height:10px;position:absolute;top:2px;left:3px}.devui-toggle.devui-toggle-sm small.mouseDown{width:12px}.devui-toggle.devui-toggle-sm.devui-checked small{left:17px}.devui-toggle.devui-toggle-sm.devui-checked small.mouseDown{left:15px}.devui-toggle.devui-checked{background:var(--devui-brand, #0a59f7);border-color:var(--devui-brand, #0a59f7)}.devui-toggle.devui-checked:hover,.devui-toggle.devui-checked:active{background:var(--devui-primary-hover, #3979f9);border-color:var(--devui-primary-hover, #3979f9)}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active,.devui-toggle.devui-disabled.devui-checked{cursor:not-allowed}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active{background-color:var(--devui-disabled-line, #e6e6e6);border-color:var(--devui-disabled-line, #e6e6e6)}.devui-toggle.devui-disabled small,.devui-toggle.devui-disabled:hover small,.devui-toggle.devui-disabled:active small{background-color:var(--devui-unavailable, #f3f3f3)}.devui-toggle.devui-disabled.devui-checked{background-color:var(--devui-icon-fill-active-disabled, #9dbdfc);border-color:var(--devui-icon-fill-active-disabled, #9dbdfc)}.devui-toggle.devui-disabled.devui-checked small{background-color:var(--devui-light-text, #ffffff)}\n"] }]
}], propDecorators: { size: [{
type: Input
}], color: [{
type: Input
}], beforeChange: [{
type: Input
}], checkedContent: [{
type: Input
}], uncheckedContent: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], change: [{
type: Output
}], onToggle: [{
type: HostListener,
args: ['click']
}], onMousedown: [{
type: HostListener,
args: ['mousedown']
}], onMouseup: [{
type: HostListener,
args: ['mouseup']
}] } });
class ToggleModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ToggleModule, declarations: [ToggleComponent], imports: [CommonModule, FormsModule, SafePipeModule], exports: [ToggleComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleModule, imports: [CommonModule, FormsModule, SafePipeModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, SafePipeModule],
exports: [ToggleComponent],
declarations: [ToggleComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ToggleComponent, ToggleModule };
//# sourceMappingURL=ng-devui-toggle.mjs.map