q2-tecton-elements 1.18.0 → 1.19.1

package/dist/collection/components/q2-calendar/q2-month-picker.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 {

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

@@ -1,11 +1,7 @@
-import { Component, Prop, Element, h, State, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { loc, overrideFocus } from 'src/utils';
 export class Q2MonthPicker {
   constructor() {
-    this.year = Number(new Date().toLocaleString('en-US', { year: 'numeric' }));
-    this.selectedIndex = 0;
-    this.focusedIndex = 0;
-    this.showYearLayer = false;
     this.scheduledAfterRender = [];
     this.monthGrid = [
       [0, 1, 2],
@@ -115,6 +111,12 @@ export class Q2MonthPicker {
     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;
@@ -125,122 +127,116 @@ export class Q2MonthPicker {
     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))));
+    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": ""
+  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    )"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "toggleChange",
-      "name": "toggleChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "disabledMonths": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "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 {