@govtechsg/sgds-web-component 3.20.0-rc.1 → 3.20.0-rc.3

package/components/Table/sgds-table.js

@@ -168,16 +168,16 @@ __decorate([
     property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SgdsTable.prototype, "headerPosition", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "headerBackground", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "tableBorder", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SgdsTable.prototype, "layout", void 0);
 __decorate([
     property({ type: Boolean })

package/components/Table/sgds-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.js","sources":["../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) tableBorder = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <div role=\"table\">\n          <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n          ${!this.hasDefaultSlot\n            ? html`<table class=\"table\">\n                ${this._renderTable()}\n              </table>`\n            : \"\"}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-table.js","sources":["../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) tableBorder = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <div role=\"table\">\n          <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n          ${!this.hasDefaultSlot\n            ? html`<table class=\"table\">\n                ${this._renderTable()}\n              </table>`\n            : \"\"}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}

package/components/index.umd.min.js

@@ -2866,7 +2866,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
         </div>
         ${this._renderFeedback()}
       </div>
-    `}}Nr.styles=[...Rr.styles,Or],t([Ve({type:String})],Nr.prototype,"minDate",void 0),t([Ve({type:String})],Nr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],Nr.prototype,"mode",void 0),t([Le("input")],Nr.prototype,"shadowInput",void 0);var Ur=r`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}.calendar-btn.with-hint-text.with-label{align-self:center;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}`;class qr extends(Sa(Ni)){constructor(){super(),this.required=!1,this.disabled=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error("Invalid date format in initialValue:",t);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const e=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(e){if(!this.menuIsOpen)return;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;const t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this.invalid=!0,this._manageInternalsBadInput()}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view="days";const t=await this.datepickerInputAsync;t.setInvalid(!1),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue()}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return te`
+    `}}Nr.styles=[...Rr.styles,Or],t([Ve({type:String})],Nr.prototype,"minDate",void 0),t([Ve({type:String})],Nr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],Nr.prototype,"mode",void 0),t([Le("input")],Nr.prototype,"shadowInput",void 0);var Ur=r`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;class qr extends(Sa(Ni)){constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(e){this.invalid=e,this.datepickerInput&&this.datepickerInput.setInvalid(e)}setValidity(e,t,s){return this._mixinSetValidity(e,t,s)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error("Invalid date format in initialValue:",t);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const e=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(e){if(!this.menuIsOpen)return;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;const t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this._mixinShouldSkipSgdsValidation()||(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view="days";const t=await this.datepickerInputAsync;t.setInvalid(this.invalid),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinShouldSkipSgdsValidation()||(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue())}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return te`
       <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${fa(this.value)}
@@ -2886,22 +2886,23 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
           hasFeedback=${Ft(this.hasFeedback?"both":void 0)}
           ?readonly=${this.readonly}
         >
+          <sgds-icon-button
+            slot="calendar-btn"
+            ${rs(this.myDropdown)}
+            tone="neutral"
+            class=${Ke({"calendar-btn":!0,"with-hint-text":this.hintText||this.invalid,"with-label":this.label})}
+            aria-expanded="${this.menuIsOpen}"
+            aria-haspopup="dialog"
+            aria-controls=${this.dropdownMenuId}
+            @click=${()=>this.toggleMenu()}
+            ariaLabel=${this.menuIsOpen?"Close Calendar":"Open Calendar"}
+            ?disabled=${this.disabled||this.readonly}
+            ?active=${this.menuIsOpen}
+            variant="outline"
+            name="calendar"
+          >
+          </sgds-icon-button>
         </sgds-datepicker-input>
-        <sgds-icon-button
-          ${rs(this.myDropdown)}
-          tone="neutral"
-          class=${Ke({"calendar-btn":!0,"with-hint-text":this.hintText||this.invalid,"with-label":this.label})}
-          aria-expanded="${this.menuIsOpen}"
-          aria-haspopup="dialog"
-          aria-controls=${this.dropdownMenuId}
-          @click=${()=>this.toggleMenu()}
-          ariaLabel=${this.menuIsOpen?"Close Calendar":"Open Calendar"}
-          ?disabled=${this.disabled||this.readonly}
-          ?active=${this.menuIsOpen}
-          variant="outline"
-          name="calendar"
-        >
-        </sgds-icon-button>
         <ul
           id=${this.dropdownMenuId}
           class="sgds datepicker dropdown-menu"
@@ -2929,7 +2930,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
           ></sgds-datepicker-calendar>
         </ul>
       </div>
-    `}}qr.styles=[...Ni.styles,qi,Ur],qr.dependencies={"sgds-datepicker-input":Nr,"sgds-datepicker-calendar":Qn,"sgds-datepicker-header":sr,"sgds-button":ra,"sgds-icon-button":er},t([Ve({type:Boolean,reflect:!0})],qr.prototype,"required",void 0),t([Ve({reflect:!0})],qr.prototype,"name",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"disabled",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"value",void 0),t([Ve({type:Array,reflect:!0})],qr.prototype,"initialValue",void 0),t([Ve({type:String})],qr.prototype,"minDate",void 0),t([Ve({type:String})],qr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"mode",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"invalidFeedback",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"hasFeedback",void 0),t([Ve({reflect:!0})],qr.prototype,"label",void 0),t([Ve({reflect:!0})],qr.prototype,"hintText",void 0),t([Ve({type:Boolean,reflect:!0,state:!1})],qr.prototype,"noFlip",void 0),t([Ve({type:String,reflect:!0,state:!1})],qr.prototype,"drop",void 0),t([Ve({attribute:!1})],qr.prototype,"displayDate",void 0),t([_a()],qr.prototype,"defaultValue",void 0),t([Ee()],qr.prototype,"invalid",void 0),t([Ee()],qr.prototype,"view",void 0),t([Ee()],qr.prototype,"selectedDateRange",void 0),t([Ee()],qr.prototype,"focusedDate",void 0),t([Ee()],qr.prototype,"focusedTabIndex",void 0),t([Le("sgds-datepicker-calendar")],qr.prototype,"calendar",void 0),t([Le("sgds-datepicker-input")],qr.prototype,"datepickerInputAsync",void 0),t([Ze("sgds-datepicker-input")],qr.prototype,"datepickerInput",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],qr.prototype,"_handleValueChange",null);var Yr=r`:host([bordered][islastchild]) .container:last-child{border-bottom:none}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:flex-start;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label-container{max-width:var(--sgds-dimension-280)}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-16)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}@media (min-width:512px){:host(:not([stacked])) .container{flex-direction:row;gap:var(--sgds-gap-2-xl)}}`;let jr=0;class Wr extends He{constructor(){super(...arguments),this.attrId=++jr,this.componentId=`sgds-description-list-${this.attrId}`,this.stacked=!1,this.bordered=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","listitem")}render(){return te`
+    `}}qr.styles=[...Ni.styles,qi,Ur],qr.dependencies={"sgds-datepicker-input":Nr,"sgds-datepicker-calendar":Qn,"sgds-datepicker-header":sr,"sgds-button":ra,"sgds-icon-button":er},t([Ve({type:Boolean,reflect:!0})],qr.prototype,"required",void 0),t([Ve({reflect:!0})],qr.prototype,"name",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"disabled",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"noValidate",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"value",void 0),t([Ve({type:Array,reflect:!0})],qr.prototype,"initialValue",void 0),t([Ve({type:String})],qr.prototype,"minDate",void 0),t([Ve({type:String})],qr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"mode",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"invalidFeedback",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"hasFeedback",void 0),t([Ve({reflect:!0})],qr.prototype,"label",void 0),t([Ve({reflect:!0})],qr.prototype,"hintText",void 0),t([Ve({type:Boolean,reflect:!0,state:!1})],qr.prototype,"noFlip",void 0),t([Ve({type:String,reflect:!0,state:!1})],qr.prototype,"drop",void 0),t([Ve({attribute:!1})],qr.prototype,"displayDate",void 0),t([_a()],qr.prototype,"defaultValue",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"invalid",void 0),t([Ee()],qr.prototype,"view",void 0),t([Ee()],qr.prototype,"selectedDateRange",void 0),t([Ee()],qr.prototype,"focusedDate",void 0),t([Ee()],qr.prototype,"focusedTabIndex",void 0),t([Le("sgds-datepicker-calendar")],qr.prototype,"calendar",void 0),t([Le("sgds-datepicker-input")],qr.prototype,"datepickerInputAsync",void 0),t([Ze("sgds-datepicker-input")],qr.prototype,"datepickerInput",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],qr.prototype,"_handleValueChange",null);var Yr=r`:host([bordered][islastchild]) .container:last-child{border-bottom:none}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:flex-start;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label-container{max-width:var(--sgds-dimension-280)}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-16)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}@media (min-width:512px){:host(:not([stacked])) .container{flex-direction:row;gap:var(--sgds-gap-2-xl)}}`;let jr=0;class Wr extends He{constructor(){super(...arguments),this.attrId=++jr,this.componentId=`sgds-description-list-${this.attrId}`,this.stacked=!1,this.bordered=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","listitem")}render(){return te`
       <div class="container">
         <div class="label-container">
           <span class="label">
@@ -4086,7 +4087,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
               </table>`}
         </div>
       </div>
-    `}}Wd.styles=[...He.styles,Yd],t([Ve({type:String,reflect:!0})],Wd.prototype,"responsive",void 0),t([Ve({type:Array})],Wd.prototype,"rowHeader",void 0),t([Ve({type:Array})],Wd.prototype,"columnHeader",void 0),t([Ve({type:Array})],Wd.prototype,"tableData",void 0),t([Ve({type:String})],Wd.prototype,"headerPosition",void 0),t([Ve({type:Boolean})],Wd.prototype,"headerBackground",void 0),t([Ve({type:Boolean})],Wd.prototype,"tableBorder",void 0),t([Ve({type:String})],Wd.prototype,"layout",void 0),t([Ve({type:Boolean})],Wd.prototype,"hasDefaultSlot",void 0),t([kl({context:jd}),Ee()],Wd.prototype,"_headerBackground",void 0);var Kd=r`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Gd extends He{connectedCallback(){super.connectedCallback(),this.setAttribute("role","cell")}render(){return te`<div class="table-cell"><slot></slot></div>`}}Gd.styles=[...He.styles,Kd];var Xd=r`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}:host([headerBackground]){background-color:var(--sgds-surface-raised)}.table-head{align-items:center;display:flex;font-weight:var(--sgds-font-weight-semibold);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Qd extends He{constructor(){super(...arguments),this._headerBackground=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","columnheader")}_handleHeaderBackground(){this._headerBackground?this.setAttribute("headerBackground","true"):this.removeAttribute("headerBackground")}render(){return te`<div
+    `}}Wd.styles=[...He.styles,Yd],t([Ve({type:String,reflect:!0})],Wd.prototype,"responsive",void 0),t([Ve({type:Array})],Wd.prototype,"rowHeader",void 0),t([Ve({type:Array})],Wd.prototype,"columnHeader",void 0),t([Ve({type:Array})],Wd.prototype,"tableData",void 0),t([Ve({type:String,reflect:!0})],Wd.prototype,"headerPosition",void 0),t([Ve({type:Boolean,reflect:!0})],Wd.prototype,"headerBackground",void 0),t([Ve({type:Boolean,reflect:!0})],Wd.prototype,"tableBorder",void 0),t([Ve({type:String,reflect:!0})],Wd.prototype,"layout",void 0),t([Ve({type:Boolean})],Wd.prototype,"hasDefaultSlot",void 0),t([kl({context:jd}),Ee()],Wd.prototype,"_headerBackground",void 0);var Kd=r`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Gd extends He{connectedCallback(){super.connectedCallback(),this.setAttribute("role","cell")}render(){return te`<div class="table-cell"><slot></slot></div>`}}Gd.styles=[...He.styles,Kd];var Xd=r`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}:host([headerBackground]){background-color:var(--sgds-surface-raised)}.table-head{align-items:center;display:flex;font-weight:var(--sgds-font-weight-semibold);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Qd extends He{constructor(){super(...arguments),this._headerBackground=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","columnheader")}_handleHeaderBackground(){this._headerBackground?this.setAttribute("headerBackground","true"):this.removeAttribute("headerBackground")}render(){return te`<div
       class=${Ke({"table-head":!0,"header-background":this._headerBackground})}
     >
       <slot></slot>