@enotgr/vitron-ui
Version:
Vitron UI — modern glassy Angular 20 component library
239 lines (227 loc) • 31.1 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, Component, input, viewChild, output, forwardRef, signal } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class VuiGlassFilter {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiGlassFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: VuiGlassFilter, isStandalone: true, selector: "vui-glass-filter", ngImport: i0, template: "<svg style=\"display: none\">\n <filter id=\"glass-distortion\">\n <feTurbulence type=\"turbulence\" baseFrequency=\"0.008\" numOctaves=\"2\" result=\"noise\" />\n <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"77\" />\n </filter>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiGlassFilter, decorators: [{
type: Component,
args: [{ selector: 'vui-glass-filter', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg style=\"display: none\">\n <filter id=\"glass-distortion\">\n <feTurbulence type=\"turbulence\" baseFrequency=\"0.008\" numOctaves=\"2\" result=\"noise\" />\n <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"77\" />\n </filter>\n</svg>\n" }]
}] });
class VuiGlassContentWrapper {
liquid = input(true);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiGlassContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: VuiGlassContentWrapper, isStandalone: true, selector: "vui-glass-content-wrapper", inputs: { liquid: { classPropertyName: "liquid", publicName: "liquid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"vitron-glass-filter\" [class.liquid]=\"liquid()\"></div>\n<div class=\"vitron-glass-overlay\"></div>\n<div class=\"vitron-glass-specular\"></div>\n<div class=\"vitron-glass-content\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;border-radius:inherit}.vitron-glass-filter,.vitron-glass-overlay,.vitron-glass-specular{position:absolute;inset:0;border-radius:inherit}.vitron-glass-filter{z-index:1;-webkit-backdrop-filter:blur(var(--vitron-blur));backdrop-filter:blur(var(--vitron-blur));filter:url(#glass-distortion) saturate(120%) brightness(1.03)}.vitron-glass-filter.non-liquid{filter:blur(var(--vitron-blur));background-color:var(--vitron-non-glass-bg)}.vitron-glass-overlay{z-index:2;background:var(--vitron-overlay-color)}.vitron-glass-specular{z-index:3;box-shadow:inset 1px 1px 1px var(--vitron-highlight)}.vitron-glass-content{position:relative;z-index:4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiGlassContentWrapper, decorators: [{
type: Component,
args: [{ selector: 'vui-glass-content-wrapper', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vitron-glass-filter\" [class.liquid]=\"liquid()\"></div>\n<div class=\"vitron-glass-overlay\"></div>\n<div class=\"vitron-glass-specular\"></div>\n<div class=\"vitron-glass-content\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;border-radius:inherit}.vitron-glass-filter,.vitron-glass-overlay,.vitron-glass-specular{position:absolute;inset:0;border-radius:inherit}.vitron-glass-filter{z-index:1;-webkit-backdrop-filter:blur(var(--vitron-blur));backdrop-filter:blur(var(--vitron-blur));filter:url(#glass-distortion) saturate(120%) brightness(1.03)}.vitron-glass-filter.non-liquid{filter:blur(var(--vitron-blur));background-color:var(--vitron-non-glass-bg)}.vitron-glass-overlay{z-index:2;background:var(--vitron-overlay-color)}.vitron-glass-specular{z-index:3;box-shadow:inset 1px 1px 1px var(--vitron-highlight)}.vitron-glass-content{position:relative;z-index:4}\n"] }]
}] });
class VuiButton {
size = input('md');
textColor = input('primary');
type = input('button');
disabled = input(false);
wide = input(false);
liquid = input(true);
get textColorClass() {
return this.textColor() ? `vui-button-color--${this.textColor()}` : '';
}
get sizeClass() {
return this.size() ? `vui-button-size--${this.size()}` : '';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: VuiButton, isStandalone: true, selector: "vui-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wide: { classPropertyName: "wide", publicName: "wide", isSignal: true, isRequired: false, transformFunction: null }, liquid: { classPropertyName: "liquid", publicName: "liquid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n class=\"vitron-glass vitron-button\"\n [class]=\"[textColorClass, sizeClass]\"\n [class.vitron-full-w]=\"wide()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n>\n <!-- TODO: -->\n <!-- @if (liquid()) {\n <vui-glass-content-wrapper>\n <ng-content></ng-content>\n </vui-glass-content-wrapper>\n } @else {\n <ng-content></ng-content>\n } -->\n <vui-glass-content-wrapper>\n <ng-content></ng-content>\n </vui-glass-content-wrapper>\n</button>\n", styles: [".vitron-button{padding:var(--vitron-offset-xs-s);border-radius:var(--vitron-border-radius);transition:transform .2s ease;cursor:pointer}.vitron-button.vui-button-size--xs{padding:var(--vitron-offset-xs-s) var(--vitron-offset-xs);font-size:10px}.vitron-button.vui-button-size--sm{padding:var(--vitron-offset-xs) var(--vitron-offset-xs-l);font-size:12px}.vitron-button.vui-button-size--md{padding:var(--vitron-offset-xs-l) var(--vitron-offset-sm-l);font-size:14px}.vitron-button.vui-button-size--lg{padding:var(--vitron-offset-sm-s) var(--vitron-offset-md-s);font-size:16px}.vitron-button.vui-button-size--xl{padding:var(--vitron-offset-sm) var(--vitron-offset-md-l);font-size:18px}.vitron-button.vui-button-size--2xl{padding:var(--vitron-offset-sm-l) var(--vitron-offset-lg);font-size:20px}.vitron-button.vui-button-color--primary{color:var(--vitron-text-primary)}.vitron-button.vui-button-color--secondary{color:var(--vitron-text-secondary)}.vitron-button:not(:disabled):hover{transform:scale(1.03)}.vitron-button:not(:disabled):active{transform:scale(.97)}.vitron-button:disabled{cursor:not-allowed;color:var(--vitron-text-secondary)}\n"], dependencies: [{ kind: "component", type: VuiGlassContentWrapper, selector: "vui-glass-content-wrapper", inputs: ["liquid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiButton, decorators: [{
type: Component,
args: [{ selector: 'vui-button', standalone: true, imports: [VuiGlassContentWrapper], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"vitron-glass vitron-button\"\n [class]=\"[textColorClass, sizeClass]\"\n [class.vitron-full-w]=\"wide()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n>\n <!-- TODO: -->\n <!-- @if (liquid()) {\n <vui-glass-content-wrapper>\n <ng-content></ng-content>\n </vui-glass-content-wrapper>\n } @else {\n <ng-content></ng-content>\n } -->\n <vui-glass-content-wrapper>\n <ng-content></ng-content>\n </vui-glass-content-wrapper>\n</button>\n", styles: [".vitron-button{padding:var(--vitron-offset-xs-s);border-radius:var(--vitron-border-radius);transition:transform .2s ease;cursor:pointer}.vitron-button.vui-button-size--xs{padding:var(--vitron-offset-xs-s) var(--vitron-offset-xs);font-size:10px}.vitron-button.vui-button-size--sm{padding:var(--vitron-offset-xs) var(--vitron-offset-xs-l);font-size:12px}.vitron-button.vui-button-size--md{padding:var(--vitron-offset-xs-l) var(--vitron-offset-sm-l);font-size:14px}.vitron-button.vui-button-size--lg{padding:var(--vitron-offset-sm-s) var(--vitron-offset-md-s);font-size:16px}.vitron-button.vui-button-size--xl{padding:var(--vitron-offset-sm) var(--vitron-offset-md-l);font-size:18px}.vitron-button.vui-button-size--2xl{padding:var(--vitron-offset-sm-l) var(--vitron-offset-lg);font-size:20px}.vitron-button.vui-button-color--primary{color:var(--vitron-text-primary)}.vitron-button.vui-button-color--secondary{color:var(--vitron-text-secondary)}.vitron-button:not(:disabled):hover{transform:scale(1.03)}.vitron-button:not(:disabled):active{transform:scale(.97)}.vitron-button:disabled{cursor:not-allowed;color:var(--vitron-text-secondary)}\n"] }]
}] });
class VuiCard {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: VuiCard, isStandalone: true, selector: "vui-card", ngImport: i0, template: "<div class=\"vitron-glass vitron-card\">\n <vui-glass-content-wrapper>\n <ng-content></ng-content>\n </vui-glass-content-wrapper>\n</div>\n", styles: [":host{display:block}.vitron-card{min-width:64px;border-radius:var(--vitron-border-radius)}\n"], dependencies: [{ kind: "component", type: VuiGlassContentWrapper, selector: "vui-glass-content-wrapper", inputs: ["liquid"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiCard, decorators: [{
type: Component,
args: [{ selector: 'vui-card', standalone: true, imports: [VuiGlassContentWrapper], template: "<div class=\"vitron-glass vitron-card\">\n <vui-glass-content-wrapper>\n <ng-content></ng-content>\n </vui-glass-content-wrapper>\n</div>\n", styles: [":host{display:block}.vitron-card{min-width:64px;border-radius:var(--vitron-border-radius)}\n"] }]
}] });
function generateElementId(prefix = 'vui') {
return `${prefix}-${Math.random().toString(36).substring(2, 10)}`;
}
class VuiInput {
inputRef = viewChild('input');
// readonly value = input<string>('');
// TODO: Move id generation to utils
id = input(generateElementId('vui-input'));
name = input('');
label = input('');
placeholder = input('');
// TODO: check all types and create InputType type
type = input('text');
disabled = input(false);
readonly = input(false);
size = input('20');
maxlength = input('');
required = input(false);
autofocus = input(false);
autocomplete = input('off');
// TODO: mask
// readonly mask = input<MaskOptions>(false);
input = output();
change = output();
focus = output();
blur = output();
click = output();
keydown = output();
keyup = output();
keypress = output();
paste = output();
cut = output();
value = '';
focused = false;
onChange = (_) => { };
onTouched = () => { };
writeValue(val) {
this.value = val;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
handleInput(event) {
const target = event.target;
this.value = target.value;
this.onChange(this.value);
this.input.emit(event);
}
handleFocus() {
this.focused = true;
this.focus.emit();
}
handleBlur() {
this.focused = false;
this.onTouched();
this.blur.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: VuiInput, isStandalone: true, selector: "vui-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur", click: "click", keydown: "keydown", keyup: "keyup", keypress: "keypress", paste: "paste", cut: "cut" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => VuiInput),
multi: true
}
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vui-input-wrapper\">\n <vui-glass-content-wrapper>\n @if (label()) {\n <label [for]=\"id()\">{{ label() }}</label>\n }\n <input\n #input\n [id]=\"id()\"\n [name]=\"name()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [size]=\"size()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength() ? maxlength() : null\"\n [attr.autofocus]=\"autofocus() ? autofocus() : null\"\n [attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n (click)=\"click.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (keypress)=\"keypress.emit($event)\"\n (paste)=\"paste.emit($event)\"\n (cut)=\"cut.emit($event)\"\n />\n </vui-glass-content-wrapper>\n</div>\n", styles: [":host{display:inline-block;box-sizing:border-box;max-width:var(--vitron-full-w);border-radius:var(--vitron-border-radius)}.vui-input-wrapper{display:block;width:auto;max-width:var(--vitron-full-w);box-sizing:border-box;position:relative;font-family:inherit;border-radius:var(--vitron-border-radius)}.vui-input-wrapper label{position:absolute;left:var(--vitron-offset-sm-s);top:50%;transform:translateY(-50%);transition:.2s ease all;color:var(--vitron-text-secondary);font-size:var(--vitron-font-size-md);pointer-events:none}.vui-input-wrapper input{display:inline-block;width:var(--vitron-full-w);box-sizing:border-box;padding:var(--vitron-offset-sm-s);border:none;font-size:var(--vitron-font-size-md);outline:none;background-color:#fff0;color:var(--vitron-text-primary)}.vui-input-wrapper.focused label,.vui-input-wrapper:has(input:not(:placeholder-shown)) label{top:0;font-size:var(--vitron-font-size-sm)}\n"], dependencies: [{ kind: "component", type: VuiGlassContentWrapper, selector: "vui-glass-content-wrapper", inputs: ["liquid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiInput, decorators: [{
type: Component,
args: [{ selector: 'vui-input', standalone: true, imports: [VuiGlassContentWrapper], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => VuiInput),
multi: true
}
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vui-input-wrapper\">\n <vui-glass-content-wrapper>\n @if (label()) {\n <label [for]=\"id()\">{{ label() }}</label>\n }\n <input\n #input\n [id]=\"id()\"\n [name]=\"name()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [size]=\"size()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxlength() ? maxlength() : null\"\n [attr.autofocus]=\"autofocus() ? autofocus() : null\"\n [attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n (click)=\"click.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (keypress)=\"keypress.emit($event)\"\n (paste)=\"paste.emit($event)\"\n (cut)=\"cut.emit($event)\"\n />\n </vui-glass-content-wrapper>\n</div>\n", styles: [":host{display:inline-block;box-sizing:border-box;max-width:var(--vitron-full-w);border-radius:var(--vitron-border-radius)}.vui-input-wrapper{display:block;width:auto;max-width:var(--vitron-full-w);box-sizing:border-box;position:relative;font-family:inherit;border-radius:var(--vitron-border-radius)}.vui-input-wrapper label{position:absolute;left:var(--vitron-offset-sm-s);top:50%;transform:translateY(-50%);transition:.2s ease all;color:var(--vitron-text-secondary);font-size:var(--vitron-font-size-md);pointer-events:none}.vui-input-wrapper input{display:inline-block;width:var(--vitron-full-w);box-sizing:border-box;padding:var(--vitron-offset-sm-s);border:none;font-size:var(--vitron-font-size-md);outline:none;background-color:#fff0;color:var(--vitron-text-primary)}.vui-input-wrapper.focused label,.vui-input-wrapper:has(input:not(:placeholder-shown)) label{top:0;font-size:var(--vitron-font-size-sm)}\n"] }]
}] });
class VuiCheckbox {
id = input(generateElementId('vui-input'));
label = input('');
disabled = input(false);
checkedChange = output();
checked = signal(false);
onChange = (_) => { };
onTouched = () => { };
writeValue(value) {
this.checked.set(!!value);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
toggle() {
if (this.disabled())
return;
const newValue = !this.checked();
this.checked.set(newValue);
this.onChange(newValue);
this.checkedChange.emit(newValue);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: VuiCheckbox, isStandalone: true, selector: "vui-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => VuiCheckbox),
multi: true
}
], ngImport: i0, template: "<div class=\"vui-checkbox\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"toggle()\"\n />\n <label [for]=\"id()\">\n <svg viewBox=\"0,0,50,50\">\n <path d=\"M5 30 L 20 45 L 45 5\"></path>\n </svg>\n </label>\n @if (label()) {\n <span class=\"label\">{{ label() }}</span>\n }\n</div>\n", styles: [".vui-checkbox{display:inline-flex;align-items:center}.vui-checkbox .label{margin-left:var(--vitron-offset-xs)}.vui-checkbox *,.vui-checkbox *:after,.vui-checkbox *:before{box-sizing:border-box}.vui-checkbox input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0}.vui-checkbox input:checked+label svg path{stroke-dashoffset:0}.vui-checkbox input:focus+label{transform:scale(1.03)}.vui-checkbox input+label{display:block;border:var(--vitron-border-width) solid var(--vitron-text-primary);height:var(--vitron-height-sm);width:var(--vitron-width-sm);border-radius:6px;cursor:pointer;transition:all .2s ease}.vui-checkbox input+label:active{transform:scale(1.05);border-radius:var(--vitron-border-radius)}.vui-checkbox input+label svg{pointer-events:none;padding:5%}.vui-checkbox input+label svg path{fill:none;stroke:var(--vitron-text-primary);stroke-width:8px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:101;transition:all .25s cubic-bezier(1,0,.37,.91)}.vui-checkbox input:disabled+label,.vui-checkbox input:disabled~.label{color:var(--vitron-text-secondary);border-color:var(--vitron-text-secondary);cursor:default;transition:none;transform:none}.vui-checkbox input:disabled+label:active,.vui-checkbox input:disabled~.label:active{transform:none;border-radius:6px}.vui-checkbox input:disabled+label svg path,.vui-checkbox input:disabled~.label svg path{stroke:var(--vitron-text-secondary);transition:none;stroke-dashoffset:101}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiCheckbox, decorators: [{
type: Component,
args: [{ selector: 'vui-checkbox', standalone: true, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => VuiCheckbox),
multi: true
}
], template: "<div class=\"vui-checkbox\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"toggle()\"\n />\n <label [for]=\"id()\">\n <svg viewBox=\"0,0,50,50\">\n <path d=\"M5 30 L 20 45 L 45 5\"></path>\n </svg>\n </label>\n @if (label()) {\n <span class=\"label\">{{ label() }}</span>\n }\n</div>\n", styles: [".vui-checkbox{display:inline-flex;align-items:center}.vui-checkbox .label{margin-left:var(--vitron-offset-xs)}.vui-checkbox *,.vui-checkbox *:after,.vui-checkbox *:before{box-sizing:border-box}.vui-checkbox input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0}.vui-checkbox input:checked+label svg path{stroke-dashoffset:0}.vui-checkbox input:focus+label{transform:scale(1.03)}.vui-checkbox input+label{display:block;border:var(--vitron-border-width) solid var(--vitron-text-primary);height:var(--vitron-height-sm);width:var(--vitron-width-sm);border-radius:6px;cursor:pointer;transition:all .2s ease}.vui-checkbox input+label:active{transform:scale(1.05);border-radius:var(--vitron-border-radius)}.vui-checkbox input+label svg{pointer-events:none;padding:5%}.vui-checkbox input+label svg path{fill:none;stroke:var(--vitron-text-primary);stroke-width:8px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:101;transition:all .25s cubic-bezier(1,0,.37,.91)}.vui-checkbox input:disabled+label,.vui-checkbox input:disabled~.label{color:var(--vitron-text-secondary);border-color:var(--vitron-text-secondary);cursor:default;transition:none;transform:none}.vui-checkbox input:disabled+label:active,.vui-checkbox input:disabled~.label:active{transform:none;border-radius:6px}.vui-checkbox input:disabled+label svg path,.vui-checkbox input:disabled~.label svg path{stroke:var(--vitron-text-secondary);transition:none;stroke-dashoffset:101}\n"] }]
}] });
class VuiRadio {
// TODO: Move id generation to utils
id = input(generateElementId('vui-input'));
label = input('');
name = input('');
value = input('');
model = input();
disabled = input(false);
change = output();
selected = false;
onChange = (_) => { };
onTouched = () => { };
writeValue(val) {
this.selected = val === this.value();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
select() {
if (this.disabled() || this.selected)
return;
this.selected = true;
this.onChange(this.value());
this.change.emit(this.value());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: VuiRadio, isStandalone: true, selector: "vui-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => VuiRadio),
multi: true
}
], ngImport: i0, template: "<div class=\"vui-radio\">\n <input\n [id]=\"id()\"\n class=\"native-radio\"\n type=\"radio\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"selected\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n >\n @if (label()) {\n <label [for]=\"id()\">{{ label() }}</label>\n }\n</div>\n", styles: [".vui-radio{display:flex;align-items:center}.vui-radio input[type=radio]{appearance:none;background-origin:border-box;border:var(--vitron-border-width) solid var(--vitron-white);display:inline-block;flex-shrink:0;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;border-radius:var(--vitron-border-full-radius);-webkit-user-select:none;user-select:none;vertical-align:middle;height:var(--vitron-height-sm);width:var(--vitron-width-sm);background-color:var(--vitron-non-glass-bg);color:var(--vitron-accent);margin:0;cursor:pointer}.vui-radio input[type=radio]:focus{outline:var(--vitron-border-width) solid transparent;outline-offset:2px}.vui-radio input[type=radio]:checked{background-color:currentcolor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E\");background-position:50% center;background-repeat:no-repeat;background-size:initial;border-color:transparent}.vui-radio input[type=radio]:disabled{border-color:var(--vitron-text-secondary);cursor:default}.vui-radio input[type=radio]:disabled~label{color:var(--vitron-text-secondary)}.vui-radio label{padding-inline-start:var(--vitron-offset-xs)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VuiRadio, decorators: [{
type: Component,
args: [{ selector: 'vui-radio', standalone: true, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => VuiRadio),
multi: true
}
], template: "<div class=\"vui-radio\">\n <input\n [id]=\"id()\"\n class=\"native-radio\"\n type=\"radio\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"selected\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n >\n @if (label()) {\n <label [for]=\"id()\">{{ label() }}</label>\n }\n</div>\n", styles: [".vui-radio{display:flex;align-items:center}.vui-radio input[type=radio]{appearance:none;background-origin:border-box;border:var(--vitron-border-width) solid var(--vitron-white);display:inline-block;flex-shrink:0;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;border-radius:var(--vitron-border-full-radius);-webkit-user-select:none;user-select:none;vertical-align:middle;height:var(--vitron-height-sm);width:var(--vitron-width-sm);background-color:var(--vitron-non-glass-bg);color:var(--vitron-accent);margin:0;cursor:pointer}.vui-radio input[type=radio]:focus{outline:var(--vitron-border-width) solid transparent;outline-offset:2px}.vui-radio input[type=radio]:checked{background-color:currentcolor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E\");background-position:50% center;background-repeat:no-repeat;background-size:initial;border-color:transparent}.vui-radio input[type=radio]:disabled{border-color:var(--vitron-text-secondary);cursor:default}.vui-radio input[type=radio]:disabled~label{color:var(--vitron-text-secondary)}.vui-radio label{padding-inline-start:var(--vitron-offset-xs)}\n"] }]
}] });
/*
* Public API Surface of vitron-ui
*/
// components
/**
* Generated bundle index. Do not edit.
*/
export { VuiButton, VuiCard, VuiCheckbox, VuiGlassFilter, VuiInput, VuiRadio };
//# sourceMappingURL=enotgr-vitron-ui.mjs.map