@3t-transform/threeteeui 0.0.22 → 0.0.24

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

@@ -1,174 +0,0 @@
-// 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

@@ -1,27 +0,0 @@
-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
-};

package/dist/components/tttx-button2.js

@@ -1,56 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './tttx-icon2.js';
-
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
-
-const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this._iconcolor = 'black';
-    this.notext = undefined;
-    this.icon = undefined;
-    this.iconposition = 'left';
-    this.design = 'default';
-  }
-  componentWillLoad() {
-    this._design = this.design;
-    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
-    if (!designs.includes(this.design)) {
-      this._design = 'default';
-    }
-    if (this._design === 'primary' || this._design === 'danger') {
-      this._iconcolor = 'white';
-    }
-  }
-  render() {
-    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
-  }
-  static get style() { return tttxButtonCss; }
-}, [1, "tttx-button", {
-    "notext": [4],
-    "icon": [1],
-    "iconposition": [1],
-    "design": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-button", "tttx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxButton);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { TttxButton as T, defineCustomElement as d };

package/dist/components/tttx-checkbox.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface TttxCheckbox extends Components.TttxCheckbox, HTMLElement {}
-export const TttxCheckbox: {
-  prototype: TttxCheckbox;
-  new (): TttxCheckbox;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/tttx-checkbox.js

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}.spacing{margin-bottom:16px}";
-
-const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.value = undefined;
-    this.label = undefined;
-    this.required = undefined;
-  }
-  handleClick(event) {
-    const target = event.target;
-    this.value = target.checked;
-    this.valueChanged.emit(target.checked);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "field spacing" }, this.label && (h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : '')), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
-  }
-  static get style() { return tttxCheckboxCss; }
-}, [1, "tttx-checkbox", {
-    "value": [4],
-    "label": [1],
-    "required": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-checkbox"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxCheckbox$1);
-      }
-      break;
-  } });
-}
-
-const TttxCheckbox = TttxCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxCheckbox, defineCustomElement };

package/dist/components/tttx-form.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface TttxForm extends Components.TttxForm, HTMLElement {}
-export const TttxForm: {
-  prototype: TttxForm;
-  new (): TttxForm;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;