@otto-de/b2b-core-components 1.32.3 → 1.34.0

package/dist/collection/components/dropdown/dropdown.js

@@ -1,13 +1,12 @@
 import { h, Host, } from "@stencil/core";
 export class DropdownComponent {
     constructor() {
-        this.truncatedText = '';
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
                 this.isOpen = false;
         };
         this.toggleDropdown = () => {
-            if (!this.disabled)
+            if (!this.disabled && !this.groupDisabled)
                 this.isOpen = !this.isOpen;
         };
         this.onFocus = (ev) => {
@@ -23,7 +22,7 @@ export class DropdownComponent {
             const target = event.target;
             const value = target.getAttribute('data-value');
             const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-            if (value) {
+            if (value != null) {
                 this.selectedValue = value;
                 this.selectedText = label || '';
                 this.b2bChange.emit(value);
@@ -33,16 +32,22 @@ export class DropdownComponent {
             }
         };
         this.updateTruncatedText = () => {
-            if (!this.selectEl)
-                return;
             const rawText = this.selectedText || this.placeholder;
+            if (this.selectEl == null) {
+                this.truncatedText = rawText;
+                return;
+            }
             const style = window.getComputedStyle(this.selectEl);
             const canvas = document.createElement('canvas');
             const ctx = canvas.getContext('2d');
-            if (!ctx)
+            if (ctx == null)
                 return;
             ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
             let baseWidth = this.selectEl.clientWidth;
+            if (baseWidth == null) {
+                this.truncatedText = rawText;
+                return;
+            }
             const parentContainer = this.selectEl.parentElement;
             if (parentContainer && parentContainer.clientWidth > baseWidth) {
                 baseWidth = parentContainer.clientWidth;
@@ -71,29 +76,24 @@ export class DropdownComponent {
         this.invalid = false;
         this.hint = undefined;
         this.error = undefined;
+        this.groupDisabled = false;
         this.isOpen = false;
         this.focused = false;
         this.selectedValue = '';
         this.selectedText = '';
         this.options = [];
+        this.truncatedText = '';
     }
     /** Method to programmatically clear selection of the dropdown. */
     async clearSelection() {
-        this.selectedValue = this.placeholderValue || '';
-        this.selectedText = this.placeholder || 'Select an option...';
+        this.selectedValue = this.placeholderValue;
+        this.selectedText = '';
         this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
         this.isOpen = false;
         this.updateTruncatedText();
     }
     componentWillLoad() {
-        this.selectedValue = this.placeholderValue || '';
-        this.selectedText = '';
-    }
-    componentDidLoad() {
         this.initializeOptions();
-        this.updateTruncatedText();
-        document.addEventListener('click', this.onClickOutside);
-        window.addEventListener('resize', this.updateTruncatedText);
         if (typeof MutationObserver !== 'undefined') {
             this.mutationObserver = new MutationObserver(() => {
                 this.initializeOptions();
@@ -101,21 +101,28 @@ export class DropdownComponent {
             this.mutationObserver.observe(this.hostElement, {
                 childList: true,
                 subtree: true,
+                attributes: true,
+                attributeFilter: ['value', 'selected', 'disabled'],
             });
         }
     }
+    componentDidLoad() {
+        this.updateTruncatedText(); // `componentWillLoad()` is unable to truncate it to the proper size
+        document.addEventListener('click', this.onClickOutside);
+        window.addEventListener('resize', this.updateTruncatedText);
+    }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('click', this.onClickOutside);
         window.removeEventListener('resize', this.updateTruncatedText);
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     watchDropdownState() {
         if (this.isOpen)
             this.closeOtherDropdowns();
     }
     initializeOptions() {
+        var _a, _b;
         const nativeOptions = Array.from(this.hostElement.querySelectorAll('option'));
         this.options = nativeOptions.map(opt => {
             var _a;
@@ -127,10 +134,8 @@ export class DropdownComponent {
             });
         });
         const selected = this.options.find(o => o.selected);
-        if (selected) {
-            this.selectedValue = selected.value;
-            this.selectedText = selected.label;
-        }
+        this.selectedValue = (_a = selected === null || selected === void 0 ? void 0 : selected.value) !== null && _a !== void 0 ? _a : this.placeholderValue;
+        this.selectedText = (_b = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _b !== void 0 ? _b : '';
         this.updateTruncatedText();
     }
     closeOtherDropdowns() {
@@ -141,18 +146,18 @@ export class DropdownComponent {
         });
     }
     render() {
-        const hasError = this.invalid && !this.disabled;
-        const showHint = this.hint && (!this.invalid || this.disabled);
+        const hasError = this.invalid && !this.disabled && !this.groupDisabled;
+        const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
-        return (h(Host, { key: '12c5872badf4168d07a0c3e0281c4014f50c05f6', class: {
+        return (h(Host, { key: 'e719de6e666225d6b807810570bd32d4906a2647', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
-                'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '9c1f7ee41956ee0ea6d9913bc6f0831a3800b749', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '580dcbbcdbc6e8d7c60ff2fbfcd89e94e419862c', class: {
+                'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '690c9a335c7171312fb9de9cf6894af979eaa471', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'fcbbc73636118d451f0ec5aa5ce1cd2baa0dec9b', class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
-            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
                 'b2b-dropdown__option': true,
                 'b2b-dropdown__option--selected': option.selected,
                 'b2b-dropdown__option--disabled': option.disabled,
@@ -329,6 +334,27 @@ export class DropdownComponent {
                 },
                 "attribute": "error",
                 "reflect": false
+            },
+            "groupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Whether the parent input group is disabled. Per default, it is false."
+                        }],
+                    "text": ""
+                },
+                "attribute": "group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -338,7 +364,8 @@ export class DropdownComponent {
             "focused": {},
             "selectedValue": {},
             "selectedText": {},
-            "options": {}
+            "options": {},
+            "truncatedText": {}
         };
     }
     static get events() {

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -1,9 +1,9 @@
+import { userEvent } from "@storybook/test";
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const Template = ({ label, required, name, disabled, invalid, hint, error, }) => {
-    const defaultLabel = label ? label : 'Favorite Fruit';
+const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, selected = false, }) => {
     return html `<b2b-dropdown
-    label="${defaultLabel}"
+    label="${label}"
     name="${name}"
     error="${error}"
     hint="${hint}"
@@ -13,7 +13,9 @@ const Template = ({ label, required, name, disabled, invalid, hint, error, }) =>
     <option value="strawberry">Strawberry</option>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>
-    <option value="pineapple">Pineapple</option>
+    ${selected
+        ? html `<option value="pineapple" selected="true">Pineapple</option>`
+        : html `<option value="pineapple">Pineapple</option>`}
     <option value="grapes">Grapes</option>
     <option value="watermelon">Watermelon</option>
     <option value="papaya">Papaya</option>
@@ -44,6 +46,17 @@ story030Error.storyName = 'Error';
 export const story040Required = Template.bind({});
 story040Required.args = Object.assign(Object.assign({}, defaultArgs), { required: true });
 story040Required.storyName = 'Required';
+export const story050Selected = Template.bind({});
+story050Selected.args = Object.assign(Object.assign({}, defaultArgs), { selected: true });
+story050Selected.storyName = 'Selected';
+story050Selected.play = async ({ canvasElement }) => {
+    setTimeout(async () => {
+        var _a;
+        const dropdown = canvasElement.querySelector('b2b-dropdown');
+        const wrapper = (_a = dropdown.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-dropdown__select');
+        await userEvent.click(wrapper);
+    }, 500);
+};
 const dropdownArgs = getArgTypes('b2b-dropdown');
 export default {
     title: 'Components/Form/Dropdown',

package/dist/collection/components/flyout-menu/flyout-menu-option.js

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '6203f835788db06223c00d348c659a905710af8f', class: {
+        return (h(Host, { key: 'd9f5fada05c44e475d2e645d51c3ba268844a8e3', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

package/dist/collection/components/flyout-menu/flyout-menu.e2e.js

@@ -62,8 +62,13 @@ describe('B2B-FlyoutMenu', () => {
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
-        await flyoutMenuOption.click();
-        await page.waitForChanges();
+        try {
+            await flyoutMenuOption.click();
+            await page.waitForChanges();
+        }
+        catch (_a) {
+            // expected - not clickable
+        }
         expect(flyoutMenuOption).not.toBeNull();
         expect(optionSelectedEventSpy).not.toHaveReceivedEvent();
     });

package/dist/collection/components/flyout-menu/flyout-menu.js

@@ -144,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '5d9a147f1998a47c761af924c90da4b1f8c6ded1' }, h("div", { key: '1ae6d3742d1614e8a259b0a53f7b944d19c441db', class: {
+        return (h(Host, { key: '5e1d292b710d19a4bf5ece7047d4c5288b24f9b5' }, h("div", { key: 'd7d781fa8dfdd9f4bdecad06209400610a7f37bf', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: '7cd8b06ad714085def1431404dea0aca959eb96d', class: "b2b-flyout-menu__trigger" }, h("slot", { key: 'c0295db03bf2d77ae8ecea387c41cc2fb69ea0e1', name: "trigger" })), h("div", { key: '8eabaac43b7e03e0116e4079f1c27cd7bde14929', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: '124c0ee9f83a252aabac1f09a11932ffde4b6bf1', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '588027fd799f42d6b095ad82247cc6974424fc23', name: "trigger" })), h("div", { key: 'baa37193ac12427e868c6742a526516f91e37a02', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '1646d526780846355dfd56856aa95bc0c4b43460', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'bae26a650e0e506ddc5e9cd791db3767056af9f4', name: "option" })))));
+            } }, h("div", { key: '043ff6439dca6d4fccaa29f4bda5c52645154196', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'e95bcf37c9d1fc77509fbdf2de47001d88d7630a', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/column.js

@@ -13,7 +13,7 @@ export class B2bGridColumnComponent {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'c934cbf6e57af0dd3be40e2149f49adb2802c1f4', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'affb02d8aeefc039ce0a5d8fd2e290e376c8fc3d' })));
+        return (h(Host, { key: 'ca84abbad02173e29f80329a4faab238aa41ec9d', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'e11625544ba0b0fc501ff811e8f5ca1ac89194c9' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '3f706955f934472664948d8653a86d3ac898e3d1', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'a0ac4c214a5bf2f169c2adee55131e785324a7ff' })));
+        return (h(Host, { key: '01c61abbb9d20b4479031e0545967f08782650dc', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '64a173edfae1ff772091163fecc55bebdc2462b9' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/row.js

@@ -66,7 +66,7 @@ export class B2bGridRowComponent {
         });
     }
     render() {
-        return (h(Host, { key: '48eccc3f2f29de4a533859834065717ad6b58238', style: {
+        return (h(Host, { key: '019e65e7db27c37305f49e396389c72fbcf82281', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -74,7 +74,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'b814a34254890bde8a7690c9fa58bc42b3f8d35d' })));
+            } }, h("slot", { key: 'e203c9bde0b21f923b356b6e330ab6e4227fd1a5' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }