@db-ux/wc-core-components 4.9.1 → 4.10.0-esm-94516f3

package/dist/collection/components/tag/tag.js

@@ -1,6 +1,6 @@
 import { DEFAULT_REMOVE } from "../../shared/constants";
 import { cls, getBooleanAsString } from "../../utils";
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot content - TODO: Add description for slotContent
@@ -58,13 +58,19 @@ export class DBTag {
         }
     }
     componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
         this.enableAttributePassing(this._ref, "db-tag");
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '0f44c340afdd993c4f583c23087bf008cb64bb04', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '85b02f290e8323ddd9a61ee5cf15893e7bc0cdab', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '9e4388656037b233763783ba6e771d30f8302f5c', name: "content" }), this.text ? this.text : null, h("slot", { key: 'e53a5fc3a2f9d5193a73f6c6256aac900df60c74' }), this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '3aefef41d0a30b8f979e43146936be56a1d9181b', name: "content" }), this.text ? this.text : null, h("slot", { key: 'e283aefd212ea8c7f7eab8da48ed19a7f4763e38' }), this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
     static get is() { return "db-tag"; }
     static get properties() {
@@ -425,4 +431,5 @@ export class DBTag {
                 }
             }];
     }
+    static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { addValueResetEventListener, } from "../../utils/form-components";
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
 
@@ -182,6 +182,12 @@ export class DBTextarea {
         this.watch4Fn();
     }
     componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
         this.enableAttributePassing(this._ref, "db-textarea");
         this.resetIds();
         this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
@@ -197,10 +203,10 @@ export class DBTextarea {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '7d28f047cf8d4be83318ebf78434ef3451d74555', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '98f4ba8c559358f440a240d62aeb1c454b6969c2', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '1ecfda94ee9b9cdc8466d04012dec4976eb2b32a', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: '011c369f6437bb150f6afb7534da123ed5987621', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '2ce564dca8898dedd7e666eb39f1b94226cc3547', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '8cafda914ea6b0f48fe096472e71fd89ee85ec23', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-resize": this.resize, "data-hide-resizer": getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), readOnly: getBoolean(this.readOnly, "readOnly") ||
-                getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '9e2a201ab9ce88d395fea65b1d3506d59c4c3be3', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '325d537f8952c134ad7d7aaa024035d86ca1decd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '489ca97fb9dc385ec1483d47918025f6db999e01', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'c1aa196f836729f0b821f4b3f9300a924fd8e08c', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-textarea"; }
     static get properties() {
@@ -1165,6 +1171,7 @@ export class DBTextarea {
                 }
             }];
     }
+    static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
                 "propName": "id",

package/dist/collection/components/tooltip/tooltip.js

@@ -150,6 +150,12 @@ export class DBTooltip {
         this.watch1Fn();
     }
     componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
         this.enableAttributePassing(this._ref, "db-tooltip");
         this.resetIds();
         this.initialized = true;
@@ -158,9 +164,9 @@ export class DBTooltip {
     }
     render() {
         var _a, _b;
-        return (h("i", { key: 'bce9e6803a50b743c959d8252b3c6fe7b5d89308', class: cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
+        return (h("i", { key: 'baf376c4ee424f78a7e062b864586139846b2073', class: cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-emphasis": this.emphasis, "data-wrap": getBooleanAsString(this.wrap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, this.text ? this.text : null, h("slot", { key: 'a081ede0d1ce27ae2f8104d7cbc04faa8923eed9' })));
+            }, id: this._id, "data-emphasis": this.emphasis, "data-wrap": getBooleanAsString(this.wrap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, this.text ? this.text : null, h("slot", { key: '6ec094383bad1237ce6ae7d02a7a62cf5c8de19d' })));
     }
     static get is() { return "db-tooltip"; }
     static get properties() {
@@ -485,6 +491,7 @@ export class DBTooltip {
             "_observer": {}
         };
     }
+    static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
                 "propName": "id",