tecnualng 21.1.4 → 21.1.6
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 +85 -18
- package/fesm2022/tecnualng.mjs.map +1 -1
- package/package.json +1 -1
- package/types/tecnualng.d.ts +4 -3
package/fesm2022/tecnualng.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, model, forwardRef, inject, ElementRef,
|
|
2
|
+
import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, model, forwardRef, inject, ElementRef, signal, computed, effect, HostListener, Directive, contentChild, viewChild, TemplateRef, contentChildren, Injectable, createComponent, Input, output, ContentChildren, ViewContainerRef, booleanAttribute } from '@angular/core';
|
|
3
3
|
import * as i1$2 from '@angular/forms';
|
|
4
4
|
import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
@@ -122,22 +122,21 @@ class TecnualInputComponent {
|
|
|
122
122
|
useExisting: forwardRef(() => TecnualInputComponent),
|
|
123
123
|
multi: true
|
|
124
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 }] });
|
|
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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
126
126
|
}
|
|
127
127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualInputComponent, decorators: [{
|
|
128
128
|
type: Component,
|
|
129
|
-
args: [{ selector: 'tng-input',
|
|
129
|
+
args: [{ selector: 'tng-input', imports: [CommonModule, FormsModule], providers: [
|
|
130
130
|
{
|
|
131
131
|
provide: NG_VALUE_ACCESSOR,
|
|
132
132
|
useExisting: forwardRef(() => TecnualInputComponent),
|
|
133
133
|
multi: true
|
|
134
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"] }]
|
|
135
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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
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 }] }] } });
|
|
137
137
|
|
|
138
138
|
class TngInputDirective {
|
|
139
139
|
el = inject((ElementRef));
|
|
140
|
-
renderer = inject(Renderer2);
|
|
141
140
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
142
141
|
// Inputs
|
|
143
142
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
@@ -162,11 +161,11 @@ class TngInputDirective {
|
|
|
162
161
|
// Initialize value on creation
|
|
163
162
|
effect(() => {
|
|
164
163
|
this.updateValue();
|
|
165
|
-
}
|
|
164
|
+
});
|
|
166
165
|
// Detect input type after view init
|
|
167
166
|
effect(() => {
|
|
168
167
|
this.detectInputType();
|
|
169
|
-
}
|
|
168
|
+
});
|
|
170
169
|
}
|
|
171
170
|
onFocus() {
|
|
172
171
|
this.focused.set(true);
|
|
@@ -254,7 +253,7 @@ class TngTextareaDirective {
|
|
|
254
253
|
constructor() {
|
|
255
254
|
effect(() => {
|
|
256
255
|
this.updateValue();
|
|
257
|
-
}
|
|
256
|
+
});
|
|
258
257
|
}
|
|
259
258
|
onFocus() {
|
|
260
259
|
this.focused.set(true);
|
|
@@ -484,15 +483,16 @@ class TecnualDatepickerComponent {
|
|
|
484
483
|
return years;
|
|
485
484
|
}, ...(ngDevMode ? [{ debugName: "yearsList" }] : []));
|
|
486
485
|
get formattedValue() {
|
|
486
|
+
const locale = this.locale();
|
|
487
487
|
if (this.mode() === 'single') {
|
|
488
|
-
return this.singleValue ? this.singleValue.toLocaleDateString() : '';
|
|
488
|
+
return this.singleValue ? this.singleValue.toLocaleDateString(locale) : '';
|
|
489
489
|
}
|
|
490
490
|
else {
|
|
491
491
|
if (this.rangeValue.start && this.rangeValue.end) {
|
|
492
|
-
return `${this.rangeValue.start.toLocaleDateString()} - ${this.rangeValue.end.toLocaleDateString()}`;
|
|
492
|
+
return `${this.rangeValue.start.toLocaleDateString(locale)} - ${this.rangeValue.end.toLocaleDateString(locale)}`;
|
|
493
493
|
}
|
|
494
494
|
else if (this.rangeValue.start) {
|
|
495
|
-
return `${this.rangeValue.start.toLocaleDateString()} - ...`;
|
|
495
|
+
return `${this.rangeValue.start.toLocaleDateString(locale)} - ...`;
|
|
496
496
|
}
|
|
497
497
|
return '';
|
|
498
498
|
}
|
|
@@ -511,9 +511,17 @@ class TecnualDatepickerComponent {
|
|
|
511
511
|
return `${years[0]} - ${years[years.length - 1]}`;
|
|
512
512
|
}
|
|
513
513
|
}
|
|
514
|
-
toggleCalendar() {
|
|
514
|
+
toggleCalendar(event) {
|
|
515
515
|
if (this.disabled())
|
|
516
516
|
return;
|
|
517
|
+
// If clicking the input itself, ensure we don't close if already open
|
|
518
|
+
if (event && event.target.tagName === 'INPUT') {
|
|
519
|
+
if (!this.isOpen()) {
|
|
520
|
+
this.isOpen.set(true);
|
|
521
|
+
this.viewMode.set('day');
|
|
522
|
+
}
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
517
525
|
if (!this.isOpen()) {
|
|
518
526
|
// Reset to day view when opening
|
|
519
527
|
this.viewMode.set('day');
|
|
@@ -568,19 +576,22 @@ class TecnualDatepickerComponent {
|
|
|
568
576
|
this.currentViewDate.set(new Date(year, d.getMonth(), 1));
|
|
569
577
|
this.viewMode.set('month');
|
|
570
578
|
}
|
|
571
|
-
selectDate(date) {
|
|
579
|
+
selectDate(date, closeCalendar = true) {
|
|
572
580
|
if (this.isDisabled(date))
|
|
573
581
|
return;
|
|
574
582
|
if (this.mode() === 'single') {
|
|
575
583
|
this.singleValue = date;
|
|
584
|
+
this.currentViewDate.set(new Date(date)); // Sync view
|
|
576
585
|
this.onChange(date);
|
|
577
|
-
|
|
586
|
+
if (closeCalendar)
|
|
587
|
+
this.isOpen.set(false);
|
|
578
588
|
}
|
|
579
589
|
else {
|
|
580
590
|
// Range logic
|
|
581
591
|
if (!this.rangeValue.start || (this.rangeValue.start && this.rangeValue.end)) {
|
|
582
592
|
// Start new range
|
|
583
593
|
this.rangeValue = { start: date, end: null };
|
|
594
|
+
this.currentViewDate.set(new Date(date)); // Sync view
|
|
584
595
|
}
|
|
585
596
|
else {
|
|
586
597
|
// Complete range
|
|
@@ -591,10 +602,66 @@ class TecnualDatepickerComponent {
|
|
|
591
602
|
this.rangeValue = { ...this.rangeValue, end: date };
|
|
592
603
|
}
|
|
593
604
|
this.onChange(this.rangeValue);
|
|
594
|
-
|
|
605
|
+
if (closeCalendar)
|
|
606
|
+
this.isOpen.set(false);
|
|
595
607
|
}
|
|
596
608
|
}
|
|
597
609
|
}
|
|
610
|
+
parseDate(value) {
|
|
611
|
+
if (!value)
|
|
612
|
+
return null;
|
|
613
|
+
const locale = this.locale();
|
|
614
|
+
// Use Intl to determine the order of parts
|
|
615
|
+
const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(2000, 10, 25)); // Nov 25, 2000
|
|
616
|
+
// Parts will contain type: 'day', 'month', 'year', 'literal'
|
|
617
|
+
const formatOrder = [];
|
|
618
|
+
parts.forEach(p => {
|
|
619
|
+
if (p.type === 'day' || p.type === 'month' || p.type === 'year') {
|
|
620
|
+
formatOrder.push(p.type);
|
|
621
|
+
}
|
|
622
|
+
});
|
|
623
|
+
// Split input by non-digit characters
|
|
624
|
+
const dateParts = value.split(/\D+/).filter(part => part.trim() !== '').map(p => parseInt(p, 10));
|
|
625
|
+
if (dateParts.length !== 3) {
|
|
626
|
+
// Fallback to standard parse if structure doesn't match
|
|
627
|
+
const d = new Date(value);
|
|
628
|
+
return isNaN(d.getTime()) ? null : d;
|
|
629
|
+
}
|
|
630
|
+
let day;
|
|
631
|
+
let month;
|
|
632
|
+
let year;
|
|
633
|
+
// Map input parts to Day/Month/Year based on locale order
|
|
634
|
+
for (let i = 0; i < 3; i++) {
|
|
635
|
+
const type = formatOrder[i];
|
|
636
|
+
const val = dateParts[i];
|
|
637
|
+
if (type === 'day')
|
|
638
|
+
day = val;
|
|
639
|
+
if (type === 'month')
|
|
640
|
+
month = val - 1; // JS months are 0-indexed
|
|
641
|
+
if (type === 'year')
|
|
642
|
+
year = val;
|
|
643
|
+
}
|
|
644
|
+
if (day === undefined || month === undefined || year === undefined)
|
|
645
|
+
return null;
|
|
646
|
+
// Validate year length (handle 2-digit years if needed, but let's stick to 4 for now or simple logic)
|
|
647
|
+
if (year < 100)
|
|
648
|
+
year += 2000; // Very basic 2-digit handling
|
|
649
|
+
const d = new Date(year, month, day);
|
|
650
|
+
if (d.getFullYear() === year && d.getMonth() === month && d.getDate() === day) {
|
|
651
|
+
return d;
|
|
652
|
+
}
|
|
653
|
+
return null;
|
|
654
|
+
}
|
|
655
|
+
onManualInput(event) {
|
|
656
|
+
const value = event.target.value;
|
|
657
|
+
if (!value)
|
|
658
|
+
return;
|
|
659
|
+
// Try localized parse first
|
|
660
|
+
let date = this.parseDate(value);
|
|
661
|
+
if (date) {
|
|
662
|
+
this.selectDate(date, false);
|
|
663
|
+
}
|
|
664
|
+
}
|
|
598
665
|
// Helper checks
|
|
599
666
|
isSelected(date) {
|
|
600
667
|
if (this.mode() === 'single') {
|
|
@@ -674,7 +741,7 @@ class TecnualDatepickerComponent {
|
|
|
674
741
|
useExisting: forwardRef(() => TecnualDatepickerComponent),
|
|
675
742
|
multi: true
|
|
676
743
|
}
|
|
677
|
-
], ngImport: i0, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n <!-- Trigger Field (Reusing Input Style) -->\n <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n </fieldset>\n <label class=\"tng-label\">{{ label() }}</label>\n <
|
|
744
|
+
], ngImport: i0, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n <!-- Trigger Field (Reusing Input Style) -->\n <div class=\"tng-input-trigger\" (click)=\"toggleCalendar($event)\">\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n </fieldset>\n <label class=\"tng-label\">{{ label() }}</label>\n <input\n type=\"text\"\n class=\"tng-input-display\"\n [value]=\"formattedValue || (isOpen() ? '' : '')\"\n [placeholder]=\"isOpen() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n (input)=\"onManualInput($event)\"\n (click)=\"toggleCalendar($event)\"\n />\n <i class=\"fa-solid fa-calendar tng-icon\"></i>\n </div>\n\n <!-- Calendar Popup -->\n @if (isOpen()) {\n <div class=\"tng-calendar-popup\">\n <div class=\"tng-calendar-header\">\n <button type=\"button\" class=\"nav-btn\" (click)=\"prev($event)\">\n <i class=\"fa-solid fa-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"header-label-btn\" (click)=\"onHeaderClick()\">\n {{ headerLabel }}\n </button>\n <button type=\"button\" class=\"nav-btn\" (click)=\"next($event)\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n </div>\n\n @switch (viewMode()) {\n @case ('day') {\n <div class=\"tng-calendar-grid\">\n @for (day of daysOfWeek(); track day) {\n <div class=\"day-name\">{{ day }}</div>\n }\n @for (date of calendarDays(); track date.getTime()) {\n <div\n class=\"day-cell\"\n [class.not-current-month]=\"!isCurrentMonth(date)\"\n [class.today]=\"isToday(date)\"\n [class.selected]=\"isSelected(date)\"\n [class.in-range]=\"isInRange(date)\"\n [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n [class.disabled]=\"isDisabled(date)\"\n (click)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </div>\n }\n </div>\n }\n @case ('month') {\n <div class=\"tng-month-grid\">\n @for (month of monthNames(); track $index) {\n <div \n class=\"month-cell\"\n [class.current]=\"currentViewDate().getMonth() === $index\"\n (click)=\"selectMonth($index)\"\n >\n {{ month.substring(0, 3) }}\n </div>\n }\n </div>\n }\n @case ('year') {\n <div class=\"tng-year-grid\">\n @for (year of yearsList(); track year) {\n <div \n class=\"year-cell\"\n [class.current]=\"currentViewDate().getFullYear() === year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-input-trigger{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.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;white-space:nowrap;padding-inline:0px;transition:max-width .1s cubic-bezier(.4,0,.2,1)}.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-display{flex:1;font-size:16px;color:var(--tng-text, #333);height:100%;border:none;background:transparent;outline:none;padding:0 0 5px;margin:0;width:100%;font-family:inherit;pointer-events:auto;z-index:1}.tng-icon{color:var(--tng-text-secondary, #666);font-size:16px;margin-left:8px;z-index:1;padding-bottom:5px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:320px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee);color:var(--tng-text, #333)}@media(max-width:768px){.tng-calendar-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:350px;margin-top:0;box-shadow:0 10px 40px #0000004d,0 0 0 100vmax #0006;z-index:10000;animation:fadeInMobile .3s cubic-bezier(.16,1,.3,1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInMobile{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .header-label-btn{background:none;border:none;font-weight:600;font-size:16px;color:var(--tng-text, #333);text-transform:capitalize;cursor:pointer;padding:4px 8px;border-radius:var(--tng-border-radius, 4px);transition:background-color .2s ease}.tng-calendar-header .header-label-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666);transition:background-color .2s ease}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn i{font-size:14px}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:var(--tng-text-secondary, #ccc);opacity:.5}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}.tng-month-grid,.tng-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.month-cell,.year-cell{height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:var(--tng-border-radius, 4px);transition:all .2s ease;color:var(--tng-text, #333)}.month-cell:hover,.year-cell:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.month-cell.current,.year-cell.current{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
678
745
|
}
|
|
679
746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualDatepickerComponent, decorators: [{
|
|
680
747
|
type: Component,
|
|
@@ -684,7 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
684
751
|
useExisting: forwardRef(() => TecnualDatepickerComponent),
|
|
685
752
|
multi: true
|
|
686
753
|
}
|
|
687
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n <!-- Trigger Field (Reusing Input Style) -->\n <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n </fieldset>\n <label class=\"tng-label\">{{ label() }}</label>\n <
|
|
754
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n <!-- Trigger Field (Reusing Input Style) -->\n <div class=\"tng-input-trigger\" (click)=\"toggleCalendar($event)\">\n <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n </fieldset>\n <label class=\"tng-label\">{{ label() }}</label>\n <input\n type=\"text\"\n class=\"tng-input-display\"\n [value]=\"formattedValue || (isOpen() ? '' : '')\"\n [placeholder]=\"isOpen() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n (input)=\"onManualInput($event)\"\n (click)=\"toggleCalendar($event)\"\n />\n <i class=\"fa-solid fa-calendar tng-icon\"></i>\n </div>\n\n <!-- Calendar Popup -->\n @if (isOpen()) {\n <div class=\"tng-calendar-popup\">\n <div class=\"tng-calendar-header\">\n <button type=\"button\" class=\"nav-btn\" (click)=\"prev($event)\">\n <i class=\"fa-solid fa-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"header-label-btn\" (click)=\"onHeaderClick()\">\n {{ headerLabel }}\n </button>\n <button type=\"button\" class=\"nav-btn\" (click)=\"next($event)\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n </div>\n\n @switch (viewMode()) {\n @case ('day') {\n <div class=\"tng-calendar-grid\">\n @for (day of daysOfWeek(); track day) {\n <div class=\"day-name\">{{ day }}</div>\n }\n @for (date of calendarDays(); track date.getTime()) {\n <div\n class=\"day-cell\"\n [class.not-current-month]=\"!isCurrentMonth(date)\"\n [class.today]=\"isToday(date)\"\n [class.selected]=\"isSelected(date)\"\n [class.in-range]=\"isInRange(date)\"\n [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n [class.disabled]=\"isDisabled(date)\"\n (click)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </div>\n }\n </div>\n }\n @case ('month') {\n <div class=\"tng-month-grid\">\n @for (month of monthNames(); track $index) {\n <div \n class=\"month-cell\"\n [class.current]=\"currentViewDate().getMonth() === $index\"\n (click)=\"selectMonth($index)\"\n >\n {{ month.substring(0, 3) }}\n </div>\n }\n </div>\n }\n @case ('year') {\n <div class=\"tng-year-grid\">\n @for (year of yearsList(); track year) {\n <div \n class=\"year-cell\"\n [class.current]=\"currentViewDate().getFullYear() === year\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-input-trigger{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.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;white-space:nowrap;padding-inline:0px;transition:max-width .1s cubic-bezier(.4,0,.2,1)}.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-display{flex:1;font-size:16px;color:var(--tng-text, #333);height:100%;border:none;background:transparent;outline:none;padding:0 0 5px;margin:0;width:100%;font-family:inherit;pointer-events:auto;z-index:1}.tng-icon{color:var(--tng-text-secondary, #666);font-size:16px;margin-left:8px;z-index:1;padding-bottom:5px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:320px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee);color:var(--tng-text, #333)}@media(max-width:768px){.tng-calendar-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:350px;margin-top:0;box-shadow:0 10px 40px #0000004d,0 0 0 100vmax #0006;z-index:10000;animation:fadeInMobile .3s cubic-bezier(.16,1,.3,1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInMobile{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .header-label-btn{background:none;border:none;font-weight:600;font-size:16px;color:var(--tng-text, #333);text-transform:capitalize;cursor:pointer;padding:4px 8px;border-radius:var(--tng-border-radius, 4px);transition:background-color .2s ease}.tng-calendar-header .header-label-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666);transition:background-color .2s ease}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn i{font-size:14px}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:var(--tng-text-secondary, #ccc);opacity:.5}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}.tng-month-grid,.tng-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.month-cell,.year-cell{height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:var(--tng-border-radius, 4px);transition:all .2s ease;color:var(--tng-text, #333)}.month-cell:hover,.year-cell:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.month-cell.current,.year-cell.current{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}\n"] }]
|
|
688
755
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", 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 }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], onClickOutside: [{
|
|
689
756
|
type: HostListener,
|
|
690
757
|
args: ['document:click', ['$event']]
|
|
@@ -2190,7 +2257,7 @@ class TngSliderComponent {
|
|
|
2190
2257
|
if (val !== clamped) {
|
|
2191
2258
|
this.value.set(clamped);
|
|
2192
2259
|
}
|
|
2193
|
-
}
|
|
2260
|
+
});
|
|
2194
2261
|
}
|
|
2195
2262
|
// CVA Implementation
|
|
2196
2263
|
writeValue(value) {
|