@carbon/web-components 2.0.0-rc.0 → 2.0.0-rc.2

package/es/components/ui-shell/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","classMap","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","CDSSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","reflect","attribute","RESPONSIVE","type","Boolean","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","doc","getRootNode","selectorButtonToggle","collapseMode","headerItems","selectorHeaderItems","removeAttribute","isNotChildOfHeader","_handleFocusOut","relatedTarget","contains","_handleFocusIn","_handleNavMouseOver","RAIL","_handleNavMouseOut","render","isNotPersistent","classes","FIXED","overlayClasses","_t","_","_t2","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport CDSHeaderMenuButton from './header-menu-button';\nimport CDSSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass CDSSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof CDSSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as CDSSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  /**\n   * Specify if the side-nav will be persistent above the lg breakpoint\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'is-not-persistent' })\n  isNotPersistent = false;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      const headerItems = doc.querySelectorAll(\n        (this.constructor as typeof CDSSideNav).selectorHeaderItems\n      );\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).active = this.expanded;\n        }\n      );\n      if (this.expanded) {\n        forEach(headerItems, (item) => {\n          item.setAttribute('tabindex', '-1');\n        });\n      } else {\n        forEach(headerItems, (item) => {\n          item.removeAttribute('tabindex');\n        });\n      }\n    }\n    if (changedProperties.has('isNotChildOfHeader')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).isNotChildOfHeader =\n            this.isNotChildOfHeader;\n        }\n      );\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusOut({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * Handles `focus` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusIn() {\n    this.expanded = true;\n  }\n\n  /**\n   * Handles the `mouseover` event for the side nav in rail mode.\n   *\n   */\n  private _handleNavMouseOver() {\n    const { collapseMode } = this;\n    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {\n      this.expanded = true;\n      this._hovered = true;\n      this._updatedSideNavMenuForceCollapsedState();\n    }\n  }\n\n  /**\n   * Handles the `mouseout` event for the side nav in rail mode.\n   *\n   */\n  private _handleNavMouseOut() {\n    const { collapseMode } = this;\n    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {\n      this.expanded = false;\n      this._hovered = false;\n      this._updatedSideNavMenuForceCollapsedState();\n    }\n  }\n\n  render() {\n    const { collapseMode, expanded, isNotChildOfHeader, isNotPersistent } =\n      this;\n    const classes = classMap({\n      [`${prefix}--side-nav__navigation`]: true,\n      [`${prefix}--side-nav`]: true,\n      [`${prefix}--side-nav--expanded`]: expanded,\n      [`${prefix}--side-nav--collapsed`]:\n        !expanded && collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED,\n      [`${prefix}--side-nav--rail`]:\n        collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL,\n      [`${prefix}--side-nav--ux`]: !isNotChildOfHeader,\n      [`${prefix}--side-nav--hidden`]: isNotPersistent,\n    });\n\n    const overlayClasses = classMap({\n      [`${prefix}--side-nav__overlay`]: true,\n      [`${prefix}--side-nav__overlay-active`]: expanded,\n    });\n    return html`${this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED\n        ? null\n        : html`<div class=\"${overlayClasses}\"></div>`}\n      <div\n        class=\"${classes}\"\n        @mouseover=\"${this._handleNavMouseOver}\"\n        @mouseout=\"${this._handleNavMouseOut}\">\n        <slot></slot>\n      </div>`;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return the header name + global action elements.\n   */\n  static get selectorHeaderItems() {\n    return `${prefix}-header-name, ${prefix}-header-global-action`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","classMap","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","CDSSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","reflect","attribute","RESPONSIVE","type","Boolean","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","doc","getRootNode","selectorButtonToggle","collapseMode","headerItems","selectorHeaderItems","removeAttribute","isNotChildOfHeader","_handleFocusOut","relatedTarget","FIXED","contains","_handleFocusIn","_handleNavMouseOver","RAIL","_handleNavMouseOut","render","isNotPersistent","classes","overlayClasses","_t","_","_t2","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport CDSHeaderMenuButton from './header-menu-button';\nimport CDSSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass CDSSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof CDSSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as CDSSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  /**\n   * Specify if the side-nav will be persistent above the lg breakpoint\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'is-not-persistent' })\n  isNotPersistent = false;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      const headerItems = doc.querySelectorAll(\n        (this.constructor as typeof CDSSideNav).selectorHeaderItems\n      );\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).active = this.expanded;\n        }\n      );\n      if (this.expanded) {\n        forEach(headerItems, (item) => {\n          item.setAttribute('tabindex', '-1');\n        });\n      } else {\n        forEach(headerItems, (item) => {\n          item.removeAttribute('tabindex');\n        });\n      }\n    }\n    if (changedProperties.has('isNotChildOfHeader')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).isNotChildOfHeader =\n            this.isNotChildOfHeader;\n        }\n      );\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusOut({ relatedTarget }: FocusEvent) {\n    const { collapseMode } = this;\n    if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {\n      if (!this.contains(relatedTarget as Node)) {\n        this.expanded = false;\n      }\n    }\n  }\n\n  /**\n   * Handles `focus` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusIn() {\n    const { collapseMode } = this;\n    if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {\n      this.expanded = true;\n    }\n  }\n\n  /**\n   * Handles the `mouseover` event for the side nav in rail mode.\n   *\n   */\n  private _handleNavMouseOver() {\n    const { collapseMode } = this;\n    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {\n      this.expanded = true;\n      this._hovered = true;\n      this._updatedSideNavMenuForceCollapsedState();\n    }\n  }\n\n  /**\n   * Handles the `mouseout` event for the side nav in rail mode.\n   *\n   */\n  private _handleNavMouseOut() {\n    const { collapseMode } = this;\n    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {\n      this.expanded = false;\n      this._hovered = false;\n      this._updatedSideNavMenuForceCollapsedState();\n    }\n  }\n\n  render() {\n    const { collapseMode, expanded, isNotChildOfHeader, isNotPersistent } =\n      this;\n    const classes = classMap({\n      [`${prefix}--side-nav__navigation`]: true,\n      [`${prefix}--side-nav`]: true,\n      [`${prefix}--side-nav--expanded`]: expanded,\n      [`${prefix}--side-nav--collapsed`]:\n        !expanded && collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED,\n      [`${prefix}--side-nav--rail`]:\n        collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL,\n      [`${prefix}--side-nav--ux`]: !isNotChildOfHeader,\n      [`${prefix}--side-nav--hidden`]: isNotPersistent,\n    });\n\n    const overlayClasses = classMap({\n      [`${prefix}--side-nav__overlay`]: true,\n      [`${prefix}--side-nav__overlay-active`]: expanded,\n    });\n    return html`${this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED\n        ? null\n        : html`<div class=\"${overlayClasses}\"></div>`}\n      <div\n        class=\"${classes}\"\n        @mouseover=\"${this._handleNavMouseOver}\"\n        @mouseout=\"${this._handleNavMouseOut}\">\n        <slot></slot>\n      </div>`;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return the header name + global action elements.\n   */\n  static get selectorHeaderItems() {\n    return `${prefix}-header-name, ${prefix}-header-global-action`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSideNav;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "publishConfig": {
     "access": "public"
   },

package/scss/components/breadcrumb/breadcrumb.scss

@@ -17,6 +17,11 @@ $css--plex: true !default;
 :host(#{$prefix}-breadcrumb),
 :host(#{$prefix}-breadcrumb-skeleton) {
   @extend .#{$prefix}--breadcrumb;
+
+  .#{$prefix}--breadcrumb {
+    padding: 0;
+    margin: 0;
+  }
 }
 
 :host(#{$prefix}-breadcrumb-item),

package/scss/components/button/button.scss

@@ -23,6 +23,15 @@ $css--plex: true !default;
 :host(#{$prefix}-modal-footer-button) {
   @include layer-tokens.emit-layer-tokens(1);
   display: inline-flex;
+
+  ::slotted([slot='icon']) {
+    @extend .#{$prefix}--btn__icon;
+  }
+
+  .#{$prefix}--btn {
+    flex-grow: 1;
+    max-width: 100%;
+  }
 }
 
 :host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),