@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/src/components/ui-shell/navigation-menu.js

@@ -0,0 +1,284 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import NavigationMenuPanel from './navigation-menu-panel';
+import on from '../../globals/js/misc/on';
+import eventMatches from '../../globals/js/misc/event-matches';
+import settings from '../../globals/js/settings';
+
+export default class NavigationMenu extends NavigationMenuPanel {
+  /**
+   * A navigation menu
+   * @extends NavigationMenuPanel
+   * @param {HTMLElement} element The element working as a selector.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorInit] The CSS class to find navigation
+   * menus.
+   * @param {string} [options.attribInitTarget] The attribute name in the
+   * launcher buttons to find target navigation menu.
+   * @param {string} [options.selectorShellNavSubmenu] The CSS selector for a
+   * nav submenu
+   * @param {string} [options.selectorShellNavLink] The CSS selector for a nav
+   * link
+   * @param {string} [options.selectorShellNavLinkCurrent] The CSS selector for
+   * the current nav link
+   * @param {string} [options.selectorShellNavItem] The CSS selector for a nav
+   * item
+   * @param {string} [options.selectorShellNavCategory] The CSS selector for a
+   * nav category
+   * @param {string} [options.classShellNavItemActive] The CSS class for the
+   * active nav item
+   * @param {string} [options.classShellNavLinkCurrent] The CSS class for the
+   * current lav link
+   * @param {string} [options.classShellNavCategoryExpanded] The CSS class
+   * for an expanded nav category
+   */
+  constructor(element, options) {
+    super(element, options);
+    this.manage(on(element, 'click', this._handleClick));
+    this.manage(on(element, 'keydown', this._handleKeyDown));
+    this.manage(
+      on(this.element.ownerDocument, 'click', event => {
+        if (
+          !this.element.hasAttribute('hidden') &&
+          !this.triggerButton.contains(event.target) &&
+          !this.element.contains(event.target)
+        ) {
+          this.changeState('collapsed');
+        }
+      })
+    );
+    const hasFocusOut = 'onfocusout' in window;
+    this.manage(
+      on(
+        this.element,
+        hasFocusOut ? 'focusout' : 'blur',
+        this._handleFocusOut,
+        !hasFocusOut
+      )
+    );
+  }
+
+  /**
+   * @returns {Element} Currently highlighted element.
+   */
+  getCurrentNavigation = () => this.element.ownerDocument.activeElement;
+
+  /**
+   * Moves the focus up/down.
+   * @param {number} direction The direction of navigating.
+   */
+  navigate = direction => {
+    const items = [
+      ...this.element.querySelectorAll(this.options.selectorFocusableNavItems),
+    ];
+    const start = this.getCurrentNavigation();
+    const getNextItem = old => {
+      const handleUnderflow = (index, length) =>
+        index + (index >= 0 ? 0 : length);
+      const handleOverflow = (index, length) =>
+        index - (index < length ? 0 : length);
+
+      // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
+      const index = Math.max(items.indexOf(old) + direction, -1);
+      return items[
+        handleUnderflow(handleOverflow(index, items.length), items.length)
+      ];
+    };
+    getNextItem(start).focus();
+  };
+
+  /**
+   * Handle keydown event
+   * Up/down arrow keys navigate in the menu
+   * Esc closes the menu
+   * @param {Event} event The event triggering this method.
+   */
+  _handleKeyDown = event => {
+    // handle Esc
+    const isExpanded = !this.element.hasAttribute('hidden');
+    if (event.which === 27 && isExpanded) {
+      this.changeState('collapsed');
+      if (this.triggerButton) {
+        this.triggerButton.focus();
+      }
+      return;
+    }
+    // handle up/down arrow keys
+    const matchesNavSubmenu = eventMatches(
+      event,
+      this.options.selectorShellNavSubmenu
+    );
+    const matchesShellNavLink = eventMatches(
+      event,
+      this.options.selectorShellNavLink
+    );
+    if (!matchesNavSubmenu && !matchesShellNavLink) {
+      return;
+    }
+    const navigationKeyCodes = {
+      38: this.constructor.NAVIGATE.BACKWARD, // up arrow
+      40: this.constructor.NAVIGATE.FORWARD, // down arrow
+    };
+    const navigationKeyCodeMatches = navigationKeyCodes[event.which];
+    if (navigationKeyCodeMatches) {
+      event.preventDefault(); // prevent arrow keys from scrolling
+      this.navigate(navigationKeyCodeMatches);
+    }
+  };
+
+  /**
+   * @param {Event} event The event triggering this method
+   */
+  _handleFocusOut = event => {
+    const nextTargetIsOfSelf =
+      this.element.contains(event.relatedTarget) ||
+      event.relatedTarget === this.triggerButton ||
+      !event.relatedTarget;
+    const oldTargetIsOfSelf = this.element.contains(event.target);
+    if (oldTargetIsOfSelf && !nextTargetIsOfSelf) {
+      this.changeState('collapsed');
+      this.triggerButton.focus();
+    }
+  };
+
+  changeNavSubmenuState = ({ matchesNavSubmenu, shouldBeCollapsed }) => {
+    const shellNavCategory = matchesNavSubmenu.closest(
+      this.options.selectorShellNavCategory
+    );
+    if (!shellNavCategory) {
+      return;
+    }
+    matchesNavSubmenu.setAttribute('aria-expanded', !shouldBeCollapsed);
+    shellNavCategory.classList.toggle(
+      this.options.classShellNavCategoryExpanded
+    );
+    Array.prototype.forEach.call(
+      shellNavCategory.querySelectorAll(this.options.selectorShellNavLink),
+      item => {
+        item.tabIndex = !shouldBeCollapsed ? 0 : -1;
+      }
+    );
+  };
+
+  /**
+   * toggle the state of the nav menu on click
+   * @param {Event} event The event triggering this method
+   */
+  _handleClick = event => {
+    const matchesNavSubmenu = eventMatches(
+      event,
+      this.options.selectorShellNavSubmenu
+    );
+    const matchesShellNavLink = eventMatches(
+      event,
+      this.options.selectorShellNavLink
+    );
+    const matchesNestedShellNavLink = eventMatches(
+      event,
+      this.options.selectorShellNestedNavLink
+    );
+    if (!matchesNavSubmenu && !matchesShellNavLink) {
+      return;
+    }
+    if (matchesNestedShellNavLink) {
+      [
+        ...this.element.querySelectorAll(
+          this.options.selectorShellNavLinkCurrent
+        ),
+      ].forEach(el => {
+        el.classList.remove(
+          this.options.classShellNavItemActive,
+          this.options.classShellNavLinkCurrent
+        );
+      });
+      matchesNestedShellNavLink
+        .closest(this.options.selectorShellNavNestedCategory)
+        .classList.add(this.options.classShellNavItemActive);
+      return;
+    }
+    if (matchesNavSubmenu) {
+      const isExpanded =
+        matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
+      this.changeNavSubmenuState({ matchesNavSubmenu, isExpanded });
+      return;
+    }
+    if (matchesShellNavLink) {
+      [
+        ...this.element.querySelectorAll(
+          this.options.selectorShellNavLinkCurrent
+        ),
+      ].forEach(el => {
+        el.classList.remove(
+          this.options.classShellNavItemActive,
+          this.options.classShellNavLinkCurrent
+        );
+      });
+      matchesShellNavLink
+        .closest(this.options.selectorShellNavItem)
+        .classList.add(this.options.classShellNavItemActive);
+    }
+  };
+
+  /**
+   * The map associating DOM element and NavigationMenu instance.
+   * @member NavigationMenu.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor,
+   * {@linkcode NavigationMenu.create .create()}, or
+   * {@linkcode NavigationMenu.init .init()},
+   * properties in this object are overriden for the instance being create and
+   * how {@linkcode NavigationMenu.init .init()} works.
+   * @member NavigationMenu.options
+   * @type {object}
+   * @property {string} selectorInit The CSS class to find navigation menus.
+   * @property {string} attribInitTarget The attribute name in the
+   * launcher buttons to find target navigation menu.
+   * @property {string[]} initEventNames The events that the component
+   * will handles
+   */
+  static get options() {
+    const { prefix } = settings;
+    return Object.assign(Object.create(NavigationMenuPanel.options), {
+      selectorInit: '[data-navigation-menu]',
+      attribInitTarget: 'data-navigation-menu-target',
+      selectorShellNavSubmenu: `.${prefix}--navigation__category-toggle`,
+      selectorShellNavLink: `.${prefix}--navigation-link`,
+      selectorShellNestedNavLink: `.${prefix}--navigation__category-item > a.${prefix}--navigation-link`,
+      selectorShellNavLinkCurrent: `.${prefix}--navigation-item--active,.${prefix}--navigation__category-item--active`,
+      selectorFocusableNavItems: `
+        .${prefix}--navigation__category-toggle,
+        .${prefix}--navigation-item > .${prefix}--navigation-link,
+        .${prefix}--navigation-link[tabindex="0"]
+      `,
+      selectorShellNavItem: `.${prefix}--navigation-item`,
+      selectorShellNavCategory: `.${prefix}--navigation__category`,
+      selectorShellNavNestedCategory: `.${prefix}--navigation__category-item`,
+      classShellNavItemActive: `${prefix}--navigation-item--active`,
+      classShellNavLinkCurrent: `${prefix}--navigation__category-item--active`,
+      classShellNavCategoryExpanded: `${prefix}--navigation__category--expanded`,
+    });
+  }
+
+  /**
+   * Enum for navigating backward/forward.
+   * @readonly
+   * @member NavigationMenuPanel.NAVIGATE
+   * @type {Object}
+   * @property {number} BACKWARD Navigating backward.
+   * @property {number} FORWARD Navigating forward.
+   */
+  static NAVIGATE /* #__PURE_CLASS_PROPERTY__ */ = {
+    BACKWARD: -1,
+    FORWARD: 1,
+  };
+}

package/styles/vendor/carbon-components/src/components/ui-shell/product-switcher.hbs

@@ -0,0 +1,115 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<aside class="{{@root.prefix}}--panel--overlay" id="switcher-{{switcher.idSuffix}}" data-product-switcher>
+  <div class="{{@root.prefix}}--product-switcher">
+    <div class="{{@root.prefix}}--product-switcher__search">
+      <div class="{{@root.prefix}}--form-item">
+        <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm {{@root.prefix}}--search--shell"
+          role="search">
+          <label id="search-input-label-1" class="{{@root.prefix}}--label" for="search__input-1">Search</label>
+          <input class="{{@root.prefix}}--search-input" type="text" role="search" id="search__input-1" placeholder="Search all products"
+            aria-labelledby="search-input-label-2">
+          <svg class="{{@root.prefix}}--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+              fill-rule="nonzero" />
+          </svg>
+          <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="Clear search input"
+            aria-label="Clear search input">
+            <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+                fill-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    {{#if switcher.state.showAll}}
+    <div class="{{@root.prefix}}--product-switcher__item">
+      <button aria-label="Back" tabindex="0" class="{{@root.prefix}}--product-switcher__back-btn">
+        <svg class="{{@root.prefix}}--product-switcher__back-arrow" width="20" height="20" viewBox="0 0 16 14">
+          <path d="M4.044 8.003l4.09 3.905-1.374 1.453-6.763-6.356L6.759.639 8.135 2.09 4.043 6.003h11.954v2H4.044z" />
+        </svg>
+        Back
+      </button>
+    </div>
+    <ul class="{{@root.prefix}}--product-switcher__product-list">
+      {{#each switcher.allLinks}}
+      <li class="{{@root.prefix}}--product-list__item">
+        <a class="{{@root.prefix}}--product-link" tabindex="0" href="javascript:void(0)">
+          <div class="{{@root.prefix}}--product-switcher__icon">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--product-link__name">{{ this.title }}</span>
+        </a>
+        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="{{@root.prefix}}--overflow-menu">
+          <svg class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+            <g fill-rule="evenodd">
+              <circle cx="1.5" cy="1.5" r="1.5" />
+              <circle cx="1.5" cy="7.5" r="1.5" />
+              <circle cx="1.5" cy="13.5" r="1.5" />
+            </g>
+          </svg>
+          <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
+            data-floating-menu-direction="bottom">
+            <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--overflow__item">
+              <button class="{{@root.prefix}}--overflow-menu-options__btn" title="Option 1"
+                data-floating-menu-primary-focus>Option 1</button>
+            </li>
+            <li class="{{@root.prefix}}--overflow-menu-options__option">
+              <button class="{{@root.prefix}}--overflow-menu-options__btn">Option 2</button>
+            </li>
+          </ul>
+        </div>
+      </li>
+      {{/each}}
+    </ul>
+    {{else}}
+    <p class="{{@root.prefix}}--product-switcher__subheader">My Products</p>
+    <ul class="{{@root.prefix}}--product-switcher__product-list">
+      {{#each switcher.links}}
+      <li class="{{@root.prefix}}--product-list__item">
+        <a class="{{@root.prefix}}--product-link" tabindex="0" href="javascript:void(0)">
+          <div class="{{@root.prefix}}--product-switcher__icon">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--product-link__name">{{ this.title }}</span>
+        </a>
+        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="{{@root.prefix}}--overflow-menu">
+          <svg width="3" height="15" viewBox="0 0 3 15">
+            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
+          </svg>
+          <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
+            data-floating-menu-direction="bottom">
+            <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--overflow__item">
+              <button class="{{@root.prefix}}--overflow-menu-options__btn" title="Option 1"
+                data-floating-menu-primary-focus>Option 1</button>
+            </li>
+            <li class="{{@root.prefix}}--overflow-menu-options__option">
+              <button class="{{@root.prefix}}--overflow-menu-options__btn">Option 2</button>
+            </li>
+          </ul>
+        </div>
+      </li>
+      {{/each}}
+    </ul>
+
+    {{#if switcher.state.showAll}}
+    {{else}}
+    <div class="{{@root.prefix}}--product-switcher__item">
+      <button aria-label="Show All Applications" tabindex="0" class="{{@root.prefix}}--product-switcher__all-btn">
+        View all products
+      </button>
+    </div>
+    {{/if}}
+    {{/if}}
+  </div>
+</aside>

package/styles/vendor/carbon-components/src/components/ui-shell/product-switcher.js

@@ -0,0 +1,197 @@
+import NavigationMenuPanel from './navigation-menu-panel';
+import on from '../../globals/js/misc/on';
+import settings from '../../globals/js/settings';
+import onFocusOutByKeyboard from '../../globals/js/misc/on-focus-by-keyboard';
+
+export default class ProductSwitcher extends NavigationMenuPanel {
+  /**
+   * A navigation menu
+   * @extends NavigationMenuPanel
+   * @param {HTMLElement} element The element working as a selector.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorInit] The CSS class to find product
+   * switchers
+   * @param {string} [options.attribInitTarget] The attribute name in the
+   * launcher buttons to find target product switcher
+   * @param {string} [options.classProductSwitcherExpanded] The CSS class
+   * for an expanded product switcher
+   */
+  constructor(element, options) {
+    super(element, options);
+    this.manage(on(element, 'keydown', this._handleKeyDown));
+    this.manage(onFocusOutByKeyboard(element, 'blur', this._handleFocusOut));
+  }
+
+  /**
+   * id of currently active trigger button
+   * @type {string}
+   */
+  current = '';
+
+  /**
+   * A magic string indicting that no product switcher should be selected.
+   * @type {string}
+   */
+  static SELECT_NONE /* #__PURE_CLASS_PROPERTY__ */ =
+    '__carbon-product-switcher-launcher-NONE';
+
+  /**
+   * The list of the IDs of the trigger buttons that have been used.
+   * @type {Set}
+   */
+  triggerButtonIds = new Set();
+
+  /**
+   * When losing focus of the element via keyboard, place focus back on
+   * trigger button
+   * @param {Event} event The event triggering this method
+   */
+  _handleFocusOut = event => {
+    if (this.element.contains(event.relatedTarget)) {
+      return;
+    }
+    const currentTriggerButton = this.element.ownerDocument.getElementById(
+      this.current
+    );
+    if (
+      currentTriggerButton &&
+      event.relatedTarget &&
+      !event.relatedTarget.matches(this.options.selectorFloatingMenus)
+    ) {
+      currentTriggerButton.focus();
+    }
+  };
+
+  /**
+   * @param {Event} event The event triggering this method
+   */
+  _handleKeyDown = event => {
+    const isExpanded = !this.element.hasAttribute('hidden');
+    if (event.which === 27 && isExpanded) {
+      const triggerButton = this.current;
+      this.changeState(this.constructor.SELECT_NONE);
+      this.element.ownerDocument.getElementById(triggerButton).focus();
+    }
+  };
+
+  createdByLauncher = event => {
+    const isExpanded = this.element.classList.contains(
+      this.options.classProductSwitcherExpanded
+    );
+    const launcher = event.delegateTarget;
+    if (!launcher.id) {
+      launcher.id = `__carbon-product-switcher-launcher-${Math.random()
+        .toString(36)
+        .substr(2)}`;
+    }
+    const current = launcher.id;
+    this.changeState(
+      isExpanded && this.current === current
+        ? this.constructor.SELECT_NONE
+        : current
+    );
+  };
+
+  /**
+   *
+   * @param {string} current
+   * @returns {boolean} true if given state is different from current state
+   */
+  shouldStateBeChanged = current => this.current !== current;
+
+  /**
+   * Changes the expanded/collapsed state.
+   * @private
+   * @param {string} state The new state.
+   * @param {Function} callback Callback called when change in state completes.
+   */
+  _changeState = (state, callback) => {
+    this.element.classList.toggle(
+      this.options.classProductSwitcherExpanded,
+      state !== this.constructor.SELECT_NONE
+    );
+    this.current = state;
+    if (this.current !== this.constructor.SELECT_NONE) {
+      this.triggerButtonIds.add(this.current);
+    }
+
+    // deactivate all other trigger buttons
+    this.triggerButtonIds.forEach(id => {
+      const button = this.element.ownerDocument.getElementById(id);
+      const label = button.getAttribute(this.options.attribLabelExpand);
+      button.classList.remove(
+        this.options.classNavigationMenuPanelHeaderActionActive
+      );
+      button.setAttribute('aria-label', label);
+      button.setAttribute('title', label);
+    });
+
+    // set active trigger button attributes
+    const currentTriggerButton = this.element.ownerDocument.getElementById(
+      this.current
+    );
+    if (currentTriggerButton) {
+      const label = currentTriggerButton.getAttribute(
+        this.options.attribLabelCollapse
+      );
+      currentTriggerButton.classList.toggle(
+        this.options.classNavigationMenuPanelHeaderActionActive
+      );
+      currentTriggerButton.setAttribute('aria-label', label);
+      currentTriggerButton.setAttribute('title', label);
+    }
+
+    if (state !== this.constructor.SELECT_NONE) {
+      this.element.setAttribute('tabindex', '0');
+      this.element.focus();
+    } else {
+      this.element.setAttribute('tabindex', '-1');
+    }
+
+    callback();
+  };
+
+  release() {
+    this.triggerButtonIds.clear();
+    return super.release();
+  }
+
+  /**
+   * The map associating DOM element and ProductSwitcher instance.
+   * @member ProductSwitcher.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor,
+   * {@linkcode ProductSwitcher.create .create()}, or
+   * {@linkcode ProductSwitcher.init .init()},
+   * properties in this object are overriden for the instance being create and
+   * how {@linkcode ProductSwitcher.init .init()} works.
+   * @member ProductSwitcher.options
+   * @type {object}
+   * @property {string} selectorInit The CSS class to find popup navs.
+   * @property {string} attribInitTarget The attribute name in the
+   * launcher buttons to find target popup nav.
+   * @property {string[]} initEventNames The events that the component
+   * will handles
+   */
+  static get options() {
+    const { prefix } = settings;
+    return Object.assign(Object.create(NavigationMenuPanel.options), {
+      selectorInit: '[data-product-switcher]',
+      selectorFloatingMenus: `
+        .${prefix}--overflow-menu-options,
+        .${prefix}--overflow-menu-options *,
+        .${prefix}--tooltip,
+        .${prefix}--tooltip *,
+        .flatpicker-calendar,
+        .flatpicker-calendar *
+        `,
+      attribInitTarget: 'data-product-switcher-target',
+      classProductSwitcherExpanded: `${prefix}--panel--expanded`,
+    });
+  }
+}