@xplor-education/core-stencil-components 3.2.0 → 3.2.1

package/dist/esm/xplor-alert-dialog_60.entry.js

@@ -1793,6 +1793,12 @@ const XplorButton = class {
         this.disabled = false;
         /** Whether the button stretches to full width of its container */
         this.fullWidth = false;
+        /** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */
+        this.fullWidthAttr = false;
+        /**
+         * Icon position: 'start' | 'end' | null
+         */
+        this.iconPosition = null;
         /**
          * Icon to display (defaults to plus sign)
          */
@@ -1805,9 +1811,10 @@ const XplorButton = class {
         return (h("span", { class: "button-icon" }, this.icon));
     }
     render() {
+        const isFullWidth = this.fullWidth || this.fullWidthAttr;
         const isIconOnly = !this.text && this.iconPosition !== null;
         const hasIcon = this.iconPosition !== null;
-        return (h(Host, { key: '1c9b3ba3ef28cd3b721c2937ca76611543a369ea', class: { 'x-button--full-width': this.fullWidth } }, h("slot", { key: '38c8486396e069e779e2e350cbb659dec845b5c8' }, h("button", { key: '851684c2e881bb3b85eb4f6a1a1ba1d0f474afbb', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': this.fullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: 'c99e5f351e5c3b1cd030bf3a253f648229795827', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
+        return (h(Host, { key: '34e4c56a387bfb7b1c0f283d1484a85da2cbdc4a', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: '1caaaa71b289e389a9ca2a4e7a65d4c3a2573792' }, h("button", { key: '719ea7a1a260c481bdabe70bee765a35d7da8b25', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: 'a3ca7d26488c993ec9fd6a10483d8ab28351dc19', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
     }
 };
 XplorButton.style = xplorButtonCss;