@carbon/web-components 2.58.0-rc.0 → 2.58.0

package/es-custom/components/button/button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-set.js","names":["CDSButtonSetBase","styles","customElement"],"sources":["../../../src/components/button/button-set.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { BUTTON_KIND } from './defs';\nimport styles from './button.scss?lit';\nimport { prefix } from '../../globals/settings';\nimport CDSButtonSetBase from './button-set-base';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Button set.\n *\n * @element cds-custom-button-set\n */\n@customElement(`${prefix}-button-set`)\nclass CDSButtonSet extends CDSButtonSetBase {\n  /**\n   * `true` if the buttons should be stacked. Only applies to the button-set variant.\n   */\n  @property({ type: Boolean, reflect: true })\n  stacked = false;\n\n  /**\n   * Handler for @slotchange, set the first cds-custom-button to kind secondary and primary for the remaining ones\n   *\n   * @private\n   */\n  protected _handleSlotChange(event: Event) {\n    const childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSButtonSet).selectorItem\n            )\n          : false\n      );\n\n    childItems.forEach((elem, index) => {\n      (elem as HTMLElement).setAttribute(\n        'kind',\n        index === 0 ? BUTTON_KIND.SECONDARY : BUTTON_KIND.PRIMARY\n      );\n    });\n\n    const update = new CustomEvent(`${prefix}-btn-set-update`, {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(update);\n  }\n\n  /**\n   * When a button within a button-set is focused, hide the margin on both sides\n   * of the focused button, by applying the appropriate styles to its sibling\n   *\n   * @private\n   */\n  private _hideSiblingMargin = () => {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return;\n    const items = slot\n      .assignedElements()\n      .filter(\n        (el) => el.tagName.toLowerCase() === `${prefix}-button`\n      ) as HTMLElement[];\n\n    const focusedIndex = items.findIndex((el) => el.matches(':focus-within'));\n\n    items.forEach((el, idx) => {\n      const shouldHide =\n        focusedIndex >= 0 && (idx === focusedIndex || idx === focusedIndex + 1);\n      el.toggleAttribute('hide-margin', shouldHide);\n    });\n  };\n\n  connectedCallback() {\n    super.connectedCallback?.();\n    this.addEventListener('focusin', this._hideSiblingMargin);\n    this.addEventListener('focusout', this._hideSiblingMargin);\n  }\n\n  render() {\n    const { stacked } = this;\n    const defaultClasses = {\n      [`${prefix}--btn-set--stacked`]: stacked,\n      [`${prefix}--btn-set`]: true,\n    };\n    const classes = classMap(defaultClasses);\n\n    return html`<slot\n      class=\"${classes}\"\n      part=\"button-set\"\n      @slotchange=\"${this._handleSlotChange}\"></slot>`;\n  }\n  /**\n   * A selector that will return the child items.\n   */\n  static get selectorItem() {\n    return `${prefix}-button`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSButtonSet;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,eAAA,MACM,qBAAqBA,wBAAiB;;;iBAKhC;kCAwCyB;GACjC,MAAM,OAAO,KAAK,YAAY,cAAc,MAAM;GAClD,IAAI,CAAC,MAAM;GACX,MAAM,QAAQ,KACX,iBAAiB,CAAC,CAClB,QACE,OAAO,GAAG,QAAQ,YAAY,MAAM,YACvC;GAEF,MAAM,eAAe,MAAM,WAAW,OAAO,GAAG,QAAQ,eAAe,CAAC;GAExE,MAAM,SAAS,IAAI,QAAQ;IACzB,MAAM,aACJ,gBAAgB,MAAM,QAAQ,gBAAgB,QAAQ,eAAe;IACvE,GAAG,gBAAgB,eAAe,UAAU;GAC9C,CAAC;EACH;;;;;;;CAjDA,kBAA4B,OAAc;EAWxC,MAV0B,OACvB,cAAc,CAAC,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,YAAoC,YAC5C,IACA,KAGC,CAAC,CAAC,SAAS,MAAM,UAAU;GAClC,KAAsB,aACpB,QACA,UAAU,IAAA,cAAA,SACZ;EACF,CAAC;EAED,MAAM,SAAS,IAAI,YAAY,sBAA4B;GACzD,SAAS;GACT,YAAY;GACZ,UAAU;EACZ,CAAC;EAED,KAAK,cAAc,MAAM;CAC3B;CA0BA,oBAAoB;EAClB,MAAM,oBAAoB;EAC1B,KAAK,iBAAiB,WAAW,KAAK,kBAAkB;EACxD,KAAK,iBAAiB,YAAY,KAAK,kBAAkB;CAC3D;CAEA,SAAS;EACP,MAAM,EAAE,YAAY;EAOpB,OAAO,IAAI;eAFK,SAAS;IAHtB,0BAAgC;IAChC,iBAAuB;EAEY,CAGrB,EAAE;;qBAEF,KAAK,kBAAkB;CAC1C;;;;CAIA,WAAW,eAAe;EACxB,OAAO;CACT;;gBAEgBC;;AAClB;YAtFG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;2BAL3CC,cAAc,gBAAsB,CAAA,GAAA,YAAA;AA6FrC,IAAA,qBAAe"}
+{"version":3,"file":"button-set.js","names":["CDSButtonSetBase","styles","customElement"],"sources":["../../../src/components/button/button-set.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { BUTTON_KIND } from './defs';\nimport styles from './button.scss?lit';\nimport { prefix } from '../../globals/settings';\nimport CDSButtonSetBase from './button-set-base';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Button set.\n *\n * @element cds-custom-button-set\n */\n@customElement(`${prefix}-button-set`)\nclass CDSButtonSet extends CDSButtonSetBase {\n  /**\n   * The slot element\n   */\n  @query('slot')\n  private _slotElement?: HTMLSlotElement;\n\n  /**\n   * `true` if the buttons should be stacked. Only applies to the button-set variant.\n   */\n  @property({ type: Boolean, reflect: true })\n  stacked = false;\n\n  /**\n   * Handler for @slotchange, set the first cds-custom-button to kind secondary and primary for the remaining ones\n   *\n   * @private\n   */\n  protected _handleSlotChange(event: Event) {\n    const childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSButtonSet).selectorItem\n            )\n          : false\n      );\n\n    childItems.forEach((elem, index) => {\n      (elem as HTMLElement).setAttribute(\n        'kind',\n        index === 0 ? BUTTON_KIND.SECONDARY : BUTTON_KIND.PRIMARY\n      );\n    });\n\n    const update = new CustomEvent(`${prefix}-btn-set-update`, {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(update);\n  }\n\n  /**\n   * When a button within a button-set is focused, hide the margin on both sides\n   * of the focused button, by applying the appropriate styles to its sibling\n   *\n   * @private\n   */\n  private _hideSiblingMargin = () => {\n    if (!this._slotElement) return;\n    const items = this._slotElement\n      .assignedElements()\n      .filter(\n        (el) => el.tagName.toLowerCase() === `${prefix}-button`\n      ) as HTMLElement[];\n\n    const focusedIndex = items.findIndex((el) => el.matches(':focus-within'));\n\n    items.forEach((el, idx) => {\n      const shouldHide =\n        focusedIndex >= 0 && (idx === focusedIndex || idx === focusedIndex + 1);\n      el.toggleAttribute('hide-margin', shouldHide);\n    });\n  };\n\n  connectedCallback() {\n    super.connectedCallback?.();\n    this.addEventListener('focusin', this._hideSiblingMargin);\n    this.addEventListener('focusout', this._hideSiblingMargin);\n  }\n\n  render() {\n    const { stacked } = this;\n    const defaultClasses = {\n      [`${prefix}--btn-set--stacked`]: stacked,\n      [`${prefix}--btn-set`]: true,\n    };\n    const classes = classMap(defaultClasses);\n\n    return html`<slot\n      class=\"${classes}\"\n      part=\"button-set\"\n      @slotchange=\"${this._handleSlotChange}\"></slot>`;\n  }\n  /**\n   * A selector that will return the child items.\n   */\n  static get selectorItem() {\n    return `${prefix}-button`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSButtonSet;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,eAAA,MACM,qBAAqBA,wBAAiB;;;iBAWhC;kCAwCyB;GACjC,IAAI,CAAC,KAAK,cAAc;GACxB,MAAM,QAAQ,KAAK,aAChB,iBAAiB,CAAC,CAClB,QACE,OAAO,GAAG,QAAQ,YAAY,MAAM,YACvC;GAEF,MAAM,eAAe,MAAM,WAAW,OAAO,GAAG,QAAQ,eAAe,CAAC;GAExE,MAAM,SAAS,IAAI,QAAQ;IACzB,MAAM,aACJ,gBAAgB,MAAM,QAAQ,gBAAgB,QAAQ,eAAe;IACvE,GAAG,gBAAgB,eAAe,UAAU;GAC9C,CAAC;EACH;;;;;;;CAhDA,kBAA4B,OAAc;EAWxC,MAV0B,OACvB,cAAc,CAAC,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,YAAoC,YAC5C,IACA,KAGC,CAAC,CAAC,SAAS,MAAM,UAAU;GAClC,KAAsB,aACpB,QACA,UAAU,IAAA,cAAA,SACZ;EACF,CAAC;EAED,MAAM,SAAS,IAAI,YAAY,sBAA4B;GACzD,SAAS;GACT,YAAY;GACZ,UAAU;EACZ,CAAC;EAED,KAAK,cAAc,MAAM;CAC3B;CAyBA,oBAAoB;EAClB,MAAM,oBAAoB;EAC1B,KAAK,iBAAiB,WAAW,KAAK,kBAAkB;EACxD,KAAK,iBAAiB,YAAY,KAAK,kBAAkB;CAC3D;CAEA,SAAS;EACP,MAAM,EAAE,YAAY;EAOpB,OAAO,IAAI;eAFK,SAAS;IAHtB,0BAAgC;IAChC,iBAAuB;EAEY,CAGrB,EAAE;;qBAEF,KAAK,kBAAkB;CAC1C;;;;CAIA,WAAW,eAAe;EACxB,OAAO;CACT;;gBAEgBC;;AAClB;YA3FG,MAAM,MAAM,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;YAMZ,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;2BAX3CC,cAAc,gBAAsB,CAAA,GAAA,YAAA;AAkGrC,IAAA,qBAAe"}