@3t-transform/threeteeui 0.2.76 → 0.2.78

package/dist/types/components.d.ts

@@ -144,6 +144,36 @@ export namespace Components {
         "color": string;
         "text": string;
     }
+    interface TttxTextarea {
+        "disabled": boolean;
+        "errormsg": string;
+        /**
+          * tabindex - Allows the HTML elements to be focusable
+          * @example <caption>In HTML (like `index.html`)</caption> <tttx-textarea input-index="1" />
+          * @example <caption>In TSX files</caption> <tttx-textarea inputindex={1} />
+         */
+        "inputindex": string | number;
+        /**
+          * Defines what action to present for the enter key on virtual keyboards
+         */
+        "inputkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        "inputtitle": string;
+        "label": string;
+        "maxlength": string | number;
+        "name": string;
+        "placeholder": string;
+        "readonly": string | boolean;
+        "required": boolean;
+        "rows": number;
+        /**
+          * Footnote under the input field
+         */
+        "secondarylabel": string;
+        "showerrorbubble": boolean;
+        "showerrormsg": boolean;
+        "textareaautofocus": boolean;
+        "value": string | number;
+    }
     interface TttxToolbar {
         "border": boolean;
     }
@@ -187,6 +217,10 @@ export interface TttxTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxTabsElement;
 }
+export interface TttxTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxTextareaElement;
+}
 export interface TttxTreeViewCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxTreeViewElement;
@@ -282,6 +316,12 @@ declare global {
         prototype: HTMLTttxTagElement;
         new (): HTMLTttxTagElement;
     };
+    interface HTMLTttxTextareaElement extends Components.TttxTextarea, HTMLStencilElement {
+    }
+    var HTMLTttxTextareaElement: {
+        prototype: HTMLTttxTextareaElement;
+        new (): HTMLTttxTextareaElement;
+    };
     interface HTMLTttxToolbarElement extends Components.TttxToolbar, HTMLStencilElement {
     }
     var HTMLTttxToolbarElement: {
@@ -310,6 +350,7 @@ declare global {
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
         "tttx-tabs": HTMLTttxTabsElement;
         "tttx-tag": HTMLTttxTagElement;
+        "tttx-textarea": HTMLTttxTextareaElement;
         "tttx-toolbar": HTMLTttxToolbarElement;
         "tttx-tree-view": HTMLTttxTreeViewElement;
     }
@@ -467,6 +508,40 @@ declare namespace LocalJSX {
         "color"?: string;
         "text"?: string;
     }
+    interface TttxTextarea {
+        "disabled"?: boolean;
+        "errormsg"?: string;
+        /**
+          * tabindex - Allows the HTML elements to be focusable
+          * @example <caption>In HTML (like `index.html`)</caption> <tttx-textarea input-index="1" />
+          * @example <caption>In TSX files</caption> <tttx-textarea inputindex={1} />
+         */
+        "inputindex"?: string | number;
+        /**
+          * Defines what action to present for the enter key on virtual keyboards
+         */
+        "inputkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        "inputtitle"?: string;
+        "label"?: string;
+        "maxlength"?: string | number;
+        "name"?: string;
+        "onBlurChanged"?: (event: TttxTextareaCustomEvent<string>) => void;
+        "onFocusChanged"?: (event: TttxTextareaCustomEvent<string>) => void;
+        "onInvalidChanged"?: (event: TttxTextareaCustomEvent<string>) => void;
+        "onValueChanged"?: (event: TttxTextareaCustomEvent<string>) => void;
+        "placeholder"?: string;
+        "readonly"?: string | boolean;
+        "required"?: boolean;
+        "rows"?: number;
+        /**
+          * Footnote under the input field
+         */
+        "secondarylabel"?: string;
+        "showerrorbubble"?: boolean;
+        "showerrormsg"?: boolean;
+        "textareaautofocus"?: boolean;
+        "value"?: string | number;
+    }
     interface TttxToolbar {
         "border"?: boolean;
     }
@@ -490,6 +565,7 @@ declare namespace LocalJSX {
         "tttx-standalone-input": TttxStandaloneInput;
         "tttx-tabs": TttxTabs;
         "tttx-tag": TttxTag;
+        "tttx-textarea": TttxTextarea;
         "tttx-toolbar": TttxToolbar;
         "tttx-tree-view": TttxTreeView;
     }
@@ -513,6 +589,7 @@ declare module "@stencil/core" {
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
             "tttx-tabs": LocalJSX.TttxTabs & JSXBase.HTMLAttributes<HTMLTttxTabsElement>;
             "tttx-tag": LocalJSX.TttxTag & JSXBase.HTMLAttributes<HTMLTttxTagElement>;
+            "tttx-textarea": LocalJSX.TttxTextarea & JSXBase.HTMLAttributes<HTMLTttxTextareaElement>;
             "tttx-toolbar": LocalJSX.TttxToolbar & JSXBase.HTMLAttributes<HTMLTttxToolbarElement>;
             "tttx-tree-view": LocalJSX.TttxTreeView & JSXBase.HTMLAttributes<HTMLTttxTreeViewElement>;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.2.76",
+    "version": "0.2.78",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -56,7 +56,7 @@
         "@typescript-eslint/parser": "^5.59.1",
         "chromatic": "^6.7.4",
         "eslint": "^8.38.0",
-        "eslint-plugin-storybook": "^0.6.13",
+        "eslint-plugin-storybook": "^0.6.14",
         "jest": "^27.4.5",
         "jest-cli": "^27.4.5",
         "less": "^4.1.3",
@@ -76,4 +76,4 @@
         "storybook": "^7.4.0",
         "ts-qrcode": "^0.0.4"
     }
-}
+}

package/dist/tttx/p-77fed2a6.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as n,d}from"./p-5ed38d61.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",7),this.toggleOpen=t(this,"toggleOpen",7),this.changesApplied=t(this,"changesApplied",7),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.htmlVisibleValue=void 0,this.visibleValue=void 0,this.open=!1,this.unsavedSelectedItems=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}safelyCloneArray(o){return JSON.parse(JSON.stringify(o))}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onCancel(){this.open=!1,this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData),this.toggleOpen.emit(!1)}applyChanges(){this.open=!1,this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems))}onItemSelected(o){const t=this.unsavedSelectedItems.findIndex((t=>t.value===o.value));this.unsavedSelectedItems[t]=Object.assign(Object.assign({},o),{selected:!o.selected}),this.unsavedSelectedItems=[...this.unsavedSelectedItems],this.selectItemEvent.emit(o)}dropdownSelectorContent(){if(!this._optionsData.find((o=>o.selected)))return i("div",{class:"placeholder"},this.placeholder);if(this.htmlVisibleValue){const o=n.sanitize(this.visibleValue,d);return i("div",{class:"dropdown-selector-html-content",innerHTML:o})}return i("div",null,this.visibleValue)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=o.selected?"check_box":"check_box_outline_blank",e=o.selected?"blue":"grey";if(o.html){const r=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${o.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},i("tttx-icon",{icon:s,color:e,class:"checkbox-icon"}),i("div",{innerHTML:r}))}return i("div",{class:`dropdown-option ${t?"hidden":""} ${o.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},i("tttx-icon",{icon:s,color:e,class:"checkbox-icon"}),i("div",{class:"plaintext-option"},o.label))}handleSearchInput(o){this.searchTerm=o.target.value}calculateDropdownMenuOffset(){const o=this.el.shadowRoot.querySelector(".dropdown-selector"),t=o.getBoundingClientRect().bottom;let i=Math.min(288,36*this._optionsData.length)+45+8;this.searchEnabled&&(i+=52),this.bodyOffset=t+i>window.innerHeight?{bottom:"16px",position:"fixed",width:`${o.offsetWidth}px`}:{}}render(){if(!this.optionsData)return;this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,this.unsavedSelectedItems||(this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData));const o=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:o,color:"black"}))),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this),inline:!0})),i("div",{class:"dropdown-options-list"},this.unsavedSelectedItems.map((o=>this.dropdownOption(o)))),i("div",{class:"footer"},i("tttx-button",{design:"primary",onClick:this.applyChanges.bind(this)},"Apply"),i("tttx-button",{onClick:this.onCancel.bind(this)},"Cancel"))))))}get el(){return e(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{display:grid;position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{grid-row:1;align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{grid-row:2;position:relative}.dropdown-body{position:absolute;display:flex;position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}';export{r as tttx_multiselect_box}