@randstad-uca/design-system 1.0.41 → 1.0.43
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/dist/assets/icons/arrow_drop_down.svg +3 -0
- package/dist/assets/icons/arrow_drop_up.svg +3 -0
- package/dist/components/CalendarOverlay.d.ts +109 -0
- package/dist/components/DatePicker.d.ts +115 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/package.json +3 -1
- package/dist/stories/DatePicker.stories.d.ts +52 -0
- package/dist/styles/globalStyles.ts +8 -0
- package/package.json +3 -1
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
export declare class CalendarOverlay extends LitElement {
|
|
3
|
+
/**
|
|
4
|
+
* La fecha actualmente seleccionada por el usuario.
|
|
5
|
+
* Se utiliza para marcar visualmente el día seleccionado en el calendario.
|
|
6
|
+
*/
|
|
7
|
+
selectedDate: Date | null;
|
|
8
|
+
/**
|
|
9
|
+
* La fecha que define el mes y año que se muestra actualmente en la vista del calendario.
|
|
10
|
+
* Cambia al navegar entre meses o años.
|
|
11
|
+
*/
|
|
12
|
+
viewDate: Date;
|
|
13
|
+
isMobile: boolean;
|
|
14
|
+
calendarWidth: number;
|
|
15
|
+
minDate: Date | null;
|
|
16
|
+
maxDate: Date | null;
|
|
17
|
+
/**
|
|
18
|
+
* El estado de la vista actual del calendario, que puede ser 'días', 'meses' o 'años'.
|
|
19
|
+
* Determina qué cuadrícula se renderiza en el overlay.
|
|
20
|
+
*/
|
|
21
|
+
private currentView;
|
|
22
|
+
static styles: import("lit").CSSResult;
|
|
23
|
+
connectedCallback(): void;
|
|
24
|
+
disconnectedCallback(): void;
|
|
25
|
+
/**
|
|
26
|
+
* Cierra el overlay del calendario si el clic se produce fuera de sus límites.
|
|
27
|
+
* Se utiliza un `event listener` en el documento para detectar clics en cualquier lugar de la página.
|
|
28
|
+
|
|
29
|
+
* @param e - Objeto de evento del clic.
|
|
30
|
+
*/
|
|
31
|
+
private handleOutsideClick;
|
|
32
|
+
/**
|
|
33
|
+
* Alterna la vista del calendario entre 'days' y 'years' al hacer clic en el encabezado.
|
|
34
|
+
* Si la vista actual es 'days', cambia a 'years'; si no, vuelve a 'days'.
|
|
35
|
+
*/
|
|
36
|
+
private handleHeaderClick;
|
|
37
|
+
/**
|
|
38
|
+
* Método auxiliar para actualizar la vista y disparar el evento
|
|
39
|
+
*/
|
|
40
|
+
private _updateView;
|
|
41
|
+
/**
|
|
42
|
+
* Maneja la navegación entre periodos en el calendario según la vista actual.
|
|
43
|
+
* Si la vista es de días, navega por meses; si es de meses, navega por años;
|
|
44
|
+
* si es de años, navega por bloques de 21 años.
|
|
45
|
+
* Actualiza la vista con la nueva fecha calculada.
|
|
46
|
+
|
|
47
|
+
* @param direction -1 para retroceder, 1 para avanzar.
|
|
48
|
+
*/
|
|
49
|
+
private handleNavClick;
|
|
50
|
+
/**
|
|
51
|
+
* Maneja la selección de un año en la vista de años.
|
|
52
|
+
* Al seleccionar un año, actualiza la fecha de vista y cambia a la vista de meses.
|
|
53
|
+
|
|
54
|
+
* @param year - El año seleccionado (número de 4 dígitos).
|
|
55
|
+
*/
|
|
56
|
+
private handleYearSelect;
|
|
57
|
+
/**
|
|
58
|
+
* Maneja la selección de un mes en la vista de meses.
|
|
59
|
+
* Al seleccionar un mes, actualiza la fecha de vista y cambia a la vista de días.
|
|
60
|
+
|
|
61
|
+
* @param monthIndex - El índice del mes seleccionado (0-11, donde 0 es Enero).
|
|
62
|
+
*/
|
|
63
|
+
private handleMonthSelect;
|
|
64
|
+
/**
|
|
65
|
+
* Maneja el clic en un día del calendario.
|
|
66
|
+
* Emite un evento `date-selected` al componente padre con la fecha y su valor formateado.
|
|
67
|
+
|
|
68
|
+
* @param day - El objeto Date del día seleccionado.
|
|
69
|
+
*/
|
|
70
|
+
private handleDayClick;
|
|
71
|
+
private getFullMonthNames;
|
|
72
|
+
private getShortMonthNames;
|
|
73
|
+
private getShortWeekdays;
|
|
74
|
+
/**
|
|
75
|
+
* Renderiza el encabezado del calendario, mostrando el mes y el año actuales.
|
|
76
|
+
* Incluye botones de navegación y un botón para cambiar la vista (a meses/años).
|
|
77
|
+
*/
|
|
78
|
+
private renderHeader;
|
|
79
|
+
/**
|
|
80
|
+
* Renderiza la vista de selección de años en el calendario.
|
|
81
|
+
* Genera una cuadrícula de botones, cada uno representando un año dentro de un rango de 21 años.
|
|
82
|
+
* El año actualmente seleccionado se resalta visualmente.
|
|
83
|
+
* Al hacer clic en un botón de año, se invoca el método de manejo de selección de año.
|
|
84
|
+
|
|
85
|
+
* @returns {TemplateResult} Plantilla HTML para la vista de años.
|
|
86
|
+
*/
|
|
87
|
+
private renderYearsView;
|
|
88
|
+
/**
|
|
89
|
+
* Renderiza la vista de selección de meses en el calendario.
|
|
90
|
+
* Genera una cuadrícula de botones, cada uno representando un mes abreviado.
|
|
91
|
+
* El mes actualmente seleccionado se resalta visualmente.
|
|
92
|
+
* Al hacer clic en un botón de mes, se invoca el método de manejo de selección de mes.
|
|
93
|
+
|
|
94
|
+
* @returns {TemplateResult} Plantilla HTML para la vista de meses.
|
|
95
|
+
*/
|
|
96
|
+
private renderMonthsView;
|
|
97
|
+
/**
|
|
98
|
+
* Renderiza la cuadrícula de días para el mes actual.
|
|
99
|
+
* Incluye los días de la semana, los días del mes y marca el día actual y el seleccionado.
|
|
100
|
+
*/
|
|
101
|
+
private renderDayView;
|
|
102
|
+
/**
|
|
103
|
+
* Renderiza el overlay del calendario según la vista actual (días, meses o años).
|
|
104
|
+
* Incluye el encabezado y la cuadrícula correspondiente.
|
|
105
|
+
|
|
106
|
+
* @returns {TemplateResult} Plantilla HTML del overlay del calendario.
|
|
107
|
+
*/
|
|
108
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
109
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "./CalendarOverlay.ts";
|
|
3
|
+
export declare class DatePickerComponent extends LitElement {
|
|
4
|
+
label: string;
|
|
5
|
+
placeholder: string;
|
|
6
|
+
value: string;
|
|
7
|
+
required: boolean;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
error: boolean;
|
|
10
|
+
width?: string;
|
|
11
|
+
isRenderClearButton: boolean;
|
|
12
|
+
minDate?: string;
|
|
13
|
+
maxDate?: string;
|
|
14
|
+
private isOpen;
|
|
15
|
+
private selectedDate;
|
|
16
|
+
/** La fecha que determina el mes y año actualmente visibles en el calendario. */
|
|
17
|
+
private viewDate;
|
|
18
|
+
private isMobile;
|
|
19
|
+
private calendarWidth;
|
|
20
|
+
private inputContainer;
|
|
21
|
+
static styles: import("lit").CSSResult;
|
|
22
|
+
/**
|
|
23
|
+
* Ciclo de vida: se ejecuta al conectar el componente al DOM.
|
|
24
|
+
* Inicializa el modo responsivo y listeners globales.
|
|
25
|
+
*/
|
|
26
|
+
connectedCallback(): void;
|
|
27
|
+
/**
|
|
28
|
+
* Ciclo de vida: se ejecuta al desconectar el componente del DOM.
|
|
29
|
+
* Limpia listeners globales.
|
|
30
|
+
*/
|
|
31
|
+
disconnectedCallback(): void;
|
|
32
|
+
/**
|
|
33
|
+
* Ciclo de vida: se llama después de que la primera actualización del componente ha terminado.
|
|
34
|
+
* Es ideal para obtener el ancho del DOM por primera vez.
|
|
35
|
+
*/
|
|
36
|
+
firstUpdated(): void;
|
|
37
|
+
/**
|
|
38
|
+
* Ciclo de vida: se llama después de cada actualización.
|
|
39
|
+
* Se usa para recalcular el ancho si la apertura del calendario ha cambiado.
|
|
40
|
+
|
|
41
|
+
* @param changedProperties - Mapa de propiedades que han cambiado.
|
|
42
|
+
*/
|
|
43
|
+
updated(changedProperties: Map<string, any>): void;
|
|
44
|
+
private setInitialWidth;
|
|
45
|
+
/**
|
|
46
|
+
* Referencia enlazada para el listener de resize.
|
|
47
|
+
*/
|
|
48
|
+
private updateResponsiveModeBound;
|
|
49
|
+
/**
|
|
50
|
+
* Actualiza el estado isMobile según el ancho de la ventana.
|
|
51
|
+
*/
|
|
52
|
+
private updateResponsiveMode;
|
|
53
|
+
/**
|
|
54
|
+
* Actualiza el componente cuando una propiedad cambia.
|
|
55
|
+
* Se encarga de parsear la fecha de la propiedad `value` al estado `selectedDate`.
|
|
56
|
+
|
|
57
|
+
* @param changedProperties - Mapa de propiedades que han cambiado.
|
|
58
|
+
*/
|
|
59
|
+
update(changedProperties: Map<string, any>): void;
|
|
60
|
+
/**
|
|
61
|
+
* Maneja el evento de entrada del usuario en el input.
|
|
62
|
+
* Valida el formato de la fecha y actualiza el estado del componente.
|
|
63
|
+
|
|
64
|
+
* @param e - Objeto de evento de entrada.
|
|
65
|
+
*/
|
|
66
|
+
handleInput(e: Event): void;
|
|
67
|
+
/**
|
|
68
|
+
* Cierra el calendario si el clic se realiza fuera del componente.
|
|
69
|
+
* Se ejecuta en el `document` para detectar clics en cualquier lugar de la página.
|
|
70
|
+
|
|
71
|
+
* @param e - Objeto de evento del clic.
|
|
72
|
+
*/
|
|
73
|
+
private handleClickOutside;
|
|
74
|
+
/**
|
|
75
|
+
* Abre o cierra el calendario al hacer clic en el botón de calendario.
|
|
76
|
+
|
|
77
|
+
* @param e - Objeto de evento del clic.
|
|
78
|
+
*/
|
|
79
|
+
handleCalendarButtonClick(e: Event): void;
|
|
80
|
+
/**
|
|
81
|
+
* Borra la fecha seleccionada y cierra el calendario.
|
|
82
|
+
*/
|
|
83
|
+
handleClearDate(): void;
|
|
84
|
+
/**
|
|
85
|
+
* Maneja la selección de fecha desde el calendario.
|
|
86
|
+
*/
|
|
87
|
+
private handleDateSelect;
|
|
88
|
+
/**
|
|
89
|
+
* Maneja el cambio de la fecha de vista en el calendario.
|
|
90
|
+
|
|
91
|
+
* @param e - Objeto de evento con la nueva fecha de vista.
|
|
92
|
+
*/
|
|
93
|
+
private handleViewDateChange;
|
|
94
|
+
/**
|
|
95
|
+
* Cierra el calendario y actualiza el valor del componente.
|
|
96
|
+
* Emite un evento 'date-selected' con el valor de la fecha seleccionada.
|
|
97
|
+
|
|
98
|
+
* @param valueSet - La fecha en formato de cadena (ej: 'dd-MM-yyyy') a establecer.
|
|
99
|
+
*/
|
|
100
|
+
private closeOverlay;
|
|
101
|
+
/**
|
|
102
|
+
* Función auxiliar para convertir una cadena de fecha YYYY-MM-DD
|
|
103
|
+
* a un objeto Date sin problemas de zona horaria.
|
|
104
|
+
|
|
105
|
+
* @param dateString - La cadena de fecha a parsear.
|
|
106
|
+
* @returns Un objeto Date o null si la cadena es inválida.
|
|
107
|
+
*/
|
|
108
|
+
private _parseDateString;
|
|
109
|
+
private _getValidDateRange;
|
|
110
|
+
private _isWithinBounds;
|
|
111
|
+
/**
|
|
112
|
+
* Renderiza el componente DatePicker, incluyendo el input, botones y el overlay del calendario.
|
|
113
|
+
*/
|
|
114
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
115
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -2127,7 +2127,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
|
|
|
2127
2127
|
`:""}
|
|
2128
2128
|
</div>
|
|
2129
2129
|
</div>
|
|
2130
|
-
`}};n([T({type:Array}),a("design:type",Array)],Nt.prototype,"options",void 0),n([T({type:String}),a("design:type",Object)],Nt.prototype,"placeholder",void 0),n([T({type:String,attribute:"default-value"}),a("design:type",Object)],Nt.prototype,"defaultValue",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"disabled",void 0),n([T({type:Object}),a("design:type",Object)],Nt.prototype,"value",void 0),n([T({type:String}),a("design:type",Object)],Nt.prototype,"label",void 0),n([T({type:String}),a("design:type",Object)],Nt.prototype,"labelColor",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"filterable",void 0),n([T({type:Number}),a("design:type",Number)],Nt.prototype,"maxLength",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Boolean)],Nt.prototype,"error",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"required",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"optional",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Nt.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Nt.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Nt.prototype,"mobileFilterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"highlightedIndex",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"_isCleared",void 0),Nt=n([l("filterable-select")],Nt);const Gt=new CSSStyleSheet;Gt.replaceSync("\n @font-face {\n font-family: 'Graphik';\n src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n font-weight: normal;\n font-style: normal;\n }\n\n .body-s {\n font-weight: 400;\n font-size: 14px;\n line-height: 100%;\n letter-spacing: 0%;\n color: green;\n }\n");class Ht extends e{static{this.styles=[Gt,t`
|
|
2130
|
+
`}};n([T({type:Array}),a("design:type",Array)],Nt.prototype,"options",void 0),n([T({type:String}),a("design:type",Object)],Nt.prototype,"placeholder",void 0),n([T({type:String,attribute:"default-value"}),a("design:type",Object)],Nt.prototype,"defaultValue",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"disabled",void 0),n([T({type:Object}),a("design:type",Object)],Nt.prototype,"value",void 0),n([T({type:String}),a("design:type",Object)],Nt.prototype,"label",void 0),n([T({type:String}),a("design:type",Object)],Nt.prototype,"labelColor",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"filterable",void 0),n([T({type:Number}),a("design:type",Number)],Nt.prototype,"maxLength",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Boolean)],Nt.prototype,"error",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"required",void 0),n([T({type:Boolean}),a("design:type",Object)],Nt.prototype,"optional",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Nt.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Nt.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Nt.prototype,"mobileFilterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"highlightedIndex",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"_isCleared",void 0),Nt=n([l("filterable-select")],Nt);const Gt=new CSSStyleSheet;Gt.replaceSync("\n @font-face {\n font-family: 'Graphik';\n src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n font-weight: normal;\n font-style: normal;\n }\n\n .body-s {\n font-weight: 400;\n font-size: 14px;\n line-height: 100%;\n letter-spacing: 0%;\n color: green;\n }\n\n .body-l {\n font-family: Graphik;\n font-size: 18px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;\n }\n");class Ht extends e{static{this.styles=[Gt,t`
|
|
2131
2131
|
:host {
|
|
2132
2132
|
display: flex;
|
|
2133
2133
|
position: fixed;
|