@3t-transform/threeteeui 0.2.113 → 0.2.115
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/tttx-checkbox-group-caption.cjs.entry.js +1 -1
- package/dist/cjs/tttx-checkbox-group-heading.cjs.entry.js +1 -1
- package/dist/cjs/tttx-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/tttx-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/tttx-form.cjs.entry.js +1 -1
- package/dist/cjs/tttx-select-box.cjs.entry.js +26 -6
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +1 -1
- package/dist/cjs/tttx-tabs.cjs.entry.js +1 -1
- package/dist/cjs/tttx-textarea.cjs.entry.js +1 -1
- package/dist/collection/components/atoms/tttx-checkbox/tttx-checkbox.css +1 -1
- package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.css +2 -2
- package/dist/collection/components/molecules/tttx-form/tttx-form.css +4 -4
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.css +42 -6
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.js +26 -6
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.stories.js +4 -4
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +4 -4
- package/dist/collection/components/molecules/tttx-tabs/tttx-tabs.css +1 -1
- package/dist/collection/components/molecules/tttx-textarea/tttx-textarea.css +4 -4
- package/dist/components/tttx-checkbox-group-caption.js +1 -1
- package/dist/components/tttx-checkbox-group-heading.js +1 -1
- package/dist/components/tttx-checkbox-group.js +1 -1
- package/dist/components/tttx-checkbox.js +1 -1
- package/dist/components/tttx-form.js +1 -1
- package/dist/components/tttx-select-box.js +27 -7
- package/dist/components/tttx-standalone-input2.js +1 -1
- package/dist/components/tttx-tabs.js +1 -1
- package/dist/components/tttx-textarea.js +1 -1
- package/dist/esm/tttx-checkbox-group-caption.entry.js +1 -1
- package/dist/esm/tttx-checkbox-group-heading.entry.js +1 -1
- package/dist/esm/tttx-checkbox-group.entry.js +1 -1
- package/dist/esm/tttx-checkbox.entry.js +1 -1
- package/dist/esm/tttx-form.entry.js +1 -1
- package/dist/esm/tttx-select-box.entry.js +27 -7
- package/dist/esm/tttx-standalone-input.entry.js +1 -1
- package/dist/esm/tttx-tabs.entry.js +1 -1
- package/dist/esm/tttx-textarea.entry.js +1 -1
- package/dist/tttx/{p-a64c9910.entry.js → p-0fb0d9eb.entry.js} +1 -1
- package/dist/tttx/p-5b8bb736.entry.js +1 -0
- package/dist/tttx/p-64d61284.entry.js +1 -0
- package/dist/tttx/{p-80e3bd36.entry.js → p-78875ac9.entry.js} +1 -1
- package/dist/tttx/{p-69e15a92.entry.js → p-7c3a76f3.entry.js} +1 -1
- package/dist/tttx/{p-ed9ebbfb.entry.js → p-ae4e3fe8.entry.js} +1 -1
- package/dist/tttx/{p-67f24d17.entry.js → p-c3ca37bb.entry.js} +1 -1
- package/dist/tttx/{p-34f328f9.entry.js → p-e0662bf6.entry.js} +1 -1
- package/dist/tttx/{p-562eafbd.entry.js → p-f247443b.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/molecules/tttx-select-box/interfaces.d.ts +1 -0
- package/package.json +1 -1
- package/dist/tttx/p-6b6da818.entry.js +0 -1
- package/dist/tttx/p-bf5e95e2.entry.js +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-992a9fb3.js');
|
|
6
6
|
|
|
7
|
-
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:
|
|
7
|
+
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
|
|
8
8
|
|
|
9
9
|
const TttxCheckboxGroupCaption = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-992a9fb3.js');
|
|
6
6
|
|
|
7
|
-
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:
|
|
7
|
+
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
|
|
8
8
|
|
|
9
9
|
const TttxCheckboxGroupHeading = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-992a9fb3.js');
|
|
6
6
|
|
|
7
|
-
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:
|
|
7
|
+
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
|
|
8
8
|
|
|
9
9
|
const TttxCheckboxGroup = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-992a9fb3.js');
|
|
6
6
|
|
|
7
|
-
const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:
|
|
7
|
+
const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:18.752px}.tttx-checkbox tttx-icon{height:24px}.tttx-checkbox.--inline{display:inline-flex}.tttx-checkbox__input{display:none}.tttx-checkbox__label{margin-left:8px;padding-right:0;color:#212121;font-weight:normal}";
|
|
8
8
|
|
|
9
9
|
const TttxCheckbox = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -131,7 +131,7 @@ function setErrorState(target, hasError, errorMessage, parent = undefined) {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
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:
|
|
134
|
+
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:18.752px;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,label .outer-container textarea{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,label .outer-container textarea.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon,label .outer-container textarea.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon,label .outer-container textarea.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon,label .outer-container textarea.has-right-icon{padding-right:40px}label .outer-container input.invalid,label .outer-container textarea.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]),label .outer-container textarea:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label .outer-container input[type=radio],label .outer-container textarea[type=radio]{width:20px;height:20px}label .outer-container input[type=date],label .outer-container textarea[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly],label .outer-container textarea[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus,label .outer-container textarea:focus{border-color:#1479c6}label .outer-container input:focus-visible,label .outer-container textarea:focus-visible{outline:none}label .outer-container textarea{padding:8px;height:auto;min-height:100px;resize:vertical}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.inputBlock.radioBlock{display:block}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:16.408px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16.408px;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}label.flex-label{display:flex;flex-direction:column;width:300px;box-sizing:border-box}label.flex-label input[type=date]{flex-grow:1;min-width:auto}label.flex-label input[type=time]{min-width:auto;text-align:center;width:180px;margin-left:16px}";
|
|
135
135
|
|
|
136
136
|
const TttxForm = class {
|
|
137
137
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ const index = require('./index-992a9fb3.js');
|
|
|
6
6
|
const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
|
|
7
7
|
require('./_commonjsHelpers-537d719a.js');
|
|
8
8
|
|
|
9
|
-
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-
|
|
9
|
+
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{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{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
10
10
|
|
|
11
11
|
const TttxSelectBox = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -51,9 +51,27 @@ const TttxSelectBox = class {
|
|
|
51
51
|
this.handleBlur();
|
|
52
52
|
}
|
|
53
53
|
dropdownSelectorContent() {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
let title;
|
|
55
|
+
let subtitle;
|
|
56
|
+
const chevronIcon = this.open ? 'expand_less' : 'expand_more';
|
|
57
|
+
const icon = index.h("tttx-icon", { icon: chevronIcon, color: "black" });
|
|
58
|
+
let chevron = index.h("div", { class: 'dropdown-selector-chevron' }, icon);
|
|
59
|
+
if (!this.selectedItem) {
|
|
60
|
+
title = index.h("div", { class: "placeholder" }, this.placeholder);
|
|
61
|
+
return index.h(index.Fragment, null, title, chevron);
|
|
62
|
+
}
|
|
63
|
+
else if (this.selectedItem.html) {
|
|
64
|
+
title = index.h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html });
|
|
65
|
+
return index.h(index.Fragment, null, title, chevron);
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
title = index.h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label);
|
|
69
|
+
if (this.selectedItem.description) {
|
|
70
|
+
subtitle = index.h("div", { class: "description" }, index.h("p", null, this.selectedItem.description));
|
|
71
|
+
chevron = index.h("div", { class: 'dropdown-selector-chevron-offset' }, icon);
|
|
72
|
+
}
|
|
73
|
+
return index.h(index.Fragment, null, index.h("div", { class: "left-wrapper" }, title, subtitle), chevron);
|
|
74
|
+
}
|
|
57
75
|
}
|
|
58
76
|
dropdownOption(option) {
|
|
59
77
|
/* istanbul ignore next */
|
|
@@ -64,6 +82,9 @@ const TttxSelectBox = class {
|
|
|
64
82
|
/* istanbul ignore next */
|
|
65
83
|
return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
|
|
66
84
|
}
|
|
85
|
+
else if (option.description) {
|
|
86
|
+
return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, index.h("div", { class: "description-dd" }, index.h("p", null, option.description))));
|
|
87
|
+
}
|
|
67
88
|
/* istanbul ignore next */
|
|
68
89
|
return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
|
|
69
90
|
}
|
|
@@ -91,8 +112,7 @@ const TttxSelectBox = class {
|
|
|
91
112
|
if (!this.optionsData)
|
|
92
113
|
return;
|
|
93
114
|
this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
|
|
94
|
-
|
|
95
|
-
return (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: "dropdown-selector", ref: (el) => this.dropdownSelector = el, onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), index.h("div", { class: "dropdown-selector-chevron" }, index.h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (index.h("div", { class: "dropdown-body-container" }, index.h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled &&
|
|
115
|
+
return (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: "dropdown-selector", ref: (el) => this.dropdownSelector = el, onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent()), this.open && (index.h("div", { class: "dropdown-body-container" }, index.h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled &&
|
|
96
116
|
/* istanbul ignore next */
|
|
97
117
|
index.h("div", { class: "searchbox" }, index.h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), index.h("div", { class: "dropdown-options-list" }, this._optionsData.map((option) => {
|
|
98
118
|
return this.dropdownOption(option);
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-992a9fb3.js');
|
|
6
6
|
|
|
7
|
-
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:
|
|
7
|
+
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:18.752px;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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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]),label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=radio].sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea[type=radio].sc-tttx-standalone-input{width:20px;height:20px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=date].sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea[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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea[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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.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,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.sc-tttx-standalone-input:focus-visible{outline:none}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input textarea.sc-tttx-standalone-input{padding:8px;height:auto;min-height:100px;resize:vertical}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.inputBlock.radioBlock.sc-tttx-standalone-input{display:block}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:16.408px;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:16.408px;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}";
|
|
8
8
|
|
|
9
9
|
const TttxInput = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ const index = require('./index-992a9fb3.js');
|
|
|
6
6
|
const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
|
|
7
7
|
require('./_commonjsHelpers-537d719a.js');
|
|
8
8
|
|
|
9
|
-
const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs-h{display:block}.tab-bar.sc-tttx-tabs{display:flex;height:52px}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs>*.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs>*.sc-tttx-tabs{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs>.tabs-container.wide.sc-tttx-tabs{flex-grow:1}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs{padding:18px 16px;line-height:
|
|
9
|
+
const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs-h{display:block}.tab-bar.sc-tttx-tabs{display:flex;height:52px}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs>*.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs>*.sc-tttx-tabs{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs>.tabs-container.wide.sc-tttx-tabs{flex-grow:1}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs{padding:18px 16px;line-height:16.408px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab][aria-selected].sc-tttx-tabs{color:#212121;cursor:default;border-bottom:3px solid #1579c6}";
|
|
10
10
|
|
|
11
11
|
const TttxTabs = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-992a9fb3.js');
|
|
6
6
|
|
|
7
|
-
const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea-h{display:block}label.sc-tttx-textarea{font-weight:500;font-size:16px;line-height:
|
|
7
|
+
const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea-h{display:block}label.sc-tttx-textarea{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea{position:relative}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;padding:9px 16px;font-size:16px;line-height:18.752px;border:1px solid #d5d5d5;border-radius:4px;margin-top:8px;resize:none}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.no-label.sc-tttx-textarea{margin-top:0}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea~.errorBubble.sc-tttx-textarea{font-size:14px;line-height:16.408px;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-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea~.errorBubble.sc-tttx-textarea:not(.visible){display:none}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea~.errorBubble.sc-tttx-textarea span.sc-tttx-textarea{color:#dc0000;font-size:16px;margin-right:4px}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea:focus{border-color:#1479c6}label.sc-tttx-textarea .textarea-container.sc-tttx-textarea textarea.sc-tttx-textarea:focus-visible{outline:none}label.sc-tttx-textarea .secondarylabel.sc-tttx-textarea{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-textarea .optional.sc-tttx-textarea{color:#757575;font-weight:normal}";
|
|
8
8
|
|
|
9
9
|
const TttxTextarea = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-family: "Roboto", sans-serif;
|
|
12
12
|
font-size: 14px;
|
|
13
13
|
font-weight: normal;
|
|
14
|
-
line-height:
|
|
14
|
+
line-height: 18.752px;
|
|
15
15
|
margin-bottom: 4px;
|
|
16
16
|
}
|
|
17
17
|
.tttx-checkbox-group__heading {
|
|
@@ -19,6 +19,6 @@
|
|
|
19
19
|
font-family: "Roboto", sans-serif;
|
|
20
20
|
font-size: 16px;
|
|
21
21
|
font-weight: 500;
|
|
22
|
-
line-height:
|
|
22
|
+
line-height: 16.408px;
|
|
23
23
|
margin-bottom: 4px;
|
|
24
24
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
label {
|
|
10
10
|
font-weight: 500;
|
|
11
11
|
font-size: 16px;
|
|
12
|
-
line-height:
|
|
12
|
+
line-height: 18.752px;
|
|
13
13
|
color: #212121;
|
|
14
14
|
}
|
|
15
15
|
label .optional {
|
|
@@ -68,7 +68,7 @@ label .outer-container input:not([type=submit]), label .outer-container textarea
|
|
|
68
68
|
width: 100%;
|
|
69
69
|
height: 36px;
|
|
70
70
|
font-size: 16px;
|
|
71
|
-
line-height:
|
|
71
|
+
line-height: 18.752px;
|
|
72
72
|
}
|
|
73
73
|
label .outer-container input[type=radio], label .outer-container textarea[type=radio] {
|
|
74
74
|
width: 20px;
|
|
@@ -127,7 +127,7 @@ label .outer-container.inputInline input {
|
|
|
127
127
|
label .secondarylabel {
|
|
128
128
|
color: #757575;
|
|
129
129
|
font-size: 14px;
|
|
130
|
-
line-height:
|
|
130
|
+
line-height: 16.408px;
|
|
131
131
|
font-weight: normal;
|
|
132
132
|
display: flex;
|
|
133
133
|
margin-top: 4px;
|
|
@@ -135,7 +135,7 @@ label .secondarylabel {
|
|
|
135
135
|
label .errorBubble {
|
|
136
136
|
position: relative;
|
|
137
137
|
font-size: 14px;
|
|
138
|
-
line-height:
|
|
138
|
+
line-height: 16.408px;
|
|
139
139
|
font-weight: normal;
|
|
140
140
|
width: 100%;
|
|
141
141
|
font-family: "Roboto", sans-serif;
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
|
|
10
10
|
.label {
|
|
11
11
|
font-size: 16px;
|
|
12
|
-
font-style: normal;
|
|
13
12
|
font-weight: 500;
|
|
14
|
-
line-height:
|
|
13
|
+
line-height: 18.752px;
|
|
14
|
+
color: #212121;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
:host(.inline) .label {
|
|
@@ -42,21 +42,54 @@
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.dropdown-selector {
|
|
45
|
+
min-height: 36px;
|
|
46
|
+
box-sizing: border-box;
|
|
45
47
|
align-items: center;
|
|
46
48
|
gap: 8px;
|
|
47
|
-
padding:
|
|
49
|
+
padding: 4px 8px 4px 16px;
|
|
48
50
|
cursor: pointer;
|
|
51
|
+
justify-content: space-between;
|
|
49
52
|
border: 1px solid #d5d5d5;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: row;
|
|
55
|
+
}
|
|
56
|
+
.dropdown-selector > .left-wrapper {
|
|
57
|
+
flex: 1;
|
|
58
|
+
min-width: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.description {
|
|
62
|
+
color: #757575;
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
line-height: 16.408px;
|
|
65
|
+
}
|
|
66
|
+
.description > p {
|
|
67
|
+
margin: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.description-dd {
|
|
71
|
+
color: #757575;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
line-height: 16.408px;
|
|
74
|
+
}
|
|
75
|
+
.description-dd > p {
|
|
76
|
+
margin: 0;
|
|
50
77
|
}
|
|
51
78
|
|
|
52
79
|
.truncated-text {
|
|
53
80
|
white-space: nowrap;
|
|
54
|
-
overflow
|
|
81
|
+
overflow: hidden;
|
|
55
82
|
text-overflow: ellipsis;
|
|
83
|
+
color: #212121;
|
|
84
|
+
font-size: 16px;
|
|
85
|
+
line-height: 18.752px;
|
|
56
86
|
}
|
|
57
87
|
|
|
58
88
|
.dropdown-selector-chevron {
|
|
59
|
-
|
|
89
|
+
height: 24px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.dropdown-selector-chevron-offset {
|
|
60
93
|
height: 24px;
|
|
61
94
|
}
|
|
62
95
|
|
|
@@ -96,7 +129,10 @@
|
|
|
96
129
|
}
|
|
97
130
|
|
|
98
131
|
.placeholder {
|
|
99
|
-
color: #
|
|
132
|
+
color: #9e9e9e;
|
|
133
|
+
white-space: nowrap;
|
|
134
|
+
overflow-x: hidden;
|
|
135
|
+
text-overflow: ellipsis;
|
|
100
136
|
}
|
|
101
137
|
|
|
102
138
|
.searchbox {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { h, Host } from '@stencil/core';
|
|
2
|
+
import { h, Host, Fragment } from '@stencil/core';
|
|
3
3
|
import * as DOMPurify from 'dompurify';
|
|
4
4
|
import domSanitiserOptions from '../../../shared/domsanitiser.options';
|
|
5
5
|
export class TttxSelectBox {
|
|
@@ -42,9 +42,27 @@ export class TttxSelectBox {
|
|
|
42
42
|
this.handleBlur();
|
|
43
43
|
}
|
|
44
44
|
dropdownSelectorContent() {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
let title;
|
|
46
|
+
let subtitle;
|
|
47
|
+
const chevronIcon = this.open ? 'expand_less' : 'expand_more';
|
|
48
|
+
const icon = h("tttx-icon", { icon: chevronIcon, color: "black" });
|
|
49
|
+
let chevron = h("div", { class: 'dropdown-selector-chevron' }, icon);
|
|
50
|
+
if (!this.selectedItem) {
|
|
51
|
+
title = h("div", { class: "placeholder" }, this.placeholder);
|
|
52
|
+
return h(Fragment, null, title, chevron);
|
|
53
|
+
}
|
|
54
|
+
else if (this.selectedItem.html) {
|
|
55
|
+
title = h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html });
|
|
56
|
+
return h(Fragment, null, title, chevron);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
title = h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label);
|
|
60
|
+
if (this.selectedItem.description) {
|
|
61
|
+
subtitle = h("div", { class: "description" }, h("p", null, this.selectedItem.description));
|
|
62
|
+
chevron = h("div", { class: 'dropdown-selector-chevron-offset' }, icon);
|
|
63
|
+
}
|
|
64
|
+
return h(Fragment, null, h("div", { class: "left-wrapper" }, title, subtitle), chevron);
|
|
65
|
+
}
|
|
48
66
|
}
|
|
49
67
|
dropdownOption(option) {
|
|
50
68
|
/* istanbul ignore next */
|
|
@@ -55,6 +73,9 @@ export class TttxSelectBox {
|
|
|
55
73
|
/* istanbul ignore next */
|
|
56
74
|
return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
|
|
57
75
|
}
|
|
76
|
+
else if (option.description) {
|
|
77
|
+
return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, h("div", { class: "description-dd" }, h("p", null, option.description))));
|
|
78
|
+
}
|
|
58
79
|
/* istanbul ignore next */
|
|
59
80
|
return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
|
|
60
81
|
}
|
|
@@ -82,8 +103,7 @@ export class TttxSelectBox {
|
|
|
82
103
|
if (!this.optionsData)
|
|
83
104
|
return;
|
|
84
105
|
this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
|
|
85
|
-
|
|
86
|
-
return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", ref: (el) => this.dropdownSelector = el, onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled &&
|
|
106
|
+
return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", ref: (el) => this.dropdownSelector = el, onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent()), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled &&
|
|
87
107
|
/* istanbul ignore next */
|
|
88
108
|
h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), h("div", { class: "dropdown-options-list" }, this._optionsData.map((option) => {
|
|
89
109
|
return this.dropdownOption(option);
|
|
@@ -3,12 +3,12 @@ export default {
|
|
|
3
3
|
component: 'tttx-select-box',
|
|
4
4
|
};
|
|
5
5
|
const options = [
|
|
6
|
-
{ value: 'Bonnie', label: 'Steuber' },
|
|
7
|
-
{ value: 'Priscilla', label: 'Lowe' },
|
|
6
|
+
{ value: 'Bonnie', label: 'Steuber', description: 'Practical Course' },
|
|
7
|
+
{ value: 'Priscilla', label: 'Lowe', description: 'E-learn course' },
|
|
8
8
|
{ value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
|
|
9
|
-
{ value: 'egg', label: 'egg', html: '<tttx-icon icon="egg" />' },
|
|
9
|
+
{ value: 'egg', label: 'egg', html: '<tttx-icon icon="egg" />', description: 'Practical Course' },
|
|
10
10
|
{ value: 'Terence', label: 'Hyatt' },
|
|
11
|
-
{ value: 'Ruben', label: 'Toy' },
|
|
11
|
+
{ value: 'Ruben', label: 'Toy', description: 'E-learn course' },
|
|
12
12
|
{ value: 'Rhiannon', label: 'Hills' },
|
|
13
13
|
{ value: 'Trent', label: 'Mueller' },
|
|
14
14
|
{ value: 'Penelope', label: 'Mann' },
|
package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
label {
|
|
10
10
|
font-weight: 500;
|
|
11
11
|
font-size: 16px;
|
|
12
|
-
line-height:
|
|
12
|
+
line-height: 18.752px;
|
|
13
13
|
color: #212121;
|
|
14
14
|
}
|
|
15
15
|
label .optional {
|
|
@@ -68,7 +68,7 @@ label .outer-container input:not([type=submit]), label .outer-container textarea
|
|
|
68
68
|
width: 100%;
|
|
69
69
|
height: 36px;
|
|
70
70
|
font-size: 16px;
|
|
71
|
-
line-height:
|
|
71
|
+
line-height: 18.752px;
|
|
72
72
|
}
|
|
73
73
|
label .outer-container input[type=radio], label .outer-container textarea[type=radio] {
|
|
74
74
|
width: 20px;
|
|
@@ -127,7 +127,7 @@ label .outer-container.inputInline input {
|
|
|
127
127
|
label .secondarylabel {
|
|
128
128
|
color: #757575;
|
|
129
129
|
font-size: 14px;
|
|
130
|
-
line-height:
|
|
130
|
+
line-height: 16.408px;
|
|
131
131
|
font-weight: normal;
|
|
132
132
|
display: flex;
|
|
133
133
|
margin-top: 4px;
|
|
@@ -135,7 +135,7 @@ label .secondarylabel {
|
|
|
135
135
|
label .errorBubble {
|
|
136
136
|
position: relative;
|
|
137
137
|
font-size: 14px;
|
|
138
|
-
line-height:
|
|
138
|
+
line-height: 16.408px;
|
|
139
139
|
font-weight: normal;
|
|
140
140
|
width: 100%;
|
|
141
141
|
font-family: "Roboto", sans-serif;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
label {
|
|
10
10
|
font-weight: 500;
|
|
11
11
|
font-size: 16px;
|
|
12
|
-
line-height:
|
|
12
|
+
line-height: 18.752px;
|
|
13
13
|
color: #212121;
|
|
14
14
|
}
|
|
15
15
|
label .textarea-container {
|
|
@@ -21,7 +21,7 @@ label .textarea-container textarea {
|
|
|
21
21
|
width: 100%;
|
|
22
22
|
padding: 9px 16px;
|
|
23
23
|
font-size: 16px;
|
|
24
|
-
line-height:
|
|
24
|
+
line-height: 18.752px;
|
|
25
25
|
border: 1px solid #d5d5d5;
|
|
26
26
|
border-radius: 4px;
|
|
27
27
|
margin-top: 8px;
|
|
@@ -32,7 +32,7 @@ label .textarea-container textarea.no-label {
|
|
|
32
32
|
}
|
|
33
33
|
label .textarea-container textarea ~ .errorBubble {
|
|
34
34
|
font-size: 14px;
|
|
35
|
-
line-height:
|
|
35
|
+
line-height: 16.408px;
|
|
36
36
|
font-weight: normal;
|
|
37
37
|
width: 100%;
|
|
38
38
|
font-family: "Roboto", sans-serif;
|
|
@@ -60,7 +60,7 @@ label .textarea-container textarea:focus-visible {
|
|
|
60
60
|
label .secondarylabel {
|
|
61
61
|
color: #757575;
|
|
62
62
|
font-size: 14px;
|
|
63
|
-
line-height:
|
|
63
|
+
line-height: 16.408px;
|
|
64
64
|
font-weight: normal;
|
|
65
65
|
display: flex;
|
|
66
66
|
margin-top: 4px;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:
|
|
3
|
+
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
|
|
4
4
|
|
|
5
5
|
const TttxCheckboxGroupCaption$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:
|
|
3
|
+
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
|
|
4
4
|
|
|
5
5
|
const TttxCheckboxGroupHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:
|
|
3
|
+
const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
|
|
4
4
|
|
|
5
5
|
const TttxCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$2 } from './tttx-icon2.js';
|
|
3
3
|
|
|
4
|
-
const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:
|
|
4
|
+
const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:18.752px}.tttx-checkbox tttx-icon{height:24px}.tttx-checkbox.--inline{display:inline-flex}.tttx-checkbox__input{display:none}.tttx-checkbox__label{margin-left:8px;padding-right:0;color:#212121;font-weight:normal}";
|
|
5
5
|
|
|
6
6
|
const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -126,7 +126,7 @@ function setErrorState(target, hasError, errorMessage, parent = undefined) {
|
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
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:
|
|
129
|
+
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:18.752px;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,label .outer-container textarea{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,label .outer-container textarea.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon,label .outer-container textarea.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon,label .outer-container textarea.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon,label .outer-container textarea.has-right-icon{padding-right:40px}label .outer-container input.invalid,label .outer-container textarea.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]),label .outer-container textarea:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label .outer-container input[type=radio],label .outer-container textarea[type=radio]{width:20px;height:20px}label .outer-container input[type=date],label .outer-container textarea[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly],label .outer-container textarea[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus,label .outer-container textarea:focus{border-color:#1479c6}label .outer-container input:focus-visible,label .outer-container textarea:focus-visible{outline:none}label .outer-container textarea{padding:8px;height:auto;min-height:100px;resize:vertical}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.inputBlock.radioBlock{display:block}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:16.408px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16.408px;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}label.flex-label{display:flex;flex-direction:column;width:300px;box-sizing:border-box}label.flex-label input[type=date]{flex-grow:1;min-width:auto}label.flex-label input[type=time]{min-width:auto;text-align:center;width:180px;margin-left:16px}";
|
|
130
130
|
|
|
131
131
|
const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
132
132
|
constructor() {
|