q2-tecton-elements 1.56.2 → 1.56.4

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

@@ -68,6 +68,10 @@ export class Q2Btn {
         this.handleButtonSize();
         overrideFocus(this.hostElement);
     }
+    disconnectedCallback() {
+        this.primaryBtn = null;
+        this.primaryBtnWrapper = null;
+    }
     // #endregion
     // #region Listeners
     handleClick(event) {

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

@@ -1 +1 @@
-{"version":3,"file":"q2-btn.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/q2-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n    getAriaValueFromProp,\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n    // #region Own Properties\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconPosition: 'left' | 'right' | 'only';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Role attribute for better semantic accessibility support\n     */\n    @Prop({ reflect: true })\n    _role: string;\n\n    /**\n     * Displays the component in an active state.\n     *\n     * @info\n     * Only intended for use with the `badge` property.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    @Prop()\n    ariaControls: string;\n\n    @Prop()\n    ariaExpanded: string;\n\n    @Prop()\n    ariaHasPopup: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    @Prop()\n    ariaPressed: string;\n\n    @Prop()\n    ariaSelected: string;\n\n    /**\n     * Displays the component in a smaller, badge style.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    badge: boolean;\n\n    /** The component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    color: string; // deprecated but need it to use utils/handleColor\n\n    @Prop()\n    description: string;\n\n    /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    fab: boolean;\n\n    /**\n     * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n     */\n    @Prop({ reflect: true, mutable: true })\n    intent:\n        | 'coin'\n        | 'neutral-text'\n        | 'neutral'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary';\n\n    /**\n     * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n     * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n    @Prop({ reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the size of q2-btn, it renders as default size if not provided.\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    @Prop()\n    tabIndex: number;\n\n    /** The default behavior of the button. */\n    @Prop({ reflect: true })\n    type: string = 'button';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click', { capture: true })\n    handleClick(event: Event) {\n        if (this.loading || this.disabled) {\n            event.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    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n            ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n                'true',\n                'false',\n                'menu',\n                'listbox',\n                'tree',\n                'grid',\n                'dialog',\n            ]),\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n            ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type,\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n\n    get buttonClasses() {\n        const classes = [];\n        if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n        if (this.intent === 'coin') classes.push('intent-coin');\n        if (!!this.block) classes.push('is-block');\n        if (!!this.color) classes.push('has-color');\n        if (!!this.intent) classes.push(`has-intent`);\n        if (!!this.size) classes.push('has-size');\n        if (!!this.active) classes.push('is-active');\n\n        return classes.join(' ');\n    }\n\n    get coinLabelClasses() {\n        const classes = ['coin-label'];\n        if (this.disabled) {\n            classes.push('disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\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    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    // #endregion\n    // #region Render Methods\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={this.buttonClasses}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                    aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n                    role={this._role || undefined}\n                >\n                    <div class=\"slot-container\">\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {this.renderDefaultLabel()}\n                        {this.renderDefaultCoinSlot()}\n                    </div>\n                </button>\n                {this.renderCoinLabel()}\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    renderCoinLabel() {\n        if (this.intent !== 'coin' || this.hideLabel) return;\n        return (\n            <div\n                id=\"coin-label\"\n                class={this.coinLabelClasses}\n            >\n                {this.label ? (\n                    loc(this.label)\n                ) : (\n                    <slot\n                        name=\"coin-label\"\n                        onSlotchange={this.handleSlotChange}\n                    />\n                )}\n            </div>\n        );\n    }\n\n    renderDefaultCoinSlot() {\n        if (this.intent !== 'coin') return;\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    renderDefaultLabel() {\n        if (this.intent === 'coin') return;\n        if (!this.hideLabel && this.label) return loc(this.label);\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    render() {\n        return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n            // wrap only for small sized and coin intent\n            <div\n                class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={this.size === 'small' ? -1 : undefined}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-btn.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/q2-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n    getAriaValueFromProp,\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n    // #region Own Properties\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconPosition: 'left' | 'right' | 'only';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Role attribute for better semantic accessibility support\n     */\n    @Prop({ reflect: true })\n    _role: string;\n\n    /**\n     * Displays the component in an active state.\n     *\n     * @info\n     * Only intended for use with the `badge` property.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    @Prop()\n    ariaControls: string;\n\n    @Prop()\n    ariaExpanded: string;\n\n    @Prop()\n    ariaHasPopup: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    @Prop()\n    ariaPressed: string;\n\n    @Prop()\n    ariaSelected: string;\n\n    /**\n     * Displays the component in a smaller, badge style.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    badge: boolean;\n\n    /** The component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    color: string; // deprecated but need it to use utils/handleColor\n\n    @Prop()\n    description: string;\n\n    /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    fab: boolean;\n\n    /**\n     * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n     */\n    @Prop({ reflect: true, mutable: true })\n    intent:\n        | 'coin'\n        | 'neutral-text'\n        | 'neutral'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary';\n\n    /**\n     * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n     * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n    @Prop({ reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the size of q2-btn, it renders as default size if not provided.\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    @Prop()\n    tabIndex: number;\n\n    /** The default behavior of the button. */\n    @Prop({ reflect: true })\n    type: string = 'button';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback(): void {\n        this.primaryBtn = null;\n        this.primaryBtnWrapper = null;\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click', { capture: true })\n    handleClick(event: Event) {\n        if (this.loading || this.disabled) {\n            event.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    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n            ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n                'true',\n                'false',\n                'menu',\n                'listbox',\n                'tree',\n                'grid',\n                'dialog',\n            ]),\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n            ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type,\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n\n    get buttonClasses() {\n        const classes = [];\n        if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n        if (this.intent === 'coin') classes.push('intent-coin');\n        if (!!this.block) classes.push('is-block');\n        if (!!this.color) classes.push('has-color');\n        if (!!this.intent) classes.push(`has-intent`);\n        if (!!this.size) classes.push('has-size');\n        if (!!this.active) classes.push('is-active');\n\n        return classes.join(' ');\n    }\n\n    get coinLabelClasses() {\n        const classes = ['coin-label'];\n        if (this.disabled) {\n            classes.push('disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\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    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    // #endregion\n    // #region Render Methods\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={this.buttonClasses}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                    aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n                    role={this._role || undefined}\n                >\n                    <div class=\"slot-container\">\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {this.renderDefaultLabel()}\n                        {this.renderDefaultCoinSlot()}\n                    </div>\n                </button>\n                {this.renderCoinLabel()}\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    renderCoinLabel() {\n        if (this.intent !== 'coin' || this.hideLabel) return;\n        return (\n            <div\n                id=\"coin-label\"\n                class={this.coinLabelClasses}\n            >\n                {this.label ? (\n                    loc(this.label)\n                ) : (\n                    <slot\n                        name=\"coin-label\"\n                        onSlotchange={this.handleSlotChange}\n                    />\n                )}\n            </div>\n        );\n    }\n\n    renderDefaultCoinSlot() {\n        if (this.intent !== 'coin') return;\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    renderDefaultLabel() {\n        if (this.intent === 'coin') return;\n        if (!this.hideLabel && this.label) return loc(this.label);\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    render() {\n        return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n            // wrap only for small sized and coin intent\n            <div\n                class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={this.size === 'small' ? -1 : undefined}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-calendar/q2-month-picker.js

@@ -134,10 +134,10 @@ export class Q2MonthPicker {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'dfa012542089f3e031225e11d942731d95caa467', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '2196be700d87a1e01b1f90e6f4b7d661d593bf48', class: "navigation" }, h("q2-btn", { key: 'ff943c45617ff8b3a17a9ef1b61b82e67356c300', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'a2cd6eda280f23475ee4f1ab29872e6667d4c7a6', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '17998748ded31646cb5ab2a9ec7b110c9fae386e', class: "navigation" }, h("q2-btn", { key: 'cedd674d79ffeab0fa6603cd17cc196030a1ea64', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: 'c6f84bf595bf100315098d9afd5df8e70506a79d', class: "year" }, this.year), h("q2-icon", { key: 'f1cb6d06f24c3bdd3247b4d6a6af04efc481fc67', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'c617358f45586c3d7a6492e3573ec92b810535ab', class: "month-controller" }, h("div", { key: '500c5a6765139d5b62449a0ba388494e85524d0a', class: "cal-year-prev-next" }, h("q2-btn", { key: '697f65cfd3d52698f7004395d428848548fbc856', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'aa83487a228127ef847439d876172afa17c3557e', type: "arrow-left" })), h("q2-btn", { key: '0813d6a858b325ba240bc1c9c84196a810e231ec', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '2c8f1259ebafba900e913dffeb1b5df05d37f916', type: "arrow-right" }))))), h("div", { key: '27bdc96d859976a0c1483aabef3794ada911f02a', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'ccd5c945bc1abcc38e545577178678e4c0ca54dc', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '82dc9d7302ad2b286986601098343716052974d8', class: "year" }, this.year), h("q2-icon", { key: 'b7f2ff86e4ad317b38fb495145516975600e95e5', class: "year-icon off", type: "chevron-down" })), h("div", { key: '3544cee5c78dac5e9886e76a14bf7acc09916070', class: "month-controller" }, h("div", { key: 'a5a6ed45da80ea01f2ccb61518f48c6ceb69e99f', class: "cal-year-prev-next" }, h("q2-btn", { key: '38a50b26ef2652c70edd45fa062dd0a492bda180', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'b8f64f6bace3a2136c1760ef9e000c7fabab4e23', type: "arrow-left" })), h("q2-btn", { key: '1d8a2d56bf3697a60e68c5716425427c9ce35f3e', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'cf841e5dba06f28527cd9e89c3da94b84a3ff267', type: "arrow-right" }))))), h("div", { key: '61863a2ef6c42ad6dddf276835ec14e0b262120b', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'baee50514a1673f651ed0724d2fe52faf1384037', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     static get is() { return "q2-month-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-calendar/test/q2-calendar-test.e2e.js

@@ -320,12 +320,12 @@ describe('q2-calendar', () => {
         });
         describe('popoverAlignment', () => {
             describe('when not provided (default)', () => {
-                it('does not pass a value to the popover', async () => {
+                it('uses popover default alignment', async () => {
                     page = await setup({
                         html: `<q2-calendar></q2-calendar>`,
                     });
                     popover = await page.find('q2-calendar >>> q2-popover');
-                    expect(await popover.getProperty('align')).toBeUndefined();
+                    expect(await popover.getProperty('align')).toBe('left');
                 });
             });
             describe('when provided', () => {