@3t-transform/threeteeui 0.2.74 → 0.2.76
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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tttx-button.cjs.entry.js +2 -2
- package/dist/cjs/tttx-form.cjs.entry.js +78 -49
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +17 -14
- package/dist/cjs/tttx-list.cjs.entry.js +1 -1
- package/dist/cjs/tttx-multiselect-box.cjs.entry.js +130 -0
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +8 -3
- package/dist/cjs/tttx-tag.cjs.entry.js +1 -1
- package/dist/cjs/tttx.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/atoms/tttx-button/tttx-button.css +1 -1
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +1 -2
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +1 -1
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +0 -1
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +14 -5
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +46 -18
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +85 -29
- package/dist/collection/components/atoms/tttx-tag/tttx-tag.css +1 -1
- package/dist/collection/components/atoms/tttx-tag/tttx-tag.js +0 -1
- package/dist/collection/components/atoms/tttx-tag/tttx-tag.stories.js +1 -1
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +14 -3
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +15 -13
- package/dist/collection/components/molecules/tttx-form/tttx-form.css +107 -177
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +56 -36
- package/dist/collection/components/molecules/tttx-list/tttx-list.css +1 -1
- package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.css +135 -0
- package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.js +339 -0
- package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.stories.js +201 -0
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +102 -198
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +7 -2
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +23 -5
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/tttx-button2.js +2 -2
- package/dist/components/tttx-form.js +79 -50
- package/dist/components/tttx-keyvalue-block.js +21 -16
- package/dist/components/tttx-list.js +1 -1
- package/dist/components/tttx-multiselect-box.d.ts +11 -0
- package/dist/components/tttx-multiselect-box.js +172 -0
- package/dist/components/tttx-standalone-input2.js +8 -3
- package/dist/components/tttx-tag.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tttx-button.entry.js +2 -2
- package/dist/esm/tttx-form.entry.js +78 -49
- package/dist/esm/tttx-keyvalue-block.entry.js +17 -14
- package/dist/esm/tttx-list.entry.js +1 -1
- package/dist/esm/tttx-multiselect-box.entry.js +126 -0
- package/dist/esm/tttx-standalone-input.entry.js +8 -3
- package/dist/esm/tttx-tag.entry.js +1 -1
- package/dist/esm/tttx.js +1 -1
- package/dist/tttx/p-09b92178.entry.js +1 -0
- package/dist/tttx/{p-750cf31b.entry.js → p-129df5a2.entry.js} +1 -1
- package/dist/tttx/{p-a6582ab0.entry.js → p-25acdd4c.entry.js} +1 -1
- package/dist/tttx/{p-5b7b8539.entry.js → p-4ade2866.entry.js} +1 -1
- package/dist/tttx/p-77fed2a6.entry.js +1 -0
- package/dist/tttx/p-b30a1025.entry.js +1 -0
- package/dist/tttx/p-d1ff1456.entry.js +1 -0
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -1
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +6 -4
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +3 -2
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +5 -7
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +74 -29
- package/dist/types/components/molecules/tttx-multiselect-box/interfaces.d.ts +6 -0
- package/dist/types/components/molecules/tttx-multiselect-box/tttx-multiselect-box.d.ts +38 -0
- package/dist/types/components/molecules/tttx-multiselect-box/tttx-multiselect-box.stories.d.ts +15 -0
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +7 -0
- package/dist/types/components.d.ts +46 -8
- package/package.json +1 -1
- package/dist/tttx/p-6fe0af4e.entry.js +0 -1
- package/dist/tttx/p-818574fe.entry.js +0 -1
- package/dist/tttx/p-895526aa.entry.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$1 } from './tttx-icon2.js';
|
|
3
3
|
|
|
4
|
-
const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.
|
|
4
|
+
const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;color:#212121}label.sc-tttx-standalone-input .optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input{position:relative}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input{height:24px;width:24px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input{left:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{right:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.has-left-icon.sc-tttx-standalone-input{padding-left:72px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-left-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-right-icon.sc-tttx-standalone-input{padding-right:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus{border-color:#1479c6}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus-visible{outline:none}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{margin-top:4px}label.sc-tttx-standalone-input .outer-container.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input input.sc-tttx-standalone-input{margin-top:0}label.sc-tttx-standalone-input .secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input:not(.visible){display:none}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input{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}.sc-tttx-standalone-input-h{display:block}";
|
|
5
5
|
|
|
6
6
|
const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -78,8 +78,13 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
78
78
|
this.rightIconClick.emit();
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
|
-
const classNames = [
|
|
82
|
-
|
|
81
|
+
const classNames = [
|
|
82
|
+
this.showerrormsg ? 'invalid' : '',
|
|
83
|
+
this.inputicon ? 'has-input-icon' : '',
|
|
84
|
+
this.iconleft ? 'has-left-icon' : '',
|
|
85
|
+
this.iconright ? 'has-right-icon' : '',
|
|
86
|
+
].join(' ');
|
|
87
|
+
return (h(Host, null, h("label", null, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: ['outer-container', this.inline ? 'inputInline' : 'inputBlock'].join(' ') }, h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), (this.inputicon || this.iconleft) && (h("span", { class: "left-icons" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon", { class: "left-icon", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })))), this.iconright && (h("span", { class: "right-icons" }, h("tttx-icon", { class: "right-icon", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })))), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded" }, "warning"), " ", this.errormsg)))));
|
|
83
88
|
}
|
|
84
89
|
static get style() { return tttxStandaloneInputCss; }
|
|
85
90
|
}, [2, "tttx-standalone-input", {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const tttxTagCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.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:
|
|
3
|
+
const tttxTagCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.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:500}.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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}.tag{border-radius:20px;padding:4px;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:400}.tag span{margin-left:4px;margin-right:4px;color:#212121}.icon{height:18px;width:18px;font-weight:400}";
|
|
4
4
|
|
|
5
5
|
const TttxTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
package/dist/esm/loader.js
CHANGED
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[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"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[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"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[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"]]]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[
|
|
14
|
+
return bootstrapLazy([["tttx-multiselect-box",[[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"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[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"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[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"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[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"]]]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[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]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-6a372ea6.js';
|
|
2
2
|
|
|
3
|
-
const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.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:
|
|
3
|
+
const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.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:500}.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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
|
|
4
4
|
|
|
5
5
|
const TttxButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -24,7 +24,7 @@ const TttxButton = class {
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
this._iconcolor = this.iconcolor;
|
|
27
|
-
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 }))))));
|
|
27
|
+
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 }))))));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
TttxButton.style = tttxButtonCss;
|
|
@@ -7,8 +7,8 @@ import './_commonjsHelpers-9943807e.js';
|
|
|
7
7
|
* sets an error message if there's an issue, and emits a "dataChanged" event to
|
|
8
8
|
* the parent component with the field name and its new value.
|
|
9
9
|
*
|
|
10
|
-
* @param {Event} event - The focusout event triggered by the input field.
|
|
11
|
-
* @return {
|
|
10
|
+
* @param {Event | FocusEvent} event - The focusout event triggered by the input field.
|
|
11
|
+
* @return {{ target: FormField; hasError: boolean; errorMessage: string; }}
|
|
12
12
|
*/
|
|
13
13
|
function validityCheck(event) {
|
|
14
14
|
var _a, _b, _c, _d;
|
|
@@ -17,17 +17,19 @@ function validityCheck(event) {
|
|
|
17
17
|
let hasError = true;
|
|
18
18
|
let errorMessage = '';
|
|
19
19
|
// validity object on HTML5 inputs has the following options
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
/*
|
|
21
|
+
badInput
|
|
22
|
+
customError
|
|
23
|
+
patternMismatch
|
|
24
|
+
rangeOverflow
|
|
25
|
+
rangeUnderflow
|
|
26
|
+
stepMismatch
|
|
27
|
+
tooLong
|
|
28
|
+
tooShort
|
|
29
|
+
typeMismatch
|
|
30
|
+
valid
|
|
31
|
+
valueMissing
|
|
32
|
+
*/
|
|
31
33
|
// customErrors can be set with
|
|
32
34
|
// target.setCustomValidity('custom error!');
|
|
33
35
|
// and cleared with
|
|
@@ -69,14 +71,25 @@ function validityCheck(event) {
|
|
|
69
71
|
* displays the error message in an error bubble. If no error was detected,
|
|
70
72
|
* it removes the "invalid" class from the input field and clears the error bubble.
|
|
71
73
|
*
|
|
72
|
-
* @param {
|
|
74
|
+
* @param {FormField} target - The input field to update.
|
|
73
75
|
* @param {boolean} hasError - Whether an error was detected in the field.
|
|
74
76
|
* @param {string} errorMessage - The error message to display (if any).
|
|
75
77
|
* @return {void}
|
|
76
78
|
*/
|
|
77
|
-
function setErrorState(target, hasError, errorMessage) {
|
|
79
|
+
function setErrorState(target, hasError, errorMessage, parent = undefined) {
|
|
78
80
|
// Find the error bubble element for the input field
|
|
79
|
-
|
|
81
|
+
let errorBubble;
|
|
82
|
+
if (parent !== undefined) {
|
|
83
|
+
errorBubble = parent.querySelector('.errorBubble');
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
if (target.parentElement.nodeName.toLowerCase() === 'label') {
|
|
87
|
+
errorBubble = target.parentElement.querySelector('.errorBubble');
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
errorBubble = target.parentElement.parentElement.querySelector('.errorBubble');
|
|
91
|
+
}
|
|
92
|
+
}
|
|
80
93
|
// If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
|
|
81
94
|
if (hasError) {
|
|
82
95
|
target.classList.add('invalid');
|
|
@@ -100,7 +113,7 @@ function setErrorState(target, hasError, errorMessage) {
|
|
|
100
113
|
}
|
|
101
114
|
}
|
|
102
115
|
|
|
103
|
-
const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}
|
|
116
|
+
const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:19px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px;}label .outer-container input.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon{padding-right:40px}label .outer-container input.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label .outer-container input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus{border-color:#1479c6}label .outer-container input:focus-visible{outline:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.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}button{cursor:pointer}.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:500}.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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{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}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{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}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
|
|
104
117
|
|
|
105
118
|
const TttxForm = class {
|
|
106
119
|
constructor(hostRef) {
|
|
@@ -117,11 +130,8 @@ const TttxForm = class {
|
|
|
117
130
|
// If the formSchema changes and the form data is uncontrolled, store the data since the fields will be removed to avoid form duplication
|
|
118
131
|
if (!this.data && this.form && this._formSchema) {
|
|
119
132
|
const formData = new FormData(this.form);
|
|
120
|
-
this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map(
|
|
121
|
-
return [
|
|
122
|
-
formKey,
|
|
123
|
-
formData.get(formKey)
|
|
124
|
-
];
|
|
133
|
+
this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map(formKey => {
|
|
134
|
+
return [formKey, formData.get(formKey)];
|
|
125
135
|
}));
|
|
126
136
|
}
|
|
127
137
|
// Check if the new value is a string, indicating that it needs to be parsed
|
|
@@ -146,7 +156,7 @@ const TttxForm = class {
|
|
|
146
156
|
* Handles the focus event for a form field and emits a "dataChanged" event
|
|
147
157
|
* to the parent component with the field name and its new value.
|
|
148
158
|
*
|
|
149
|
-
* @param {
|
|
159
|
+
* @param {KeyboardEvent | Event} event - The focus event triggered by the field.
|
|
150
160
|
* @return {void}
|
|
151
161
|
*/
|
|
152
162
|
fieldChanged(event) {
|
|
@@ -198,20 +208,22 @@ const TttxForm = class {
|
|
|
198
208
|
* Creates a new HTMLSelectElement with a set of options.
|
|
199
209
|
*
|
|
200
210
|
* @param {string} formKey - The name of the dropdown field, as specified in the form schema.
|
|
201
|
-
* @param {
|
|
211
|
+
* @param {object} formProperties - An object containing additional properties, such as the field type and options properties.
|
|
202
212
|
* @param {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
|
|
203
|
-
* @param {
|
|
204
|
-
* @param {
|
|
205
|
-
* @param {string} formProperties.options.label - The visible value of the option.
|
|
206
|
-
* @param {string} formProperties.options.value - The actual value of the option.
|
|
213
|
+
* @param {object} formProperties.validation - A set of validation rules for the field.
|
|
214
|
+
* @param {Array<{label:string, value:string, placeholder?:boolean}>} formProperties.options - A list of properties to pass to the select options.
|
|
215
|
+
* @param {string} formProperties.options[].label - The visible value of the option.
|
|
216
|
+
* @param {string} formProperties.options[].value - The actual value of the option.
|
|
217
|
+
* @param {boolean} [formProperties.options[].placeholder]
|
|
207
218
|
*/
|
|
208
219
|
createSelect(formKey, formProperties) {
|
|
220
|
+
var _a;
|
|
209
221
|
const select = document.createElement('select');
|
|
210
222
|
select.setAttribute('name', formKey);
|
|
211
223
|
formProperties.options.forEach(optionProperties => {
|
|
212
224
|
this.appendOption(select, optionProperties);
|
|
213
225
|
});
|
|
214
|
-
if (this._data
|
|
226
|
+
if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey])
|
|
215
227
|
select.classList.remove('placeholder');
|
|
216
228
|
return select;
|
|
217
229
|
}
|
|
@@ -219,8 +231,10 @@ const TttxForm = class {
|
|
|
219
231
|
* Appends an option to a select element
|
|
220
232
|
*
|
|
221
233
|
* @param {HTMLSelectElement} select - The select elements to attach the option to.
|
|
222
|
-
* @param {
|
|
223
|
-
* @param {
|
|
234
|
+
* @param {Object} optionProperties
|
|
235
|
+
* @param {string} optionProperties.value - The value of the option.
|
|
236
|
+
* @param {string} optionProperties.label - The label which will be displayed on the form for the option.
|
|
237
|
+
* @param {boolean} [optionProperties.placeholder]
|
|
224
238
|
*/
|
|
225
239
|
appendOption(select, optionProperties) {
|
|
226
240
|
const option = document.createElement('option');
|
|
@@ -240,7 +254,7 @@ const TttxForm = class {
|
|
|
240
254
|
* and sets its autocomplete and autocapitalization properties to off.
|
|
241
255
|
*
|
|
242
256
|
* @param {string} formKey - The name of the input field, as specified in the form schema.
|
|
243
|
-
* @param {
|
|
257
|
+
* @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
|
|
244
258
|
* @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
|
|
245
259
|
* @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
|
|
246
260
|
* @return {HTMLInputElement} - The new input element.
|
|
@@ -268,12 +282,19 @@ const TttxForm = class {
|
|
|
268
282
|
* the input element (e.g., "required" will set the "required" and "data-required" attributes,
|
|
269
283
|
* "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
|
|
270
284
|
*
|
|
271
|
-
* @param {
|
|
272
|
-
* @param {
|
|
273
|
-
* @param {
|
|
274
|
-
* @param {
|
|
275
|
-
* @param {
|
|
276
|
-
* @param {
|
|
285
|
+
* @param {FormField} input - The input element to apply validation attributes to.
|
|
286
|
+
* @param {object} validation - An object containing the validation rules for the input field.
|
|
287
|
+
* @param {object} [validation.required] - An object containing a "message" property to display if the field is required.
|
|
288
|
+
* @param {string} [validation.required.message]
|
|
289
|
+
* @param {object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
|
|
290
|
+
* @param {string} [validation.pattern.pattern]
|
|
291
|
+
* @param {string} [validation.pattern.message]
|
|
292
|
+
* @param {object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
|
|
293
|
+
* @param {string} [validation.badInput.message]
|
|
294
|
+
* @param {object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
|
|
295
|
+
* @param {string} [validation.minmax.min]
|
|
296
|
+
* @param {string} [validation.minmax.max]
|
|
297
|
+
* @param {string} [validation.minmax.message]
|
|
277
298
|
* @param {string} [validation.maxlength] - The maximum length of the input field.
|
|
278
299
|
* @return {void}
|
|
279
300
|
*/
|
|
@@ -316,6 +337,13 @@ const TttxForm = class {
|
|
|
316
337
|
// Return the error bubble element
|
|
317
338
|
return errorBubble;
|
|
318
339
|
}
|
|
340
|
+
/**
|
|
341
|
+
*
|
|
342
|
+
* @param {Record<string, any>} formProperties
|
|
343
|
+
* @param {HTMLInputElement | HTMLSelectElement} input
|
|
344
|
+
* @param {HTMLLabelElement} label
|
|
345
|
+
* @returns {void}
|
|
346
|
+
*/
|
|
319
347
|
appendCheckboxInput(formProperties, input, label) {
|
|
320
348
|
if (formProperties.label) {
|
|
321
349
|
const lineBreak = document.createElement('br');
|
|
@@ -335,15 +363,16 @@ const TttxForm = class {
|
|
|
335
363
|
* and appends the input element and error bubble element to it. If the form property has
|
|
336
364
|
* no validation object, it adds an "optional" span element to the label.
|
|
337
365
|
*
|
|
338
|
-
* @param {
|
|
339
|
-
* @param {HTMLInputElement} input - The input element to associate with the label.
|
|
366
|
+
* @param {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
|
|
367
|
+
* @param {HTMLInputElement | HTMLSelectElement} input - The input element to associate with the label.
|
|
340
368
|
* @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
|
|
341
369
|
* @return {HTMLLabelElement} - The new label element.
|
|
342
370
|
*/
|
|
343
371
|
createLabel(formProperties, input, errorBubble) {
|
|
372
|
+
const outerContainer = document.createElement('div');
|
|
373
|
+
outerContainer.className = 'outer-container inputBlock';
|
|
344
374
|
// Create a new <label> element with the "inputBlock" class and the specified text
|
|
345
375
|
const label = document.createElement('label');
|
|
346
|
-
label.className = 'inputBlock';
|
|
347
376
|
label.innerText = formProperties.label;
|
|
348
377
|
// If the form property has no validation object, add an "optional" span element to the label
|
|
349
378
|
if (!formProperties.validation) {
|
|
@@ -356,12 +385,14 @@ const TttxForm = class {
|
|
|
356
385
|
label.classList.add('readonly');
|
|
357
386
|
}
|
|
358
387
|
if (formProperties.type === 'checkbox') {
|
|
359
|
-
label.className += ' inlineBlock';
|
|
360
388
|
this.appendCheckboxInput(formProperties, input, label);
|
|
361
389
|
}
|
|
362
390
|
else {
|
|
363
|
-
// Append the input element and error bubble element to the
|
|
364
|
-
|
|
391
|
+
// Append the input element and error bubble element to the outerContainer
|
|
392
|
+
outerContainer.appendChild(input);
|
|
393
|
+
}
|
|
394
|
+
if (formProperties.type !== 'checkbox') {
|
|
395
|
+
label.appendChild(outerContainer);
|
|
365
396
|
}
|
|
366
397
|
label.appendChild(errorBubble);
|
|
367
398
|
// Return the label element
|
|
@@ -418,18 +449,18 @@ const TttxForm = class {
|
|
|
418
449
|
const properties = this._formSchema.properties;
|
|
419
450
|
const propertyKeys = Object.keys(properties);
|
|
420
451
|
propertyKeys.forEach(formKey => {
|
|
421
|
-
var _a;
|
|
452
|
+
var _a, _b;
|
|
422
453
|
const formInput = formItems.querySelector(`[name=${formKey}]`);
|
|
423
454
|
// Bind events to form input elements
|
|
424
455
|
formInput.oninvalid = this.validityCheckWrapper.bind(this);
|
|
425
456
|
formInput.onblur = this.validityCheckWrapper.bind(this);
|
|
426
457
|
formInput.onkeyup = this.fieldChanged.bind(this);
|
|
427
458
|
formInput.onchange = this.fieldChanged.bind(this);
|
|
428
|
-
if (this._data
|
|
459
|
+
if (((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) !== undefined && this._data[formKey] !== null) {
|
|
429
460
|
formInput.value = this._data[formKey];
|
|
430
461
|
}
|
|
431
462
|
// If explicitly setting input as invalid, set invalid state and error message on render
|
|
432
|
-
if ((
|
|
463
|
+
if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
|
|
433
464
|
const errorMessage = properties[formKey].form.validation.invalid.message;
|
|
434
465
|
formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
|
|
435
466
|
setErrorState(formInput, true, errorMessage);
|
|
@@ -453,8 +484,6 @@ const TttxForm = class {
|
|
|
453
484
|
* and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
|
|
454
485
|
* to the "fieldset" instance variable using a ref, so it can be populated with form elements
|
|
455
486
|
* later on.
|
|
456
|
-
*
|
|
457
|
-
* @return {JSX.Element} - The rendered form template as a JSX element.
|
|
458
487
|
*/
|
|
459
488
|
render() {
|
|
460
489
|
return (h(Host, null, h("form", { ref: el => (this.form = el), onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: el => (this.fieldset = el) }), h("input", { type: "submit", ref: el => (this.submitButton = el), style: { display: 'none' } }))));
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-6a372ea6.js';
|
|
2
2
|
|
|
3
|
-
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;
|
|
3
|
+
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;font-size:16px;margin-bottom:4px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121}dd:not(:last-child){margin-bottom:16px}dl.spacedout,dl.horizontal{display:flex;flex-direction:row;width:100%}dl.spacedout{justify-content:space-between}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
|
|
4
4
|
|
|
5
5
|
const TttxKeyvalueBlock = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
this.keyvalues = undefined;
|
|
9
9
|
this.horizontal = undefined;
|
|
10
|
+
this.spacedout = undefined;
|
|
11
|
+
this._elements = undefined;
|
|
10
12
|
}
|
|
11
13
|
renderSingleElements(values) {
|
|
12
14
|
const keys = Object.keys(values);
|
|
13
15
|
const elements = [];
|
|
14
16
|
const divSize = (100 / keys.length).toString() + '%';
|
|
15
|
-
for (
|
|
16
|
-
if (this.horizontal) {
|
|
17
|
-
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null,
|
|
17
|
+
for (const element of keys) {
|
|
18
|
+
if (this.horizontal || this.spacedout) {
|
|
19
|
+
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, element), h("dd", null, values[element])));
|
|
18
20
|
}
|
|
19
21
|
else {
|
|
20
|
-
elements.push(h("dt", null,
|
|
21
|
-
elements.push(h("dd", null, values[
|
|
22
|
+
elements.push(h("dt", null, element));
|
|
23
|
+
elements.push(h("dd", null, values[element]));
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
26
|
return elements;
|
|
@@ -26,9 +28,9 @@ const TttxKeyvalueBlock = class {
|
|
|
26
28
|
renderArrayElements(values) {
|
|
27
29
|
const elements = [];
|
|
28
30
|
const divSize = (100 / values.length).toString() + '%';
|
|
29
|
-
for (
|
|
30
|
-
const value =
|
|
31
|
-
if (this.horizontal) {
|
|
31
|
+
for (const element of values) {
|
|
32
|
+
const value = element;
|
|
33
|
+
if (this.horizontal || this.spacedout) {
|
|
32
34
|
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
|
|
33
35
|
}
|
|
34
36
|
else {
|
|
@@ -39,7 +41,7 @@ const TttxKeyvalueBlock = class {
|
|
|
39
41
|
}
|
|
40
42
|
return elements;
|
|
41
43
|
}
|
|
42
|
-
|
|
44
|
+
componentWillRender() {
|
|
43
45
|
if (!this.keyvalues) {
|
|
44
46
|
return;
|
|
45
47
|
}
|
|
@@ -50,14 +52,15 @@ const TttxKeyvalueBlock = class {
|
|
|
50
52
|
else {
|
|
51
53
|
values = this.keyvalues;
|
|
52
54
|
}
|
|
53
|
-
let elements;
|
|
54
55
|
if (Array.isArray(values)) {
|
|
55
|
-
|
|
56
|
+
this._elements = this.renderArrayElements(values);
|
|
56
57
|
}
|
|
57
58
|
else {
|
|
58
|
-
|
|
59
|
+
this._elements = this.renderSingleElements(values);
|
|
59
60
|
}
|
|
60
|
-
|
|
61
|
+
}
|
|
62
|
+
render() {
|
|
63
|
+
return (h(Host, null, h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
|
|
61
64
|
}
|
|
62
65
|
};
|
|
63
66
|
TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment } from './ind
|
|
|
2
2
|
import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
|
|
3
3
|
import './_commonjsHelpers-9943807e.js';
|
|
4
4
|
|
|
5
|
-
const tttxListCss = ".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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
|
|
5
|
+
const tttxListCss = ".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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li.item:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
|
|
6
6
|
|
|
7
7
|
const TttxList = class {
|
|
8
8
|
constructor(hostRef) {
|