@3t-transform/threeteeui 0.0.16 → 0.0.18

package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js

@@ -1,109 +1,109 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Form',
-  component: 'tttx-form',
-  parameters: {
-    actions: {
-      handles: ['dataSubmitted', 'dataChanged'],
-    },
-  },
-  decorators: [withActions],
-};
-const formSchema = {
-  properties: {
-    title: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Mr, Mrs, Dr, Hon Rev',
-        label: 'Title',
-      },
-    },
-    forename: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'John',
-        label: 'Forename',
-        validation: {
-          required: {
-            message: 'Please enter your forename',
-          },
-        },
-      },
-    },
-    surname: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Doe',
-        label: 'Surname',
-        validation: {
-          required: {
-            message: 'Please enter your surname',
-          },
-        },
-      },
-    },
-    postcode: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'AB10',
-        label: 'Start of postcode',
-        validation: {
-          required: {
-            message: 'Please enter the beginning of your postcode',
-          },
-          pattern: {
-            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
-            message: 'Please enter the first half of your postcode. EG: ZZ99',
-          },
-          maxlength: 4,
-        },
-      },
-    },
-    age: {
-      type: 'number',
-      format: 'number',
-      form: {
-        type: 'number',
-        placeholder: '',
-        label: 'Age',
-        validation: {
-          required: {
-            message: 'Please enter your age',
-          },
-          badInput: {
-            message: 'Please enter a number',
-          },
-        },
-      },
-    },
-    dob: {
-      type: 'string',
-      format: 'date-time',
-      form: {
-        type: 'date',
-        placeholder: '',
-        label: 'Date of birth',
-        validation: {
-          required: {
-            message: 'Please enter your date of birth',
-          },
-          minmax: {
-            min: '1900-01-01',
-            max: '2100-12-31',
-            message: 'Please enter a date between 1900 and 2100',
-          },
-        },
-      },
-    },
-  },
-};
-const jsonFormSchema = JSON.stringify(formSchema);
-export const ExampleFormFromJSON = () => `<tttx-form formSchema='${jsonFormSchema}'></tttx-form>`;
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Form',
+  component: 'tttx-form',
+  parameters: {
+    actions: {
+      handles: ['dataSubmitted', 'dataChanged'],
+    },
+  },
+  decorators: [withActions],
+};
+const formSchema = {
+  properties: {
+    title: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Mr, Mrs, Dr, Hon Rev',
+        label: 'Title',
+      },
+    },
+    forename: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'John',
+        label: 'Forename',
+        validation: {
+          required: {
+            message: 'Please enter your forename',
+          },
+        },
+      },
+    },
+    surname: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Doe',
+        label: 'Surname',
+        validation: {
+          required: {
+            message: 'Please enter your surname',
+          },
+        },
+      },
+    },
+    postcode: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'AB10',
+        label: 'Start of postcode',
+        validation: {
+          required: {
+            message: 'Please enter the beginning of your postcode',
+          },
+          pattern: {
+            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
+            message: 'Please enter the first half of your postcode. EG: ZZ99',
+          },
+          maxlength: 4,
+        },
+      },
+    },
+    age: {
+      type: 'number',
+      format: 'number',
+      form: {
+        type: 'number',
+        placeholder: '',
+        label: 'Age',
+        validation: {
+          required: {
+            message: 'Please enter your age',
+          },
+          badInput: {
+            message: 'Please enter a number',
+          },
+        },
+      },
+    },
+    dob: {
+      type: 'string',
+      format: 'date-time',
+      form: {
+        type: 'date',
+        placeholder: '',
+        label: 'Date of birth',
+        validation: {
+          required: {
+            message: 'Please enter your date of birth',
+          },
+          minmax: {
+            min: '1900-01-01',
+            max: '2100-12-31',
+            message: 'Please enter a date between 1900 and 2100',
+          },
+        },
+      },
+    },
+  },
+};
+const jsonFormSchema = JSON.stringify(formSchema);
+export const ExampleFormFromJSON = () => `<tttx-form formSchema='${jsonFormSchema}'></tttx-form>`;

package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css

@@ -0,0 +1,93 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+:host {
+  display: block;
+  --border-radius: 4px;
+  position: relative;
+}
+
+.calcontainer {
+  -webkit-perspective: 500px;
+  perspective: 500px;
+}
+
+.lefty {
+  float: left;
+}
+
+.righty {
+  float: right;
+}
+
+.calendar {
+  display: none;
+  position: absolute;
+  box-sizing: border-box;
+  width: 312px;
+  height: 332px;
+  background-color: white;
+  padding: 16px;
+  box-shadow: 0px 1px 5px rgba(17, 17, 17, 0.3);
+  border-radius: var(--border-radius);
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.date-display {
+  margin-top: 8px;
+}
+
+.calendar-header select {
+  border: none;
+  padding: 5px;
+}
+
+.calendar-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.calendar-table th {
+  text-align: center;
+  padding: 4px;
+  text-transform: uppercase;
+  font-size: 14px;
+  color: #757575;
+  border-bottom: 1px solid #d5d5d5;
+  margin-bottom: 8px;
+}
+
+.calendar .calendar-table td {
+  padding: 0;
+  margin: 0;
+  width: 14.2%;
+  text-align: center;
+  height: 36px;
+  line-height: 36px;
+}
+
+.calendar .calendar-table td span:hover {
+  background-color: #f0f0f0;
+}
+
+.calendar .calendar-table td span {
+  display: block;
+  text-align: center;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: var(--border-radius);
+}
+
+.calendar-visible {
+  display: block;
+}
+
+.calendar-table thead tr {
+  border-bottom: 1px solid #d5d5d5;
+}

package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js

@@ -0,0 +1,174 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from '@stencil/core';
+export class TttxInputCalendar {
+  constructor() {
+    // an array of month numbers mapped to their names
+    this.monthNames = Array.from({ length: 12 }, (_, i) => i + 1).map((month) => {
+      const date = new Date(0);
+      date.setUTCMonth(month - 1);
+      return date.toLocaleString('default', { month: 'long' });
+    });
+    this.onClickOutside = (event) => {
+      if (!this.el.contains(event.target) && this.showCalendar) {
+        this.showCalendar = false;
+      }
+    };
+    this.onFocusIn = (event) => {
+      if (!this.el.contains(event.target) && this.showCalendar) {
+        this.showCalendar = false;
+      }
+    };
+    this.previousHandler = () => {
+      if (this.selectedMonth === 1) {
+        this.selectedMonth = 12;
+        this.selectedYear--;
+      }
+      else {
+        this.selectedMonth--;
+      }
+    };
+    this.nextHandler = () => {
+      if (this.selectedMonth === 12) {
+        this.selectedMonth = 1;
+        this.selectedYear++;
+      }
+      else {
+        this.selectedMonth++;
+      }
+    };
+    this.months = false;
+    this.years = false;
+    this.showCalendar = false;
+    this.selectedYear = new Date().getFullYear();
+    this.selectedMonth = new Date().getMonth() + 1;
+  }
+  componentDidLoad() {
+    const slot = this.el.shadowRoot.querySelector('slot');
+    if (slot) {
+      const assignedElements = slot.assignedElements();
+      if (assignedElements[0]) {
+        assignedElements[0].addEventListener('click', (event) => {
+          event.preventDefault();
+          this.showCalendar = !this.showCalendar;
+        });
+      }
+    }
+    document.addEventListener('click', this.onClickOutside);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this.onClickOutside);
+  }
+  getDaysAndDates(year, month) {
+    const firstDayOfMonth = new Date(year, month - 1, 1);
+    const lastDayOfMonth = new Date(year, month, 0);
+    const daysAndDates = [];
+    for (let day = firstDayOfMonth; day <= lastDayOfMonth; day.setDate(day.getDate() + 1)) {
+      const weekDay = day.getDay();
+      const date = day.getDate();
+      const dayAndDate = {
+        day: weekDay,
+        date: date
+      };
+      daysAndDates.push(dayAndDate);
+    }
+    return daysAndDates;
+  }
+  clickDateHandler(event) {
+    const { year, month, day } = event;
+    const selectedDate = new Date(year, month - 1, day + 1);
+    this.inputElement.valueAsDate = selectedDate;
+    this.showCalendar = false;
+  }
+  render() {
+    const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const daysAndDates = this.getDaysAndDates(this.selectedYear, this.selectedMonth);
+    const currentYear = new Date().getFullYear();
+    const years = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
+    const calendarGrid = [];
+    let currentWeek = [];
+    // Fill empty days before the first day of the month
+    for (let i = 0; i < daysAndDates[0].day; i++) {
+      currentWeek.push(h("td", null));
+    }
+    // Fill the calendar with days and dates
+    daysAndDates.forEach(({ day, date }) => {
+      currentWeek.push(h("td", null, h("span", { onClick: () => this.clickDateHandler({ year: this.selectedYear, month: this.selectedMonth, day: date }) }, date)));
+      if (day === 6) {
+        calendarGrid.push(h("tr", null, currentWeek));
+        currentWeek = [];
+      }
+    });
+    // Fill the remaining empty days in the last week
+    if (currentWeek.length > 0) {
+      while (currentWeek.length < 7) {
+        currentWeek.push(h("td", null));
+      }
+      calendarGrid.push(h("tr", null, currentWeek));
+    }
+    return (h(Host, null, h("div", { class: "calcontainer" }, h("slot", null), h("div", { class: `calendar ${this.showCalendar ? 'calendar-visible' : ''}` }, h("div", { class: "calendar-header" }, h("tttx-button", { onClick: this.previousHandler, design: "borderless", icon: "chevron_left", notext: true }), this.months && h("select", { id: "month-select", onInput: (event) => {
+        this.selectedMonth = parseInt(event.target.value);
+      } }, Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (h("option", { value: month, selected: month === this.selectedMonth }, this.monthNames[month - 1])))), this.years && h("select", { id: "year-select", onInput: (event) => {
+        this.selectedYear = parseInt(event.target.value);
+      } }, years.map((year) => (h("option", { value: year, selected: year === this.selectedYear }, year)))), h("div", { class: "date-display" }, this.monthNames[this.selectedMonth - 1], " ", this.selectedYear), h("tttx-button", { onClick: this.nextHandler, design: "borderless", icon: "chevron_right", notext: true })), h("table", { class: "calendar-table" }, h("thead", null, h("tr", null, daysOfWeek.map((day) => (h("th", null, day))))), h("tbody", null, calendarGrid))))));
+  }
+  static get is() { return "tttx-input-calendar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-input-calendar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-input-calendar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "months": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "months",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "years": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "years",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showCalendar": {},
+      "selectedYear": {},
+      "selectedMonth": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js

@@ -0,0 +1,27 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Calendar',
+  component: 'tttx-input-calendar',
+  argTypes: {
+    required: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  parameters: {
+    actions: {
+      handles: ['valueChanged', 'focusChanged', 'blurChanged'],
+    },
+  },
+  decorators: [withActions],
+};
+export const BasicCalendar = ({ required }) => {
+  return `<tttx-input-calendar>
+  <tttx-standalone-input ${required ? 'required' : ''} label="Choose a date" type="date" />
+</tttx-input-calendar>    
+  `;
+};
+BasicCalendar.args = {
+  required: true
+};