@3t-transform/threeteeui 0.0.17 → 0.0.19
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/{index-864b7110.js → index-bf777121.js} +3 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/tttx-button.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-icon.cjs.entry.js +1 -1
- package/dist/cjs/tttx-input-calendar.cjs.entry.js +1 -1
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +39 -8
- package/dist/cjs/tttx-list.cjs.entry.js +1 -1
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
- package/dist/cjs/tttx-popover-content.cjs.entry.js +1 -1
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +2 -2
- package/dist/cjs/tttx-table.cjs.entry.js +1 -1
- package/dist/cjs/tttx.cjs.js +2 -2
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +32 -0
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +55 -7
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +26 -0
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +1 -1
- package/dist/components/tttx-keyvalue-block.js +40 -8
- package/dist/components/tttx-standalone-input.js +2 -3
- package/dist/esm/{index-232e347b.js → index-a05bd606.js} +3 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/tttx-button.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-icon.entry.js +1 -1
- package/dist/esm/tttx-input-calendar.entry.js +1 -1
- package/dist/esm/tttx-keyvalue-block.entry.js +39 -8
- package/dist/esm/tttx-list.entry.js +1 -1
- package/dist/esm/tttx-loading-spinner.entry.js +1 -1
- package/dist/esm/tttx-popover-content.entry.js +1 -1
- package/dist/esm/tttx-standalone-input.entry.js +2 -2
- package/dist/esm/tttx-table.entry.js +1 -1
- package/dist/esm/tttx.js +3 -3
- package/dist/tttx/{p-3973b7dd.entry.js → p-037d286f.entry.js} +1 -1
- package/dist/tttx/{p-184c4fae.js → p-07b134af.js} +1 -1
- package/dist/tttx/{p-1bc3dfee.entry.js → p-1b63f16a.entry.js} +1 -1
- package/dist/tttx/p-224213ae.entry.js +1 -0
- package/dist/tttx/{p-220f7519.entry.js → p-45afb84c.entry.js} +1 -1
- package/dist/tttx/{p-f56fe662.entry.js → p-68ff0f39.entry.js} +1 -1
- package/dist/tttx/{p-6828fe6f.entry.js → p-93763d3c.entry.js} +1 -1
- package/dist/tttx/{p-81904eed.entry.js → p-a5808741.entry.js} +1 -1
- package/dist/tttx/{p-fe4c70b2.entry.js → p-a92ca87e.entry.js} +1 -1
- package/dist/tttx/{p-5247e827.entry.js → p-a96ca037.entry.js} +1 -1
- package/dist/tttx/p-e3cc75bb.entry.js +1 -0
- package/dist/tttx/{p-01e1894e.entry.js → p-f579ed1e.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +4 -1
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +3 -0
- package/dist/types/components.d.ts +4 -2
- package/package.json +1 -1
- package/dist/tttx/p-1cf8f9e8.entry.js +0 -1
- package/dist/tttx/p-cf107fb6.entry.js +0 -1
|
@@ -307,6 +307,9 @@ const attachStyles = (hostRef) => {
|
|
|
307
307
|
// DOM WRITE!!
|
|
308
308
|
elm['s-sc'] = scopeId;
|
|
309
309
|
elm.classList.add(scopeId + '-h');
|
|
310
|
+
if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
|
|
311
|
+
elm.classList.add(scopeId + '-s');
|
|
312
|
+
}
|
|
310
313
|
}
|
|
311
314
|
endAttachStyles();
|
|
312
315
|
};
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[
|
|
17
|
+
return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}.spacing{margin-bottom:16px}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:block}fieldset{margin:0;padding:0;border:none}input[type=submit]{margin-left:auto}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxIconCss = ".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:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxInputCalendarCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;--border-radius:4px;position:relative}.calcontainer{-webkit-perspective:500px;perspective:500px}.lefty{float:left}.righty{float:right}.calendar{display:none;position:absolute;box-sizing:border-box;width:312px;height:332px;background-color:white;padding:16px;box-shadow:0px 1px 5px rgba(17, 17, 17, 0.3);border-radius:var(--border-radius)}.calendar-header{display:flex;justify-content:space-between;margin-bottom:8px}.date-display{margin-top:8px}.calendar-header select{border:none;padding:5px}.calendar-table{width:100%;border-collapse:collapse}.calendar-table th{text-align:center;padding:4px;text-transform:uppercase;font-size:14px;color:#757575;border-bottom:1px solid #d5d5d5;margin-bottom:8px}.calendar .calendar-table td{padding:0;margin:0;width:14.2%;text-align:center;height:36px;line-height:36px}.calendar .calendar-table td span:hover{background-color:#f0f0f0}.calendar .calendar-table td span{display:block;text-align:center;padding:4px;cursor:pointer;border-radius:var(--border-radius)}.calendar-visible{display:block}.calendar-table thead tr{border-bottom:1px solid #d5d5d5}";
|
|
8
8
|
|
|
@@ -2,14 +2,44 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
|
-
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px
|
|
7
|
+
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 1025px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
|
|
8
8
|
|
|
9
9
|
const TttxKeyvalueBlock = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
12
|
this.keyvalues = undefined;
|
|
13
|
+
this.horizontal = undefined;
|
|
14
|
+
}
|
|
15
|
+
renderSingleElements(values) {
|
|
16
|
+
const keys = Object.keys(values);
|
|
17
|
+
const elements = [];
|
|
18
|
+
for (let i = 0; i < keys.length; i++) {
|
|
19
|
+
if (this.horizontal) {
|
|
20
|
+
elements.push(index.h("div", null, index.h("dt", null, keys[i]), index.h("dd", null, values[keys[i]])));
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
elements.push(index.h("dt", null, keys[i]));
|
|
24
|
+
elements.push(index.h("dd", null, values[keys[i]]));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return elements;
|
|
28
|
+
}
|
|
29
|
+
renderArrayElements(values) {
|
|
30
|
+
const elements = [];
|
|
31
|
+
for (let i = 0; i < values.length; i++) {
|
|
32
|
+
const value = values[i];
|
|
33
|
+
if (this.horizontal) {
|
|
34
|
+
elements.push(index.h("div", null, index.h("dt", { class: "mainTitle" }, value.title), index.h("dt", { class: "subTitle" }, value.subTitle), index.h("dd", null, value.data)));
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
elements.push(index.h("dt", { class: "mainTitle" }, value.title));
|
|
38
|
+
elements.push(index.h("dt", { class: "subTitle" }, value.subTitle));
|
|
39
|
+
elements.push(index.h("dd", null, value.data));
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return elements;
|
|
13
43
|
}
|
|
14
44
|
render() {
|
|
15
45
|
let values;
|
|
@@ -19,13 +49,14 @@ const TttxKeyvalueBlock = class {
|
|
|
19
49
|
else {
|
|
20
50
|
values = this.keyvalues;
|
|
21
51
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
52
|
+
let elements;
|
|
53
|
+
if (Array.isArray(values)) {
|
|
54
|
+
elements = this.renderArrayElements(values);
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
elements = this.renderSingleElements(values);
|
|
27
58
|
}
|
|
28
|
-
return (index.h(index.Host, null, index.h("dl", null, elements)));
|
|
59
|
+
return (index.h(index.Host, null, index.h("dl", { class: this.horizontal ? "horizontal" : null }, elements)));
|
|
29
60
|
}
|
|
30
61
|
};
|
|
31
62
|
TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
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}.tttx-list__row{min-height:52px;line-height:36px;padding:8px;display:flex;flex-direction:row;align-items:center;cursor:pointer;border-bottom:1px solid #d5d5d5}.tttx-list__row .generic-template__content{width:100%;display:flex;align-items:center;gap:8px}.tttx-list__row:first-of-type{border-top:1px solid #d5d5d5}.tttx-list__row:focus,.tttx-list__row:active{background-color:#e6e6e6}.tttx-list__row.selected{background-color:#e7f1f9}.load-indicator{display:flex;justify-content:center}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
|
|
8
8
|
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
|
-
const tttxStandaloneInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}
|
|
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-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}";
|
|
8
8
|
|
|
9
9
|
const TttxInput = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
const tttxTableCss = "// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";
|
|
8
8
|
|
package/dist/cjs/tttx.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bf777121.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[
|
|
20
|
+
return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -13,9 +13,16 @@ dt {
|
|
|
13
13
|
font-weight: 400;
|
|
14
14
|
line-height: 21px;
|
|
15
15
|
font-size: 16px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
dt, dt.subTitle {
|
|
16
19
|
color: #757575;
|
|
17
20
|
}
|
|
18
21
|
|
|
22
|
+
dt.mainTitle {
|
|
23
|
+
color: #212121;
|
|
24
|
+
}
|
|
25
|
+
|
|
19
26
|
dd {
|
|
20
27
|
margin: 0;
|
|
21
28
|
font-weight: 400;
|
|
@@ -23,4 +30,29 @@ dd {
|
|
|
23
30
|
color: #212121;
|
|
24
31
|
line-height: 21px;
|
|
25
32
|
margin-bottom: 18px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
dl.horizontal {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: row;
|
|
38
|
+
width: 100%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
dl.horizontal div {
|
|
42
|
+
flex-grow: 1;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (max-width: 1025px) {
|
|
46
|
+
dl.horizontal {
|
|
47
|
+
flex-wrap: wrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
dl.horizontal div {
|
|
51
|
+
width: 50%;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
@media (max-width: 600px) {
|
|
55
|
+
dl.horizontal div {
|
|
56
|
+
width: 100%;
|
|
57
|
+
}
|
|
26
58
|
}
|
|
@@ -3,6 +3,36 @@ import { h, Host } from '@stencil/core';
|
|
|
3
3
|
export class TttxKeyvalueBlock {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.keyvalues = undefined;
|
|
6
|
+
this.horizontal = undefined;
|
|
7
|
+
}
|
|
8
|
+
renderSingleElements(values) {
|
|
9
|
+
const keys = Object.keys(values);
|
|
10
|
+
const elements = [];
|
|
11
|
+
for (let i = 0; i < keys.length; i++) {
|
|
12
|
+
if (this.horizontal) {
|
|
13
|
+
elements.push(h("div", null, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
elements.push(h("dt", null, keys[i]));
|
|
17
|
+
elements.push(h("dd", null, values[keys[i]]));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return elements;
|
|
21
|
+
}
|
|
22
|
+
renderArrayElements(values) {
|
|
23
|
+
const elements = [];
|
|
24
|
+
for (let i = 0; i < values.length; i++) {
|
|
25
|
+
const value = values[i];
|
|
26
|
+
if (this.horizontal) {
|
|
27
|
+
elements.push(h("div", null, h("dt", { class: "mainTitle" }, value.title), h("dt", { class: "subTitle" }, value.subTitle), h("dd", null, value.data)));
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
elements.push(h("dt", { class: "mainTitle" }, value.title));
|
|
31
|
+
elements.push(h("dt", { class: "subTitle" }, value.subTitle));
|
|
32
|
+
elements.push(h("dd", null, value.data));
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return elements;
|
|
6
36
|
}
|
|
7
37
|
render() {
|
|
8
38
|
let values;
|
|
@@ -12,13 +42,14 @@ export class TttxKeyvalueBlock {
|
|
|
12
42
|
else {
|
|
13
43
|
values = this.keyvalues;
|
|
14
44
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
45
|
+
let elements;
|
|
46
|
+
if (Array.isArray(values)) {
|
|
47
|
+
elements = this.renderArrayElements(values);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
elements = this.renderSingleElements(values);
|
|
20
51
|
}
|
|
21
|
-
return (h(Host, null, h("dl", null, elements)));
|
|
52
|
+
return (h(Host, null, h("dl", { class: this.horizontal ? "horizontal" : null }, elements)));
|
|
22
53
|
}
|
|
23
54
|
static get is() { return "tttx-keyvalue-block"; }
|
|
24
55
|
static get encapsulation() { return "shadow"; }
|
|
@@ -38,7 +69,7 @@ export class TttxKeyvalueBlock {
|
|
|
38
69
|
"type": "any",
|
|
39
70
|
"mutable": false,
|
|
40
71
|
"complexType": {
|
|
41
|
-
"original": "any",
|
|
72
|
+
"original": "any | any[] | string",
|
|
42
73
|
"resolved": "any",
|
|
43
74
|
"references": {}
|
|
44
75
|
},
|
|
@@ -50,6 +81,23 @@ export class TttxKeyvalueBlock {
|
|
|
50
81
|
},
|
|
51
82
|
"attribute": "keyvalues",
|
|
52
83
|
"reflect": false
|
|
84
|
+
},
|
|
85
|
+
"horizontal": {
|
|
86
|
+
"type": "boolean",
|
|
87
|
+
"mutable": false,
|
|
88
|
+
"complexType": {
|
|
89
|
+
"original": "boolean",
|
|
90
|
+
"resolved": "boolean",
|
|
91
|
+
"references": {}
|
|
92
|
+
},
|
|
93
|
+
"required": false,
|
|
94
|
+
"optional": false,
|
|
95
|
+
"docs": {
|
|
96
|
+
"tags": [],
|
|
97
|
+
"text": ""
|
|
98
|
+
},
|
|
99
|
+
"attribute": "horizontal",
|
|
100
|
+
"reflect": false
|
|
53
101
|
}
|
|
54
102
|
};
|
|
55
103
|
}
|
|
@@ -10,3 +10,29 @@ const keyValues = {
|
|
|
10
10
|
export const KeyValueBlock = () => {
|
|
11
11
|
return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
|
|
12
12
|
};
|
|
13
|
+
const keyValueArray = [
|
|
14
|
+
{
|
|
15
|
+
title: "Electrical Designer",
|
|
16
|
+
subTitle: "Satchwell",
|
|
17
|
+
data: "18 Oct 2021 - Present"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
title: "Electrical Inspector",
|
|
21
|
+
subTitle: "Fastned",
|
|
22
|
+
data: "20 Dec 2016 - 10 Oct 2021"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
title: "Electrical Tech Prof I - Eng",
|
|
26
|
+
subTitle: "Voltech",
|
|
27
|
+
data: "20 Dec 2009 - 20 Nov 2016"
|
|
28
|
+
},
|
|
29
|
+
];
|
|
30
|
+
export const KeyValueSubtitleBlock = () => {
|
|
31
|
+
return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
|
|
32
|
+
};
|
|
33
|
+
export const HorizontalKeyValueBlock = () => {
|
|
34
|
+
return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
|
|
35
|
+
};
|
|
36
|
+
export const HorizontalKeyValueSubtitleBlock = () => {
|
|
37
|
+
return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
|
|
38
|
+
};
|
|
@@ -121,7 +121,7 @@ export class TttxInput {
|
|
|
121
121
|
: null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
|
|
122
122
|
}
|
|
123
123
|
static get is() { return "tttx-standalone-input"; }
|
|
124
|
-
static get encapsulation() { return "
|
|
124
|
+
static get encapsulation() { return "scoped"; }
|
|
125
125
|
static get originalStyleUrls() {
|
|
126
126
|
return {
|
|
127
127
|
"$": ["./tttx-standalone-input.scss"]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px
|
|
3
|
+
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 1025px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
|
|
4
4
|
|
|
5
5
|
const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -8,6 +8,36 @@ const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
|
|
|
8
8
|
this.__registerHost();
|
|
9
9
|
this.__attachShadow();
|
|
10
10
|
this.keyvalues = undefined;
|
|
11
|
+
this.horizontal = undefined;
|
|
12
|
+
}
|
|
13
|
+
renderSingleElements(values) {
|
|
14
|
+
const keys = Object.keys(values);
|
|
15
|
+
const elements = [];
|
|
16
|
+
for (let i = 0; i < keys.length; i++) {
|
|
17
|
+
if (this.horizontal) {
|
|
18
|
+
elements.push(h("div", null, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
elements.push(h("dt", null, keys[i]));
|
|
22
|
+
elements.push(h("dd", null, values[keys[i]]));
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return elements;
|
|
26
|
+
}
|
|
27
|
+
renderArrayElements(values) {
|
|
28
|
+
const elements = [];
|
|
29
|
+
for (let i = 0; i < values.length; i++) {
|
|
30
|
+
const value = values[i];
|
|
31
|
+
if (this.horizontal) {
|
|
32
|
+
elements.push(h("div", null, h("dt", { class: "mainTitle" }, value.title), h("dt", { class: "subTitle" }, value.subTitle), h("dd", null, value.data)));
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
elements.push(h("dt", { class: "mainTitle" }, value.title));
|
|
36
|
+
elements.push(h("dt", { class: "subTitle" }, value.subTitle));
|
|
37
|
+
elements.push(h("dd", null, value.data));
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return elements;
|
|
11
41
|
}
|
|
12
42
|
render() {
|
|
13
43
|
let values;
|
|
@@ -17,17 +47,19 @@ const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
|
|
|
17
47
|
else {
|
|
18
48
|
values = this.keyvalues;
|
|
19
49
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
50
|
+
let elements;
|
|
51
|
+
if (Array.isArray(values)) {
|
|
52
|
+
elements = this.renderArrayElements(values);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
elements = this.renderSingleElements(values);
|
|
25
56
|
}
|
|
26
|
-
return (h(Host, null, h("dl", null, elements)));
|
|
57
|
+
return (h(Host, null, h("dl", { class: this.horizontal ? "horizontal" : null }, elements)));
|
|
27
58
|
}
|
|
28
59
|
static get style() { return tttxKeyvalueBlockCss; }
|
|
29
60
|
}, [1, "tttx-keyvalue-block", {
|
|
30
|
-
"keyvalues": [8]
|
|
61
|
+
"keyvalues": [8],
|
|
62
|
+
"horizontal": [4]
|
|
31
63
|
}]);
|
|
32
64
|
function defineCustomElement$1() {
|
|
33
65
|
if (typeof customElements === "undefined") {
|
|
@@ -1,13 +1,12 @@
|
|
|
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 tttxStandaloneInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}
|
|
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-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}";
|
|
5
5
|
|
|
6
6
|
const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
this.__registerHost();
|
|
10
|
-
this.__attachShadow();
|
|
11
10
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
12
11
|
this.focusChanged = createEvent(this, "focusChanged", 7);
|
|
13
12
|
this.blurChanged = createEvent(this, "blurChanged", 7);
|
|
@@ -130,7 +129,7 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
130
129
|
: null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
|
|
131
130
|
}
|
|
132
131
|
static get style() { return tttxStandaloneInputCss; }
|
|
133
|
-
}, [
|
|
132
|
+
}, [2, "tttx-standalone-input", {
|
|
134
133
|
"label": [1],
|
|
135
134
|
"showerrormsg": [4],
|
|
136
135
|
"errormsg": [1],
|
|
@@ -285,6 +285,9 @@ const attachStyles = (hostRef) => {
|
|
|
285
285
|
// DOM WRITE!!
|
|
286
286
|
elm['s-sc'] = scopeId;
|
|
287
287
|
elm.classList.add(scopeId + '-h');
|
|
288
|
+
if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
|
|
289
|
+
elm.classList.add(scopeId + '-s');
|
|
290
|
+
}
|
|
288
291
|
}
|
|
289
292
|
endAttachStyles();
|
|
290
293
|
};
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-a05bd606.js';
|
|
2
|
+
export { s as setNonce } from './index-a05bd606.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -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-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[
|
|
14
|
+
return bootstrapLazy([["tttx-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-a05bd606.js';
|
|
2
2
|
|
|
3
3
|
const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a05bd606.js';
|
|
2
2
|
|
|
3
3
|
const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}.spacing{margin-bottom:16px}";
|
|
4
4
|
|