@exmg/exm-date-picker 1.2.12

package/dist/exm-date-picker-input.js

@@ -0,0 +1,23 @@
+import { __decorate } from 'tslib';
+import { customElement } from 'lit/decorators/custom-element.js';
+import '@material/web/progress/circular-progress.js';
+import { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
+import { style } from './styles/exm-date-picker-input-styles-css.js';
+
+/**
+ * exm-date-picker-input
+ *
+ * Material 3 styled date picker with input, form associated.
+ *
+ * @customElement exm-date-picker-input
+ * @extends ExmDatePickerInputBase
+ */
+let ExmDatePickerInput = class ExmDatePickerInput extends ExmDatePickerInputBase {
+};
+ExmDatePickerInput.styles = [style];
+ExmDatePickerInput = __decorate([
+    customElement('exm-date-picker-input')
+], ExmDatePickerInput);
+
+export { ExmDatePickerInput };
+//# sourceMappingURL=exm-date-picker-input.js.map

package/dist/exm-date-picker-year-grid.d.ts

@@ -0,0 +1,14 @@
+import '@material/web/button/text-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare class ExmDatePickerYearGrid extends ExmgElement {
+    year: any;
+    displayYear: any;
+    min?: number;
+    max?: number;
+    currentYear: any;
+    static styles: import("lit").CSSResult[];
+    private get years();
+    private isYearDisabled;
+    private selectYear;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/exm-date-picker-year-grid.js

@@ -0,0 +1,76 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { style } from './styles/exm-date-picker-year-grid-styles-css.js';
+import { property, state, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '@material/web/button/text-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { DateTime } from 'luxon';
+
+let ExmDatePickerYearGrid = class ExmDatePickerYearGrid extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.year = DateTime.now().year;
+        this.displayYear = this.year;
+        this.currentYear = DateTime.now().year;
+    }
+    get years() {
+        const start = Math.floor(this.displayYear / 24) * 24;
+        return Array.from({ length: 24 }, (_, i) => start + i);
+    }
+    isYearDisabled(year) {
+        if (this.min && year < DateTime.fromMillis(this.min).year) {
+            return true;
+        }
+        if (this.max && year > DateTime.fromMillis(this.max).year) {
+            return true;
+        }
+        return false;
+    }
+    selectYear(year) {
+        if (this.isYearDisabled(year)) {
+            return;
+        }
+        this.fire('year-change', year);
+    }
+    render() {
+        return html `
+      <div class="grid">
+        ${this.years.map((year) => html `
+            <md-text-button
+              class=${classMap({
+            selected: year === this.year,
+            current: year === this.currentYear,
+        })}
+              ?disabled=${this.isYearDisabled(year)}
+              @click=${() => this.selectYear(year)}
+            >
+              <span class="year">${year}</span>
+            </md-text-button>
+          `)}
+      </div>
+    `;
+    }
+};
+ExmDatePickerYearGrid.styles = [style];
+__decorate([
+    property({ type: Number })
+], ExmDatePickerYearGrid.prototype, "year", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerYearGrid.prototype, "displayYear", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerYearGrid.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerYearGrid.prototype, "max", void 0);
+__decorate([
+    state()
+], ExmDatePickerYearGrid.prototype, "currentYear", void 0);
+ExmDatePickerYearGrid = __decorate([
+    customElement('exm-date-picker-year-grid')
+], ExmDatePickerYearGrid);
+
+export { ExmDatePickerYearGrid };
+//# sourceMappingURL=exm-date-picker-year-grid.js.map

package/dist/exm-date-picker.d.ts

@@ -0,0 +1,18 @@
+import '@material/web/progress/circular-progress.js';
+import { ExmDatePickerBase } from './exm-date-picker-base.js';
+/**
+ * exm-date-picker
+ *
+ * Material 3 styled date picker component.
+ *
+ * @customElement exm-date-picker
+ * @extends ExmDatePickerBase
+ */
+export declare class ExmDatePicker extends ExmDatePickerBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-date-picker': ExmDatePicker;
+    }
+}

package/dist/exm-date-picker.js

@@ -0,0 +1,23 @@
+import { __decorate } from 'tslib';
+import { customElement } from 'lit/decorators/custom-element.js';
+import '@material/web/progress/circular-progress.js';
+import { style } from './styles/exm-date-picker-styles-css.js';
+import { ExmDatePickerBase } from './exm-date-picker-base.js';
+
+/**
+ * exm-date-picker
+ *
+ * Material 3 styled date picker component.
+ *
+ * @customElement exm-date-picker
+ * @extends ExmDatePickerBase
+ */
+let ExmDatePicker = class ExmDatePicker extends ExmDatePickerBase {
+};
+ExmDatePicker.styles = [style];
+ExmDatePicker = __decorate([
+    customElement('exm-date-picker')
+], ExmDatePicker);
+
+export { ExmDatePicker };
+//# sourceMappingURL=exm-date-picker.js.map

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { ExmDatePicker } from './exm-date-picker.js';
+export { ExmDatePickerBase } from './exm-date-picker-base.js';
+export { ExmDatePickerInput } from './exm-date-picker-input.js';
+export { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
+export { ExmDatePickerYearGrid } from './exm-date-picker-year-grid.js';
+export { style as datePickerInputStyles } from './styles/exm-date-picker-input-styles-css.js';
+export { style as datePickerYearGridStyles } from './styles/exm-date-picker-year-grid-styles-css.js';
+export { style as datePickerStyles } from './styles/exm-date-picker-styles-css.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+export { ExmDatePicker } from './exm-date-picker.js';
+export { ExmDatePickerBase } from './exm-date-picker-base.js';
+export { ExmDatePickerInput } from './exm-date-picker-input.js';
+export { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
+export { ExmDatePickerYearGrid } from './exm-date-picker-year-grid.js';
+export { style as datePickerInputStyles } from './styles/exm-date-picker-input-styles-css.js';
+export { style as datePickerYearGridStyles } from './styles/exm-date-picker-year-grid-styles-css.js';
+export { style as datePickerStyles } from './styles/exm-date-picker-styles-css.js';
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-date-picker-input-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-date-picker-input-styles-css.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+const style = css `
+  :host {
+    --md-menu-container-shape: 1rem;
+    --md-menu-container-elevation: 0;
+    --md-menu-top-space: 1.25rem;
+    --md-menu-bottom-space: 0.75rem;
+    --exm-date-picker-inline-padding: 0.75rem;
+
+    display: block;
+    width: 100%;
+    padding-inline: 0.75rem;
+  }
+
+  md-outlined-text-field {
+    width: 100%;
+  }
+
+  .icon {
+    cursor: pointer;
+  }
+`;
+
+export { style };
+//# sourceMappingURL=exm-date-picker-input-styles-css.js.map

package/dist/styles/exm-date-picker-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-date-picker-styles-css.js

@@ -0,0 +1,125 @@
+import { css } from 'lit';
+
+const style = css `
+  :host {
+    display: block;
+    padding-inline: var(--exm-date-picker-inline-padding, 0);
+  }
+
+  calendar-month {
+    width: calc(40px * 7);
+    margin: 0 auto;
+  }
+
+  .year,
+  .arrow {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .heading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--md-sys-color-on-surface);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    text-transform: uppercase;
+  }
+
+  .month-year {
+    flex: 1;
+    margin-inline-start: 48px;
+    text-align: center;
+  }
+
+  calendar-month::part(heading) {
+    display: none;
+  }
+
+  calendar-month::part(day) {
+    color: var(--md-sys-color-on-surface-variant);
+    font-weight: bold;
+  }
+
+  calendar-month::part(button) {
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--md-sys-color-on-surface);
+    font-weight: 400;
+  }
+
+  calendar-month::part(button):hover,
+  calendar-month::part(button):focus-visible {
+    background: var(--md-sys-color-surface-container-highest);
+  }
+
+  calendar-month::part(button):focus-visible {
+    outline: none;
+  }
+
+  calendar-month::part(today) {
+    color: var(--md-sys-color-on-surface);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  calendar-month::part(selected) {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border-color: transparent;
+  }
+
+  calendar-month::part(selected):hover {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+  }
+
+  calendar-month::part(today selected) {
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
+  }
+
+  calendar-month::part(outside) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  calendar-date::part(button) {
+    padding: 0.5rem;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  calendar-date::part(button):hover {
+    background: var(--md-sys-color-surface-container-highest);
+  }
+
+  calendar-date::part(header) {
+    justify-content: flex-start;
+  }
+
+  calendar-date::part(heading) {
+    order: 1;
+  }
+
+  calendar-date::part(previous) {
+    order: 2;
+    margin-inline-start: auto;
+  }
+
+  calendar-date::part(next) {
+    order: 3;
+  }
+
+  .actions {
+    text-align: end;
+  }
+`;
+
+export { style };
+//# sourceMappingURL=exm-date-picker-styles-css.js.map

package/dist/styles/exm-date-picker-year-grid-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-date-picker-year-grid-styles-css.js

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+
+const style = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px 0;
+  }
+
+  md-text-button.selected {
+    background: var(--md-sys-color-primary);
+    --md-text-button-label-text-color: var(--md-sys-color-on-primary);
+
+    .year {
+      color: var(--md-sys-color-on-primary);
+    }
+  }
+
+  md-text-button.current {
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  .year {
+    color: var(--md-sys-color-on-surface);
+  }
+`;
+
+export { style };
+//# sourceMappingURL=exm-date-picker-year-grid-styles-css.js.map

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@exmg/exm-date-picker",
+  "version": "1.2.12",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-date-picker.js": "./dist/exm-date-picker.js",
+    "./exm-date-picker-input.js": "./dist/exm-date-picker-input.js",
+    "./exm-date-picker-base.js": "./dist/exm-date-picker-base.js",
+    "./exm-date-picker-input-base.js": "./dist/exm-date-picker-input-base.js"
+  },
+  "dependencies": {
+    "@material/web": "^2.2.0",
+    "cally": "^0.9.2",
+    "luxon": "^3.7.2"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "button"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-date-picker"
+  },
+  "license": "MIT",
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "33afcd441a5bccd35e17e1d6a87bc2dd56a39d38"
+}