q2-tecton-elements 1.32.1 → 1.34.0

package/dist/collection/components/q2-btn/index.js

@@ -1,21 +1,59 @@
-import { h } from '@stencil/core';
+import { h, Fragment } from '@stencil/core';
 import { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Btn {
   constructor() {
     this.handleSlotChange = () => {
       this.handleIcons();
     };
+    this.handleIcons = () => {
+      // Only allow one icon in the button
+      const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
+        if (acc)
+          element.remove();
+        else
+          acc = element;
+        return acc;
+      }, null);
+      const hasIcon = !!icon;
+      const hasLoc = !!this.hostElement.querySelector('q2-loc');
+      const hasText = !!this.hostElement.textContent.trim();
+      const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
+      const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
+      const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
+      let iconPosition;
+      if (hasIconOnly)
+        iconPosition = 'only';
+      else if (hasIconLeft)
+        iconPosition = 'left';
+      else if (hasIconRight)
+        iconPosition = 'right';
+      this.iconPosition = iconPosition;
+    };
+    this.renderButton = () => {
+      const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } = this.buttonAttributes;
+      const { iconPosition, loading, badge, label, hideLabel } = this;
+      const renderLoadingSpinner = iconPosition || loading;
+      const isLoadingSpinnerInline = !iconPosition || badge;
+      return (h(Fragment, null, h("button", { ref: el => (this.primaryBtn = el !== null && el !== void 0 ? el : this.primaryBtn), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '', "aria-describedby": !!description ? 'hidden-description' : undefined }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))), !!description && (h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
+    };
+    this.render = () => {
+      return this.size === 'small' ? (
+      // wrap only for small sized
+      h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el !== null && el !== void 0 ? el : this.primaryBtnWrapper), tabIndex: -1 }, this.renderButton())) : (this.renderButton());
+    };
     this.ariaExpanded = undefined;
     this.ariaHasPopup = undefined;
     this.ariaControls = undefined;
     this.ariaSelected = undefined;
     this.ariaPressed = undefined;
+    this.description = undefined;
     this.label = undefined;
     this.hideLabel = undefined;
     this.tabIndex = undefined;
     this.intent = undefined;
     this.disabled = undefined;
     this.type = undefined;
+    this.size = undefined;
     this.loading = undefined;
     this.badge = undefined;
     this.active = undefined;
@@ -38,56 +76,29 @@ export class Q2Btn {
     if (this.disabled) {
       ev.stopImmediatePropagation();
     }
+    this.primaryBtn.focus();
   }
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    this.hostElement.shadowRoot.querySelector('button').focus();
+    this.primaryBtn.focus();
   }
   //////// Method //////////
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
-  handleIcons() {
-    // Only allow one icon in the button
-    const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
-      if (acc)
-        element.remove();
-      else
-        acc = element;
-      return acc;
-    }, null);
-    const hasIcon = !!icon;
-    const hasLoc = !!this.hostElement.querySelector('q2-loc');
-    const hasText = !!this.hostElement.textContent.trim();
-    const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
-    const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
-    const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
-    let iconPosition;
-    if (hasIconOnly)
-      iconPosition = 'only';
-    else if (hasIconLeft)
-      iconPosition = 'left';
-    else if (hasIconRight)
-      iconPosition = 'right';
-    this.iconPosition = iconPosition;
-  }
-  render() {
-    const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, disabled, type, tabindex } = this.buttonAttributes;
-    const { iconPosition, loading, badge, label, hideLabel } = this;
-    const renderLoadingSpinner = iconPosition || loading;
-    const isLoadingSpinnerInline = !iconPosition || badge;
-    return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '' }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
-  }
   get buttonAttributes() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     return {
       ariaExpanded: this.ariaExpanded !== undefined ? `${((_a = this.ariaExpanded) === null || _a === void 0 ? void 0 : _a.toString()) === 'true'}` : undefined,
-      ariaHasPopup: this.ariaHasPopup !== undefined ? `${((_b = this.ariaHasPopup) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
+      ariaHasPopup: this.ariaHasPopup !== undefined
+        ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`
+        : undefined,
       ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
-      ariaSelected: this.ariaSelected !== undefined ? `${((_c = this.ariaSelected) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
-      ariaPressed: this.ariaPressed !== undefined ? `${((_d = this.ariaPressed) === null || _d === void 0 ? void 0 : _d.toString()) === 'true'}` : undefined,
+      ariaSelected: this.ariaSelected !== undefined ? `${((_b = this.ariaSelected) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
+      ariaPressed: this.ariaPressed !== undefined ? `${((_c = this.ariaPressed) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
+      description: this.description !== undefined ? this.description : undefined,
       disabled: this.disabled || false,
       type: this.type || 'button',
       tabindex: this.tabIndex || undefined,
@@ -192,6 +203,23 @@ export class Q2Btn {
         "attribute": "aria-pressed",
         "reflect": false
       },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
       "label": {
         "type": "string",
         "mutable": true,
@@ -247,8 +275,8 @@ export class Q2Btn {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'workflow-primary' | 'workflow-secondary' | 'neutral'",
-          "resolved": "\"neutral\" | \"workflow-primary\" | \"workflow-secondary\"",
+          "original": "| 'workflow-primary'\n        | 'workflow-secondary'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'neutral'\n        | 'neutral-text'",
+          "resolved": "\"neutral\" | \"neutral-text\" | \"workflow-destroy\" | \"workflow-escape\" | \"workflow-primary\" | \"workflow-secondary\"",
           "references": {}
         },
         "required": false,
@@ -294,6 +322,23 @@ export class Q2Btn {
         "attribute": "type",
         "reflect": true
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
       "loading": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/q2-btn/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-btn',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n    @Prop() ariaExpanded: string;\n    @Prop() ariaHasPopup: string;\n    @Prop() ariaControls: string;\n    @Prop() ariaSelected: string;\n    @Prop() ariaPressed: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop() tabIndex: number;\n    @Prop({ reflect: true, mutable: true }) intent: 'workflow-primary' | 'workflow-secondary' | 'neutral';\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) type: string;\n    @Prop({ reflect: true }) loading: boolean;\n    @Prop({ reflect: true }) badge: boolean;\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true }) block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n    /** @deprecated */\n    @Prop({ reflect: true }) fab: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() iconPosition: 'left' | 'right' | 'only';\n\n    @Element() hostElement: HTMLElement;\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Listen('click', { capture: true })\n    disable(ev: Event) {\n        if (this.disabled) {\n            ev.stopImmediatePropagation();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('button').focus();\n    }\n\n    //////// Method //////////\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    handleIcons() {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    }\n\n    render() {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, disabled, type, tabindex } =\n            this.buttonAttributes;\n        const { iconPosition, loading, badge, label, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n\n        return (\n            <button\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                aria-label={hideLabel && loc(label)}\n                aria-selected={ariaSelected}\n                aria-pressed={ariaPressed}\n                disabled={disabled}\n                type={type}\n                tabindex={tabindex}\n                test-id=\"q2BtnInnerButton\"\n                class={iconPosition ? `icon-${iconPosition}` : ''}\n            >\n                <div>\n                    {renderLoadingSpinner && (\n                        <q2-loading\n                            hidden={!loading}\n                            modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                        />\n                    )}\n                    {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n                </div>\n            </button>\n        );\n    }\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n            ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup?.toString() === 'true'}` : undefined,\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n            ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n            disabled: this.disabled || false,\n            type: this.type || 'button',\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-btn',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n    @Prop() ariaExpanded: string;\n    @Prop() ariaHasPopup: string;\n    @Prop() ariaControls: string;\n    @Prop() ariaSelected: string;\n    @Prop() ariaPressed: string;\n    @Prop() description: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop() tabIndex: number;\n    @Prop({ reflect: true, mutable: true }) intent:\n        | 'workflow-primary'\n        | 'workflow-secondary'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'neutral'\n        | 'neutral-text';\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) type: string;\n    @Prop({ reflect: true }) size: string;\n    @Prop({ reflect: true }) loading: boolean;\n    @Prop({ reflect: true }) badge: boolean;\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true }) block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n    /** @deprecated */\n    @Prop({ reflect: true }) fab: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() iconPosition: 'left' | 'right' | 'only';\n\n    @Element() hostElement: HTMLElement;\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Listen('click', { capture: true })\n    disable(ev: Event) {\n        if (this.disabled) {\n            ev.stopImmediatePropagation();\n        }\n        this.primaryBtn.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    //////// Method //////////\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    handleIcons = () => {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    };\n\n    renderButton = () => {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n            this.buttonAttributes;\n        const { iconPosition, loading, badge, label, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n                    aria-expanded={ariaExpanded}\n                    aria-haspopup={ariaHasPopup}\n                    aria-label={hideLabel && loc(label)}\n                    aria-selected={ariaSelected}\n                    aria-pressed={ariaPressed}\n                    disabled={disabled}\n                    type={type}\n                    tabindex={tabindex}\n                    test-id=\"q2BtnInnerButton\"\n                    class={iconPosition ? `icon-${iconPosition}` : ''}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                >\n                    <div>\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n                    </div>\n                </button>\n                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    };\n\n    render = () => {\n        return this.size === 'small' ? (\n            // wrap only for small sized\n            <div\n                class=\"btn-height-wrapper\"\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={-1}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    };\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n            ariaHasPopup:\n                this.ariaHasPopup !== undefined\n                    ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`\n                    : undefined,\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n            ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type || 'button',\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n}\n"]}