@obliczeniowo/elementary
Version:
Library made in Angular version 20
139 lines (134 loc) • 15.6 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, Output, Input, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i2 from '@obliczeniowo/elementary/loading';
import { LoadingModule } from '@obliczeniowo/elementary/loading';
import * as i3 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
/**
* Css variables:
*
* --obl-switcher-width
* --obl-switcher-height
*
* --obl-switcher-border-color
* --obl-switcher-color
* --obl-switcher-spinner-color
* --obl-switcher-disabled
*/
class SwitcherComponent {
/** */
value = false;
/** */
on;
/** */
off;
/** */
onIcon;
/** */
offIcon;
/** */
disabled;
/** */
loading;
/** */
valueChanged = new EventEmitter();
toggle() {
if (this.disabled || this.loading) {
return;
}
this.value = !this.value;
this.onChange(this.value);
this.valueChanged.emit(this.value);
}
onChange = (value) => { };
onTouched = () => { };
writeValue(value) {
const { loading, on, off } = typeof value !== 'boolean' && value || {};
this.value = value?.value || value;
this.loading = loading || this.loading;
this.on = on || this.on;
this.off = off || this.off;
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
isString(type) {
return typeof type === 'string' ? type : false;
}
template(type) {
return type instanceof TemplateRef ? type : undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: SwitcherComponent, isStandalone: false, selector: "obl-switcher", inputs: { value: "value", on: "on", off: "off", onIcon: "onIcon", offIcon: "offIcon", disabled: "disabled", loading: "loading" }, outputs: { valueChanged: "valueChanged" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SwitcherComponent
},
], ngImport: i0, template: "<div\n class=\"frame\"\n [ngClass]=\"{\n disabled: disabled || loading,\n 'on-border': value && !disabled && !loading,\n 'off-border': !value && !disabled && !loading\n }\"\n (click)=\"toggle()\"\n>\n @if (value) {\n <div class=\"on-label fade\">\n {{ on }}\n </div>\n } @else {\n <div class=\"off-label fade\">\n {{ off }}\n </div>\n }\n <div class=\"dot\" [ngClass]=\"{ on: value, off: !value }\">\n <div>\n @if (loading) {\n <obl-spinner></obl-spinner>\n } @else {\n @if (value && onIcon) {\n <div class=\"fade\">\n @if (isString(onIcon)) {\n <obl-icon\n [name]=\"isString(onIcon) || ''\"\n >\n </obl-icon>\n } @else if (template(onIcon)) {\n <ng-container *ngTemplateOutlet=\"template(onIcon)!\"></ng-container>\n }\n </div>\n }\n \n @if (!value && offIcon) {\n <div class=\"fade\">\n @if (isString(offIcon)) {\n <obl-icon\n [name]=\"isString(offIcon) || ''\"\n >\n </obl-icon>\n } @else if (template(offIcon)) {\n <ng-container *ngTemplateOutlet=\"template(offIcon)!\"></ng-container>\n }\n </div>\n }\n }\n </div>\n </div>\n</div>\n", styles: [".frame{--obl-spinner-width: calc(var(--obl-switcher-height, 1.5rem) * .6);--obl-spinner-color: var(--obl-switcher-spinner-color, white);--obl-default-icon-color: var(--obl-switcher-icon-color, white);--obl-icon-width: calc(var(--obl-switcher-height, 1.5rem) * .5);width:var(--obl-switcher-width, 4rem);height:var(--obl-switcher-height, 1.5rem);color:var(--obl-switcher-color, #0ba6ff);border:1px solid var(--obl-switcher-border-color, #0ba6ff);border-radius:var(--obl-switcher-height, 1.5rem);position:relative;box-shadow:0 0 2px gray;cursor:pointer}.frame.disabled{border-color:var(--obl-switcher-disabled, gray);color:var(--obl-switcher-disabled, gray)}.dot{width:var(--obl-switcher-height, 1.5rem);height:var(--obl-switcher-height, 1.5rem);position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center}.dot>div{width:calc(var(--obl-switcher-height, 1.5rem) - 4px);height:calc(var(--obl-switcher-height, 1.5rem) - 4px);border-radius:var(--obl-switcher-height, 1.5rem);display:flex;justify-content:center;align-items:center;background-color:var(--obl-switcher-color, #0ba6ff);color:var(--obl-switcher-icon-color, white);font-size:calc(var(--obl-switcher-height, 1.5rem) * .6)}.frame.disabled .dot>div{background-color:var(--obl-switcher-disabled, gray)}.dot.on{right:0;left:unset;animation-name:right;animation-duration:.5s}.dot.on>div{animation-name:colors-on;animation-duration:.5s}.dot.off{animation-name:left;animation-duration:.5s}.dot.off>div{background-color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff));animation-name:colors-off;animation-duration:.5s}.on-label,.off-label{position:absolute;width:var(--obl-switcher-width, 4rem);height:var(--obl-switcher-height, 1.5rem);font-size:calc(var(--obl-switcher-height, 1.5rem) * .8);box-sizing:border-box;padding:0 calc(var(--obl-switcher-height, 1.5rem) * .5);display:flex;align-items:center;animation-name:fade-in;animation-duration:.5s}.off-label{justify-content:flex-end;color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff));animation-name:label-off;animation-duration:.5s}.on-label{animation-name:label-on;animation-duration:.5s}.disabled .off-label{color:var(--obl-switcher-disabled, gray)}.fade{animation-name:fade-in;animation-duration:.5s}.on-border{animation-name:border-on;animation-duration:.5s}.off-border{border-color:var(--obl-switcher-border-off-color, var(--obl-switcher-border-color, #0ba6ff));animation-name:border-off;animation-duration:.5s}@keyframes right{0%{left:0}to{left:calc(var(--obl-switcher-width, 4rem) - var(--obl-switcher-height, 1.5rem))}}@keyframes left{0%{left:calc(var(--obl-switcher-width, 4rem) - var(--obl-switcher-height, 1.5rem))}to{left:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes colors-on{0%{background-color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}to{background-color:var(--obl-switcher-color, #0ba6ff)}}@keyframes colors-off{0%{background-color:var(--obl-switcher-color, #0ba6ff)}to{background-color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}}@keyframes label-on{0%{color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}to{color:var(--obl-switcher-color, #0ba6ff)}}@keyframes label-off{0%{color:var(--obl-switcher-color, #0ba6ff)}to{color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}}@keyframes border-on{0%{border-color:var(--obl-switcher-border-off-color var(--obl-switcher-border-color, #0ba6ff))}to{border-color:var(--obl-switcher-border-color, #0ba6ff)}}@keyframes border-off{0%{border-color:var(--obl-switcher-border-color, #0ba6ff)}to{border-color:var(--obl-switcher-border-off-color, var(--obl-switcher-border-color, #0ba6ff))}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SpinnerComponent, selector: "obl-spinner" }, { kind: "component", type: i3.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SwitcherComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-switcher', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SwitcherComponent
},
], standalone: false, template: "<div\n class=\"frame\"\n [ngClass]=\"{\n disabled: disabled || loading,\n 'on-border': value && !disabled && !loading,\n 'off-border': !value && !disabled && !loading\n }\"\n (click)=\"toggle()\"\n>\n @if (value) {\n <div class=\"on-label fade\">\n {{ on }}\n </div>\n } @else {\n <div class=\"off-label fade\">\n {{ off }}\n </div>\n }\n <div class=\"dot\" [ngClass]=\"{ on: value, off: !value }\">\n <div>\n @if (loading) {\n <obl-spinner></obl-spinner>\n } @else {\n @if (value && onIcon) {\n <div class=\"fade\">\n @if (isString(onIcon)) {\n <obl-icon\n [name]=\"isString(onIcon) || ''\"\n >\n </obl-icon>\n } @else if (template(onIcon)) {\n <ng-container *ngTemplateOutlet=\"template(onIcon)!\"></ng-container>\n }\n </div>\n }\n \n @if (!value && offIcon) {\n <div class=\"fade\">\n @if (isString(offIcon)) {\n <obl-icon\n [name]=\"isString(offIcon) || ''\"\n >\n </obl-icon>\n } @else if (template(offIcon)) {\n <ng-container *ngTemplateOutlet=\"template(offIcon)!\"></ng-container>\n }\n </div>\n }\n }\n </div>\n </div>\n</div>\n", styles: [".frame{--obl-spinner-width: calc(var(--obl-switcher-height, 1.5rem) * .6);--obl-spinner-color: var(--obl-switcher-spinner-color, white);--obl-default-icon-color: var(--obl-switcher-icon-color, white);--obl-icon-width: calc(var(--obl-switcher-height, 1.5rem) * .5);width:var(--obl-switcher-width, 4rem);height:var(--obl-switcher-height, 1.5rem);color:var(--obl-switcher-color, #0ba6ff);border:1px solid var(--obl-switcher-border-color, #0ba6ff);border-radius:var(--obl-switcher-height, 1.5rem);position:relative;box-shadow:0 0 2px gray;cursor:pointer}.frame.disabled{border-color:var(--obl-switcher-disabled, gray);color:var(--obl-switcher-disabled, gray)}.dot{width:var(--obl-switcher-height, 1.5rem);height:var(--obl-switcher-height, 1.5rem);position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center}.dot>div{width:calc(var(--obl-switcher-height, 1.5rem) - 4px);height:calc(var(--obl-switcher-height, 1.5rem) - 4px);border-radius:var(--obl-switcher-height, 1.5rem);display:flex;justify-content:center;align-items:center;background-color:var(--obl-switcher-color, #0ba6ff);color:var(--obl-switcher-icon-color, white);font-size:calc(var(--obl-switcher-height, 1.5rem) * .6)}.frame.disabled .dot>div{background-color:var(--obl-switcher-disabled, gray)}.dot.on{right:0;left:unset;animation-name:right;animation-duration:.5s}.dot.on>div{animation-name:colors-on;animation-duration:.5s}.dot.off{animation-name:left;animation-duration:.5s}.dot.off>div{background-color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff));animation-name:colors-off;animation-duration:.5s}.on-label,.off-label{position:absolute;width:var(--obl-switcher-width, 4rem);height:var(--obl-switcher-height, 1.5rem);font-size:calc(var(--obl-switcher-height, 1.5rem) * .8);box-sizing:border-box;padding:0 calc(var(--obl-switcher-height, 1.5rem) * .5);display:flex;align-items:center;animation-name:fade-in;animation-duration:.5s}.off-label{justify-content:flex-end;color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff));animation-name:label-off;animation-duration:.5s}.on-label{animation-name:label-on;animation-duration:.5s}.disabled .off-label{color:var(--obl-switcher-disabled, gray)}.fade{animation-name:fade-in;animation-duration:.5s}.on-border{animation-name:border-on;animation-duration:.5s}.off-border{border-color:var(--obl-switcher-border-off-color, var(--obl-switcher-border-color, #0ba6ff));animation-name:border-off;animation-duration:.5s}@keyframes right{0%{left:0}to{left:calc(var(--obl-switcher-width, 4rem) - var(--obl-switcher-height, 1.5rem))}}@keyframes left{0%{left:calc(var(--obl-switcher-width, 4rem) - var(--obl-switcher-height, 1.5rem))}to{left:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes colors-on{0%{background-color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}to{background-color:var(--obl-switcher-color, #0ba6ff)}}@keyframes colors-off{0%{background-color:var(--obl-switcher-color, #0ba6ff)}to{background-color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}}@keyframes label-on{0%{color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}to{color:var(--obl-switcher-color, #0ba6ff)}}@keyframes label-off{0%{color:var(--obl-switcher-color, #0ba6ff)}to{color:var(--obl-switcher-off-color, var(--obl-switcher-color, #0ba6ff))}}@keyframes border-on{0%{border-color:var(--obl-switcher-border-off-color var(--obl-switcher-border-color, #0ba6ff))}to{border-color:var(--obl-switcher-border-color, #0ba6ff)}}@keyframes border-off{0%{border-color:var(--obl-switcher-border-color, #0ba6ff)}to{border-color:var(--obl-switcher-border-off-color, var(--obl-switcher-border-color, #0ba6ff))}}\n"] }]
}], propDecorators: { value: [{
type: Input
}], on: [{
type: Input
}], off: [{
type: Input
}], onIcon: [{
type: Input
}], offIcon: [{
type: Input
}], disabled: [{
type: Input
}], loading: [{
type: Input
}], valueChanged: [{
type: Output
}] } });
class SwitcherModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SwitcherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: SwitcherModule, declarations: [SwitcherComponent], imports: [CommonModule,
LoadingModule,
IconsModule], exports: [SwitcherComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SwitcherModule, imports: [CommonModule,
LoadingModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SwitcherModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SwitcherComponent
],
imports: [
CommonModule,
LoadingModule,
IconsModule
],
exports: [
SwitcherComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SwitcherComponent, SwitcherModule };
//# sourceMappingURL=obliczeniowo-elementary-switcher.mjs.map