q2-tecton-elements 1.17.1 → 1.19.0

package/dist/collection/components/q2-calendar/q2-month-picker.css

@@ -0,0 +1,130 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.month-container {
+  --comp-month-primary-bg: var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));
+  --comp-month-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));
+  --comp-month-secondary-bg: var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));
+  --comp-month-secondary-font-color: var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));
+}
+.month-container .navigation {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+.month-container .navigation .year-btn {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+.month-container .navigation .year-btn .year {
+  margin-right: 0.2rem;
+}
+.month-container .navigation .year-btn .year-icon {
+  --t-icon-stroke-width: 2px;
+  width: 16px;
+  height: 16px;
+  transition: all 0.3s ease-in-out;
+}
+.month-container .navigation .year-btn .year-icon.on {
+  transform: rotate(-180deg);
+}
+.month-container .navigation .month-controller {
+  display: flex;
+  align-items: center;
+}
+.month-container .month-list {
+  display: grid;
+  grid-template-columns: auto auto auto;
+}
+.month-container .month-list .month {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+.month-container .month-list .month .month-button {
+  border-radius: 50%;
+  aspect-ratio: 1;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.month-container .month-list .month .month-button:hover {
+  background-color: var(--comp-month-secondary-bg);
+  color: var(--comp-month-secondary-font-color);
+  cursor: pointer;
+}
+.month-container .month-list .month .month-button:active, .month-container .month-list .month .month-button.active {
+  background-color: var(--comp-month-primary-bg);
+  color: var(--comp-month-primary-font-color);
+}
+.month-container .today-label {
+  padding: 0.5rem 0;
+  color: var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))));
+}

package/dist/collection/components/q2-calendar/q2-month-picker.js

@@ -0,0 +1,242 @@
+import { h } from '@stencil/core';
+import { loc, overrideFocus } from 'src/utils';
+export class Q2MonthPicker {
+  constructor() {
+    this.scheduledAfterRender = [];
+    this.monthGrid = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [9, 10, 11],
+    ];
+    this.months = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ].map(mon => ({
+      label: loc(`tecton.element.calendar.months.${mon}`),
+      abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),
+    }));
+    this.onMonthSelection = (event) => {
+      var _a, _b;
+      const targetElement = event.target.closest('.month-button');
+      if ((_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.dataset) === null || _a === void 0 ? void 0 : _a.index) {
+        this.selectMonth(Number((_b = targetElement === null || targetElement === void 0 ? void 0 : targetElement.dataset) === null || _b === void 0 ? void 0 : _b.index));
+      }
+    };
+    this.onMonthKeydown = (event) => {
+      if (event.key === 'Escape' || event.key === 'Esc') {
+        this.toggleChange.emit({ close: true });
+        return;
+      }
+      const monthIndex = event.target.dataset.index;
+      if (!monthIndex)
+        return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectMonth(Number(monthIndex));
+      }
+      else {
+        const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);
+        this.focusMonth(nextMonthIndex);
+      }
+    };
+    this.moveMonth = (grid, index, event) => {
+      const rows = grid.length;
+      const cols = grid[0].length;
+      const row = Math.floor(index / cols);
+      const col = index % cols;
+      const current = [row, col];
+      if (event.key === 'ArrowUp') {
+        event.stopPropagation();
+        event.preventDefault();
+        return grid[Math.max(0, current[0] - 1)][current[1]];
+      }
+      else if (event.key === 'ArrowDown') {
+        event.stopPropagation();
+        event.preventDefault();
+        return grid[Math.min(rows - 1, current[0] + 1)][current[1]];
+      }
+      else if (event.key === 'ArrowLeft') {
+        event.stopPropagation();
+        event.preventDefault();
+        return Math.max(0, index - 1);
+      }
+      else if (event.key === 'ArrowRight') {
+        event.stopPropagation();
+        event.preventDefault();
+        return Math.min(this.months.length - 1, index + 1);
+      }
+      else {
+        return grid[current[0]][current[1]];
+      }
+    };
+    this.focusMonth = (index) => {
+      const nextMonth = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${index}"]`);
+      if (nextMonth) {
+        this.focusedIndex = index;
+        nextMonth.focus();
+      }
+    };
+    this.selectMonth = (index) => {
+      var _a, _b, _c;
+      this.selectedIndex = index;
+      this.focusedIndex = index;
+      const nextMonth = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${index}"]`);
+      (_a = this.hostElement.shadowRoot
+        .querySelectorAll(`.month-button`)) === null || _a === void 0 ? void 0 : _a.forEach(el => el.classList.remove('active'));
+      nextMonth === null || nextMonth === void 0 ? void 0 : nextMonth.classList.add('active');
+      nextMonth === null || nextMonth === void 0 ? void 0 : nextMonth.focus();
+      const value = {
+        view: 'day',
+        monthIndex: index,
+        selectedYear: this.year,
+      };
+      (_c = (_b = this.hostElement).onchange) === null || _c === void 0 ? void 0 : _c.call(_b, new CustomEvent('click', {
+        bubbles: true,
+        detail: value,
+      }));
+      this.viewChange.emit(value);
+    };
+    this.selectYear = (year) => {
+      this.year = Math.max(1970, year);
+    };
+    this.year = Number(new Date().toLocaleString('en-US', { year: 'numeric' }));
+    this.disabledMonths = undefined;
+    this.today = undefined;
+    this.selectedIndex = 0;
+    this.focusedIndex = 0;
+    this.showYearLayer = false;
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this.scheduledAfterRender) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  render() {
+    return (h("div", { class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { class: "navigation" }, h("q2-btn", { class: "year-btn", onClick: () => this.viewChange.emit({
+        view: 'year',
+        selectedYear: this.year,
+      }) }, h("span", { class: "year" }, this.year), h("q2-icon", { class: "year-icon off", type: "chevron-down" })), h("div", { class: "month-controller" }, h("div", { class: "cal-year-prev-next" }, h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { type: "arrow-left" })), h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { type: "arrow-right" }))))), h("div", { class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+  }
+  static get is() { return "q2-month-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["q2-month-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["q2-month-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "year": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "year",
+        "reflect": true,
+        "defaultValue": "Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    )"
+      },
+      "disabledMonths": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "today": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "today",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedIndex": {},
+      "focusedIndex": {},
+      "showYearLayer": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "viewChange",
+        "name": "viewChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "toggleChange",
+        "name": "toggleChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/q2-calendar/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {