@3t-transform/threeteeui 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tttx-button.cjs.entry.js +24 -18
  3. package/dist/cjs/tttx-checkbox.cjs.entry.js +17 -17
  4. package/dist/cjs/tttx-form.cjs.entry.js +364 -364
  5. package/dist/cjs/tttx-icon.cjs.entry.js +12 -1854
  6. package/dist/cjs/tttx-input-calendar.cjs.entry.js +125 -0
  7. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +33 -0
  8. package/dist/cjs/tttx-list.cjs.entry.js +187 -187
  9. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +15 -15
  10. package/dist/cjs/tttx-popover-content.cjs.entry.js +12 -12
  11. package/dist/cjs/tttx-standalone-input.cjs.entry.js +125 -125
  12. package/dist/cjs/tttx-table.cjs.entry.js +49 -49
  13. package/dist/cjs/tttx.cjs.js +1 -1
  14. package/dist/collection/collection-manifest.json +2 -0
  15. package/dist/collection/components/atoms/tttx-button/tttx-button.css +94 -18
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -93
  17. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +74 -27
  18. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +8 -5
  19. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -116
  20. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -47
  21. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +26 -0
  22. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +56 -0
  23. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +12 -0
  24. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -66
  25. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  26. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +97 -96
  27. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -23
  28. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +102 -101
  29. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +9 -9
  30. package/dist/collection/components/molecules/tttx-form/tttx-form.css +95 -11
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.js +452 -451
  32. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +109 -109
  33. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css +93 -0
  34. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js +174 -0
  35. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js +27 -0
  36. package/dist/collection/components/molecules/tttx-list/tttx-list.js +312 -311
  37. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +14 -14
  38. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +570 -569
  39. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +134 -134
  40. package/dist/collection/components/molecules/tttx-table/tttx-table.js +174 -177
  41. package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +65 -65
  42. package/dist/collection/components/palette.stories.js +7 -7
  43. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  44. package/dist/collection/icons.js +2838 -2838
  45. package/dist/collection/index.js +1 -1
  46. package/dist/components/index.d.ts +2 -0
  47. package/dist/components/index.js +2 -0
  48. package/dist/components/tttx-button.js +1 -40
  49. package/dist/components/tttx-button2.js +56 -0
  50. package/dist/components/tttx-checkbox.js +36 -36
  51. package/dist/components/tttx-form.js +382 -382
  52. package/dist/components/tttx-icon2.js +32 -1874
  53. package/dist/components/tttx-input-calendar.d.ts +11 -0
  54. package/dist/components/tttx-input-calendar.js +157 -0
  55. package/dist/components/tttx-keyvalue-block.d.ts +11 -0
  56. package/dist/components/tttx-keyvalue-block.js +49 -0
  57. package/dist/components/tttx-list.js +214 -214
  58. package/dist/components/tttx-loading-spinner2.js +33 -33
  59. package/dist/components/tttx-popover-content2.js +32 -32
  60. package/dist/components/tttx-standalone-input.js +168 -168
  61. package/dist/components/tttx-table.js +79 -79
  62. package/dist/esm/loader.js +1 -1
  63. package/dist/esm/polyfills/core-js.js +0 -0
  64. package/dist/esm/polyfills/dom.js +0 -0
  65. package/dist/esm/polyfills/es5-html-element.js +0 -0
  66. package/dist/esm/polyfills/index.js +0 -0
  67. package/dist/esm/polyfills/system.js +0 -0
  68. package/dist/esm/tttx-button.entry.js +25 -19
  69. package/dist/esm/tttx-checkbox.entry.js +17 -17
  70. package/dist/esm/tttx-form.entry.js +364 -364
  71. package/dist/esm/tttx-icon.entry.js +14 -1856
  72. package/dist/esm/tttx-input-calendar.entry.js +121 -0
  73. package/dist/esm/tttx-keyvalue-block.entry.js +29 -0
  74. package/dist/esm/tttx-list.entry.js +187 -187
  75. package/dist/esm/tttx-loading-spinner.entry.js +15 -15
  76. package/dist/esm/tttx-popover-content.entry.js +12 -12
  77. package/dist/esm/tttx-standalone-input.entry.js +125 -125
  78. package/dist/esm/tttx-table.entry.js +49 -49
  79. package/dist/esm/tttx.js +1 -1
  80. package/dist/tttx/{p-125f06b3.entry.js → p-1bc3dfee.entry.js} +1 -1
  81. package/dist/tttx/p-1cf8f9e8.entry.js +1 -0
  82. package/dist/tttx/p-220f7519.entry.js +1 -0
  83. package/dist/tttx/{p-5ce1ba22.entry.js → p-5247e827.entry.js} +1 -1
  84. package/dist/tttx/p-81904eed.entry.js +1 -0
  85. package/dist/tttx/p-cf107fb6.entry.js +1 -0
  86. package/dist/tttx/p-f56fe662.entry.js +1 -0
  87. package/dist/tttx/tttx.esm.js +1 -1
  88. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -9
  89. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -20
  90. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -14
  91. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -21
  92. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +4 -0
  93. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +6 -0
  94. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  95. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  96. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -7
  97. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -18
  98. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -9
  99. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -6
  100. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +134 -134
  101. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -12
  102. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.d.ts +19 -0
  103. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.d.ts +26 -0
  104. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +51 -51
  105. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +13 -13
  106. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +38 -38
  107. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -106
  108. package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +15 -15
  109. package/dist/types/components/molecules/tttx-table/tttx-table.stories.d.ts +21 -21
  110. package/dist/types/components/palette.stories.d.ts +6 -6
  111. package/dist/types/components.d.ts +46 -15
  112. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  113. package/dist/types/icons.d.ts +2 -2
  114. package/dist/types/index.d.ts +1 -1
  115. package/package.json +4 -4
  116. package/dist/tttx/p-10316ff1.entry.js +0 -1
  117. package/dist/tttx/p-b1c22f5f.entry.js +0 -1
  118. package/dist/tttx/p-c7f9be65.entry.js +0 -1
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["tttx-table.cjs",[[1,"tttx-table",{"headers":[8],"data":[8],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[1,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"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]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
17
+ return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[1,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"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]}]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -4,25 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-864b7110.js');
6
6
 
7
- const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{height:36px;padding:8px 16px;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:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
7
+ 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}";
8
8
 
9
- const TttxButton = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.clickEvent = index.createEvent(this, "clickEvent", 7);
13
- this.fontColor = undefined;
14
- this.buttonStyle = undefined;
15
- }
16
- onClick() {
17
- this.clickEvent.emit('clicked');
18
- }
19
- onClicked(event) {
20
- console.log('Picked up a clickEvent', event);
21
- }
22
- render() {
23
- return (index.h(index.Host, null, index.h("button", { onClick: this.onClick.bind(this), class: `button ${this.fontColor} ${this.buttonStyle}` }, index.h("span", null, index.h("slot", null)))));
24
- }
25
- };
9
+ const TttxButton = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this._iconcolor = 'black';
13
+ this.notext = undefined;
14
+ this.icon = undefined;
15
+ this.iconposition = 'left';
16
+ this.design = 'default';
17
+ }
18
+ componentWillLoad() {
19
+ this._design = this.design;
20
+ const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
21
+ if (!designs.includes(this.design)) {
22
+ this._design = 'default';
23
+ }
24
+ if (this._design === 'primary' || this._design === 'danger') {
25
+ this._iconcolor = 'white';
26
+ }
27
+ }
28
+ render() {
29
+ return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && index.h("div", { class: "button-content" }, index.h("slot", null)), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
30
+ }
31
+ };
26
32
  TttxButton.style = tttxButtonCss;
27
33
 
28
34
  exports.tttx_button = TttxButton;
@@ -6,23 +6,23 @@ const index = require('./index-864b7110.js');
6
6
 
7
7
  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}";
8
8
 
9
- const TttxCheckbox = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.valueChanged = index.createEvent(this, "valueChanged", 7);
13
- this.value = undefined;
14
- this.label = undefined;
15
- this.required = undefined;
16
- }
17
- handleClick(event) {
18
- const target = event.target;
19
- this.value = target.checked;
20
- this.valueChanged.emit(target.checked);
21
- }
22
- render() {
23
- return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && (index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : '')), index.h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
24
- }
25
- };
9
+ const TttxCheckbox = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.valueChanged = index.createEvent(this, "valueChanged", 7);
13
+ this.value = undefined;
14
+ this.label = undefined;
15
+ this.required = undefined;
16
+ }
17
+ handleClick(event) {
18
+ const target = event.target;
19
+ this.value = target.checked;
20
+ this.valueChanged.emit(target.checked);
21
+ }
22
+ render() {
23
+ return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && (index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : '')), index.h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
24
+ }
25
+ };
26
26
  TttxCheckbox.style = tttxCheckboxCss;
27
27
 
28
28
  exports.tttx_checkbox = TttxCheckbox;