@3t-transform/threeteeui 0.0.24 → 0.1.0
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-bc080fb4.js → index-451f61dd.js} +51 -60
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/tttx-button.cjs.entry.js +1 -1
- package/dist/cjs/tttx-form.cjs.entry.js +377 -0
- package/dist/cjs/tttx-icon.cjs.entry.js +2 -2
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +8 -5
- package/dist/cjs/tttx-list.cjs.entry.js +1677 -7
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +7 -3
- package/dist/cjs/tttx.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +4 -0
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +1 -1
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +7 -4
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -0
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -0
- package/dist/collection/components/molecules/tttx-form/tttx-form.css +336 -0
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -0
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -0
- package/dist/collection/components/molecules/tttx-list/tttx-list.css +8 -2
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +33 -7
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +46 -14
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css +25 -3
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +57 -1
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +14 -1
- package/dist/collection/shared/domsanitiser.options.js +14 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{tttx-table.d.ts → tttx-form.d.ts} +4 -4
- package/dist/components/tttx-form.js +394 -0
- package/dist/components/tttx-icon2.js +1 -1
- package/dist/components/tttx-keyvalue-block.js +7 -4
- package/dist/components/tttx-list.js +1678 -7
- package/dist/components/tttx-standalone-input.js +9 -2
- package/dist/esm/{index-901bfd55.js → index-0350f122.js} +51 -60
- package/dist/esm/loader.js +2 -2
- package/dist/esm/tttx-button.entry.js +1 -1
- package/dist/esm/tttx-form.entry.js +373 -0
- package/dist/esm/tttx-icon.entry.js +2 -2
- package/dist/esm/tttx-keyvalue-block.entry.js +8 -5
- package/dist/esm/tttx-list.entry.js +1677 -7
- package/dist/esm/tttx-loading-spinner.entry.js +1 -1
- package/dist/esm/tttx-standalone-input.entry.js +7 -3
- package/dist/esm/tttx.js +2 -2
- package/dist/tttx/{p-a4077908.entry.js → p-1b015a9d.entry.js} +1 -1
- package/dist/tttx/{p-9a382959.entry.js → p-4f3958fa.entry.js} +1 -1
- package/dist/tttx/p-62869344.js +2 -0
- package/dist/tttx/{p-0ae51ec5.entry.js → p-92465671.entry.js} +1 -1
- package/dist/tttx/p-a0179cb1.entry.js +1 -0
- package/dist/tttx/p-b0a6b872.entry.js +1 -0
- package/dist/tttx/p-cd1565e0.entry.js +3 -0
- package/dist/tttx/p-ce015353.entry.js +1 -0
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -0
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -0
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -0
- package/dist/types/components/molecules/{tttx-table/tttx-table.stories.d.ts → tttx-form/tttx-form.stories.d.ts} +2 -10
- package/dist/types/components/molecules/tttx-list/interfaces.d.ts +4 -2
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +3 -1
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +7 -0
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +3 -0
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +16 -0
- package/dist/types/components.d.ts +32 -28
- package/dist/types/shared/domsanitiser.options.d.ts +10 -0
- package/package.json +1 -1
- package/dist/cjs/tttx-table.cjs.entry.js +0 -60
- package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js +0 -9
- package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js +0 -43
- package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.e2e.js +0 -9
- package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.spec.js +0 -16
- package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js +0 -164
- package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js +0 -64
- package/dist/collection/components/molecules/tttx-list/test/tttx-list.spec.js +0 -151
- package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.js +0 -9
- package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.js +0 -146
- package/dist/collection/components/molecules/tttx-table/test/tttx-table.e2e.js +0 -9
- package/dist/collection/components/molecules/tttx-table/tttx-table.css +0 -166
- package/dist/collection/components/molecules/tttx-table/tttx-table.js +0 -174
- package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +0 -81
- package/dist/components/tttx-table.js +0 -85
- package/dist/esm/tttx-table.entry.js +0 -56
- package/dist/tttx/p-1ec23160.entry.js +0 -1
- package/dist/tttx/p-300ff6a8.entry.js +0 -1
- package/dist/tttx/p-32ad02d3.entry.js +0 -1
- package/dist/tttx/p-80cf5236.entry.js +0 -1
- package/dist/tttx/p-a1bd16a1.entry.js +0 -1
- package/dist/tttx/p-a6953900.entry.js +0 -1
- package/dist/tttx/p-b46e3c59.entry.js +0 -1
- package/dist/tttx/p-c290160b.js +0 -2
- package/dist/tttx/p-dc179257.entry.js +0 -1
- package/dist/tttx/p-e19eb07e.entry.js +0 -1
- package/dist/tttx/p-e4341658.entry.js +0 -1
- package/dist/types/components/atoms/tttx-button/test/tttx-button.e2e.d.ts +0 -1
- package/dist/types/components/atoms/tttx-button/test/tttx-button.spec.d.ts +0 -1
- package/dist/types/components/atoms/tttx-icon/test/tttx-icon.e2e.d.ts +0 -1
- package/dist/types/components/atoms/tttx-icon/test/tttx-icon.spec.d.ts +0 -1
- package/dist/types/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.d.ts +0 -1
- package/dist/types/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.d.ts +0 -1
- package/dist/types/components/molecules/tttx-list/test/tttx-list.spec.d.ts +0 -1
- package/dist/types/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.d.ts +0 -1
- package/dist/types/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.d.ts +0 -1
- package/dist/types/components/molecules/tttx-table/test/tttx-table.e2e.d.ts +0 -1
- package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +0 -15
|
@@ -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 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
|
|
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}.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}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.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.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px}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-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}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}input.sc-tttx-standalone-input:focus-visible{outline:none}.sc-tttx-standalone-input-h{display:block}";
|
|
5
5
|
|
|
6
6
|
const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -13,9 +13,12 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
13
13
|
this.invalidChanged = createEvent(this, "invalidChanged", 7);
|
|
14
14
|
this.label = undefined;
|
|
15
15
|
this.showerrormsg = undefined;
|
|
16
|
+
this.showerrorbubble = true;
|
|
16
17
|
this.errormsg = undefined;
|
|
17
18
|
this.iconleft = undefined;
|
|
18
19
|
this.iconright = undefined;
|
|
20
|
+
this.inputicon = undefined;
|
|
21
|
+
this.inline = undefined;
|
|
19
22
|
this.inputAutocapitalize = undefined;
|
|
20
23
|
this.inputAutofocus = undefined;
|
|
21
24
|
this.inputKeyhint = undefined;
|
|
@@ -51,20 +54,24 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
51
54
|
this.blurChanged.emit(target.value);
|
|
52
55
|
}
|
|
53
56
|
handleInvalid(event) {
|
|
57
|
+
event.preventDefault();
|
|
54
58
|
const target = event.target;
|
|
55
59
|
this.invalidChanged.emit(target.value);
|
|
56
60
|
}
|
|
57
61
|
render() {
|
|
58
62
|
const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
|
|
59
|
-
return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.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))));
|
|
63
|
+
return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
|
|
60
64
|
}
|
|
61
65
|
static get style() { return tttxStandaloneInputCss; }
|
|
62
66
|
}, [2, "tttx-standalone-input", {
|
|
63
67
|
"label": [1],
|
|
64
68
|
"showerrormsg": [4],
|
|
69
|
+
"showerrorbubble": [4],
|
|
65
70
|
"errormsg": [1],
|
|
66
71
|
"iconleft": [1],
|
|
67
72
|
"iconright": [1],
|
|
73
|
+
"inputicon": [1],
|
|
74
|
+
"inline": [4],
|
|
68
75
|
"inputAutocapitalize": [1, "input-autocapitalize"],
|
|
69
76
|
"inputAutofocus": [4, "input-autofocus"],
|
|
70
77
|
"inputKeyhint": [1, "input-keyhint"],
|
|
@@ -146,10 +146,6 @@ const parsePropertyValue = (propValue, propType) => {
|
|
|
146
146
|
// but we'll cheat here and say that the string "false" is the boolean false
|
|
147
147
|
return propValue === 'false' ? false : propValue === '' || !!propValue;
|
|
148
148
|
}
|
|
149
|
-
if (propType & 2 /* MEMBER_FLAGS.Number */) {
|
|
150
|
-
// force it to be a number
|
|
151
|
-
return parseFloat(propValue);
|
|
152
|
-
}
|
|
153
149
|
if (propType & 1 /* MEMBER_FLAGS.String */) {
|
|
154
150
|
// could have been passed as a number or boolean
|
|
155
151
|
// but we still want it as a string
|
|
@@ -280,6 +276,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
280
276
|
classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
|
|
281
277
|
classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
|
|
282
278
|
}
|
|
279
|
+
else if (memberName === 'ref') {
|
|
280
|
+
// minifier will clean this up
|
|
281
|
+
if (newValue) {
|
|
282
|
+
newValue(elm);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
283
285
|
else if ((!isProp ) &&
|
|
284
286
|
memberName[0] === 'o' &&
|
|
285
287
|
memberName[1] === 'n') {
|
|
@@ -446,6 +448,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
446
448
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
447
449
|
if ((vnode = vnodes[startIdx])) {
|
|
448
450
|
elm = vnode.$elm$;
|
|
451
|
+
callNodeRefs(vnode);
|
|
449
452
|
// remove the vnode's element from the dom
|
|
450
453
|
elm.remove();
|
|
451
454
|
}
|
|
@@ -697,6 +700,12 @@ const patch = (oldVNode, newVNode) => {
|
|
|
697
700
|
elm.data = text;
|
|
698
701
|
}
|
|
699
702
|
};
|
|
703
|
+
const callNodeRefs = (vNode) => {
|
|
704
|
+
{
|
|
705
|
+
vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
|
706
|
+
vNode.$children$ && vNode.$children$.map(callNodeRefs);
|
|
707
|
+
}
|
|
708
|
+
};
|
|
700
709
|
const renderVdom = (hostRef, renderFnResults) => {
|
|
701
710
|
const hostElm = hostRef.$hostElement$;
|
|
702
711
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
@@ -737,17 +746,13 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
737
746
|
const instance = hostRef.$lazyInstance$ ;
|
|
738
747
|
let promise;
|
|
739
748
|
if (isInitialLoad) {
|
|
740
|
-
{
|
|
741
|
-
hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
|
|
742
|
-
if (hostRef.$queuedListeners$) {
|
|
743
|
-
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
|
|
744
|
-
hostRef.$queuedListeners$ = null;
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
749
|
{
|
|
748
750
|
promise = safeCall(instance, 'componentWillLoad');
|
|
749
751
|
}
|
|
750
752
|
}
|
|
753
|
+
{
|
|
754
|
+
promise = then(promise, () => safeCall(instance, 'componentWillRender'));
|
|
755
|
+
}
|
|
751
756
|
endSchedule();
|
|
752
757
|
return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
|
|
753
758
|
};
|
|
@@ -815,7 +820,11 @@ const postUpdateComponent = (hostRef) => {
|
|
|
815
820
|
const tagName = hostRef.$cmpMeta$.$tagName$;
|
|
816
821
|
const elm = hostRef.$hostElement$;
|
|
817
822
|
const endPostUpdate = createTime('postUpdate', tagName);
|
|
823
|
+
const instance = hostRef.$lazyInstance$ ;
|
|
818
824
|
const ancestorComponent = hostRef.$ancestorComponent$;
|
|
825
|
+
{
|
|
826
|
+
safeCall(instance, 'componentDidRender');
|
|
827
|
+
}
|
|
819
828
|
if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
|
|
820
829
|
hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
|
|
821
830
|
{
|
|
@@ -877,6 +886,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
|
|
|
877
886
|
const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
878
887
|
// check our new property value against our internal value
|
|
879
888
|
const hostRef = getHostRef(ref);
|
|
889
|
+
const elm = hostRef.$hostElement$ ;
|
|
880
890
|
const oldVal = hostRef.$instanceValues$.get(propName);
|
|
881
891
|
const flags = hostRef.$flags$;
|
|
882
892
|
const instance = hostRef.$lazyInstance$ ;
|
|
@@ -889,6 +899,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
889
899
|
// set our new value!
|
|
890
900
|
hostRef.$instanceValues$.set(propName, newVal);
|
|
891
901
|
if (instance) {
|
|
902
|
+
// get an array of method names of watch functions to call
|
|
903
|
+
if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
|
|
904
|
+
const watchMethods = cmpMeta.$watchers$[propName];
|
|
905
|
+
if (watchMethods) {
|
|
906
|
+
// this instance is watching for when this property changed
|
|
907
|
+
watchMethods.map((watchMethodName) => {
|
|
908
|
+
try {
|
|
909
|
+
// fire off each of the watch methods that are watching this property
|
|
910
|
+
instance[watchMethodName](newVal, oldVal, propName);
|
|
911
|
+
}
|
|
912
|
+
catch (e) {
|
|
913
|
+
consoleError(e, elm);
|
|
914
|
+
}
|
|
915
|
+
});
|
|
916
|
+
}
|
|
917
|
+
}
|
|
892
918
|
if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
|
|
893
919
|
// looks like this value actually changed, so we've got work to do!
|
|
894
920
|
// but only if we've already rendered, otherwise just chill out
|
|
@@ -911,6 +937,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
911
937
|
*/
|
|
912
938
|
const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
913
939
|
if (cmpMeta.$members$) {
|
|
940
|
+
if (Cstr.watchers) {
|
|
941
|
+
cmpMeta.$watchers$ = Cstr.watchers;
|
|
942
|
+
}
|
|
914
943
|
// It's better to have a const than two Object.entries()
|
|
915
944
|
const members = Object.entries(cmpMeta.$members$);
|
|
916
945
|
const prototype = Cstr.prototype;
|
|
@@ -1015,6 +1044,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1015
1044
|
endLoad();
|
|
1016
1045
|
}
|
|
1017
1046
|
if (!Cstr.isProxied) {
|
|
1047
|
+
// we've never proxied this Constructor before
|
|
1048
|
+
// let's add the getters/setters to its prototype before
|
|
1049
|
+
// the first time we create an instance of the implementation
|
|
1050
|
+
{
|
|
1051
|
+
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1052
|
+
}
|
|
1018
1053
|
proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
|
|
1019
1054
|
Cstr.isProxied = true;
|
|
1020
1055
|
}
|
|
@@ -1038,6 +1073,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1038
1073
|
{
|
|
1039
1074
|
hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
|
|
1040
1075
|
}
|
|
1076
|
+
{
|
|
1077
|
+
hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
|
|
1078
|
+
}
|
|
1041
1079
|
endNewInstance();
|
|
1042
1080
|
}
|
|
1043
1081
|
if (Cstr.style) {
|
|
@@ -1105,24 +1143,12 @@ const connectedCallback = (elm) => {
|
|
|
1105
1143
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
1106
1144
|
}
|
|
1107
1145
|
}
|
|
1108
|
-
else {
|
|
1109
|
-
// not the first time this has connected
|
|
1110
|
-
// reattach any event listeners to the host
|
|
1111
|
-
// since they would have been removed when disconnected
|
|
1112
|
-
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
1113
|
-
}
|
|
1114
1146
|
endConnected();
|
|
1115
1147
|
}
|
|
1116
1148
|
};
|
|
1117
1149
|
const disconnectedCallback = (elm) => {
|
|
1118
1150
|
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
|
|
1119
|
-
|
|
1120
|
-
{
|
|
1121
|
-
if (hostRef.$rmListeners$) {
|
|
1122
|
-
hostRef.$rmListeners$.map((rmListener) => rmListener());
|
|
1123
|
-
hostRef.$rmListeners$ = undefined;
|
|
1124
|
-
}
|
|
1125
|
-
}
|
|
1151
|
+
getHostRef(elm);
|
|
1126
1152
|
}
|
|
1127
1153
|
};
|
|
1128
1154
|
const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
@@ -1150,7 +1176,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1150
1176
|
cmpMeta.$members$ = compactMeta[2];
|
|
1151
1177
|
}
|
|
1152
1178
|
{
|
|
1153
|
-
cmpMeta.$
|
|
1179
|
+
cmpMeta.$watchers$ = {};
|
|
1154
1180
|
}
|
|
1155
1181
|
const tagName = cmpMeta.$tagName$;
|
|
1156
1182
|
const HostElement = class extends HTMLElement {
|
|
@@ -1217,40 +1243,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1217
1243
|
// Fallback appLoad event
|
|
1218
1244
|
endBootstrap();
|
|
1219
1245
|
};
|
|
1220
|
-
const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
1221
|
-
if (listeners) {
|
|
1222
|
-
listeners.map(([flags, name, method]) => {
|
|
1223
|
-
const target = getHostListenerTarget(elm, flags) ;
|
|
1224
|
-
const handler = hostListenerProxy(hostRef, method);
|
|
1225
|
-
const opts = hostListenerOpts(flags);
|
|
1226
|
-
plt.ael(target, name, handler, opts);
|
|
1227
|
-
(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
|
|
1228
|
-
});
|
|
1229
|
-
}
|
|
1230
|
-
};
|
|
1231
|
-
const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
1232
|
-
try {
|
|
1233
|
-
{
|
|
1234
|
-
if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
|
|
1235
|
-
// instance is ready, let's call it's member method for this event
|
|
1236
|
-
hostRef.$lazyInstance$[methodName](ev);
|
|
1237
|
-
}
|
|
1238
|
-
else {
|
|
1239
|
-
(hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
1240
|
-
}
|
|
1241
|
-
}
|
|
1242
|
-
}
|
|
1243
|
-
catch (e) {
|
|
1244
|
-
consoleError(e);
|
|
1245
|
-
}
|
|
1246
|
-
};
|
|
1247
|
-
const getHostListenerTarget = (elm, flags) => {
|
|
1248
|
-
if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
|
|
1249
|
-
return doc;
|
|
1250
|
-
return elm;
|
|
1251
|
-
};
|
|
1252
|
-
// prettier-ignore
|
|
1253
|
-
const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
|
|
1254
1246
|
const hostRefs = /*@__PURE__*/ new WeakMap();
|
|
1255
1247
|
const getHostRef = (ref) => hostRefs.get(ref);
|
|
1256
1248
|
const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
|
|
@@ -1266,7 +1258,6 @@ const registerHost = (elm, cmpMeta) => {
|
|
|
1266
1258
|
elm['s-p'] = [];
|
|
1267
1259
|
elm['s-rc'] = [];
|
|
1268
1260
|
}
|
|
1269
|
-
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
1270
1261
|
return hostRefs.set(elm, hostRef);
|
|
1271
1262
|
};
|
|
1272
1263
|
const isMemberInElement = (elm, memberName) => memberName in elm;
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-0350f122.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["tttx-
|
|
13
|
+
return bootstrapLazy([["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -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-0350f122.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
|
|