@telcomdev/ui 0.1.0 → 0.1.1

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@telcomdev/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Librería UI reutilizable para los sistemas TelcomDev.",
   "keywords": [
     "angular",
     "ui",
     "components",
     "telcomdev",
+    "button",
+    "theme",
+    "palette",
     "alerts",
     "sidebar",
     "header",
@@ -24,6 +27,17 @@
   ],
   "author": "TelcomDev",
   "license": "MIT",
+  "files": [
+    "fesm2022",
+    "types",
+    "lib",
+    "*.d.ts",
+    "*.js",
+    "*.mjs",
+    "*.json",
+    "README.md",
+    "LICENSE"
+  ],
   "peerDependencies": {
     "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",

package/types/telcomdev-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnChanges, OnDestroy, EventEmitter, SimpleChanges, InjectionToken, Type, ModelSignal, OutputEmitterRef, TemplateRef, AfterContentInit } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy, SimpleChanges, InjectionToken, Type, ModelSignal, OutputEmitterRef, TemplateRef, AfterContentInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FormCheckboxControl, WithOptionalFieldTree, DisabledReason, ValidationError, FormValueControl } from '@angular/forms/signals';
 import { ScrollStrategy } from '@angular/cdk/overlay';
@@ -37,6 +37,27 @@ declare class TdAlerta {
     private static inyectarEstilos;
 }
 
+type TdButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+type TdButtonTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+type TdButtonSize = 'sm' | 'md' | 'lg';
+type TdButtonType = 'button' | 'submit' | 'reset';
+declare class TdButton {
+    variant: TdButtonVariant;
+    tone: TdButtonTone;
+    size: TdButtonSize;
+    type: TdButtonType;
+    icon: string;
+    iconPosition: 'start' | 'end';
+    disabled: boolean;
+    loading: boolean;
+    block: boolean;
+    ariaLabel: string;
+    readonly pressed: EventEmitter<MouseEvent>;
+    protected handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdButton, "td-button", never, { "variant": { "alias": "variant"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "block": { "alias": "block"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "pressed": "pressed"; }, never, ["*"], true, never>;
+}
+
 declare class TdCheckbox implements ControlValueAccessor, FormCheckboxControl {
     private readonly cdr;
     private readonly formBridge;
@@ -680,6 +701,10 @@ declare const TD_ICONOS_NOMBRES: readonly ("error" | "info" | "link" | "menu" |
 
 type TdInputValue = string | number | null;
 type TdInputEmptyValue = 'auto' | 'null' | 'empty-string';
+type TdInputSanitizePreset = 'none' | 'digits' | 'letters' | 'alphanumeric' | 'decimal' | 'uppercase' | 'lowercase' | 'trim';
+type TdInputSanitize = TdInputSanitizePreset | readonly TdInputSanitizePreset[];
+type TdInputMask = 'none' | 'time' | 'time-seconds' | 'decimal' | `decimal(${number},${number})` | `decimal(${number}.${number})`;
+type TdInputSanitizeFn = (value: string) => string;
 declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputValue> {
     private readonly cdr;
     private readonly formBridge;
@@ -712,6 +737,11 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
     dark: boolean;
     readonly showCounter: _angular_core.InputSignal<boolean>;
     emptyValue: TdInputEmptyValue;
+    sanitize: TdInputSanitize;
+    sanitizeValue: TdInputSanitizeFn | null;
+    mask: TdInputMask;
+    integerDigits: number | null;
+    decimalDigits: number | null;
     readonly minValue: _angular_core.InputSignal<string | number | null | undefined>;
     readonly maxValue: _angular_core.InputSignal<string | number | null | undefined>;
     readonly minLength: _angular_core.InputSignal<number | undefined>;
@@ -731,6 +761,7 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
     protected readonly counterAtLimit: _angular_core.Signal<boolean>;
     protected readonly hasSupportingContent: _angular_core.Signal<boolean>;
     protected readonly resolvedPattern: _angular_core.Signal<string | null>;
+    protected readonly resolvedInputMode: _angular_core.Signal<"numeric" | "decimal" | null>;
     protected focused: boolean;
     protected passwordVisible: boolean;
     protected get inputId(): string;
@@ -747,9 +778,27 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
     protected clear(): void;
     private parseInputValue;
     private resolveEmptyValue;
+    private transformTextValue;
+    private applySanitize;
+    private sanitizePresets;
+    private applySanitizePreset;
+    private sanitizeDecimal;
+    private limitDigits;
+    private applyMask;
+    private maskDecimal;
+    private isDecimalMask;
+    private resolveDecimalMaskConfig;
+    private parseDecimalMask;
+    private maskTime;
+    private maskTimeSeconds;
+    private completeMaskOnBlur;
+    private completeTimeValue;
+    private completeTimeSecondsValue;
+    private clampNumber;
+    private padTimePart;
     private setValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdInput, "td-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; "emptyValue": { "alias": "emptyValue"; "required": false; }; "minValue": { "alias": "min"; "required": false; "isSignal": true; }; "maxValue": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdInput, "td-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; "emptyValue": { "alias": "emptyValue"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; "sanitizeValue": { "alias": "sanitizeValue"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "integerDigits": { "alias": "integerDigits"; "required": false; }; "decimalDigits": { "alias": "decimalDigits"; "required": false; }; "minValue": { "alias": "min"; "required": false; "isSignal": true; }; "maxValue": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
 }
 
 interface TdSelectOption<T = unknown> {
@@ -988,5 +1037,30 @@ declare class TdTabs implements AfterContentInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdTabs, "td-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "stretch": { "alias": "stretch"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "panelFocusable": { "alias": "panelFocusable"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "tabChange": "tabChange"; }, ["tabQuery"], never, true, never>;
 }
 
-export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi, createTdFormControlBridge };
-export type { MenuSidebar, TdAlertaOpciones, TdAlertaTipo, TdDataTableAccion, TdDataTableAccionEvento, TdDataTableAlineacion, TdDataTableBoton, TdDataTableColumna, TdDataTableTipoColumna, TdDataTableTono, TdDatePickerMode, TdDatePickerValue, TdDateRange, TdDialogConfig, TdDialogPanelData, TdDialogRefLike, TdDialogTamano, TdFormControlBridge, TdHeaderAccionPerfil, TdHeaderNotificacion, TdIconoDefinicion, TdIconoNombre, TdIconoPersonalizado, TdInputEmptyValue, TdInputValue, TdSelectOption, TdSelectScrollBehavior, TdSidebarModoCerrado, TdSidebarSeleccion, TdTabsAlignment, TdTabsVariant };
+type TdThemeMode = 'light' | 'dark' | 'system';
+interface TdThemePaletteColor {
+    name: string;
+    cssVariable: string;
+    value: string;
+    usage: string;
+}
+declare const TD_THEME_LIGHT_COLORS: TdThemePaletteColor[];
+declare const TD_THEME_DARK_COLORS: TdThemePaletteColor[];
+
+declare class TdThemeService {
+    private readonly document;
+    private readonly systemDark;
+    readonly mode: _angular_core.WritableSignal<TdThemeMode>;
+    readonly isDark: _angular_core.Signal<boolean>;
+    constructor();
+    setMode(mode: TdThemeMode): void;
+    toggle(): void;
+    private applyThemeClass;
+    private readSystemPreference;
+    private listenSystemPreference;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TdThemeService>;
+}
+
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdThemeService, TelcomdevUi, createTdFormControlBridge };
+export type { MenuSidebar, TdAlertaOpciones, TdAlertaTipo, TdButtonSize, TdButtonTone, TdButtonType, TdButtonVariant, TdDataTableAccion, TdDataTableAccionEvento, TdDataTableAlineacion, TdDataTableBoton, TdDataTableColumna, TdDataTableTipoColumna, TdDataTableTono, TdDatePickerMode, TdDatePickerValue, TdDateRange, TdDialogConfig, TdDialogPanelData, TdDialogRefLike, TdDialogTamano, TdFormControlBridge, TdHeaderAccionPerfil, TdHeaderNotificacion, TdIconoDefinicion, TdIconoNombre, TdIconoPersonalizado, TdInputEmptyValue, TdInputMask, TdInputSanitize, TdInputSanitizeFn, TdInputSanitizePreset, TdInputValue, TdSelectOption, TdSelectScrollBehavior, TdSidebarModoCerrado, TdSidebarSeleccion, TdTabsAlignment, TdTabsVariant, TdThemeMode, TdThemePaletteColor };