@govtechsg/sgds-web-component 2.0.1 → 2.1.1

package/react/components/Modal/sgds-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-modal.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { watch } from \"../../utils/watch\";\nimport modalStyle from \"./modal.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n * @csspart base - The component's base wrapper\n * @csspart overlay - The overlay that covers the screen behind the dialog\n * @csspart panel - The modal's dialog panel\n * @csspart header - The modal's header that wraps the title, titleIcon and close button\n * @csspart title - The h3 element wrapping title and titleIcon\n * @csspart body - The modal's body where the content lies\n * @csspart footers - The modal's footer\n *\n * @cssproperty --modal-panel-padding - The general modal padding of modal component. Applied to body, footer and header.\n * @cssproperty --modal-panel-z-index - The z-index of modal panel\n * @cssproperty --modal-panel-width - The width of modal panel.\n * @cssproperty --modal-panel-height - The height of modal panel.\n * @cssproperty --modal-panel-bg - The background color of modal panel\n * @cssproperty --modal-panel-border-radius - The border radius of modal panel\n * @cssproperty --modal-header-border-bottom - The bottom border of header\n * @cssproperty --modal-overlay-bg - The overlay's background color\n */\nexport class SgdsModal extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /**The modal's title as displayed in the header */\n  @property({ reflect: true }) title = \"\";\n  /**The modal's icon as displayed in the header. Pass in SVG format icons as string directly  */\n  @property({ reflect: true }) titleIcon = \"\";\n  /** Disables the header. This will also remove the default close button */\n  @property({ type: Boolean, reflect: true }) noHeader = false;\n  /** Centers the modal vertically in page */\n  @property({ type: Boolean, reflect: true }) centered = false;\n  /** Centers the contents inside the modal */\n  @property({ type: Boolean, reflect: true }) centeredAlignVariant = false;\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Removes the close button from modal header */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n  }\n\n  firstUpdated() {\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    const withLabelIcon = html`${unsafeSVG(this.titleIcon)}`;\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          modal: true,\n          \"modal--open\": this.open,\n          \"modal--has-footer\": this.hasSlotController.test(\"footer\"),\n          centered: this.centered\n        })}\n      >\n        <div part=\"overlay\" class=\"modal-overlay\" @click=${() => this.requestClose(\"overlay\")}></div>\n\n        <div\n          part=\"panel\"\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-label=${ifDefined(this.noHeader ? this.title : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? \"title\" : undefined)}\n          tabindex=\"-1\"\n        >\n          ${!this.noHeader\n            ? html`\n                <div\n                  part=\"header\"\n                  class=${classMap({\n                    \"modal-header\": true,\n                    centered: this.centeredAlignVariant\n                  })}\n                >\n                  <h3\n                    part=\"title\"\n                    class=${classMap({\n                      \"modal-title\": true,\n                      centered: this.centeredAlignVariant\n                    })}\n                    id=\"title\"\n                    tabindex=\"-1\"\n                  >\n                    ${this.titleIcon ? withLabelIcon : \"\"} ${this.title}\n                  </h3>\n                  ${this.noCloseButton\n                    ? nothing\n                    : html`<sgds-close-button\n                        class=${classMap({\n                          \"modal-close\": true,\n                          centered: this.centeredAlignVariant\n                        })}\n                        @click=\"${() => this.requestClose(\"close-button\")}\"\n                        ariaLabel=\"close modal\"\n                      ></sgds-close-button>`}\n                </div>\n              `\n            : \"\"}\n\n          <div\n            part=\"body\"\n            class=${classMap({\n              \"modal-body\": true,\n              centered: this.centeredAlignVariant\n            })}\n          >\n            <slot></slot>\n          </div>\n\n          <footer\n            part=\"footer\"\n            class=${classMap({\n              \"modal-footer\": true,\n              centered: this.centeredAlignVariant\n            })}\n          >\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["headerStyles","svgStyles","modalStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;MACU,SAAU,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAiBmB,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;;QAO/B,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAE5B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAEX,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAEA,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAEjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAEjB,IAAoB,CAAA,oBAAA,GAAG,KAAK,CAAC;;QAE7B,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAEpB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KA6NnE;;AAhQC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAE,eAAe;SACrC,CAAC;KACH;IAiCD,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,YAAY,GAAA;QACV,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;KACF;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAC3B;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,OAAO,SAAS,CAAC;SAClB;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,SAAS,CAAC;SAClB;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;AAClB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;AAEO,IAAA,YAAY,CAAC,MAA+C,EAAA;AAClE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC/C,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,EAAE,MAAM,EAAE;AACnB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,gBAAgB,CAAC,gBAAgB,EAAE;YACrC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;YACxD,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAC3C,OAAO;SACR;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,gBAAgB,GAAA;QACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KAClE;IAED,mBAAmB,GAAA;QACjB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACrE;AAED,IAAA,qBAAqB,CAAC,KAAoB,EAAA;QACxC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACvC,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;SAC/B;KACF;IAGK,MAAA,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;;AAEb,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAA4B,CAAC;AAC7D,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YAEtB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAExB,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/E,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;YAE3B,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YACxD,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;YAClE,CAAC,IAAI,CAAC,WAAW;AACf,iBAAC,MAAM,OAAO,CAAC,GAAG,CAAC;AACjB,oBAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC;AACvE,oBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC9E,iBAAA,CAAC,CAAC,CAAC;AAEN,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;;AAG7B,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACtB;aAAM;;AAEL,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC3B,YAAA,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YAExB,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAC/E,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YACxD,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;;;;YAKlE,CAAC,IAAI,CAAC,WAAW;AACf,iBAAC,MAAM,OAAO,CAAC,GAAG,CAAC;AACjB,oBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AACtF,wBAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;AAC7B,qBAAC,CAAC;AACF,oBAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AAChF,wBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AAC3B,qBAAC,CAAC;AACH,iBAAA,CAAC,CAAC,CAAC;AAEN,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;;AAG1B,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;AAC5B,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YAE1B,mBAAmB,CAAC,IAAI,CAAC,CAAC;;AAG1B,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;AACrC,YAAA,IAAI,QAAO,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAE,KAAK,CAAA,KAAK,UAAU,EAAE;gBACxC,UAAU,CAAC,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;aACnC;AAED,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAA,CAAG,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC;AACzD,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,aAAa,EAAE,IAAI,CAAC,IAAI;YACxB,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;AAEiD,yDAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;;;;;;;wBAOrE,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;AAC7B,qBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAA;AAC5C,0BAAA,EAAA,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;;;YAG/D,CAAC,IAAI,CAAC,QAAQ;cACZ,IAAI,CAAA,CAAA;;;AAGQ,wBAAA,EAAA,QAAQ,CAAC;AACf,gBAAA,cAAc,EAAE,IAAI;gBACpB,QAAQ,EAAE,IAAI,CAAC,oBAAoB;aACpC,CAAC,CAAA;;;;AAIQ,0BAAA,EAAA,QAAQ,CAAC;AACf,gBAAA,aAAa,EAAE,IAAI;gBACnB,QAAQ,EAAE,IAAI,CAAC,oBAAoB;aACpC,CAAC,CAAA;;;;AAIA,oBAAA,EAAA,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;AAEnD,kBAAA,EAAA,IAAI,CAAC,aAAa;AAClB,kBAAE,OAAO;kBACP,IAAI,CAAA,CAAA;AACM,8BAAA,EAAA,QAAQ,CAAC;AACf,oBAAA,aAAa,EAAE,IAAI;oBACnB,QAAQ,EAAE,IAAI,CAAC,oBAAoB;iBACpC,CAAC,CAAA;AACQ,gCAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;;AAE7B,2CAAA,CAAA,CAAA;;AAE7B,cAAA,CAAA;AACH,cAAE,EAAE,CAAA;;;;AAII,kBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,oBAAoB;SACpC,CAAC,CAAA;;;;;;;AAOM,kBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;YACpB,QAAQ,EAAE,IAAI,CAAC,oBAAoB;SACpC,CAAC,CAAA;;;;;;KAMT,CAAC;KACH;;AAjQM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,EAAEC,UAAS,EAAEC,UAAU,CAAC,CAAC;AAQ5D,UAAA,CAAA;IAAhB,KAAK,CAAC,QAAQ,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEd,UAAA,CAAA;IAAtB,KAAK,CAAC,cAAc,CAAC;AAAoB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAAxB,KAAK,CAAC,gBAAgB,CAAC;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvB,UAAA,CAAA;IAAtB,KAAK,CAAC,cAAc,CAAC;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AASA,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE5B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEX,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEA,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE7B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA0E5D,UAAA,CAAA;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAiE7C,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAqFH,mBAAmB,CAAC,YAAY,EAAE;AAChC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,8BAA8B,EAAE;AACzD,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE;AACvD,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,EAAE;AAChC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE;AACrD,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,8BAA8B,EAAE;AAC1D,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,iBAAiB,EAAE;AACrC,IAAA,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAC/F,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,oBAAoB,EAAE;AACxC,IAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3C,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,oBAAoB,EAAE;AACxC,IAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3C,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC;;;;"}

package/{components → react/components}/Pagination/pagination.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Pagination/pagination.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"pagination.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Pagination/pagination.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--pagination-color:var(--sgds-link);--pagination-bg:var(--sgds-body-bg);--pagination-hover-bg:var(--sgds-gray-200);--pagination-active-color:var(--sgds-white);--pagination-active-bg:var(--sgds-link);--pagination-disabled-color:var(--sgds-gray);--pagination-disabled-bg:var(--sgds-body-bg)}ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:flex;list-style:none;padding-left:0}.page-link{background-color:var(--pagination-bg);border:1px solid var(--sgds-border-color);color:var(--pagination-color);display:block;padding:.5rem 1rem;position:relative;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2}.page-link:focus,.page-link:hover{background-color:var(--pagination-hover-bg);color:var(--pagination-color)}.page-link:focus{box-shadow:0 0 0 .125rem rgba(15,113,187,.25);outline:0;z-index:3}.page-item{cursor:pointer}.page-item.disabled{cursor:not-allowed}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.active .page-link{background-color:var(--pagination-active-bg);border-color:var(--sgds-info);color:var(--pagination-active-color);z-index:3}.page-item.disabled .page-link{--pagination-hover-bg: ;border-color:var(--sgds-disabled-color);opacity:var(--sgds-disabled-opacity)}.ellipsis-disabled{--pagination-hover-bg: ;color:var(--sgds-disabled-color);cursor:not-allowed}.page-item:first-child .page-link{border-bottom-left-radius:.3125rem;border-top-left-radius:.3125rem}.page-item:last-child .page-link{border-bottom-right-radius:.3125rem;border-top-right-radius:.3125rem}.pagination-sm .page-link{font-size:.875rem;padding:.25rem .5rem}.pagination-sm .page-item:first-child .page-link{border-bottom-left-radius:.2rem;border-top-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-bottom-right-radius:.2rem;border-top-right-radius:.2rem}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
+
+export { css_248z as default };
+//# sourceMappingURL=pagination.js.map

package/react/components/Pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Pagination/sgds-pagination.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Pagination/sgds-pagination.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-pagination.cjs.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport paginationStyle from \"./pagination.css\";\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n * @cssproperty --pagination-color - The text color of pagination\n * @cssproperty --pagination-bg - The background color of pagination\n * @cssproperty --pagination-hover-bg - The  background color of pagination in hover state\n * @cssproperty --pagination-active-color - The text color of pagination in active state\n * @cssproperty --pagination-active-bg - The background color of pagination in active state\n * @cssproperty --pagination-disabled-color - The text color of pagination in disabled state\n * @cssproperty --pagination-disabled-bg - The background color of pagination in disabled state\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the page limit to be displayed at any given render. e.g 3, 5, 7, 9 */\n  @property({ type: Number }) limit = 3;\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) directionVariant: directionVariant = \"icon-text\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: sizeVariant = \"sm\";\n\n  /** Toggles ellipsis buttons to be able to increment/decrement pages based on the ellipsisJump value set. By default, it will be false */\n  @property({ type: Boolean }) ellipsisOn = false;\n\n  /** When ellipsisOn is true, length of decrementing/incrementing of pages can be set with a number value*/\n  @property({ type: Number }) ellipsisJump = 3;\n  /** Enables rendering of the first-page button on the pagination, allowing users to jump to the initial page. By default, it will be false. When true, the first ellipsis will always be rendered */\n  @property({ type: Boolean }) showFirstPage = false;\n  /** Enables rendering of the last-page button on the pagination, allowing users to jump to the last page. By default, it will be false */\n  @property({ type: Boolean }) showLastPage = false;\n\n  /**@internal */\n  @watch(\"currentPage\")\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n  }\n\n  /** @internal */\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  /** @internal */\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  /** @internal */\n  private _handleNextEllipsisButton() {\n    this.currentPage = this.currentPage + this.ellipsisJump;\n    if (this.currentPage >= this.pages.length) this.currentPage = this.pages.length;\n  }\n\n  /** @internal */\n  private _handlePrevEllipsisButton() {\n    this.currentPage = this.currentPage - this.ellipsisJump;\n    if (this.currentPage <= 1) this.currentPage = this.pages[0];\n  }\n\n  /** @internal */\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  /** @internal */\n  private get _sanitizeLimit() {\n    return this.limit >= this.pages.length ? this.pages.length : this.limit;\n  }\n\n  /**@internal */\n  private _handleKeyDown(\n    event: KeyboardEvent,\n    action: string,\n    number?: number,\n    isFirstEllipsis?: boolean,\n    isPrevButton?: boolean\n  ) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"ellipsis\":\n          if (isFirstEllipsis) {\n            this._handlePrevEllipsisButton();\n          } else {\n            this._handleNextEllipsisButton();\n          }\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage > 1) {\n      return html`\n        <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n            >1</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n  /** @internal */\n  private _renderPgNumbers() {\n    const pagesToShow = [];\n    let sanitizeStartPage = 1;\n    let endPage: number;\n\n    if (this.limit < this.pages.length) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n    }\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage <= 0) {\n      sanitizeStartPage = 1;\n    }\n\n    endPage = sanitizeStartPage + this._sanitizeLimit - 1;\n\n    if (endPage > this.pages.length) {\n      endPage = this.pages.length;\n    }\n\n    if (this.currentPage === this.pages.length) {\n      sanitizeStartPage = this.pages.length - this._sanitizeLimit + 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"visually-hidden\">Ellipsis</span>\n  `;\n\n  /** @internal */\n  private _renderFirstEllipsis = () => {\n    const isHidden = !(\n      this.pages.length !== this._sanitizeLimit && this.currentPage - Math.floor(this._sanitizeLimit / 2) > 1\n    );\n\n    if (isHidden) {\n      return null;\n    }\n\n    const tabIndex = isHidden ? -1 : 0;\n\n    return html`\n      <li\n        class=${classMap({ \"page-item\": true, \"ellipsis-disabled\": !this.ellipsisOn })}\n        @click=${this.ellipsisOn && this._handlePrevEllipsisButton}\n        @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, true)}\n      >\n        <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  /** @internal */\n  private _renderLastEllipsis() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    const shouldRenderEllipsis = this.pages.length !== this.limit && differentialLimitCondition;\n    const tabIndex = shouldRenderEllipsis && this.ellipsisOn ? 0 : -1;\n    if (!shouldRenderEllipsis || this._sanitizeLimit >= this.pages.length) {\n      return null;\n    }\n\n    if (this.ellipsisOn) {\n      return html`\n        <li\n          class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \"\n          @click=${this.ellipsisOn && this._handleNextEllipsisButton}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, false)}\n        >\n          <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    } else {\n      return html`\n        <li class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \">\n          <span class=\"page-link disabled\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    }\n  }\n\n  private _renderLastPage() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    if (this.pages.length !== this._sanitizeLimit && differentialLimitCondition) {\n      return html`\n        <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n            >${this.pages.length}</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n\n  /** @internal */\n  private _getLeftChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-left\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _getRightChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-right\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderDirectionButton(\n    directionLabel: string,\n    iconClass: string,\n    clickHandler: (event: MouseEvent) => void,\n    keydownHandler: (event: KeyboardEvent) => void,\n    directionVariant: string\n  ): TemplateResult {\n    const isDisabled = iconClass === \"left\" ? this.currentPage === 1 : this.currentPage === this.pages.length;\n\n    const tabIndex = isDisabled ? -1 : 0;\n\n    const keydownListener = (event: KeyboardEvent) => {\n      if (!isDisabled && event.key === \"Enter\") {\n        keydownHandler(event);\n      }\n    };\n\n    return html`\n      <li class=\"page-item ${isDisabled ? \"disabled\" : \"\"}\" @click=${isDisabled ? undefined : clickHandler}>\n        <span class=\"page-link\" tabindex=${tabIndex} @keydown=${keydownListener}>\n          ${directionVariant === \"icon-text\"\n            ? html`\n                ${iconClass === \"left\" ? this._getLeftChevronSVG() : \"\"} ${directionLabel}\n                ${iconClass === \"right\" ? this._getRightChevronSVG() : \"\"}\n              `\n            : directionVariant === \"text\"\n            ? html`${directionLabel}`\n            : directionVariant === \"icon\"\n            ? html`${iconClass === \"left\" ? this._getLeftChevronSVG() : this._getRightChevronSVG()}`\n            : html``}\n        </span>\n      </li>\n    `;\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size} sgds\" directionVariant=${this.directionVariant}>\n          ${this._renderDirectionButton(\n            \"Previous\",\n            \"left\",\n            this._handlePrevButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, true),\n            this.directionVariant\n          )}\n          ${this.showFirstPage ? this._renderFirstPage() : nothing}\n          ${this.showFirstPage || this.ellipsisOn ? this._renderFirstEllipsis() : nothing} ${this._renderPgNumbers()}\n          ${this._renderLastEllipsis()} ${this.showLastPage ? this._renderLastPage() : nothing}\n          ${this._renderDirectionButton(\n            \"Next\",\n            \"right\",\n            this._handleNextButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, false),\n            this.directionVariant\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport type directionVariant = \"icon\" | \"icon-text\" | \"text\";\n\nexport type sizeVariant = \"sm\" | \"md\";\n\nexport default SgdsPagination;\n"],"names":["SgdsElement","html","classMap","nothing","paginationStyle","__decorate","property","watch"],"mappings":"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"}

package/react/components/Pagination/sgds-pagination.js

@@ -0,0 +1,364 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { watch } from '../../utils/watch.js';
+import { classMap } from 'lit/directives/class-map.js';
+import css_248z from './pagination.js';
+
+/**
+ * @summary The Pagination component enables the user to select a specific page from a range of pages
+ *
+ * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.
+ *
+ * @cssproperty --pagination-color - The text color of pagination
+ * @cssproperty --pagination-bg - The background color of pagination
+ * @cssproperty --pagination-hover-bg - The  background color of pagination in hover state
+ * @cssproperty --pagination-active-color - The text color of pagination in active state
+ * @cssproperty --pagination-active-bg - The background color of pagination in active state
+ * @cssproperty --pagination-disabled-color - The text color of pagination in disabled state
+ * @cssproperty --pagination-disabled-bg - The background color of pagination in disabled state
+ *
+ **/
+class SgdsPagination extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Inserts the length value from a given sets of data objects*/
+        this.dataLength = 0;
+        /** Sets the starting active page upon render*/
+        this.currentPage = 1;
+        /** Sets the amount of data objects to be displayed per page */
+        this.itemsPerPage = 5;
+        /** Sets the page limit to be displayed at any given render. e.g 3, 5, 7, 9 */
+        this.limit = 3;
+        /** Sets the page direction button to contain text and/or icon */
+        this.directionVariant = "icon-text";
+        /** Sets the size of all page items. */
+        this.size = "sm";
+        /** Toggles ellipsis buttons to be able to increment/decrement pages based on the ellipsisJump value set. By default, it will be false */
+        this.ellipsisOn = false;
+        /** When ellipsisOn is true, length of decrementing/incrementing of pages can be set with a number value*/
+        this.ellipsisJump = 3;
+        /** Enables rendering of the first-page button on the pagination, allowing users to jump to the initial page. By default, it will be false. When true, the first ellipsis will always be rendered */
+        this.showFirstPage = false;
+        /** Enables rendering of the last-page button on the pagination, allowing users to jump to the last page. By default, it will be false */
+        this.showLastPage = false;
+        this.ellipsisContent = html `
+    <span aria-hidden="true">…</span>
+    <span class="visually-hidden">Ellipsis</span>
+  `;
+        /** @internal */
+        this._renderFirstEllipsis = () => {
+            const isHidden = !(this.pages.length !== this._sanitizeLimit && this.currentPage - Math.floor(this._sanitizeLimit / 2) > 1);
+            if (isHidden) {
+                return null;
+            }
+            const tabIndex = isHidden ? -1 : 0;
+            return html `
+      <li
+        class=${classMap({ "page-item": true, "ellipsis-disabled": !this.ellipsisOn })}
+        @click=${this.ellipsisOn && this._handlePrevEllipsisButton}
+        @keydown=${(e) => this._handleKeyDown(e, "ellipsis", undefined, true)}
+      >
+        <span class="page-link" role="button" tabindex=${tabIndex}>${this.ellipsisContent}</span>
+      </li>
+    `;
+        };
+    }
+    /**@internal */
+    _handleValueChange() {
+        this.emit("sgds-page-change", { detail: { currentPage: this.currentPage } });
+    }
+    /** @internal */
+    _handlePageClick(event) {
+        const liTarget = event.target;
+        const clickedLi = liTarget.closest("li");
+        if (clickedLi) {
+            const clickedPage = Number(clickedLi.getAttribute("key"));
+            if (clickedPage !== this.currentPage) {
+                this.currentPage = clickedPage;
+            }
+        }
+    }
+    /** @internal */
+    _handleNextButton() {
+        this.currentPage = this.currentPage + 1;
+    }
+    /** @internal */
+    _handlePrevButton() {
+        this.currentPage = this.currentPage - 1;
+    }
+    /** @internal */
+    _handleNextEllipsisButton() {
+        this.currentPage = this.currentPage + this.ellipsisJump;
+        if (this.currentPage >= this.pages.length)
+            this.currentPage = this.pages.length;
+    }
+    /** @internal */
+    _handlePrevEllipsisButton() {
+        this.currentPage = this.currentPage - this.ellipsisJump;
+        if (this.currentPage <= 1)
+            this.currentPage = this.pages[0];
+    }
+    /** @internal */
+    get pages() {
+        const pages = [];
+        for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    /** @internal */
+    get _sanitizeLimit() {
+        return this.limit >= this.pages.length ? this.pages.length : this.limit;
+    }
+    /**@internal */
+    _handleKeyDown(event, action, number, isFirstEllipsis, isPrevButton) {
+        if (event.key === "Enter") {
+            switch (action) {
+                case "pageNumber":
+                    this.currentPage = number;
+                    break;
+                case "ellipsis":
+                    if (isFirstEllipsis) {
+                        this._handlePrevEllipsisButton();
+                    }
+                    else {
+                        this._handleNextEllipsisButton();
+                    }
+                    break;
+                case "directionButton":
+                    if (isPrevButton) {
+                        this._handlePrevButton();
+                    }
+                    else {
+                        this._handleNextButton();
+                    }
+                    break;
+            }
+        }
+    }
+    _renderFirstPage() {
+        let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);
+        if (this.pages.length - sanitizeStartPage < this.limit) {
+            sanitizeStartPage = this.pages.length + 1 - this.limit;
+        }
+        if (sanitizeStartPage > 1) {
+            return html `
+        <li key=${1} class="page-item ${this.currentPage === 1 ? "active" : ""}">
+          <span
+            class="page-link"
+            tabindex="0"
+            @click=${this._handlePageClick}
+            @keydown=${(e) => this._handleKeyDown(e, "pageNumber", 1)}
+            >1</span
+          >
+        </li>
+      `;
+        }
+        else {
+            return null;
+        }
+    }
+    /** @internal */
+    _renderPgNumbers() {
+        const pagesToShow = [];
+        let sanitizeStartPage = 1;
+        let endPage;
+        if (this.limit < this.pages.length) {
+            sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);
+        }
+        if (this.pages.length - sanitizeStartPage < this.limit) {
+            sanitizeStartPage = this.pages.length + 1 - this.limit;
+        }
+        if (sanitizeStartPage <= 0) {
+            sanitizeStartPage = 1;
+        }
+        endPage = sanitizeStartPage + this._sanitizeLimit - 1;
+        if (endPage > this.pages.length) {
+            endPage = this.pages.length;
+        }
+        if (this.currentPage === this.pages.length) {
+            sanitizeStartPage = this.pages.length - this._sanitizeLimit + 1;
+        }
+        for (let i = sanitizeStartPage; i <= endPage; i++) {
+            pagesToShow.push(i);
+        }
+        return pagesToShow.map(number => html `
+        <li key=${number} class="page-item ${this.currentPage === number ? "active" : ""}">
+          <span
+            class="page-link"
+            tabindex="0"
+            @click=${this._handlePageClick}
+            @keydown=${(e) => this._handleKeyDown(e, "pageNumber", number)}
+            >${number}</span
+          >
+        </li>
+      `);
+    }
+    /** @internal */
+    _renderLastEllipsis() {
+        const isEvenLimit = this._sanitizeLimit % 2 === 0;
+        const differentialLimitCondition = isEvenLimit
+            ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length
+            : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;
+        const shouldRenderEllipsis = this.pages.length !== this.limit && differentialLimitCondition;
+        const tabIndex = shouldRenderEllipsis && this.ellipsisOn ? 0 : -1;
+        if (!shouldRenderEllipsis || this._sanitizeLimit >= this.pages.length) {
+            return null;
+        }
+        if (this.ellipsisOn) {
+            return html `
+        <li
+          class="page-item ${this.ellipsisOn ? "" : "ellipsis-disabled"} "
+          @click=${this.ellipsisOn && this._handleNextEllipsisButton}
+          @keydown=${(e) => this._handleKeyDown(e, "ellipsis", undefined, false)}
+        >
+          <span class="page-link" role="button" tabindex=${tabIndex}>${this.ellipsisContent}</span>
+        </li>
+      `;
+        }
+        else {
+            return html `
+        <li class="page-item ${this.ellipsisOn ? "" : "ellipsis-disabled"} ">
+          <span class="page-link disabled" tabindex=${tabIndex}>${this.ellipsisContent}</span>
+        </li>
+      `;
+        }
+    }
+    _renderLastPage() {
+        const isEvenLimit = this._sanitizeLimit % 2 === 0;
+        const differentialLimitCondition = isEvenLimit
+            ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length
+            : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;
+        if (this.pages.length !== this._sanitizeLimit && differentialLimitCondition) {
+            return html `
+        <li key=${this.pages.length} class="page-item ${this.currentPage === this.pages.length ? "active" : ""}">
+          <span
+            class="page-link"
+            tabindex="0"
+            @click=${this._handlePageClick}
+            @keydown=${(e) => this._handleKeyDown(e, "pageNumber", this.pages.length)}
+            >${this.pages.length}</span
+          >
+        </li>
+      `;
+        }
+        else {
+            return null;
+        }
+    }
+    /** @internal */
+    _getLeftChevronSVG() {
+        return html `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-chevron-left"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+        />
+      </svg>
+    `;
+    }
+    /** @internal */
+    _getRightChevronSVG() {
+        return html `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-chevron-right"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+        />
+      </svg>
+    `;
+    }
+    /** @internal */
+    _renderDirectionButton(directionLabel, iconClass, clickHandler, keydownHandler, directionVariant) {
+        const isDisabled = iconClass === "left" ? this.currentPage === 1 : this.currentPage === this.pages.length;
+        const tabIndex = isDisabled ? -1 : 0;
+        const keydownListener = (event) => {
+            if (!isDisabled && event.key === "Enter") {
+                keydownHandler(event);
+            }
+        };
+        return html `
+      <li class="page-item ${isDisabled ? "disabled" : ""}" @click=${isDisabled ? undefined : clickHandler}>
+        <span class="page-link" tabindex=${tabIndex} @keydown=${keydownListener}>
+          ${directionVariant === "icon-text"
+            ? html `
+                ${iconClass === "left" ? this._getLeftChevronSVG() : ""} ${directionLabel}
+                ${iconClass === "right" ? this._getRightChevronSVG() : ""}
+              `
+            : directionVariant === "text"
+                ? html `${directionLabel}`
+                : directionVariant === "icon"
+                    ? html `${iconClass === "left" ? this._getLeftChevronSVG() : this._getRightChevronSVG()}`
+                    : html ``}
+        </span>
+      </li>
+    `;
+    }
+    render() {
+        return html `
+      <nav aria-label="pagination" role="navigation">
+        <ul class="pagination pagination-${this.size} sgds" directionVariant=${this.directionVariant}>
+          ${this._renderDirectionButton("Previous", "left", this._handlePrevButton, (e) => this._handleKeyDown(e, "directionButton", undefined, undefined, true), this.directionVariant)}
+          ${this.showFirstPage ? this._renderFirstPage() : nothing}
+          ${this.showFirstPage || this.ellipsisOn ? this._renderFirstEllipsis() : nothing} ${this._renderPgNumbers()}
+          ${this._renderLastEllipsis()} ${this.showLastPage ? this._renderLastPage() : nothing}
+          ${this._renderDirectionButton("Next", "right", this._handleNextButton, (e) => this._handleKeyDown(e, "directionButton", undefined, undefined, false), this.directionVariant)}
+        </ul>
+      </nav>
+    `;
+    }
+}
+SgdsPagination.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "dataLength", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "limit", void 0);
+__decorate([
+    property({ type: String })
+], SgdsPagination.prototype, "directionVariant", void 0);
+__decorate([
+    property({ type: String })
+], SgdsPagination.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsPagination.prototype, "ellipsisOn", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "ellipsisJump", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsPagination.prototype, "showFirstPage", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsPagination.prototype, "showLastPage", void 0);
+__decorate([
+    watch("currentPage")
+], SgdsPagination.prototype, "_handleValueChange", null);
+
+export { SgdsPagination, SgdsPagination as default };
+//# sourceMappingURL=sgds-pagination.js.map

package/react/components/Pagination/sgds-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-pagination.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport paginationStyle from \"./pagination.css\";\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n * @cssproperty --pagination-color - The text color of pagination\n * @cssproperty --pagination-bg - The background color of pagination\n * @cssproperty --pagination-hover-bg - The  background color of pagination in hover state\n * @cssproperty --pagination-active-color - The text color of pagination in active state\n * @cssproperty --pagination-active-bg - The background color of pagination in active state\n * @cssproperty --pagination-disabled-color - The text color of pagination in disabled state\n * @cssproperty --pagination-disabled-bg - The background color of pagination in disabled state\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the page limit to be displayed at any given render. e.g 3, 5, 7, 9 */\n  @property({ type: Number }) limit = 3;\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) directionVariant: directionVariant = \"icon-text\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: sizeVariant = \"sm\";\n\n  /** Toggles ellipsis buttons to be able to increment/decrement pages based on the ellipsisJump value set. By default, it will be false */\n  @property({ type: Boolean }) ellipsisOn = false;\n\n  /** When ellipsisOn is true, length of decrementing/incrementing of pages can be set with a number value*/\n  @property({ type: Number }) ellipsisJump = 3;\n  /** Enables rendering of the first-page button on the pagination, allowing users to jump to the initial page. By default, it will be false. When true, the first ellipsis will always be rendered */\n  @property({ type: Boolean }) showFirstPage = false;\n  /** Enables rendering of the last-page button on the pagination, allowing users to jump to the last page. By default, it will be false */\n  @property({ type: Boolean }) showLastPage = false;\n\n  /**@internal */\n  @watch(\"currentPage\")\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n  }\n\n  /** @internal */\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  /** @internal */\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  /** @internal */\n  private _handleNextEllipsisButton() {\n    this.currentPage = this.currentPage + this.ellipsisJump;\n    if (this.currentPage >= this.pages.length) this.currentPage = this.pages.length;\n  }\n\n  /** @internal */\n  private _handlePrevEllipsisButton() {\n    this.currentPage = this.currentPage - this.ellipsisJump;\n    if (this.currentPage <= 1) this.currentPage = this.pages[0];\n  }\n\n  /** @internal */\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  /** @internal */\n  private get _sanitizeLimit() {\n    return this.limit >= this.pages.length ? this.pages.length : this.limit;\n  }\n\n  /**@internal */\n  private _handleKeyDown(\n    event: KeyboardEvent,\n    action: string,\n    number?: number,\n    isFirstEllipsis?: boolean,\n    isPrevButton?: boolean\n  ) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"ellipsis\":\n          if (isFirstEllipsis) {\n            this._handlePrevEllipsisButton();\n          } else {\n            this._handleNextEllipsisButton();\n          }\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage > 1) {\n      return html`\n        <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n            >1</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n  /** @internal */\n  private _renderPgNumbers() {\n    const pagesToShow = [];\n    let sanitizeStartPage = 1;\n    let endPage: number;\n\n    if (this.limit < this.pages.length) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n    }\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage <= 0) {\n      sanitizeStartPage = 1;\n    }\n\n    endPage = sanitizeStartPage + this._sanitizeLimit - 1;\n\n    if (endPage > this.pages.length) {\n      endPage = this.pages.length;\n    }\n\n    if (this.currentPage === this.pages.length) {\n      sanitizeStartPage = this.pages.length - this._sanitizeLimit + 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"visually-hidden\">Ellipsis</span>\n  `;\n\n  /** @internal */\n  private _renderFirstEllipsis = () => {\n    const isHidden = !(\n      this.pages.length !== this._sanitizeLimit && this.currentPage - Math.floor(this._sanitizeLimit / 2) > 1\n    );\n\n    if (isHidden) {\n      return null;\n    }\n\n    const tabIndex = isHidden ? -1 : 0;\n\n    return html`\n      <li\n        class=${classMap({ \"page-item\": true, \"ellipsis-disabled\": !this.ellipsisOn })}\n        @click=${this.ellipsisOn && this._handlePrevEllipsisButton}\n        @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, true)}\n      >\n        <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  /** @internal */\n  private _renderLastEllipsis() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    const shouldRenderEllipsis = this.pages.length !== this.limit && differentialLimitCondition;\n    const tabIndex = shouldRenderEllipsis && this.ellipsisOn ? 0 : -1;\n    if (!shouldRenderEllipsis || this._sanitizeLimit >= this.pages.length) {\n      return null;\n    }\n\n    if (this.ellipsisOn) {\n      return html`\n        <li\n          class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \"\n          @click=${this.ellipsisOn && this._handleNextEllipsisButton}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, false)}\n        >\n          <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    } else {\n      return html`\n        <li class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \">\n          <span class=\"page-link disabled\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    }\n  }\n\n  private _renderLastPage() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    if (this.pages.length !== this._sanitizeLimit && differentialLimitCondition) {\n      return html`\n        <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n            >${this.pages.length}</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n\n  /** @internal */\n  private _getLeftChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-left\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _getRightChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-right\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderDirectionButton(\n    directionLabel: string,\n    iconClass: string,\n    clickHandler: (event: MouseEvent) => void,\n    keydownHandler: (event: KeyboardEvent) => void,\n    directionVariant: string\n  ): TemplateResult {\n    const isDisabled = iconClass === \"left\" ? this.currentPage === 1 : this.currentPage === this.pages.length;\n\n    const tabIndex = isDisabled ? -1 : 0;\n\n    const keydownListener = (event: KeyboardEvent) => {\n      if (!isDisabled && event.key === \"Enter\") {\n        keydownHandler(event);\n      }\n    };\n\n    return html`\n      <li class=\"page-item ${isDisabled ? \"disabled\" : \"\"}\" @click=${isDisabled ? undefined : clickHandler}>\n        <span class=\"page-link\" tabindex=${tabIndex} @keydown=${keydownListener}>\n          ${directionVariant === \"icon-text\"\n            ? html`\n                ${iconClass === \"left\" ? this._getLeftChevronSVG() : \"\"} ${directionLabel}\n                ${iconClass === \"right\" ? this._getRightChevronSVG() : \"\"}\n              `\n            : directionVariant === \"text\"\n            ? html`${directionLabel}`\n            : directionVariant === \"icon\"\n            ? html`${iconClass === \"left\" ? this._getLeftChevronSVG() : this._getRightChevronSVG()}`\n            : html``}\n        </span>\n      </li>\n    `;\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size} sgds\" directionVariant=${this.directionVariant}>\n          ${this._renderDirectionButton(\n            \"Previous\",\n            \"left\",\n            this._handlePrevButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, true),\n            this.directionVariant\n          )}\n          ${this.showFirstPage ? this._renderFirstPage() : nothing}\n          ${this.showFirstPage || this.ellipsisOn ? this._renderFirstEllipsis() : nothing} ${this._renderPgNumbers()}\n          ${this._renderLastEllipsis()} ${this.showLastPage ? this._renderLastPage() : nothing}\n          ${this._renderDirectionButton(\n            \"Next\",\n            \"right\",\n            this._handleNextButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, false),\n            this.directionVariant\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport type directionVariant = \"icon\" | \"icon-text\" | \"text\";\n\nexport type sizeVariant = \"sm\" | \"md\";\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}

package/{components → react/components}/Progress/progress-bar.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Progress/progress-bar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"progress-bar.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Progress/progress-bar.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{width:100%}:host([variant=secondary]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-secondary)}:host([variant=warning]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-warning)}:host([variant=danger]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-danger)}:host([variant=success]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-success)}:host([variant=info]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-info)}:host([variant=dark]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-dark)}progress{vertical-align:baseline}.progress-bar{--sgds-progress-bar-bg:var(--sgds-primary);--sgds-progress-bar-transition:width 0.6s ease;--sgds-progress-bar-color:var(--sgds-white);--sgds-progress-bar-font-size:0.75rem;background-color:var(--sgds-progress-bar-bg);color:var(--sgds-progress-bar-color);display:flex;flex-direction:column;font-size:var(--sgds-progress-bar-font-size);height:100%;justify-content:center;overflow:hidden;text-align:center;transition:var(--sgds-progress-bar-transition);white-space:nowrap}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}`;
+
+export { css_248z as default };
+//# sourceMappingURL=progress-bar.js.map

package/react/components/Progress/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Progress/progress.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Progress/progress.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"progress.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Progress/progress.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--progress-height:1rem;display:block}.progress{background-color:var(--sgds-gray-200);border-radius:var(--sgds-border-radius);display:flex;height:var(--progress-height);overflow:hidden}`;
+
+export { css_248z as default };
+//# sourceMappingURL=progress.js.map

package/react/components/Progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Progress/sgds-progress-bar.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });