@3t-transform/threeteeui 0.2.80 → 0.2.82

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-4a967804",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-02da8327",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-a3b446f8",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-6e23f980",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-c714f7c0",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["p-9556a164",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["p-f4594fe2",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-1c3ab606",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-d1ff1456",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-25acdd4c",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-55831705",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-09b92178",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-4ade2866",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
+import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-4a967804",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-02da8327",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-a3b446f8",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-62115838",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-c714f7c0",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["p-9556a164",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["p-f4594fe2",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-1c3ab606",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-d1ff1456",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-149f806e",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-25acdd4c",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-55831705",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-09b92178",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-4ade2866",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

package/dist/types/components/atoms/tttx-percentage-bar/tttx-percentage-bar.d.ts

@@ -0,0 +1,22 @@
+export type Threshold = {
+  threshold: number;
+  color: string;
+};
+export type Range = {
+  range: number[];
+  color: string;
+};
+export declare class TttxPercentageBar {
+  percentage: string | number;
+  thresholds?: string | Threshold[];
+  color?: string;
+  min: string;
+  labelid?: string;
+  _percentage: number;
+  _ranges: Range[];
+  _min: any;
+  componentWillRender(): void;
+  private getColour;
+  private getWidth;
+  render(): any;
+}

package/dist/types/components/atoms/tttx-percentage-bar/tttx-percentage-bar.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+  title: string;
+  component: string;
+};
+export default _default;
+export declare const PercentageBar: any;
+export declare const PercentageBarWithoutThresholds: any;
+export declare const PercentageBarWithoutMinimum: any;
+export declare const PercentageBarLabeled: any;
+export declare const PercentageBarLabeledInline: any;

package/dist/types/components/molecules/tttx-tree-view/helper/helper.d.ts

@@ -5,10 +5,15 @@ export interface TreeViewItem {
   hasCheckbox?: boolean;
   menuActive?: boolean;
   chevronActive?: boolean;
+  hasHover?: boolean;
+  selectable?: boolean;
+  selected?: boolean;
   html?: string;
   child?: TreeViewItem[];
   checked?: boolean;
   isOpen?: boolean;
   icon?: string;
   iconColor?: string;
+  data?: any;
+  rowType?: string;
 }

package/dist/types/components/molecules/tttx-tree-view/tttx-tree-view.d.ts

@@ -3,11 +3,22 @@ import { TreeViewItem } from './helper/helper';
 export declare class TttxTreeView {
   data: TreeViewItem[];
   treeData: TreeViewItem[];
+  selectedId: number;
   clickEvent: EventEmitter;
   onClickHandler(clickName: string, event: MouseEvent, node: TreeViewItem): void;
+  updateSelectedId(newId: number): void;
+  selectedElement(event: MouseEvent, node: TreeViewItem): void;
   toggleNode(node: TreeViewItem, event: MouseEvent): void;
   handleCheckboxChange(node: TreeViewItem, event: MouseEvent): void;
   updateChildrenCheckStatus(node: TreeViewItem): void;
+  updateSelected(node: TreeViewItem): boolean;
+  treeConfigs(node: TreeViewItem): {
+    checkboxColor: string;
+    checkboxIcon: string;
+    rowHoverActive: string;
+    expanderIcon: string;
+    selectedActive: string;
+  };
   renderNode(node: TreeViewItem): any;
   htmlcode(type: string, node: TreeViewItem, check_box: string, check_boxColor: string): any;
   render(): any;

package/dist/types/components/molecules/tttx-tree-view/tttx-tree-view.stories.d.ts

@@ -20,3 +20,5 @@ export declare const Icons: any;
 export declare const CheckBoxAndIcons: any;
 export declare const RequirementsList1: any;
 export declare const RequirementsList2: any;
+export declare const EmptyGroup: any;
+export declare const selectableAndHover: any;

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { FilterChangeEvent, FilterSettings } from "./components/molecules/tttx-f
 import { KeyBlockValues } from "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block";
 import { ListItem } from "./components/molecules/tttx-list/interfaces";
 import { SelectItem } from "./components/molecules/tttx-multiselect-box/interfaces";
+import { Threshold } from "./components/atoms/tttx-percentage-bar/tttx-percentage-bar";
 import { SelectItem as SelectItem1 } from "./components/molecules/tttx-select-box/interfaces";
 import { SorterChangeEvent, SorterData } from "./components/molecules/tttx-sorter/interfaces";
 import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
@@ -71,6 +72,13 @@ export namespace Components {
         "searchEnabled": boolean;
         "visibleValue": string;
     }
+    interface TttxPercentageBar {
+        "color"?: string;
+        "labelid"?: string;
+        "min": string;
+        "percentage": string | number;
+        "thresholds"?: string | Threshold[];
+    }
     interface TttxQrcode {
         "link": string;
         "size": number;
@@ -280,6 +288,12 @@ declare global {
         prototype: HTMLTttxMultiselectBoxElement;
         new (): HTMLTttxMultiselectBoxElement;
     };
+    interface HTMLTttxPercentageBarElement extends Components.TttxPercentageBar, HTMLStencilElement {
+    }
+    var HTMLTttxPercentageBarElement: {
+        prototype: HTMLTttxPercentageBarElement;
+        new (): HTMLTttxPercentageBarElement;
+    };
     interface HTMLTttxQrcodeElement extends Components.TttxQrcode, HTMLStencilElement {
     }
     var HTMLTttxQrcodeElement: {
@@ -344,6 +358,7 @@ declare global {
         "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
         "tttx-multiselect-box": HTMLTttxMultiselectBoxElement;
+        "tttx-percentage-bar": HTMLTttxPercentageBarElement;
         "tttx-qrcode": HTMLTttxQrcodeElement;
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
@@ -421,6 +436,13 @@ declare namespace LocalJSX {
         "searchEnabled"?: boolean;
         "visibleValue"?: string;
     }
+    interface TttxPercentageBar {
+        "color"?: string;
+        "labelid"?: string;
+        "min"?: string;
+        "percentage"?: string | number;
+        "thresholds"?: string | Threshold[];
+    }
     interface TttxQrcode {
         "link"?: string;
         "size"?: number;
@@ -559,6 +581,7 @@ declare namespace LocalJSX {
         "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
         "tttx-multiselect-box": TttxMultiselectBox;
+        "tttx-percentage-bar": TttxPercentageBar;
         "tttx-qrcode": TttxQrcode;
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
@@ -583,6 +606,7 @@ declare module "@stencil/core" {
             "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
             "tttx-multiselect-box": LocalJSX.TttxMultiselectBox & JSXBase.HTMLAttributes<HTMLTttxMultiselectBoxElement>;
+            "tttx-percentage-bar": LocalJSX.TttxPercentageBar & JSXBase.HTMLAttributes<HTMLTttxPercentageBarElement>;
             "tttx-qrcode": LocalJSX.TttxQrcode & JSXBase.HTMLAttributes<HTMLTttxQrcodeElement>;
             "tttx-select-box": LocalJSX.TttxSelectBox & JSXBase.HTMLAttributes<HTMLTttxSelectBoxElement>;
             "tttx-sorter": LocalJSX.TttxSorter & JSXBase.HTMLAttributes<HTMLTttxSorterElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.2.80",
+    "version": "0.2.82",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -76,4 +76,4 @@
         "storybook": "^7.4.0",
         "ts-qrcode": "^0.0.4"
     }
-}
+}

package/dist/tttx/p-6e23f980.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as i}from"./p-3f1b6013.js";import{p as o,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const s=class{constructor(i){e(this,i),this.clickEvent=t(this,"clickEvent",7),this.data=void 0,this.treeData=void 0}onClickHandler(e,t,i){t.stopPropagation();const o=JSON.stringify(i);this.clickEvent.emit({eventName:e,returnJsonObject:o})}toggleNode(e,t){t.stopPropagation(),e.isOpen=!e.isOpen,this.treeData=[...this.treeData]}handleCheckboxChange(e,t){t.stopPropagation(),e.checked=!e.checked,this.updateChildrenCheckStatus(e),this.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}renderNode(e){let t,o;e.checked?(t="check_box",o="blue"):(t="check_box_outline_blank",o="grey");const n=e.chevronActive?"rowHover":"";return e.child&&e.child.length>0?i("li",null,i("div",{class:`inline-tree-item element-row ${n}`,onClick:t=>{e.chevronActive&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},i("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:e.isOpen?"arrow_drop_down":"arrow_right",color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t,o)),e.isOpen?i("ul",null,i("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):i("li",null,i("div",{class:`inline-tree-item element-row ${n}`,onClick:t=>{e.chevronActive&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t,o)))}htmlcode(e,t,s,r){return i("div",{class:"inline-tree-item element"},t.hasCheckbox&&i("tttx-button",{design:"borderless-circle",notext:!0,icon:s,iconcolor:r,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&i("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&i("div",{class:e},t.title),t.html&&i("div",{class:e,innerHTML:o.sanitize(t.html,n)}),(t.menuActive||t.chevronActive)&&i("div",{class:"right-buttons-container"},t.menuActive&&i("tttx-button",{design:"borderless-circle",notext:!0,icon:"more_vert",color:"black",class:"padding-icon menu-button",onClick:e=>{e.stopPropagation(),this.onClickHandler("menu",e,t)}}),t.chevronActive&&i("tttx-icon",{icon:"chevron_right",color:"black",class:"padding-icon chevron-button",onClick:e=>{e.stopPropagation(),this.onClickHandler("chevron",e,t)}})))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,i("div",{class:"tree-view-element"},i("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};s.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:"Roboto", serif;font-size:16px;padding:8px 0px;border-bottom:1px solid #d5d5d5}.rowHover{cursor:pointer}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.rowHover:hover{background-color:rgba(17, 17, 17, 0.05)}}';export{s as tttx_tree_view}