@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.d.ts

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit';
+import { Cre8Element } from '../../cre8-element';
+import '../../button/button';
+import '../../icon/icon';
+export declare class Cre8CalendarMonthModal extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    monthNames: Array<string>;
+    currentMonth: number;
+    constructor();
+    protected firstUpdated(): void;
+    private focusOnCurrentMonth;
+    private emitMonth;
+    getMonthListItems(): TemplateResult[];
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-calendar-month-modal': Cre8CalendarMonthModal;
+    }
+}
+export default Cre8CalendarMonthModal;
+//# sourceMappingURL=calendar-month-modal.d.ts.map

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-modal.d.ts","sourceRoot":"","sources":["../../../../components/date-picker/calendar-month-modal/calendar-month-modal.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAU,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AAEzB,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,MAAM,CAAC,MAAM,4BAAY;IAGhB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAGjC,YAAY,EAAE,MAAM,CAAC;;IAoBrB,SAAS,CAAC,YAAY,IAAI,IAAI;YAIhB,mBAAmB;IASjC,OAAO,CAAC,SAAS;IASjB,iBAAiB,IAAI,cAAc,EAAE;IASvC,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF;AAED,eAAe,sBAAsB,CAAC"}

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.js

@@ -0,0 +1,76 @@
+/* eslint-disable lit/no-template-arrow */
+/* eslint-disable indent */
+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;
+};
+/* TODO: remove eslint disable on no-template-arrow */
+import { html, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Cre8Element } from '../../cre8-element';
+import styles from './calendar-month-modal.styles.js';
+import '../../button/button';
+import '../../icon/icon';
+export class Cre8CalendarMonthModal extends Cre8Element {
+    constructor() {
+        super();
+        this.monthNames = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ];
+    }
+    firstUpdated() {
+        this.focusOnCurrentMonth();
+    }
+    async focusOnCurrentMonth() {
+        await this.updateComplete;
+        const currentMonthButton = this.shadowRoot?.querySelector('li[data-current-month]').children[0].shadowRoot?.querySelector('button');
+        currentMonthButton.focus();
+    }
+    emitMonth(month) {
+        const event = new CustomEvent('changeMonth', {
+            detail: {
+                month,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    getMonthListItems() {
+        return this.monthNames.map((month, index) => html ` <li ?data-current-month="${index === this.currentMonth}" >
+          <cre8-button text="${month}" variant="tertiary" size="sm"
+          @click="${() => this.emitMonth(index)}"></cre8-button>
+        </li>`);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-calendar-month-modal', {});
+        return html ` <div class="${componentClassNames}">
+      <ol aria-label="choose a month">
+        ${this.getMonthListItems()}
+      </ol>
+    </div> `;
+    }
+}
+Cre8CalendarMonthModal.styles = [styles];
+__decorate([
+    state()
+], Cre8CalendarMonthModal.prototype, "monthNames", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8CalendarMonthModal.prototype, "currentMonth", void 0);
+if (customElements.get('cre8-calendar-month-modal') === undefined) {
+    customElements.define('cre8-calendar-month-modal', Cre8CalendarMonthModal);
+}
+export default Cre8CalendarMonthModal;
+//# sourceMappingURL=calendar-month-modal.js.map

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-modal.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-month-modal/calendar-month-modal.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2BAA2B;;;;;;;AAE3B,sDAAsD;AACtD,OAAO,EAAkB,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,OAAO,sBAAuB,SAAQ,WAAW;IASnD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,UAAU,GAAG;YAChB,SAAS;YACT,UAAU;YACV,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACN,MAAM;YACN,QAAQ;YACR,WAAW;YACX,SAAS;YACT,UAAU;YACV,UAAU;SACX,CAAC;IACJ,CAAC;IAES,YAAY;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,mBAAmB;QAC/B,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACvD,wBAAwB,CACzB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,aAAa,CAAoB,QAAQ,CAAC,CAAC;QACrE,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEO,SAAS,CAAC,KAAa;QAC7B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC3C,MAAM,EAAE;gBACN,KAAK;aACN;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CACxB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA,6BAA6B,KAAK,KAAK,IAAI,CAAC,YAAY;+BACvD,KAAK;oBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;cACjC,CACP,CAAC;IACJ,CAAC;IAEH,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAC;QAExF,OAAO,IAAI,CAAA,gBAAgB,mBAAmB;;UAExC,IAAI,CAAC,iBAAiB,EAAE;;YAEtB,CAAC;IACX,CAAC;;AAjEM,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGhB;IAAR,KAAK,EAAE;0DAA2B;AAGjC;IADD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACnB;AA8DzB,IAAI,cAAc,CAAC,GAAG,CAAC,2BAA2B,CAAC,KAAK,SAAS,EAAE,CAAC;IAClE,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAC;AAC7E,CAAC;AAQD,eAAe,sBAAsB,CAAC","sourcesContent":["/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\n/* TODO: remove eslint disable on no-template-arrow */\nimport { TemplateResult, html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../../cre8-element';\nimport styles from './calendar-month-modal.styles.js';\nimport '../../button/button';\nimport '../../icon/icon';\n\nexport class Cre8CalendarMonthModal extends Cre8Element {\n  static styles = [styles];\n\n\n  @state() monthNames: Array<string>;\n\n  @property({ reflect: true, type: Number })\n    currentMonth: number;\n\n    constructor() {\n      super();\n      this.monthNames = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n      ];\n    }\n\n    protected firstUpdated(): void {\n        this.focusOnCurrentMonth();\n    }\n\n    private async focusOnCurrentMonth(): Promise<void> {\n      await this.updateComplete;\n\n      const currentMonthButton = this.shadowRoot?.querySelector<HTMLElement>(\n        'li[data-current-month]'\n      ).children[0].shadowRoot?.querySelector<HTMLButtonElement>('button');\n      currentMonthButton.focus();\n    }\n\n    private emitMonth(month: number): void {\n      const event = new CustomEvent('changeMonth', {\n        detail: {\n          month,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n\n    getMonthListItems(): TemplateResult[] {\n      return this.monthNames.map(\n        (month, index) => html` <li ?data-current-month=\"${index === this.currentMonth}\" >\n          <cre8-button text=\"${month}\" variant=\"tertiary\" size=\"sm\"\n          @click=\"${() => this.emitMonth(index)}\"></cre8-button>\n        </li>`\n      );\n    }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-calendar-month-modal', {});\n\n    return html` <div class=\"${componentClassNames}\">\n      <ol aria-label=\"choose a month\">\n        ${this.getMonthListItems()}\n      </ol>\n    </div> `;\n  }\n}\n\nif (customElements.get('cre8-calendar-month-modal') === undefined) {\n  customElements.define('cre8-calendar-month-modal', Cre8CalendarMonthModal);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-calendar-month-modal': Cre8CalendarMonthModal;\n  }\n}\n\nexport default Cre8CalendarMonthModal;\n"]}

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=calendar-month-modal.styles.d.ts.map

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-modal.styles.d.ts","sourceRoot":"","sources":["../../../../components/date-picker/calendar-month-modal/calendar-month-modal.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA8lBV,CAAC;AACH,eAAe,MAAM,CAAC"}