@govtechsg/sgds-web-component 3.15.1-rc.3 → 3.16.0

package/react/components/FileUpload/sgds-file-upload.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-file-upload.cjs.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport type { ISgdsFileUploadFilesSelectedEventDetail } from \"./types\";\nexport type { ISgdsFileUploadFilesSelectedEventDetail };\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n * @eventDetail {ISgdsFileUploadFilesSelectedEventDetail} sgds-files-selected\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit<ISgdsFileUploadFilesSelectedEventDetail>(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","createRef","html","ref","fileUploadStyles","SgdsButton","SgdsCloseButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-file-upload.cjs.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","createRef","html","ref","fileUploadStyles","SgdsButton","SgdsCloseButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}

package/react/components/FileUpload/sgds-file-upload.js

@@ -17,7 +17,6 @@ import { SgdsIcon } from '../Icon/sgds-icon.js';
  * @slot default - Label for file upload button
  *
  * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail
- * @eventDetail {ISgdsFileUploadFilesSelectedEventDetail} sgds-files-selected
  */
 class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {
     constructor() {

package/react/components/FileUpload/sgds-file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport type { ISgdsFileUploadFilesSelectedEventDetail } from \"./types\";\nexport type { ISgdsFileUploadFilesSelectedEventDetail };\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n * @eventDetail {ISgdsFileUploadFilesSelectedEventDetail} sgds-files-selected\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit<ISgdsFileUploadFilesSelectedEventDetail>(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}

package/react/components/Mainnav/mainnav.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:767px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = lit.css`:host{display:block;position:relative;z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);position:relative;width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:767px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav.cjs.js.map

package/react/components/Mainnav/mainnav.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:767px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = css`:host{display:block;position:relative;z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);position:relative;width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:767px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav.js.map

package/react/components/Modal/modal.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+var css_248z = lit.css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=modal.cjs.js.map

package/react/components/Modal/modal.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+var css_248z = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=modal.js.map

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

@@ -17,7 +17,6 @@ var pagination = require('./pagination.cjs.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.
- * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change
  *
  **/
 class SgdsPagination extends sgdsElement["default"] {

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-pagination.cjs.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"./types\";\nexport type { ISgdsPaginationPageChangeEventDetail };\n\nexport type Navigation = \"button\" | \"icon-button\";\n\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 * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\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 variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit<ISgdsPaginationPageChangeEventDetail>(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\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  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\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  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\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    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\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=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\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  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["SgdsElement","html","nothing","paginationStyle","SgdsIconButton","SgdsButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-pagination.cjs.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\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 **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\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 variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\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  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\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  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\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    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\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=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\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  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["SgdsElement","html","nothing","paginationStyle","SgdsIconButton","SgdsButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}

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

@@ -13,7 +13,6 @@ 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.
- * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change
  *
  **/
 class SgdsPagination extends SgdsElement {

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-pagination.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"./types\";\nexport type { ISgdsPaginationPageChangeEventDetail };\n\nexport type Navigation = \"button\" | \"icon-button\";\n\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 * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\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 variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit<ISgdsPaginationPageChangeEventDetail>(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\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  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\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  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\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    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\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=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\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  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-pagination.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\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 **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\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 variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\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  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\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  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\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    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\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=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\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  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}

package/react/components/Radio/sgds-radio-group.cjs.js

@@ -20,7 +20,6 @@ var radioGroup = require('./radio-group.cjs.js');
  * @slot invalidIcon - The slot for invalid icon
  *
  * @event sgds-change - Emitted when the radio group's selected value changes.
- * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change
  *
  */
 class SgdsRadioGroup extends validatorMixin.SgdsFormValidatorMixin(formControlElement["default"]) {

package/react/components/Radio/sgds-radio-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","live","nothing","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","live","nothing","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}