@getflip/swirl-components 0.100.0 → 0.100.2

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-09T11:04:28",
+  "timestamp": "2023-10-10T13:16:21",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",

package/dist/cjs/swirl-accordion-item.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-506fe4ea.js');
 const index$1 = require('./index-2ddd0598.js');
 const v4 = require('./v4-8e8d6fbc.js');
 
-const swirlAccordionItemCss = ":host{display:block}:host *{box-sizing:border-box}:host(:last-child) .accordion-item{border-bottom:0.0625rem solid var(--s-border-default)}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--s-surface-hovered)}.accordion-item__toggle:active{background-color:var(--s-surface-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--s-surface-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}";
+const swirlAccordionItemCss = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--s-surface-hovered)}.accordion-item__toggle:active{background-color:var(--s-surface-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--s-surface-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}";
 
 const SwirlAccordionItem = class {
   constructor(hostRef) {

package/dist/cjs/swirl-accordion.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-506fe4ea.js');
 
-const swirlAccordionCss = ":host{display:block}:host *{box-sizing:border-box}";
+const swirlAccordionCss = ":host{display:block;border-bottom:0.0625rem solid var(--s-border-default)}:host *{box-sizing:border-box}";
 
 const SwirlAccordion = class {
   constructor(hostRef) {

package/dist/cjs/swirl-app-layout_6.cjs.entry.js

@@ -317,6 +317,9 @@ const SwirlResourceList = class {
     this.setItemAllowDragState();
     this.setupDragDrop();
   }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
   disconnectedCallback() {
     this.sortable?.destroy();
     this.observer?.disconnect();
@@ -325,7 +328,6 @@ const SwirlResourceList = class {
     this.observer = new MutationObserver(() => {
       this.collectItems();
       this.setItemAllowDragState();
-      this.setupDragDrop();
     });
     this.observer.observe(this.el, {
       childList: true,

package/dist/cjs/wc-datepicker.cjs.entry.js

@@ -45,7 +45,7 @@ function getDaysOfMonth(date, padded, firstDayOfWeek) {
   return [...leftPaddingDays, ...days, ...rightPaddingDays];
 }
 function getFirstOfMonth(date) {
-  const firstOfMonth = removeTimezoneOffset(new Date(`${getYear(date)}-${String(getMonth(date)).padStart(2, '0')}-01`));
+  const firstOfMonth = removeTimezoneOffset(new Date(`${String(getYear(date)).padStart(4, '0')}-${String(getMonth(date)).padStart(2, '0')}-01`));
   return firstOfMonth;
 }
 function getISODateString(date) {
@@ -216,7 +216,20 @@ const WCDatepicker = class {
       this.updateCurrentDate(date);
     };
     this.onYearSelect = (event) => {
-      const year = +event.target.value;
+      let year = +event.target.value;
+      const input = event.target;
+      if (isNaN(year)) {
+        year = new Date().getFullYear();
+        input.value = String(year);
+      }
+      else if (year < 0) {
+        year = 0;
+        input.value = String(year);
+      }
+      else if (year > 9999) {
+        year = 9999;
+        input.value = String(year);
+      }
       const date = new Date(this.currentDate);
       date.setFullYear(year);
       this.updateCurrentDate(date);
@@ -355,6 +368,9 @@ const WCDatepicker = class {
   updateCurrentDate(date, moveFocus) {
     const month = date.getMonth();
     const year = date.getFullYear();
+    if (year > 9999 || year < 0) {
+      return;
+    }
     const monthChanged = month !== this.currentDate.getMonth() ||
       year !== this.currentDate.getFullYear();
     if (monthChanged) {
@@ -403,7 +419,7 @@ const WCDatepicker = class {
     return (index.h(index.Host, null, index.h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
         [this.getClassName()]: true,
         [`${this.getClassName()}--disabled`]: this.disabled
-      }, role: "group" }, index.h("div", { class: this.getClassName('header') }, index.h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (index.h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "11 17 6 12 11 7" }), index.h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "15 18 9 12 15 6" })))), index.h("span", { class: this.getClassName('current-month') }, index.h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index$1) => (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1 }, month)))), index.h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "13 17 18 12 13 7" }), index.h("polyline", { points: "6 17 11 12 6 7" }))))), index.h("div", { class: this.getClassName('body') }, index.h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, index.h("thead", { class: this.getClassName('calendar-header') }, index.h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (index.h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, index.h("span", null, weekday[0])))))), index.h("tbody", null, this.getCalendarRows().map((calendarRow) => {
+      }, role: "group" }, index.h("div", { class: this.getClassName('header') }, index.h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (index.h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "11 17 6 12 11 7" }), index.h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "15 18 9 12 15 6" })))), index.h("span", { class: this.getClassName('current-month') }, index.h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index$1) => (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1 }, month)))), index.h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "13 17 18 12 13 7" }), index.h("polyline", { points: "6 17 11 12 6 7" }))))), index.h("div", { class: this.getClassName('body') }, index.h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, index.h("thead", { class: this.getClassName('calendar-header') }, index.h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (index.h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, index.h("span", null, weekday[0])))))), index.h("tbody", null, this.getCalendarRows().map((calendarRow) => {
       const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
       return (index.h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
         var _a, _b, _c, _d, _e;