@nuralyui/datepicker 0.0.1

package/date-picker.style.js

@@ -0,0 +1,223 @@
+import { css } from 'lit';
+const calendarStyles = css `
+  :host {
+    font-family: var(--hybrid-datepicker-font-family);
+  }
+  .calendar-container {
+    z-index: 10000;
+    user-select: none;
+    padding: 5px;
+    width: 350px;
+    float: left;
+    text-align: center;
+    position: absolute;
+    background-color: var(--hybrid-datepicker-background-color);
+  }
+  hy-button {
+    --hybrid-button-border-top: 1px solid transparent;
+    --hybrid-button-border-bottom: 1px solid transparent;
+    --hybrid-button-border-left: 1px solid transparent;
+    --hybrid-button-border-right: 1px solid transparent;
+    --hybrid-button-background-color: var(--hybrid-datepicker-button-background-color);
+    --hybrid-button-text-color: var(--hybrid-datepicker-button-text-color);
+  }
+  .toggle-year-view,
+  .toggle-month-view {
+    --hybrid-button-font-weight: var(--hybrid-datepicker-toggle-month-year-font-weight);
+  }
+  .current-year-container {
+    display: inline-flex;
+    gap: 5px;
+  }
+  .year-icons-toggler {
+    display: none;
+    flex-direction: column;
+    line-height: 0;
+  }
+  .next-year,
+  .previous-year {
+    --hybrid-button-width: 10px;
+    --hybrid-button-height: 10px;
+    --hybrid-button-padding-x: 0px;
+    --hybrid-button-padding-y: 0px;
+    --hybrid-button-hover-border-color: transparent;
+    --hybrid-button-active-border-color: transparent;
+  }
+  .calendar-container-range {
+    width: 600px;
+  }
+
+  .header-next-button {
+    float: right;
+  }
+
+  .header-prev-button {
+    float: left;
+  }
+
+  .day-containers {
+    display: flex;
+    flex-flow: row;
+    width: 100%;
+  }
+  .days-container {
+    color: var(--hybrid-datepicker-day-container-color);
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+  }
+
+  .day-container,
+  .day-header-item {
+    width: 13%;
+    height: var(--hybrid-datepicker-day-container-height);
+    font-size: 13px;
+    margin: 2px;
+    cursor: pointer;
+    line-height: 2.5;
+  }
+
+  :host([size='small']) .day-container {
+    height: var(--hybrid-datepicker-small-day-container-height);
+  }
+  :host([size='large']) .day-container {
+    height: var(--hybrid-datepicker-large-day-container-height);
+  }
+
+  :not(.day-active).day-container:hover {
+    background-color: var(--hybrid-datepicker-day-container-hover-background-color);
+  }
+
+  .day-active,
+  .month-active,
+  .year-active {
+    background-color: var(--hybrid-datepicker-current-day-month-year-background-color);
+    color: var(--hybrid-datepicker-current-day-month-year-color);
+  }
+  .today {
+    position: relative;
+  }
+  :not(.day-active).today {
+    color: var(--hybrid-datepicker-today-color);
+  }
+  .current-year-container:hover > .year-icons-toggler {
+    display: inline-flex;
+  }
+  .today::after {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    background-color: var(--hybrid-datepicker-today-underline-color);
+    position: absolute;
+    top: 75%;
+    right: 50%;
+    transform: translate(50%);
+  }
+  .day-header-item {
+    cursor: auto;
+  }
+  .day-invalid {
+    color: var(--hybrid-datepicker-day-invalid-color);
+  }
+  .day-invalid:hover {
+    background-color: var(--hybrid-datepicker-day-invalid-hover-background-color);
+  }
+  .year-month-header {
+    display: inline-block;
+    line-height: 2;
+  }
+
+  .months-container {
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    color: var(--hybrid-datepicker-month-container-color);
+  }
+
+  .month-container {
+    width: 33%;
+    line-height: var(--hybrid-datepicker-month-container-line-height);
+    cursor: pointer;
+    font-size: 13px;
+  }
+  :not(.month-active).month-container:hover {
+    background-color: var(--hybrid-datepicker-month-container-hover-background-color);
+  }
+
+  :host([size='small']) .month-container {
+    line-height: var(--hybrid-datepicker-small-month-container-line-height);
+  }
+  :host([size='large']) .month-container {
+    line-height: var(--hybrid-datepicker-large-month-container-line-height);
+  }
+
+  .years-container {
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    color: var(--hybrid-datepicker-year-container-color);
+  }
+
+  .year-container {
+    width: 33%;
+    line-height: var(--hybrid-datepicker-year-container-line-height);
+    cursor: pointer;
+    font-size: 13px;
+  }
+  :not(.year-active).year-container:hover {
+    background-color: var(--hybrid-datepicker-year-container-hover-background-color);
+  }
+
+  :host([size='small']) .year-container {
+    line-height: var(--hybrid-datepicker-small-year-container-line-height);
+  }
+  :host([size='large']) .year-container {
+    line-height: var(--hybrid-datepicker-large-year-container-line-height);
+  }
+  :host {
+    --hybrid-datepicker-font-family: IBM Plex Sans;
+    --hybrid-datepicker-background-color: #f9f9f9;
+    --hybrid-datepicker-toggle-month-year-font-weight: bold;
+    --hybrid-datepicker-button-background-color: #f9f9f9;
+    --hybrid-datepicker-button-text-color: #393939;
+
+    --hybrid-datepicker-year-container-line-height: 4.3;
+    --hybrid-datepicker-small-year-container-line-height: 3.3;
+    --hybrid-datepicker-large-year-container-line-height: 5.3;
+    --hybrid-datepicker-year-container-hover-background-color: #e4e4e4;
+    --hybrid-datepicker-month-container-line-height: 4.3;
+    --hybrid-datepicker-small-month-container-line-height: 3.3;
+    --hybrid-datepicker-large-month-container-line-height: 5.3;
+    --hybrid-datepicker-month-container-hover-background-color: #e4e4e4;
+    --hybrid-datepicker-day-container-height: 30px;
+    --hybrid-datepicker-day-container-color: #000000;
+    --hybrid-datepicker-month-container-color: #000000;
+    --hybrid-datepicker-year-container-color: #000000;
+    --hybrid-datepicker-small-day-container-height: 25px;
+    --hybrid-datepicker-large-day-container-height: 35px;
+    --hybrid-datepicker-day-container-hover-background-color: #e4e4e4;
+    --hybrid-datepicker-day-invalid-color: #9a9a9a;
+    --hybrid-datepicker-day-invalid-hover-background-color: #e6e6e6;
+    --hybrid-datepicker-current-day-month-year-background-color: #0f62fe;
+    --hybrid-datepicker-current-day-month-year-color: #ffffff;
+    --hybrid-datepicker-today-underline-color: #0f62fe;
+    --hybrid-datepicker-today-color: #0f62fe;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --hybrid-datepicker-background-color: #000000;
+      --hybrid-datepicker-day-container-color: #ffffff;
+      --hybrid-datepicker-month-container-color: #ffffff;
+      --hybrid-datepicker-year-container-color: #ffffff;
+      --hybrid-datepicker-button-background-color: #000000;
+      --hybrid-datepicker-button-text-color: #ffffff;
+      --hybrid-datepicker-day-container-hover-background-color: #393939;
+      --hybrid-datepicker-day-invalid-hover-background-color: #393939;
+      --hybrid-datepicker-month-container-hover-background-color: #393939;
+      --hybrid-datepicker-year-container-hover-background-color: #393939;
+    }
+  }
+`;
+export const styles = [calendarStyles];
+//# sourceMappingURL=date-picker.style.js.map

package/date-picker.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.style.js","sourceRoot":"","sources":["../../../src/components/datepicker/date-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst calendarStyles = css`\n  :host {\n    font-family: var(--hybrid-datepicker-font-family);\n  }\n  .calendar-container {\n    z-index: 10000;\n    user-select: none;\n    padding: 5px;\n    width: 350px;\n    float: left;\n    text-align: center;\n    position: absolute;\n    background-color: var(--hybrid-datepicker-background-color);\n  }\n  hy-button {\n    --hybrid-button-border-top: 1px solid transparent;\n    --hybrid-button-border-bottom: 1px solid transparent;\n    --hybrid-button-border-left: 1px solid transparent;\n    --hybrid-button-border-right: 1px solid transparent;\n    --hybrid-button-background-color: var(--hybrid-datepicker-button-background-color);\n    --hybrid-button-text-color: var(--hybrid-datepicker-button-text-color);\n  }\n  .toggle-year-view,\n  .toggle-month-view {\n    --hybrid-button-font-weight: var(--hybrid-datepicker-toggle-month-year-font-weight);\n  }\n  .current-year-container {\n    display: inline-flex;\n    gap: 5px;\n  }\n  .year-icons-toggler {\n    display: none;\n    flex-direction: column;\n    line-height: 0;\n  }\n  .next-year,\n  .previous-year {\n    --hybrid-button-width: 10px;\n    --hybrid-button-height: 10px;\n    --hybrid-button-padding-x: 0px;\n    --hybrid-button-padding-y: 0px;\n    --hybrid-button-hover-border-color: transparent;\n    --hybrid-button-active-border-color: transparent;\n  }\n  .calendar-container-range {\n    width: 600px;\n  }\n\n  .header-next-button {\n    float: right;\n  }\n\n  .header-prev-button {\n    float: left;\n  }\n\n  .day-containers {\n    display: flex;\n    flex-flow: row;\n    width: 100%;\n  }\n  .days-container {\n    color: var(--hybrid-datepicker-day-container-color);\n    display: flex;\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .day-container,\n  .day-header-item {\n    width: 13%;\n    height: var(--hybrid-datepicker-day-container-height);\n    font-size: 13px;\n    margin: 2px;\n    cursor: pointer;\n    line-height: 2.5;\n  }\n\n  :host([size='small']) .day-container {\n    height: var(--hybrid-datepicker-small-day-container-height);\n  }\n  :host([size='large']) .day-container {\n    height: var(--hybrid-datepicker-large-day-container-height);\n  }\n\n  :not(.day-active).day-container:hover {\n    background-color: var(--hybrid-datepicker-day-container-hover-background-color);\n  }\n\n  .day-active,\n  .month-active,\n  .year-active {\n    background-color: var(--hybrid-datepicker-current-day-month-year-background-color);\n    color: var(--hybrid-datepicker-current-day-month-year-color);\n  }\n  .today {\n    position: relative;\n  }\n  :not(.day-active).today {\n    color: var(--hybrid-datepicker-today-color);\n  }\n  .current-year-container:hover > .year-icons-toggler {\n    display: inline-flex;\n  }\n  .today::after {\n    content: '';\n    display: block;\n    width: 4px;\n    height: 4px;\n    background-color: var(--hybrid-datepicker-today-underline-color);\n    position: absolute;\n    top: 75%;\n    right: 50%;\n    transform: translate(50%);\n  }\n  .day-header-item {\n    cursor: auto;\n  }\n  .day-invalid {\n    color: var(--hybrid-datepicker-day-invalid-color);\n  }\n  .day-invalid:hover {\n    background-color: var(--hybrid-datepicker-day-invalid-hover-background-color);\n  }\n  .year-month-header {\n    display: inline-block;\n    line-height: 2;\n  }\n\n  .months-container {\n    display: flex;\n    flex-grow: 1;\n    flex-wrap: wrap;\n    color: var(--hybrid-datepicker-month-container-color);\n  }\n\n  .month-container {\n    width: 33%;\n    line-height: var(--hybrid-datepicker-month-container-line-height);\n    cursor: pointer;\n    font-size: 13px;\n  }\n  :not(.month-active).month-container:hover {\n    background-color: var(--hybrid-datepicker-month-container-hover-background-color);\n  }\n\n  :host([size='small']) .month-container {\n    line-height: var(--hybrid-datepicker-small-month-container-line-height);\n  }\n  :host([size='large']) .month-container {\n    line-height: var(--hybrid-datepicker-large-month-container-line-height);\n  }\n\n  .years-container {\n    display: flex;\n    flex-grow: 1;\n    flex-wrap: wrap;\n    color: var(--hybrid-datepicker-year-container-color);\n  }\n\n  .year-container {\n    width: 33%;\n    line-height: var(--hybrid-datepicker-year-container-line-height);\n    cursor: pointer;\n    font-size: 13px;\n  }\n  :not(.year-active).year-container:hover {\n    background-color: var(--hybrid-datepicker-year-container-hover-background-color);\n  }\n\n  :host([size='small']) .year-container {\n    line-height: var(--hybrid-datepicker-small-year-container-line-height);\n  }\n  :host([size='large']) .year-container {\n    line-height: var(--hybrid-datepicker-large-year-container-line-height);\n  }\n  :host {\n    --hybrid-datepicker-font-family: IBM Plex Sans;\n    --hybrid-datepicker-background-color: #f9f9f9;\n    --hybrid-datepicker-toggle-month-year-font-weight: bold;\n    --hybrid-datepicker-button-background-color: #f9f9f9;\n    --hybrid-datepicker-button-text-color: #393939;\n\n    --hybrid-datepicker-year-container-line-height: 4.3;\n    --hybrid-datepicker-small-year-container-line-height: 3.3;\n    --hybrid-datepicker-large-year-container-line-height: 5.3;\n    --hybrid-datepicker-year-container-hover-background-color: #e4e4e4;\n    --hybrid-datepicker-month-container-line-height: 4.3;\n    --hybrid-datepicker-small-month-container-line-height: 3.3;\n    --hybrid-datepicker-large-month-container-line-height: 5.3;\n    --hybrid-datepicker-month-container-hover-background-color: #e4e4e4;\n    --hybrid-datepicker-day-container-height: 30px;\n    --hybrid-datepicker-day-container-color: #000000;\n    --hybrid-datepicker-month-container-color: #000000;\n    --hybrid-datepicker-year-container-color: #000000;\n    --hybrid-datepicker-small-day-container-height: 25px;\n    --hybrid-datepicker-large-day-container-height: 35px;\n    --hybrid-datepicker-day-container-hover-background-color: #e4e4e4;\n    --hybrid-datepicker-day-invalid-color: #9a9a9a;\n    --hybrid-datepicker-day-invalid-hover-background-color: #e6e6e6;\n    --hybrid-datepicker-current-day-month-year-background-color: #0f62fe;\n    --hybrid-datepicker-current-day-month-year-color: #ffffff;\n    --hybrid-datepicker-today-underline-color: #0f62fe;\n    --hybrid-datepicker-today-color: #0f62fe;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hybrid-datepicker-background-color: #000000;\n      --hybrid-datepicker-day-container-color: #ffffff;\n      --hybrid-datepicker-month-container-color: #ffffff;\n      --hybrid-datepicker-year-container-color: #ffffff;\n      --hybrid-datepicker-button-background-color: #000000;\n      --hybrid-datepicker-button-text-color: #ffffff;\n      --hybrid-datepicker-day-container-hover-background-color: #393939;\n      --hybrid-datepicker-day-invalid-hover-background-color: #393939;\n      --hybrid-datepicker-month-container-hover-background-color: #393939;\n      --hybrid-datepicker-year-container-hover-background-color: #393939;\n    }\n  }\n`;\nexport const styles = [calendarStyles];\n"]}

package/datepicker.types.d.ts

@@ -0,0 +1,39 @@
+export declare enum Mode {
+    Day = "day",
+    Month = "month",
+    Year = "year",
+    Decade = "decade"
+}
+export interface INavigationDate {
+    start: {
+        year: number;
+        month: number;
+        day: number;
+    };
+}
+export interface IDayPresentation {
+    date: number;
+    day: number;
+    dayString: string;
+    month: number;
+    valid: number;
+    year: number;
+    timestamp: number;
+}
+export interface IDayInfo {
+    dayIndex: number;
+    numberOfDays: number;
+    firstDay: number;
+    year: number;
+    month: number;
+    days: string[];
+}
+export interface DateRawObject {
+    curentYear: number;
+    currentMonth: number;
+    currentDay: number;
+    endYear: number;
+    endMonth: number;
+    endDay: number;
+}
+//# sourceMappingURL=datepicker.types.d.ts.map

package/datepicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.types.ts"],"names":[],"mappings":"AAAA,oBAAY,IAAI;IACd,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;CACH;AACD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AACD,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/datepicker.types.js

@@ -0,0 +1,8 @@
+export var Mode;
+(function (Mode) {
+    Mode["Day"] = "day";
+    Mode["Month"] = "month";
+    Mode["Year"] = "year";
+    Mode["Decade"] = "decade";
+})(Mode || (Mode = {}));
+//# sourceMappingURL=datepicker.types.js.map

package/datepicker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.types.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,IAKX;AALD,WAAY,IAAI;IACd,mBAAW,CAAA;IACX,uBAAe,CAAA;IACf,qBAAa,CAAA;IACb,yBAAiB,CAAA;AACnB,CAAC,EALW,IAAI,KAAJ,IAAI,QAKf","sourcesContent":["export enum Mode {\n  Day = 'day',\n  Month = 'month',\n  Year = 'year',\n  Decade = 'decade',\n}\n\nexport interface INavigationDate {\n  start: {\n    year: number;\n    month: number;\n    day: number;\n  };\n}\nexport interface IDayPresentation {\n  date: number;\n  day: number;\n  dayString: string;\n  month: number;\n  valid: number;\n  year: number;\n  timestamp: number;\n}\n\nexport interface IDayInfo {\n  dayIndex: number;\n  numberOfDays: number;\n  firstDay: number;\n  year: number;\n  month: number;\n  days: string[];\n}\nexport interface DateRawObject {\n  curentYear: number;\n  currentMonth: number;\n  currentDay: number;\n  endYear: number;\n  endMonth: number;\n  endDay: number;\n}\n"]}

package/demo/date-picker-demo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../date-picker.component';
+export declare class HyDatePickerDemoElement extends LitElement {
+    selectedLanguage: string;
+    _onLanguageSelected(event: any): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-date-picker-demo': HyDatePickerDemoElement;
+    }
+}
+//# sourceMappingURL=date-picker-demo.d.ts.map

package/demo/date-picker-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/demo/date-picker-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,0BAA0B,CAAC;AAElC,qBACa,uBAAwB,SAAQ,UAAU;IAErD,gBAAgB,SAAQ;IAGxB,mBAAmB,CAAC,KAAK,EAAE,GAAG;IAIrB,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}

package/demo/date-picker-demo.js

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../date-picker.component';
+let HyDatePickerDemoElement = class HyDatePickerDemoElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedLanguage = 'en';
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _onLanguageSelected(event) {
+        this.selectedLanguage = event.target.value;
+        // Émettre un événement "language-selected" avec la langue sélectionnée
+    }
+    render() {
+        return html `
+      <!-- <hy-datepicker></hy-datepicker> -->
+      <select @change=${this._onLanguageSelected}>
+        <option value="en" ?selected=${this.selectedLanguage === 'en'}>English</option>
+        <option value="fr" ?selected=${this.selectedLanguage === 'fr'}>Français</option>
+        <option value="es" ?selected=${this.selectedLanguage === 'es'}>Español</option>
+        <option value="zh" ?selected=${this.selectedLanguage === 'zh'}>中文</option>
+        <option value="ar" ?selected=${this.selectedLanguage === 'ar'}>العربية</option>
+      </select>
+      <h3>datepicker Default</h3>
+
+      <hy-datepicker
+        locale=${this.selectedLanguage}
+        fieldFormat="DD/MM/YYYY"
+        @date-change=${(e) => {
+            console.log('event ', e);
+        }}
+      ></hy-datepicker>
+      <br />
+      <h3>datepicker with init date</h3>
+
+      <hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" dateValue="20/11/2024"></hy-datepicker>
+      <br />
+      <h3>datepicker mm/dd/yy</h3>
+
+      <hy-datepicker locale=${this.selectedLanguage} fieldFormat="MM/DD/YYYY"></hy-datepicker>
+      <br />
+      <h3>datepicker small</h3>
+
+      <hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" size="small"></hy-datepicker>
+      <br />
+      <h3>datepicker large</h3>
+
+      <hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" size="large"></hy-datepicker>
+      <br />
+      <h3>datepicker with error</h3>
+
+      <hy-datepicker
+        locale=${this.selectedLanguage}
+        fieldFormat="DD/MM/YYYY"
+        state="error"
+        label="date label"
+        helper="date error"
+      ></hy-datepicker>
+      <br />
+      <h3>datepicker with warning</h3>
+
+      <hy-datepicker
+        locale=${this.selectedLanguage}
+        fieldFormat="DD/MM/YYYY"
+        state="warning"
+        label="labeled date"
+        helper="date helper"
+      ></hy-datepicker>
+      <br />
+      <h3>datepicker disabled</h3>
+
+      <hy-datepicker locale=${this.selectedLanguage} fieldFormat="DD/MM/YYYY" disabled=${true}></hy-datepicker>
+      <br />
+    `;
+    }
+};
+__decorate([
+    state()
+], HyDatePickerDemoElement.prototype, "selectedLanguage", void 0);
+HyDatePickerDemoElement = __decorate([
+    customElement('hy-date-picker-demo')
+], HyDatePickerDemoElement);
+export { HyDatePickerDemoElement };
+//# sourceMappingURL=date-picker-demo.js.map

package/demo/date-picker-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-demo.js","sourceRoot":"","sources":["../../../../src/components/datepicker/demo/date-picker-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAGlC,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,UAAU;IAAvD;;QAEE,qBAAgB,GAAG,IAAI,CAAC;IAqE1B,CAAC;IAnEC,8DAA8D;IAC9D,mBAAmB,CAAC,KAAU;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC3C,uEAAuE;IACzE,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,mBAAmB;uCACT,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;uCAC9B,IAAI,CAAC,gBAAgB,KAAK,IAAI;;;;;iBAKpD,IAAI,CAAC,gBAAgB;;uBAEf,CAAC,CAAc,EAAE,EAAE;YAChC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC3B,CAAC;;;;;8BAKqB,IAAI,CAAC,gBAAgB;;;;8BAIrB,IAAI,CAAC,gBAAgB;;;;8BAIrB,IAAI,CAAC,gBAAgB;;;;8BAIrB,IAAI,CAAC,gBAAgB;;;;;iBAKlC,IAAI,CAAC,gBAAgB;;;;;;;;;;iBAUrB,IAAI,CAAC,gBAAgB;;;;;;;;;8BASR,IAAI,CAAC,gBAAgB,sCAAsC,IAAI;;KAExF,CAAC;IACJ,CAAC;CACF,CAAA;AArEC;IADC,KAAK,EAAE;iEACgB;AAFb,uBAAuB;IADnC,aAAa,CAAC,qBAAqB,CAAC;GACxB,uBAAuB,CAuEnC;SAvEY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\nimport '../date-picker.component';\n\n@customElement('hy-date-picker-demo')\nexport class HyDatePickerDemoElement extends LitElement {\n  @state()\n  selectedLanguage = 'en';\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  _onLanguageSelected(event: any) {\n    this.selectedLanguage = event.target.value;\n    // Émettre un événement \"language-selected\" avec la langue sélectionnée\n  }\n  override render() {\n    return html`\n      <!-- <hy-datepicker></hy-datepicker> -->\n      <select @change=${this._onLanguageSelected}>\n        <option value=\"en\" ?selected=${this.selectedLanguage === 'en'}>English</option>\n        <option value=\"fr\" ?selected=${this.selectedLanguage === 'fr'}>Français</option>\n        <option value=\"es\" ?selected=${this.selectedLanguage === 'es'}>Español</option>\n        <option value=\"zh\" ?selected=${this.selectedLanguage === 'zh'}>中文</option>\n        <option value=\"ar\" ?selected=${this.selectedLanguage === 'ar'}>العربية</option>\n      </select>\n      <h3>datepicker Default</h3>\n\n      <hy-datepicker\n        locale=${this.selectedLanguage}\n        fieldFormat=\"DD/MM/YYYY\"\n        @date-change=${(e: CustomEvent) => {\n          console.log('event ', e);\n        }}\n      ></hy-datepicker>\n      <br />\n      <h3>datepicker with init date</h3>\n\n      <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" dateValue=\"20/11/2024\"></hy-datepicker>\n      <br />\n      <h3>datepicker mm/dd/yy</h3>\n\n      <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"MM/DD/YYYY\"></hy-datepicker>\n      <br />\n      <h3>datepicker small</h3>\n\n      <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" size=\"small\"></hy-datepicker>\n      <br />\n      <h3>datepicker large</h3>\n\n      <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" size=\"large\"></hy-datepicker>\n      <br />\n      <h3>datepicker with error</h3>\n\n      <hy-datepicker\n        locale=${this.selectedLanguage}\n        fieldFormat=\"DD/MM/YYYY\"\n        state=\"error\"\n        label=\"date label\"\n        helper=\"date error\"\n      ></hy-datepicker>\n      <br />\n      <h3>datepicker with warning</h3>\n\n      <hy-datepicker\n        locale=${this.selectedLanguage}\n        fieldFormat=\"DD/MM/YYYY\"\n        state=\"warning\"\n        label=\"labeled date\"\n        helper=\"date helper\"\n      ></hy-datepicker>\n      <br />\n      <h3>datepicker disabled</h3>\n\n      <hy-datepicker locale=${this.selectedLanguage} fieldFormat=\"DD/MM/YYYY\" disabled=${true}></hy-datepicker>\n      <br />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-date-picker-demo': HyDatePickerDemoElement;\n  }\n}\n"]}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/index.js

@@ -0,0 +1,2 @@
+export * from './date-picker.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/datepicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './date-picker.component.js';\n"]}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nuralyui/datepicker",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "dependencies": {
+        "dayjs": "^1.11.7"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

@@ -0,0 +1,3 @@
+import { HyDatePickerElement } from './date-picker.component.js';
+export declare const HyDatepicker: import("@lit-labs/react").ReactWebComponent<HyDatePickerElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAC/D,eAAO,MAAM,YAAY,sEAKvB,CAAC"}

package/react.js

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyDatePickerElement } from './date-picker.component.js';
+export const HyDatepicker = createComponent({
+    tagName: 'hy-datepicker',
+    elementClass: HyDatePickerElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/datepicker/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyDatePickerElement} from './date-picker.component.js';\nexport const HyDatepicker = createComponent({\n  tagName: 'hy-datepicker',\n  elementClass: HyDatePickerElement,\n  react: React,\n  events: {},\n});\n"]}

package/templates/days.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { DateRawObject, IDayPresentation, INavigationDate } from '../datepicker.types.js';
+export declare const renderDays: (weekdaysShort: string[], navigationDates: INavigationDate, selectDay: (date: IDayPresentation) => void, dateRawObject: DateRawObject, isRange: boolean, days: string[]) => TemplateResult;
+//# sourceMappingURL=days.template.d.ts.map

package/templates/days.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"days.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/days.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AAWxF,eAAO,MAAM,UAAU,kBACN,MAAM,EAAE,mBACN,eAAe,oBACd,gBAAgB,KAAK,IAAI,iBAC5B,aAAa,WACnB,OAAO,QACV,MAAM,EAAE,KACb,cAyBF,CAAC"}

package/templates/days.template.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import { todayIsTheDay } from '../core/day.helper.js';
+import { capitalizeFirstLetter } from '../core/string.helper.js';
+import { getMonthDetails } from '../core/month.helper.js';
+import dayjs from 'dayjs';
+import { classMap } from 'lit/directives/class-map.js';
+const today = dayjs();
+const currentYear = today.year();
+const currentDay = today.date();
+const currentMonth = today.month() + 1;
+export const renderDays = (weekdaysShort, navigationDates, selectDay, dateRawObject, isRange, days) => {
+    const daysPresentation = getMonthDetails(navigationDates.start.year, isRange ? navigationDates.start.month : navigationDates.start.month - 1, days);
+    const dayHeaderItem = (shortDay) => html `<div class="day-header-item">${capitalizeFirstLetter(shortDay)}</div>`;
+    const dayContainer = (day) => {
+        const active = todayIsTheDay(day, dateRawObject, isRange) && day.valid;
+        const isToday = currentYear == day.year && currentMonth == day.month + 1 && currentDay == day.date;
+        return html `<div
+      class="day-container ${classMap({ 'day-active': active, 'day-invalid': !day.valid, today: isToday })}"
+      @click=${() => selectDay(day)}
+    >
+      ${day.date}
+    </div>`;
+    };
+    return html `<div class="days-container">
+    ${weekdaysShort.map(dayHeaderItem)} ${daysPresentation === null || daysPresentation === void 0 ? void 0 : daysPresentation.map(dayContainer)}
+  </div>`;
+};
+//# sourceMappingURL=days.template.js.map

package/templates/days.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"days.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/days.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;AACtB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;AACjC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;AAChC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,aAAuB,EACvB,eAAgC,EAChC,SAA2C,EAC3C,aAA4B,EAC5B,OAAgB,EAChB,IAAc,EACE,EAAE;IAClB,MAAM,gBAAgB,GAAuB,eAAe,CAC1D,eAAe,CAAC,KAAK,CAAC,IAAI,EAC1B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,EACvE,IAAI,CACL,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAE,EAAE,CACzC,IAAI,CAAA,gCAAgC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAE9E,MAAM,YAAY,GAAG,CAAC,GAAqB,EAAE,EAAE;QAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC;QACvE,MAAM,OAAO,GAAG,WAAW,IAAI,GAAG,CAAC,IAAI,IAAI,YAAY,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;QAEnG,OAAO,IAAI,CAAA;6BACc,QAAQ,CAAC,EAAC,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC;eACzF,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC;;QAE3B,GAAG,CAAC,IAAI;WACL,CAAC;IACV,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;MACP,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,CAAC,YAAY,CAAC;SACpE,CAAC;AACV,CAAC,CAAC","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {DateRawObject, IDayPresentation, INavigationDate} from '../datepicker.types.js';\nimport {todayIsTheDay} from '../core/day.helper.js';\nimport {capitalizeFirstLetter} from '../core/string.helper.js';\nimport {getMonthDetails} from '../core/month.helper.js';\nimport dayjs from 'dayjs';\nimport {classMap} from 'lit/directives/class-map.js';\nconst today = dayjs();\nconst currentYear = today.year();\nconst currentDay = today.date();\nconst currentMonth = today.month() + 1;\n\nexport const renderDays = (\n  weekdaysShort: string[],\n  navigationDates: INavigationDate,\n  selectDay: (date: IDayPresentation) => void,\n  dateRawObject: DateRawObject,\n  isRange: boolean,\n  days: string[]\n): TemplateResult => {\n  const daysPresentation: IDayPresentation[] = getMonthDetails(\n    navigationDates.start.year,\n    isRange ? navigationDates.start.month : navigationDates.start.month - 1,\n    days\n  );\n\n  const dayHeaderItem = (shortDay: string) =>\n    html`<div class=\"day-header-item\">${capitalizeFirstLetter(shortDay)}</div>`;\n\n  const dayContainer = (day: IDayPresentation) => {\n    const active = todayIsTheDay(day, dateRawObject, isRange) && day.valid;\n    const isToday = currentYear == day.year && currentMonth == day.month + 1 && currentDay == day.date;\n\n    return html`<div\n      class=\"day-container ${classMap({'day-active': active, 'day-invalid': !day.valid, today: isToday})}\"\n      @click=${() => selectDay(day)}\n    >\n      ${day.date}\n    </div>`;\n  };\n\n  return html`<div class=\"days-container\">\n    ${weekdaysShort.map(dayHeaderItem)} ${daysPresentation?.map(dayContainer)}\n  </div>`;\n};\n"]}

package/templates/headers.template.d.ts

@@ -0,0 +1,2 @@
+export declare const renderDayHeaderTemplate: () => import("lit").TemplateResult<1>[];
+//# sourceMappingURL=headers.template.d.ts.map

package/templates/headers.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headers.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/headers.template.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yCAInC,CAAC"}

package/templates/headers.template.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const renderDayHeaderTemplate = () => {
+    return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map((shortDay) => html `<div class="day-header-item">${shortDay}</div>`);
+};
+//# sourceMappingURL=headers.template.js.map

package/templates/headers.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headers.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/headers.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,CAC1D,CAAC,QAAgB,EAAE,EAAE,CAAC,IAAI,CAAA,gCAAgC,QAAQ,QAAQ,CAC3E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {html} from 'lit';\n\nexport const renderDayHeaderTemplate = () => {\n  return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(\n    (shortDay: string) => html`<div class=\"day-header-item\">${shortDay}</div>`\n  );\n};\n"]}

package/templates/months.template.d.ts

@@ -0,0 +1,6 @@
+interface ClickHandler {
+    (index: number): void;
+}
+export declare const renderMonthsTemplate: (months: string[], currentMonth: number, clickHandler: ClickHandler) => import("lit").TemplateResult<1>;
+export {};
+//# sourceMappingURL=months.template.d.ts.map

package/templates/months.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"months.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/months.template.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,oBAAoB,WAAY,MAAM,EAAE,gBAAgB,MAAM,gBAAgB,YAAY,oCAQtG,CAAC"}

package/templates/months.template.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import { EMPTY_STRING } from '../constants.js';
+export const renderMonthsTemplate = (months, currentMonth, clickHandler) => {
+    const monthContainer = (month, index) => {
+        const active = currentMonth - 1 === index ? 'month-active' : EMPTY_STRING;
+        return html ` <div class="month-container ${active}" @click=${() => clickHandler(index)}>${month}</div> `;
+    };
+    return html ` <div class="months-container">${months.map(monthContainer)}</div> `;
+};
+//# sourceMappingURL=months.template.js.map

package/templates/months.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"months.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/months.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAM7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAgB,EAAE,YAAoB,EAAE,YAA0B,EAAE,EAAE;IACzG,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE;QACtD,MAAM,MAAM,GAAG,YAAY,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;QAE1E,OAAO,IAAI,CAAA,gCAAgC,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC;IAC3G,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA,kCAAkC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,SAAS,CAAC;AACnF,CAAC,CAAC","sourcesContent":["import {html} from 'lit';\nimport {EMPTY_STRING} from '../constants.js';\n\ninterface ClickHandler {\n  (index: number): void;\n}\n\nexport const renderMonthsTemplate = (months: string[], currentMonth: number, clickHandler: ClickHandler) => {\n  const monthContainer = (month: string, index: number) => {\n    const active = currentMonth - 1 === index ? 'month-active' : EMPTY_STRING;\n\n    return html` <div class=\"month-container ${active}\" @click=${() => clickHandler(index)}>${month}</div> `;\n  };\n\n  return html` <div class=\"months-container\">${months.map(monthContainer)}</div> `;\n};\n"]}

package/templates/years.template.d.ts

@@ -0,0 +1,6 @@
+interface ClickHandler {
+    (year: number): void;
+}
+export declare const renderYearsTemplate: (currentYear: number, clickHandler: ClickHandler) => import("lit").TemplateResult<1>;
+export {};
+//# sourceMappingURL=years.template.d.ts.map

package/templates/years.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"years.template.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/years.template.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,gBAAiB,MAAM,gBAAgB,YAAY,oCAUlF,CAAC"}

package/templates/years.template.js

@@ -0,0 +1,11 @@
+import { html } from 'lit';
+import { EMPTY_STRING } from '../constants.js';
+export const renderYearsTemplate = (currentYear, clickHandler) => {
+    const yearRange = Array.from({ length: 12 }, (_v, i) => i + (currentYear - 6));
+    const yearContainer = (year) => {
+        const active = currentYear === year ? 'year-active' : EMPTY_STRING;
+        return html ` <div class="year-container ${active}" @click=${() => clickHandler(year)}>${year}</div> `;
+    };
+    return html ` <div class="years-container">${yearRange.map(yearContainer)}</div> `;
+};
+//# sourceMappingURL=years.template.js.map

package/templates/years.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"years.template.js","sourceRoot":"","sources":["../../../../src/components/datepicker/templates/years.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAM7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,WAAmB,EAAE,YAA0B,EAAE,EAAE;IACrF,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,EAAE,EAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;QAEnE,OAAO,IAAI,CAAA,+BAA+B,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;IACxG,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA,iCAAiC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC;AACpF,CAAC,CAAC","sourcesContent":["import {html} from 'lit';\nimport {EMPTY_STRING} from '../constants.js';\n\ninterface ClickHandler {\n  (year: number): void;\n}\n\nexport const renderYearsTemplate = (currentYear: number, clickHandler: ClickHandler) => {\n  const yearRange = Array.from({length: 12}, (_v, i) => i + (currentYear - 6));\n\n  const yearContainer = (year: number) => {\n    const active = currentYear === year ? 'year-active' : EMPTY_STRING;\n\n    return html` <div class=\"year-container ${active}\" @click=${() => clickHandler(year)}>${year}</div> `;\n  };\n\n  return html` <div class=\"years-container\">${yearRange.map(yearContainer)}</div> `;\n};\n"]}

package/test/datepicker_test.d.ts

@@ -0,0 +1,2 @@
+import '../date-picker.component';
+//# sourceMappingURL=datepicker_test.d.ts.map

package/test/datepicker_test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker_test.d.ts","sourceRoot":"","sources":["../../../../src/components/datepicker/test/datepicker_test.ts"],"names":[],"mappings":"AACA,OAAO,0BAA0B,CAAC"}