tecnualng 21.1.5 → 21.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/tecnualng.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, ViewEncapsulation, Component,
|
|
2
|
+
import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, model, signal, computed, ElementRef, effect, HostListener, Directive, contentChild, forwardRef, viewChild, TemplateRef, contentChildren, Injectable, createComponent, Input, output, ContentChildren, ViewContainerRef, booleanAttribute } from '@angular/core';
|
|
3
3
|
import * as i1$2 from '@angular/forms';
|
|
4
|
-
import { FormsModule, NG_VALUE_ACCESSOR
|
|
4
|
+
import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
import * as i1$1 from '@angular/router';
|
|
@@ -33,7 +33,7 @@ class TngButton {
|
|
|
33
33
|
button.appendChild(circle);
|
|
34
34
|
}
|
|
35
35
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngButton, isStandalone: true, selector: "button[tngButton], a[tngButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "createRipple($event)" }, properties: { "class.tng-button--primary": "variant() === \"primary\"", "class.tng-button--secondary": "variant() === \"secondary\"", "class.tng-button--success": "variant() === \"success\"", "class.tng-button--warning": "variant() === \"warning\"", "class.tng-button--error": "variant() === \"error\"", "class.tng-button--basic": "variant() === \"basic\"", "class.tng-button--outlined": "variant() === \"outlined\"", "class.tng-button--rounded": "rounded()", "class.tng-button--soft": "soft()" }, classAttribute: "tng-button" }, exportAs: ["tngButton"], ngImport: i0, template: "<span class=\"tng-button__label\">\n @if (icon() && iconPosition() === 'left') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n }\n <ng-content></ng-content>\n @if (icon() && iconPosition() === 'right') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary-hover,
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngButton, isStandalone: true, selector: "button[tngButton], a[tngButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "createRipple($event)" }, properties: { "class.tng-button--primary": "variant() === \"primary\"", "class.tng-button--secondary": "variant() === \"secondary\"", "class.tng-button--success": "variant() === \"success\"", "class.tng-button--warning": "variant() === \"warning\"", "class.tng-button--error": "variant() === \"error\"", "class.tng-button--basic": "variant() === \"basic\"", "class.tng-button--outlined": "variant() === \"outlined\"", "class.tng-button--rounded": "rounded()", "class.tng-button--soft": "soft()" }, classAttribute: "tng-button" }, exportAs: ["tngButton"], ngImport: i0, template: "<span class=\"tng-button__label\">\n @if (icon() && iconPosition() === 'left') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n }\n <ng-content></ng-content>\n @if (icon() && iconPosition() === 'right') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary-hover, red),white 50%)}.tng-button--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-button--secondary:hover{background:color-mix(in srgb,var(--tng-secondary-hover, --tng-secondary),white 50%)}.tng-button--success{background:var(--tng-success);color:#fff}.tng-button--success:hover{background:color-mix(in srgb,var(--tng-success),white 50%)}.tng-button--warning{background:var(--tng-warning);color:#fff}.tng-button--warning:hover{background:color-mix(in srgb,var(--tng-warning),white 50%)}.tng-button--error{background:var(--tng-error);color:#fff}.tng-button--error:hover{background:color-mix(in srgb,var(--tng-error),white 10%)}.tng-button--basic{background:transparent;color:var(--tng-text);border:none}.tng-button--basic:hover{background:color-mix(in srgb,var(--tng-text),transparent 95%);border:1px solid var(--tng-secondary)}.tng-button--outlined{background:transparent;color:var(--tng-text);border:1px solid color-mix(in srgb,var(--tng-primary),transparent 55%)}.tng-button--outlined:hover{background:color-mix(in srgb,var(--tng-text),transparent 95%);border-color:color-mix(in srgb,var(--tng-secondary),transparent 15%)}span.tng-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#ffffff4d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngButton, decorators: [{
|
|
39
39
|
type: Component,
|
|
@@ -49,7 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
49
49
|
'[class.tng-button--rounded]': 'rounded()',
|
|
50
50
|
'[class.tng-button--soft]': 'soft()',
|
|
51
51
|
'(click)': 'createRipple($event)',
|
|
52
|
-
}, exportAs: 'tngButton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"tng-button__label\">\n @if (icon() && iconPosition() === 'left') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n }\n <ng-content></ng-content>\n @if (icon() && iconPosition() === 'right') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary-hover,
|
|
52
|
+
}, exportAs: 'tngButton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"tng-button__label\">\n @if (icon() && iconPosition() === 'left') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--left\"></i>\n }\n <ng-content></ng-content>\n @if (icon() && iconPosition() === 'right') {\n <i [class]=\"icon()\" class=\"tng-button__icon tng-button__icon--right\"></i>\n }\n</span>\n\n", styles: [".tng-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:32px;border:none;outline:none;line-height:inherit;appearance:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;background:transparent;color:var(--tng-text);padding:0 16px;font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02857em;border-radius:4px;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-radius .25s cubic-bezier(.4,0,.2,1),transform .1s ease-in-out}.tng-button::-moz-focus-inner{padding:0;border:0}.tng-button:active{outline:none;transform:scale(.98)}.tng-button:hover{cursor:pointer}.tng-button:disabled{cursor:default;pointer-events:none;opacity:.5}.tng-button[hidden]{display:none}.tng-button .mdc-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}.tng-button .tng-button__icon--left{margin-right:4px}.tng-button .tng-button__icon--right{margin-left:4px}.tng-button--rounded{border-radius:24px}.tng-button--soft{box-shadow:0 2px 4px -1px #0000001a,0 4px 5px #00000012,0 1px 10px #0000000f}.tng-button--soft:hover{box-shadow:0 5px 5px -3px #0000001a,0 8px 10px 1px #00000012,0 3px 14px 2px #0000000f;transform:translateY(-1px)}.tng-button--primary{background:var(--tng-primary);color:var(--tng-primary-contrast)}.tng-button--primary:hover{background:color-mix(in srgb,var(--tng-primary-hover, red),white 50%)}.tng-button--secondary{background:var(--tng-secondary);color:var(--tng-secondary-contrast)}.tng-button--secondary:hover{background:color-mix(in srgb,var(--tng-secondary-hover, --tng-secondary),white 50%)}.tng-button--success{background:var(--tng-success);color:#fff}.tng-button--success:hover{background:color-mix(in srgb,var(--tng-success),white 50%)}.tng-button--warning{background:var(--tng-warning);color:#fff}.tng-button--warning:hover{background:color-mix(in srgb,var(--tng-warning),white 50%)}.tng-button--error{background:var(--tng-error);color:#fff}.tng-button--error:hover{background:color-mix(in srgb,var(--tng-error),white 10%)}.tng-button--basic{background:transparent;color:var(--tng-text);border:none}.tng-button--basic:hover{background:color-mix(in srgb,var(--tng-text),transparent 95%);border:1px solid var(--tng-secondary)}.tng-button--outlined{background:transparent;color:var(--tng-text);border:1px solid color-mix(in srgb,var(--tng-primary),transparent 55%)}.tng-button--outlined:hover{background:color-mix(in srgb,var(--tng-text),transparent 95%);border-color:color-mix(in srgb,var(--tng-secondary),transparent 15%)}span.tng-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#ffffff4d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}\n"] }]
|
|
53
53
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], soft: [{ type: i0.Input, args: [{ isSignal: true, alias: "soft", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }] } });
|
|
54
54
|
|
|
55
55
|
class TngCardComponent {
|
|
@@ -78,33 +78,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
78
78
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }] } });
|
|
79
79
|
|
|
80
80
|
class TecnualInputComponent {
|
|
81
|
+
ngControl = inject(NgControl, { optional: true, self: true });
|
|
81
82
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
82
83
|
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
83
84
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
84
85
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
85
86
|
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
86
87
|
id = input(`tng-input-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
87
|
-
value = '';
|
|
88
|
-
isFocused = false;
|
|
88
|
+
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
89
|
+
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
90
|
+
hasValue = computed(() => {
|
|
91
|
+
const v = this.value();
|
|
92
|
+
return v !== null && v !== undefined && v !== '';
|
|
93
|
+
}, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
|
|
89
94
|
onChange = () => { };
|
|
90
95
|
onTouched = () => { };
|
|
91
|
-
|
|
92
|
-
|
|
96
|
+
constructor() {
|
|
97
|
+
if (this.ngControl) {
|
|
98
|
+
this.ngControl.valueAccessor = this;
|
|
99
|
+
}
|
|
93
100
|
}
|
|
94
101
|
onInput(event) {
|
|
95
102
|
const input = event.target;
|
|
96
|
-
this.value
|
|
97
|
-
this.onChange(
|
|
103
|
+
this.value.set(input.value);
|
|
104
|
+
this.onChange(input.value);
|
|
98
105
|
}
|
|
99
106
|
onFocus() {
|
|
100
|
-
this.isFocused
|
|
107
|
+
this.isFocused.set(true);
|
|
101
108
|
}
|
|
102
109
|
onBlur() {
|
|
103
|
-
this.isFocused
|
|
110
|
+
this.isFocused.set(false);
|
|
104
111
|
this.onTouched();
|
|
105
112
|
}
|
|
106
113
|
writeValue(value) {
|
|
107
|
-
this.value
|
|
114
|
+
this.value.set(value);
|
|
108
115
|
}
|
|
109
116
|
registerOnChange(fn) {
|
|
110
117
|
this.onChange = fn;
|
|
@@ -113,31 +120,18 @@ class TecnualInputComponent {
|
|
|
113
120
|
this.onTouched = fn;
|
|
114
121
|
}
|
|
115
122
|
setDisabledState(isDisabled) {
|
|
116
|
-
this.disabled.
|
|
123
|
+
this.disabled.set(isDisabled);
|
|
117
124
|
}
|
|
118
125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TecnualInputComponent, isStandalone: true, selector: "tng-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" },
|
|
120
|
-
{
|
|
121
|
-
provide: NG_VALUE_ACCESSOR,
|
|
122
|
-
useExisting: forwardRef(() => TecnualInputComponent),
|
|
123
|
-
multi: true
|
|
124
|
-
}
|
|
125
|
-
], ngImport: i0, template: "<div class=\"tng-input-container\" [class.focused]=\"isFocused\" [class.has-value]=\"hasValue\" [class.disabled]=\"disabled()\">\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n </fieldset>\n <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n <input\n [id]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"isFocused ? placeholder() : ''\"\n [value]=\"value\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n class=\"tng-input-field\"\n />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}.tng-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-checkbox:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-checkbox:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-checkbox:checked:before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:not(:checked):before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-checkbox:disabled:checked{background-color:var(--tng-text-secondary, #757575);border-color:var(--tng-text-secondary, #757575)}.tng-checkbox:active:not(:disabled){transform:scale(.95)}.tng-radio{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:50%;background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-radio:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-radio:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-radio:checked{border-color:var(--tng-primary, #00f2ff);border-width:2px}.tng-radio:checked:before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:not(:checked):before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-radio:disabled:checked:before{background-color:var(--tng-text-secondary, #757575)}.tng-radio:active:not(:disabled){transform:scale(.95)}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(2);opacity:0}}.tng-checkbox,.tng-radio{overflow:visible}.tng-checkbox:after,.tng-radio:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;background-color:var(--tng-primary, #00f2ff);opacity:0;pointer-events:none}.tng-checkbox:active:not(:disabled):after,.tng-radio:active:not(:disabled):after{animation:ripple .6s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TecnualInputComponent, isStandalone: true, selector: "tng-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, ngImport: i0, template: "<div\n class=\"tng-input-container\"\n [class.focused]=\"isFocused()\"\n [class.has-value]=\"hasValue()\"\n [class.disabled]=\"disabled()\"\n>\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\">\n <span>{{ label() }}</span>\n </legend>\n </fieldset>\n <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n <input\n [id]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"isFocused() ? placeholder() : ''\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n class=\"tng-input-field\"\n />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}.tng-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-checkbox:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-checkbox:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-checkbox:checked:before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:not(:checked):before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-checkbox:disabled:checked{background-color:var(--tng-text-secondary, #757575);border-color:var(--tng-text-secondary, #757575)}.tng-checkbox:active:not(:disabled){transform:scale(.95)}.tng-radio{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:50%;background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-radio:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-radio:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-radio:checked{border-color:var(--tng-primary, #00f2ff);border-width:2px}.tng-radio:checked:before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:not(:checked):before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-radio:disabled:checked:before{background-color:var(--tng-text-secondary, #757575)}.tng-radio:active:not(:disabled){transform:scale(.95)}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(2);opacity:0}}.tng-checkbox,.tng-radio{overflow:visible}.tng-checkbox:after,.tng-radio:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;background-color:var(--tng-primary, #00f2ff);opacity:0;pointer-events:none}.tng-checkbox:active:not(:disabled):after,.tng-radio:active:not(:disabled):after{animation:ripple .6s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
126
127
|
}
|
|
127
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualInputComponent, decorators: [{
|
|
128
129
|
type: Component,
|
|
129
|
-
args: [{ selector: 'tng-input',
|
|
130
|
-
|
|
131
|
-
provide: NG_VALUE_ACCESSOR,
|
|
132
|
-
useExisting: forwardRef(() => TecnualInputComponent),
|
|
133
|
-
multi: true
|
|
134
|
-
}
|
|
135
|
-
], template: "<div class=\"tng-input-container\" [class.focused]=\"isFocused\" [class.has-value]=\"hasValue\" [class.disabled]=\"disabled()\">\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n </fieldset>\n <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n <input\n [id]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"isFocused ? placeholder() : ''\"\n [value]=\"value\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n class=\"tng-input-field\"\n />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}.tng-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-checkbox:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-checkbox:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-checkbox:checked:before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:not(:checked):before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-checkbox:disabled:checked{background-color:var(--tng-text-secondary, #757575);border-color:var(--tng-text-secondary, #757575)}.tng-checkbox:active:not(:disabled){transform:scale(.95)}.tng-radio{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:50%;background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-radio:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-radio:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-radio:checked{border-color:var(--tng-primary, #00f2ff);border-width:2px}.tng-radio:checked:before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:not(:checked):before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-radio:disabled:checked:before{background-color:var(--tng-text-secondary, #757575)}.tng-radio:active:not(:disabled){transform:scale(.95)}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(2);opacity:0}}.tng-checkbox,.tng-radio{overflow:visible}.tng-checkbox:after,.tng-radio:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;background-color:var(--tng-primary, #00f2ff);opacity:0;pointer-events:none}.tng-checkbox:active:not(:disabled):after,.tng-radio:active:not(:disabled):after{animation:ripple .6s ease-out}\n"] }]
|
|
136
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
130
|
+
args: [{ selector: 'tng-input', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tng-input-container\"\n [class.focused]=\"isFocused()\"\n [class.has-value]=\"hasValue()\"\n [class.disabled]=\"disabled()\"\n>\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\">\n <span>{{ label() }}</span>\n </legend>\n </fieldset>\n <label [for]=\"id()\" class=\"tng-label\">{{ label() }}</label>\n <input\n [id]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"isFocused() ? placeholder() : ''\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n class=\"tng-input-field\"\n />\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-input-container{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:text;border:none}.tng-input-container:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-input-container.focused .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-input-container.focused .tng-label{color:var(--tng-primary, #6200ee);transform:translateY(-24px) scale(.75)}.tng-input-container.focused .tng-legend{max-width:100%}.tng-input-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-input-container.has-value .tng-legend{max-width:100%}.tng-input-container.disabled{opacity:.6;pointer-events:none}.tng-input-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;transition:max-width .1s cubic-bezier(.4,0,.2,1);white-space:nowrap;padding-inline:0px}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-field{display:block;width:100%;border:none;background:none;padding:0;margin:0;font-size:16px;color:var(--tng-text, #333);outline:none;height:100%;line-height:normal;z-index:1}.tng-input-field::placeholder{color:transparent;transition:color .2s ease}.tng-input-field:focus::placeholder{color:#aaa}.tng-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-checkbox:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-checkbox:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-checkbox:checked:before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:not(:checked):before{content:\"\";position:absolute;width:5px;height:10px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-checkbox:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-checkbox:disabled:checked{background-color:var(--tng-text-secondary, #757575);border-color:var(--tng-text-secondary, #757575)}.tng-checkbox:active:not(:disabled){transform:scale(.95)}.tng-radio{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid var(--tng-border, #999);border-radius:50%;background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tng-radio:hover:not(:disabled){border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff1a}.tng-radio:focus{border-color:var(--tng-primary, #00f2ff);box-shadow:0 0 0 4px #00f2ff33}.tng-radio:checked{border-color:var(--tng-primary, #00f2ff);border-width:2px}.tng-radio:checked:before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(1);opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:not(:checked):before{content:\"\";position:absolute;width:10px;height:10px;border-radius:50%;background-color:var(--tng-primary, #00f2ff);transform:scale(0);opacity:0;transition:all .2s cubic-bezier(.4,0,.2,1)}.tng-radio:disabled{opacity:.5;cursor:not-allowed;border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-radio:disabled:checked:before{background-color:var(--tng-text-secondary, #757575)}.tng-radio:active:not(:disabled){transform:scale(.95)}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(2);opacity:0}}.tng-checkbox,.tng-radio{overflow:visible}.tng-checkbox:after,.tng-radio:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;background-color:var(--tng-primary, #00f2ff);opacity:0;pointer-events:none}.tng-checkbox:active:not(:disabled):after,.tng-radio:active:not(:disabled):after{animation:ripple .6s ease-out}\n"] }]
|
|
131
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
137
132
|
|
|
138
133
|
class TngInputDirective {
|
|
139
134
|
el = inject((ElementRef));
|
|
140
|
-
renderer = inject(Renderer2);
|
|
141
135
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
142
136
|
// Inputs
|
|
143
137
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
@@ -162,11 +156,11 @@ class TngInputDirective {
|
|
|
162
156
|
// Initialize value on creation
|
|
163
157
|
effect(() => {
|
|
164
158
|
this.updateValue();
|
|
165
|
-
}
|
|
159
|
+
});
|
|
166
160
|
// Detect input type after view init
|
|
167
161
|
effect(() => {
|
|
168
162
|
this.detectInputType();
|
|
169
|
-
}
|
|
163
|
+
});
|
|
170
164
|
}
|
|
171
165
|
onFocus() {
|
|
172
166
|
this.focused.set(true);
|
|
@@ -254,7 +248,7 @@ class TngTextareaDirective {
|
|
|
254
248
|
constructor() {
|
|
255
249
|
effect(() => {
|
|
256
250
|
this.updateValue();
|
|
257
|
-
}
|
|
251
|
+
});
|
|
258
252
|
}
|
|
259
253
|
onFocus() {
|
|
260
254
|
this.focused.set(true);
|
|
@@ -2258,7 +2252,7 @@ class TngSliderComponent {
|
|
|
2258
2252
|
if (val !== clamped) {
|
|
2259
2253
|
this.value.set(clamped);
|
|
2260
2254
|
}
|
|
2261
|
-
}
|
|
2255
|
+
});
|
|
2262
2256
|
}
|
|
2263
2257
|
// CVA Implementation
|
|
2264
2258
|
writeValue(value) {
|