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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/components/ComboBox/index.umd.min.js.map +1 -1
  2. package/components/ComboBox/sgds-combo-box.d.ts +3 -3
  3. package/components/ComboBox/sgds-combo-box.js +1 -0
  4. package/components/ComboBox/sgds-combo-box.js.map +1 -1
  5. package/components/ComboBox/types.d.ts +3 -0
  6. package/components/FileUpload/index.umd.min.js.map +1 -1
  7. package/components/FileUpload/sgds-file-upload.d.ts +3 -0
  8. package/components/FileUpload/sgds-file-upload.js +1 -0
  9. package/components/FileUpload/sgds-file-upload.js.map +1 -1
  10. package/components/FileUpload/types.d.ts +1 -0
  11. package/components/Pagination/index.umd.min.js.map +1 -1
  12. package/components/Pagination/sgds-pagination.d.ts +3 -0
  13. package/components/Pagination/sgds-pagination.js +1 -0
  14. package/components/Pagination/sgds-pagination.js.map +1 -1
  15. package/components/Pagination/types.d.ts +3 -0
  16. package/components/Radio/index.umd.min.js.map +1 -1
  17. package/components/Radio/sgds-radio-group.d.ts +3 -0
  18. package/components/Radio/sgds-radio-group.js +1 -0
  19. package/components/Radio/sgds-radio-group.js.map +1 -1
  20. package/components/Radio/types.d.ts +3 -0
  21. package/components/Stepper/index.umd.min.js.map +1 -1
  22. package/components/Stepper/sgds-stepper.d.ts +2 -5
  23. package/components/Stepper/sgds-stepper.js.map +1 -1
  24. package/components/Stepper/types.d.ts +5 -0
  25. package/components/Switch/index.umd.min.js.map +1 -1
  26. package/components/Switch/sgds-switch.d.ts +3 -0
  27. package/components/Switch/sgds-switch.js +1 -0
  28. package/components/Switch/sgds-switch.js.map +1 -1
  29. package/components/Switch/types.d.ts +3 -0
  30. package/components/index.umd.min.js.map +1 -1
  31. package/custom-elements.json +26391 -0
  32. package/index.umd.min.js.map +1 -1
  33. package/package.json +5 -3
  34. package/react/components/ComboBox/sgds-combo-box.cjs.js +1 -0
  35. package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
  36. package/react/components/ComboBox/sgds-combo-box.js +1 -0
  37. package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
  38. package/react/components/FileUpload/sgds-file-upload.cjs.js +1 -0
  39. package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -1
  40. package/react/components/FileUpload/sgds-file-upload.js +1 -0
  41. package/react/components/FileUpload/sgds-file-upload.js.map +1 -1
  42. package/react/components/Pagination/sgds-pagination.cjs.js +1 -0
  43. package/react/components/Pagination/sgds-pagination.cjs.js.map +1 -1
  44. package/react/components/Pagination/sgds-pagination.js +1 -0
  45. package/react/components/Pagination/sgds-pagination.js.map +1 -1
  46. package/react/components/Radio/sgds-radio-group.cjs.js +1 -0
  47. package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
  48. package/react/components/Radio/sgds-radio-group.js +1 -0
  49. package/react/components/Radio/sgds-radio-group.js.map +1 -1
  50. package/react/components/Stepper/sgds-stepper.cjs.js.map +1 -1
  51. package/react/components/Stepper/sgds-stepper.js.map +1 -1
  52. package/react/components/Switch/sgds-switch.cjs.js +1 -0
  53. package/react/components/Switch/sgds-switch.cjs.js.map +1 -1
  54. package/react/components/Switch/sgds-switch.js +1 -0
  55. package/react/components/Switch/sgds-switch.js.map +1 -1
  56. package/types/react.d.ts +1623 -0
@@ -1 +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\";\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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"}
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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"}
@@ -17,6 +17,7 @@ var pagination = require('./pagination.cjs.js');
17
17
  * @summary The Pagination component enables the user to select a specific page from a range of pages
18
18
  *
19
19
  * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.
20
+ * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change
20
21
  *
21
22
  **/
22
23
  class SgdsPagination extends sgdsElement["default"] {
@@ -1 +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\";\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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"}
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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"}
@@ -13,6 +13,7 @@ import css_248z from './pagination.js';
13
13
  * @summary The Pagination component enables the user to select a specific page from a range of pages
14
14
  *
15
15
  * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.
16
+ * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change
16
17
  *
17
18
  **/
18
19
  class SgdsPagination extends SgdsElement {
@@ -1 +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\";\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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"}
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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"}
@@ -20,6 +20,7 @@ var radioGroup = require('./radio-group.cjs.js');
20
20
  * @slot invalidIcon - The slot for invalid icon
21
21
  *
22
22
  * @event sgds-change - Emitted when the radio group's selected value changes.
23
+ * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change
23
24
  *
24
25
  */
25
26
  class SgdsRadioGroup extends validatorMixin.SgdsFormValidatorMixin(formControlElement["default"]) {
@@ -1 +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\";\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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"}
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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"}
@@ -16,6 +16,7 @@ import css_248z from './radio-group.js';
16
16
  * @slot invalidIcon - The slot for invalid icon
17
17
  *
18
18
  * @event sgds-change - Emitted when the radio group's selected value changes.
19
+ * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change
19
20
  *
20
21
  */
21
22
  class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-radio-group.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":["radioGroupStyles"],"mappings":";;;;;;;;;;;AAUA;;;;;;;;AAQG;MACU,cAAe,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAA9E,IAAA,WAAA,GAAA;;;QAOW,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAGE,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGG,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAGpB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGpB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAY5C,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KAiOrC;IA1OC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACvD;AAGD;;;AAGK;IACG,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAClD,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;AAC/B,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAK;AACtC,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACzB,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC7B,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC;AACpB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;SAClC;KACF;AAKO,IAAA,iBAAiB,CAAC,KAAiB,EAAA;QACzC,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmB,CAAC;AAEzC,QAAA,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAEzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAE5B,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;YACrB,QAAQ,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,EAAE;AAC5C,SAAC,CAAC,CAAC;KACJ;AACD;;;AAGG;IACK,iBAAiB,CAAC,SAAS,GAAG,QAAQ,EAAA;QAC5C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;KACrD;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;;QACzC,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACjF,OAAO;SACR;AAED,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAM,CAAC,CAAC,CAAC,CAAC;;AAEtE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAC3F,IAAI,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;AAChD,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3B;QACD,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,KAAK,GAAG,CAAC,CAAC;SACX;AAED,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAG;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;AACtB,YAAA,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;AACtB,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACzB,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;;QAE3B,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,oBAAoB,EAAE,CAAC;AAC5B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE;YACxC,IAAI,MAAM,CAAC,CAAC,CAAC;AAAE,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;SACvC;KACF;IAEO,mBAAmB,GAAA;AACzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACvE;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,UAAU,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;AACD;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;SAC5C;KACF;IAGD,qBAAqB,GAAA;;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEO,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAC5B,YAAA,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC3D;KACF;IAED,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAA,CAAA;;;AAGX,eAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACpB,iBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAChB,oBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAGvC,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACQ,qBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;AAGZ,kBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;AAEA,YAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;YAEZ,IAAI,CAAC,eAAe,EAAE,CAAA;;UAExB,WAAW,CAAA;;;AAG2B,8CAAA,EAAA,QAAQ,CAAC;AAC7C,YAAA,YAAY,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;SAC/C,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;oBAEf,CAAC,CAAQ,KAAK,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAC1C,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACN,2BAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,GAAG,sBAAsB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAM,IAAA,CAAA,CAAA;;AAEvG,QAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;cAC9B,IAAI,CAAA,CAAA;;;;;;;;;;;AAWI,kBAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;;AAGjF,YAAA,CAAA;AACH,cAAE,OAAO,CAAA;;KAEd,CAAC;KACH;;AA9PM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAgB,CAAlD,CAAoD;AAGtC,UAAA,CAAA;IAA1B,KAAK,CAAC,kBAAkB,CAAC;AAA8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG/C,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGE,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGG,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7D,UAAA,CAAA;IADC,KAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAI9C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AAED,UAAA,CAAA;IADC,KAAK,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGhD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,CAAA;AAEgB,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA4B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA4C5B,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA0GnC,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKnD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKjD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA;;;;"}
1
+ {"version":3,"file":"sgds-radio-group.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":["radioGroupStyles"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-stepper.cjs.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nexport interface IStepMetaData {\n component: unknown;\n stepHeader: string;\n iconName?: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n /** @internal */\n static dependencies = { \"sgds-icon\": SgdsIcon };\n /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.\n */\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /** The current state of active step. Defaults to 0 */\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n /** When true, the stepper's steps will be clickable */\n @property({ type: Boolean, reflect: true }) clickable = false;\n\n /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n public getComponent(step: number = this.activeStep) {\n return this.steps[step].component;\n }\n /** Moves the active step forward one step */\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this.steps.length - 1) {\n this.activeStep++;\n }\n }\n\n /** Moves the active step back one step */\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n this.activeStep--;\n }\n }\n\n /** Changes the active step to the last step */\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this.steps.length - 1) {\n this.activeStep = this.steps.length - 1;\n }\n }\n\n /** Changes active step to the first step */\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /** Resets the Stepper to its initial active step state */\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /**@internal */\n _onStepperItemClick(index: number) {\n //emit an event before moving to next step\n if (this.activeStep > index) {\n this.activeStep = index;\n }\n }\n\n /**@internal */\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this.emit(\"sgds-arrived\");\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n render() {\n return html`\n <div\n class=\"stepper ${classMap({\n [`${this.orientation}`]: this.orientation,\n clickable: this.clickable\n })}\"\n >\n ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.clickable && this.activeStep > index\n })}\"\n tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n >\n <div class=\"stepper-marker\">\n ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n </div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","SgdsIcon","__decorate","property","defaultValue","watch"],"mappings":"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"}
1
+ {"version":3,"file":"sgds-stepper.cjs.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nexport type { IStepMetaData };\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n /** @internal */\n static dependencies = { \"sgds-icon\": SgdsIcon };\n /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.\n */\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /** The current state of active step. Defaults to 0 */\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n /** When true, the stepper's steps will be clickable */\n @property({ type: Boolean, reflect: true }) clickable = false;\n\n /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n public getComponent(step: number = this.activeStep) {\n return this.steps[step].component;\n }\n /** Moves the active step forward one step */\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this.steps.length - 1) {\n this.activeStep++;\n }\n }\n\n /** Moves the active step back one step */\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n this.activeStep--;\n }\n }\n\n /** Changes the active step to the last step */\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this.steps.length - 1) {\n this.activeStep = this.steps.length - 1;\n }\n }\n\n /** Changes active step to the first step */\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /** Resets the Stepper to its initial active step state */\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /**@internal */\n _onStepperItemClick(index: number) {\n //emit an event before moving to next step\n if (this.activeStep > index) {\n this.activeStep = index;\n }\n }\n\n /**@internal */\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this.emit(\"sgds-arrived\");\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n render() {\n return html`\n <div\n class=\"stepper ${classMap({\n [`${this.orientation}`]: this.orientation,\n clickable: this.clickable\n })}\"\n >\n ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.clickable && this.activeStep > index\n })}\"\n tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n >\n <div class=\"stepper-marker\">\n ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n </div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","SgdsIcon","__decorate","property","defaultValue","watch"],"mappings":"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"}