npm - @xplor-education/core-stencil-components - Versions diffs - 2.0.0 - Mend

@xplor-education/core-stencil-components 2.0.0

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 (724) hide show

package/dist/components/xplor-table.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"xplor-table.js","mappings":"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","names":["XplorTable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-table/xplor-table.tsx"],"sourcesContent":["import {\n Component,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n h,\n Watch,\n Host,\n} from '@stencil/core';\nconst getIconType = (sortType) => {\n switch (sortType) {\n case 'asc':\n return 'arrow-up';\n case 'desc':\n return 'arrow-down';\n default:\n return 'dash';\n }\n};\n\n@Component({\n tag: 'xplor-table',\n // styleUrl: 'xplor-table.scss',\n shadow: true,\n})\n\nexport class XplorTable {\n @Element() el: HTMLXplorTableElement;\n\n /**\n * The header values for each column.\n */\n @Prop() columns?: string[];\n\n /**\n * The data for the body of the table.\n */\n @Prop() data?: string[][];\n\n /**\n * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.\n */\n @Prop() freeze?: boolean;\n\n /**\n * Toggles a selectable checkbox for each row in the table\n */\n @Prop() multiselect?: boolean;\n\n /**\n * Toggles an optional styling of the background of each even row of the table body.\n */\n @Prop() striped?: boolean;\n\n /**\n * The values for the input for each row when multiselect is activated.\n */\n @Prop() selectedValues?: string[] = [];\n\n /**\n * Toggles to show the sort button on each table head\n */\n @Prop() isSortable?: boolean = true;\n\n /**\n * Manually determined if the column is sortable\n */\n @Prop() sortableColumns?: boolean[] = [];\n\n @State() areAllSelected = false;\n\n @State() rowData: string[][];\n\n @State() hasScrolled = false;\n\n @State() selected: (string | boolean)[];\n\n @State() sortTypeArray: ('asc' | 'desc' | null)[] = [];\n @State() selectedDateRange: string = 'All';\n /**\n * Callback function that is called when the checkbox for a row of a\n * `multiselect` table is checked\n */\n @State() currentPage: number = 1;\n @State() totalPages: number = 3;\n @Event() tableSelect: EventEmitter;\n private handlePagination = (direction: 'first' | 'prev' | 'next' | 'last') => {\n switch (direction) {\n case 'first':\n this.currentPage = 1;\n break;\n case 'prev':\n if (this.currentPage > 1) this.currentPage--;\n break;\n case 'next':\n if (this.currentPage < this.totalPages) this.currentPage++;\n break;\n case 'last':\n this.currentPage = this.totalPages;\n break;\n }\n };\n \n private handleDateRangeChange = (event: Event) => {\n const target = event.target as HTMLSelectElement;\n this.selectedDateRange = target.value;\n };\n\n private handleFilterReports = () => {\n console.log('Filter reports clicked');\n };\n\n private handleDownloadAll = () => {\n console.log('Download all clicked');\n };\n\n // private handleDownloadReport = (index: number) => {\n // console.log(`Download report ${index} clicked`);\n // };\n private selectAllValue = Math.random().toString(36).slice(2);\n\n private container!: HTMLDivElement;\n\n private selectAll = (e: Event) => {\n const { target } = e;\n\n if (!(target instanceof HTMLInputElement)) return;\n\n const { checked } = target;\n\n this.areAllSelected = checked;\n\n this.selected =\n this.selectedValues.length > 0\n ? // gets all checkboxes in body\n Array.from(\n this.el.querySelectorAll('tbody td:first-child input'),\n ).map((input: HTMLInputElement) =>\n // if the select all checkbox is checked, return\n // the value from the current input. If false, set all to false.\n checked ? input?.value : checked,\n )\n : this.selected.map(() => checked);\n this.onChange();\n };\n\n private selectOne = (e: Event, checkboxIdx: number) => {\n const { target } = e;\n if (!(target instanceof HTMLInputElement)) return;\n\n const { checked, value } = target;\n\n this.areAllSelected = false;\n this.selected = this.selected.map((v, selectedIdx) => {\n // if the checkbox that fired the event is not the current idx\n // return the current value\n if (selectedIdx !== checkboxIdx) return v;\n\n /**\n * If there are values in this.selectedValues, either return the value\n * for that checkbox or false, dependent on if the checkbox is checked or not.\n * If there are no values in this.selectedValues, return the value\n * to either true or false, dependent on if the checkbox is checked or not.\n *\n */\n return this.selectedValues.length > 0\n ? checked\n ? value\n : checked\n : checked;\n });\n this.onChange();\n };\n\n private onChange = () => {\n this.tableSelect.emit({\n selected: this.selected,\n areAllSelected: this.areAllSelected,\n });\n };\n\n private onScroll = () => {\n this.hasScrolled = this.container.scrollLeft > 0;\n };\n\n private sortBy = (col: number) => {\n this.sortTypeArray = this.sortTypeArray.map((val, idx) => {\n if (idx !== col) return null;\n\n switch (val) {\n case 'asc':\n return 'desc';\n case 'desc':\n return null;\n default:\n return 'asc';\n }\n });\n\n const handleSort = (a, b) => {\n if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {\n return -1;\n }\n if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {\n return 1;\n }\n return 0;\n };\n\n if (this.sortTypeArray[col] === 'asc') {\n this.rowData.sort((a, b) => handleSort(a, b));\n } else if (this.sortTypeArray[col] === 'desc') {\n this.rowData.sort((a, b) => handleSort(b, a));\n } else {\n this.rowData = this.data;\n this.sortTypeArray[col] = null;\n }\n\n this.rowData = Array.from(this.rowData);\n this.render();\n };\n\n private setData = () => {\n this.rowData = this.data !== undefined ? Array.from(this.data) : [];\n };\n\n // Add this method to paginate rowData\nprivate getPaginatedData(): string[][] {\n const startIndex = (this.currentPage - 1) * 10;\n const endIndex = startIndex + 10;\n return this.rowData.slice(startIndex, endIndex);\n}\n\n @Watch('data')\n watchData() {\n this.setData();\n }\n\n componentWillLoad() {\n this.areAllSelected = false;\n this.setData();\n this.selected = new Array(this.rowData.length).fill(false);\n // Fill the Sort Type Array to default null depends on number of columns\n this.sortTypeArray = this.columns && this.columns.map(() => null);\n }\n\n render() {\n let className = 'xpl-table';\n if (this.striped) className += ' xpl-table--striped';\n if (this.freeze) className += ' xpl-table--freeze';\n if (this.hasScrolled) className += ' xpl-table--has-scrolled';\n\n const paginatedData = this.getPaginatedData();\n\n return (\n <Host class=\"xplor-table\">\n <div class=\"bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto\">\n <div\n class=\"xpl-table-container\"\n onScroll={this.onScroll}\n ref={(el) => {\n this.container = el;\n }}\n >\n {/* Header */}\n <div class=\"mb-6\">\n <h1 class=\"text-xl font-semibold text-gray-900 mb-4\">Head Counts Report</h1>\n \n {/* Filter Controls */}\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center gap-2\">\n <label class=\"text-sm text-gray-600 font-medium\">Date Range</label>\n <select \n class=\"border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500\"\n // value={this.selectedDateRange}\n onInput={this.handleDateRangeChange}\n >\n <option value=\"All\">All</option>\n <option value=\"Today\">Today</option>\n <option value=\"This Week\">This Week</option>\n <option value=\"This Month\">This Month</option>\n <option value=\"Custom\">Custom Range</option>\n </select>\n <button class=\"p-1.5 border border-gray-300 rounded hover:bg-gray-50\">\n <svg class=\"w-4 h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"/>\n </svg>\n </button>\n </div>\n \n <button \n onClick={this.handleFilterReports}\n class=\"bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors\"\n >\n Filter Reports\n </button>\n \n <button \n onClick={this.handleDownloadAll}\n class=\"flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm\"\n >\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>\n Download All\n </button>\n </div>\n </div>\n\n <table class={`w-full ${className}`}>\n {this.columns && (\n <thead>\n {this.columns.map((column, i) => {\n const iconType = getIconType(\n this.sortTypeArray[i],\n );\n const isColumnSortable = !!(\n this.isSortable &&\n this.sortableColumns[i]\n );\n return (\n <th class=\"text-left py-3 px-4 text-sm font-medium text-gray-600\">\n {this.multiselect && i === 0 ? (\n <label\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n debugger\n if (isColumnSortable) {\n this.sortBy(i);\n }\n }}\n class={\n isColumnSortable\n ? 'cursor-pointer'\n : ''\n }\n >\n <input\n checked={\n this.areAllSelected\n }\n id=\"__xpl-table-th\"\n // appear indeterminate when at least one but not all\n // are selected\n\n indeterminate={\n !this\n .areAllSelected &&\n this.selected.some(\n (a) => a,\n )\n }\n onClick={(e) => {\n e.stopPropagation();\n this.selectAll(e);\n }}\n type=\"checkbox\"\n value={`select-all-${this.selectAllValue}`}\n />\n {column}\n {isColumnSortable &&\n !!this.sortTypeArray[\n i\n ] && (\n <xpl-icon\n icon={iconType}\n size={16}\n ></xpl-icon>\n )}\n </label>\n ) : (\n <label\n onClick={() =>\n isColumnSortable &&\n this.sortBy(i)\n }\n class={\n isColumnSortable\n ? 'cursor-pointer'\n : ''\n }\n >\n {column}\n {isColumnSortable &&\n !!this.sortTypeArray[\n i\n ] && (\n <svg width=\"11\" height=\"6\" viewBox=\"0 0 11 6\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z\" fill=\"currentColor\"></path></svg>\n // <xpl-icon\n // icon={iconType}\n // size={16}\n // id=\"__xpl-icon-sort\"\n // ></xpl-icon>\n )}\n </label>\n )}\n </th>\n );\n })}\n </thead>\n )}\n <tbody>\n {paginatedData.map((row, rowNum) => (\n <tr\n class={`border-b border-gray-100 hover:bg-gray-50`}\n >\n {row.map((cell, i) => (\n <td class=\"py-3 px-4 text-sm text-gray-900\">\n {this.multiselect && i === 0 ? (\n <label\n class=\"flex items-center gap-2\"\n htmlFor={`__xpl-table-row-${\n rowNum\n }`}\n >\n <input\n id={`__xpl-table-row-${\n rowNum\n }`}\n checked={\n !!this.selected[\n rowNum\n ]\n }\n type=\"checkbox\"\n onChange={(e) =>\n this.selectOne(\n e,\n rowNum,\n )\n }\n value={\n this.selectedValues\n .length > 0\n ? this\n .selectedValues[\n rowNum\n ]\n : `xpl-table-checkbox-${rowNum}`\n }\n />\n <div innerHTML={cell} />\n </label>\n ) : (\n <div innerHTML={cell} />\n )}\n </td>\n ))}\n </tr>\n ))}\n \n </tbody>\n </table>\n {/* Pagination */}\n <div id=\"pagination\" class=\"w-full flex items-center justify-between mt-6 text-sm\">\n <div class=\"flex items-center gap-2\">\n <button \n onClick={() => this.handlePagination('first')}\n class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n disabled={this.currentPage === 1}\n >\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 19l-7-7 7-7m8 14l-7-7 7-7\"/>\n </svg>\n </button>\n <button \n onClick={() => this.handlePagination('prev')}\n class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n disabled={this.currentPage === 1}\n >\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/>\n </svg>\n </button>\n </div>\n\n <span class=\"text-gray-600\">\n Page {this.currentPage} of {this.totalPages}\n </span>\n\n <div class=\"flex items-center gap-2\">\n <button \n onClick={() => this.handlePagination('next')}\n class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n disabled={this.currentPage === this.totalPages}\n >\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\n </svg>\n </button>\n <button \n onClick={() => this.handlePagination('last')}\n class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n disabled={this.currentPage === this.totalPages}\n >\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 5l7 7-7 7M5 5l7 7-7 7\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n </Host>\n\n );\n }\n}\n\n\n\n\n////////////// ######################## ///////////////////////////////// This code is commented out as it is not currently in use.\n\n\n\n\n// import { Component, Prop, State, h } from '@stencil/core';\n// import { StyledHost } from '../x-styles/x-styles';\n\n// interface ReportData {\n// submitDate: string;\n// time: string;\n// educatorName: string;\n// room: string;\n// }\n\n\n// @Component({\n// tag: 'xplor-table',\n// styleUrl: 'xplor-table.scss',\n// shadow: true,\n// })\n\n\n// export class XplorTable {\n// @State() selectedDateRange: string = 'All';\n// @State() currentPage: number = 1;\n// @State() totalPages: number = 1;\n// @State() sortBy: string = '';\n// @State() sortDirection: 'asc' | 'desc' = 'asc';\n// @Prop() tablecContent: ReportData[]\n// private reportData: ReportData[] = [\n// {\n// submitDate: '14/01/2025',\n// time: '10:01:21',\n// educatorName: 'Andi Kelman',\n// room: '2025 Holiday Programme'\n// },\n// {\n// submitDate: '10/10/2023',\n// time: '10:44:46',\n// educatorName: 'Andi Kelman',\n// room: '3 Kinder 3 - 23'\n// },\n// {\n// submitDate: '10/10/2023',\n// time: '10:36:15',\n// educatorName: 'Andi Kelman',\n// room: '3 Kinder 3 - 23'\n// },\n// {\n// submitDate: '28/03/2023',\n// time: '15:51:51',\n// educatorName: 'Cara Bierenkrant',\n// room: '8 KINDER 8 - CRECHE Kinder 8 2023'\n// }\n// ];\n\n// private handleDateRangeChange = (event: Event) => {\n// const target = event.target as HTMLSelectElement;\n// this.selectedDateRange = target.value;\n// };\n\n// private handleFilterReports = () => {\n// console.log('Filter reports clicked');\n// };\n\n// private handleDownloadAll = () => {\n// console.log('Download all clicked');\n// };\n\n// private handleDownloadReport = (index: number) => {\n// console.log(`Download report ${index} clicked`);\n// };\n\n// private handleSort = (column: string) => {\n// if (this.sortBy === column) {\n// this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n// } else {\n// this.sortBy = column;\n// this.sortDirection = 'asc';\n// }\n// };\n\n// private handlePagination = (direction: 'first' | 'prev' | 'next' | 'last') => {\n// switch (direction) {\n// case 'first':\n// this.currentPage = 1;\n// break;\n// case 'prev':\n// if (this.currentPage > 1) this.currentPage--;\n// break;\n// case 'next':\n// if (this.currentPage < this.totalPages) this.currentPage++;\n// break;\n// case 'last':\n// this.currentPage = this.totalPages;\n// break;\n// }\n// };\n\n// private getSortIcon(column: string) {\n// if (this.sortBy !== column) {\n// // Unsorted\n// return (\n// <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\"/>\n// </svg>\n// );\n// }\n// if (this.sortDirection === 'asc') {\n// // Ascending\n// return (\n// <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 15l4-4 4 4\"/>\n// </svg>\n// );\n// }\n// // Descending\n// return (\n// <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 9l-4 4-4-4\"/>\n// </svg>\n// );\n// }\n\n// render() {\n// return (\n// <StyledHost class=\"xplor-table\">\n// <div class=\"bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto\">\n// {/* Header */}\n// <div class=\"mb-6\">\n// <h1 class=\"text-xl font-semibold text-gray-900 mb-4\">Head Counts Report</h1>\n \n// {/* Filter Controls */}\n// <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n// <div class=\"flex items-center gap-2\">\n// <label class=\"text-sm text-gray-600 font-medium\">Date Range</label>\n// <select \n// class=\"border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500\"\n// // value={this.selectedDateRange}\n// onInput={this.handleDateRangeChange}\n// >\n// <option value=\"All\">All</option>\n// <option value=\"Today\">Today</option>\n// <option value=\"This Week\">This Week</option>\n// <option value=\"This Month\">This Month</option>\n// <option value=\"Custom\">Custom Range</option>\n// </select>\n// <button class=\"p-1.5 border border-gray-300 rounded hover:bg-gray-50\">\n// <svg class=\"w-4 h-4 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"/>\n// </svg>\n// </button>\n// </div>\n \n// <button \n// onClick={this.handleFilterReports}\n// class=\"bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors\"\n// >\n// Filter Reports\n// </button>\n \n// <button \n// onClick={this.handleDownloadAll}\n// class=\"flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm\"\n// >\n// <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n// </svg>\n// Download All\n// </button>\n// </div>\n// </div>\n\n// {/* Table */}\n// <div class=\"overflow-x-auto\">\n// <table class=\"w-full\">\n// <thead>\n// <tr class=\"border-b border-gray-200\">\n// <th class=\"text-left py-3 px-4 text-sm font-medium text-gray-600\">\n// <button \n// onClick={() => this.handleSort('submitDate')}\n// class=\"flex items-center gap-1 hover:text-gray-900\"\n// >\n// Submit Date\n// {this.getSortIcon('submitDate')}\n// </button>\n// </th>\n// <th class=\"text-left py-3 px-4 text-sm font-medium text-gray-600\">\n// <button \n// onClick={() => this.handleSort('time')}\n// class=\"flex items-center gap-1 hover:text-gray-900\"\n// >\n// Time\n// {this.getSortIcon('time')}\n// </button>\n// </th>\n// <th class=\"text-left py-3 px-4 text-sm font-medium text-gray-600\">\n// <button \n// onClick={() => this.handleSort('educatorName')}\n// class=\"flex items-center gap-1 hover:text-gray-900\"\n// >\n// Educator Name\n// {this.getSortIcon('educatorName')}\n// </button>\n// </th>\n// <th class=\"text-left py-3 px-4 text-sm font-medium text-gray-600\">\n// <button \n// onClick={() => this.handleSort('room')}\n// class=\"flex items-center gap-1 hover:text-gray-900\"\n// >\n// Room(s)\n// {this.getSortIcon('room')}\n// </button>\n// </th>\n// <th class=\"text-center py-3 px-4 text-sm font-medium text-gray-600\">\n// Download Report\n// </th>\n// </tr>\n// </thead>\n// <tbody>\n// {this.reportData.map((row, index) => (\n// <tr key={index} class=\"border-b border-gray-100 hover:bg-gray-50\">\n// <td class=\"py-3 px-4 text-sm text-gray-900\">{row.submitDate}</td>\n// <td class=\"py-3 px-4 text-sm text-gray-900\">{row.time}</td>\n// <td class=\"py-3 px-4 text-sm text-gray-900\">{row.educatorName}</td>\n// <td class=\"py-3 px-4 text-sm text-gray-900\">{row.room}</td>\n// <td class=\"py-3 px-4 text-center\">\n// <div class=\"flex items-center justify-center gap-2\">\n// <span class=\"bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs\">\n// Toggle SortBy\n// </span>\n// <button \n// onClick={() => this.handleDownloadReport(index)}\n// class=\"p-1.5 text-teal-600 hover:text-teal-800 hover:bg-teal-50 rounded\"\n// >\n// <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n// </svg>\n// </button>\n// </div>\n// </td>\n// </tr>\n// ))}\n// </tbody>\n// </table>\n// </div>\n\n// {/* Pagination */}\n// <div class=\"flex items-center justify-between mt-6 text-sm\">\n// <div class=\"flex items-center gap-2\">\n// <button \n// onClick={() => this.handlePagination('first')}\n// class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n// disabled={this.currentPage === 1}\n// >\n// <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 19l-7-7 7-7m8 14l-7-7 7-7\"/>\n// </button>\n// <button \n// onClick={() => this.handlePagination('prev')}\n// class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n// disabled={this.currentPage === 1}\n// >\n// <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/>\n// </button>\n// </div>\n\n// <span class=\"text-gray-600\">\n// Page {this.currentPage} of {this.totalPages}\n// </span>\n\n// <div class=\"flex items-center gap-2\">\n// <button \n// onClick={() => this.handlePagination('next')}\n// class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n// disabled={this.currentPage === this.totalPages}\n// >\n// <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\n// </button>\n// <button \n// onClick={() => this.handlePagination('last')}\n// class=\"p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n// disabled={this.currentPage === this.totalPages}\n// >\n// <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n// <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 5l7 7-7 7M5 5l7 7-7 7\"/>\n// </svg>\n// </button>\n// </div>\n// </div>\n// </div>\n// </StyledHost>\n// );\n// }\n// }"],"version":3}

package/dist/components/xplor-text-bubble.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface XplorTextBubble extends Components.XplorTextBubble, HTMLElement {}
+export const XplorTextBubble: {
+    prototype: XplorTextBubble;
+    new (): XplorTextBubble;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-text-bubble.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+const xplorTextBubbleCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-text-bubble {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-text-bubble {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-text-bubble {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-text-bubble {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-text-bubble {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-text-bubble {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-text-bubble, ul.sc-xplor-text-bubble {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-text-bubble li.sc-xplor-text-bubble, ul.sc-xplor-text-bubble li.sc-xplor-text-bubble {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-text-bubble, ul.mdc-list.sc-xplor-text-bubble {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-text-bubble li.mdc-list-item.sc-xplor-text-bubble, ul.mdc-list.sc-xplor-text-bubble li.mdc-list-item.sc-xplor-text-bubble {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-text-bubble {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-text-bubble {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-text-bubble {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-text-bubble {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-text-bubble .mdc-text-field--outlined.sc-xplor-text-bubble .mdc-notched-outline__notch.sc-xplor-text-bubble {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-text-bubble .mdc-notched-outline__notch.sc-xplor-text-bubble {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-text-bubble .mdc-notched-outline.sc-xplor-text-bubble .mdc-notched-outline__notch.sc-xplor-text-bubble {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-text-bubble {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-text-bubble:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-text-bubble {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-text-bubble-h {\n  display: block;\n}\n\n.text-bubble.sc-xplor-text-bubble {\n  border-radius: 16px;\n  padding: 12px;\n  color: #000;\n}\n.text-bubble--green.sc-xplor-text-bubble {\n  border: 1px solid #00B2A8;\n  background: #DFF2F1;\n}\n.text-bubble--orange.sc-xplor-text-bubble {\n  border: 1px solid #F28602;\n  background: #FEF2E0;\n}";
+const XplorTextBubble$1 = /*@__PURE__*/ proxyCustomElement(class XplorTextBubble extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.color = 'orange';
+    }
+    render() {
+        return (h(Host, { key: '5b22dd9c96119743c998364cdd27667709f4e52f' }, h("div", { key: 'd42bc901517dce4e629a5d19fe2667925afcdf6e', class: {
+                'text-bubble': true,
+                'text-bubble--green': this.color === 'green',
+                'text-bubble--orange': this.color === 'orange',
+            } }, h("slot", { key: '1ee2dc33d86906cdebd22019c3794ad1be606c1a' }))));
+    }
+    static get style() { return xplorTextBubbleCss; }
+}, [6, "xplor-text-bubble", {
+        "color": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-text-bubble"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-text-bubble":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorTextBubble$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const XplorTextBubble = XplorTextBubble$1;
+const defineCustomElement = defineCustomElement$1;
+export { XplorTextBubble, defineCustomElement };
+//# sourceMappingURL=xplor-text-bubble.js.map
+//# sourceMappingURL=xplor-text-bubble.js.map

package/dist/components/xplor-text-bubble.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"xplor-text-bubble.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,+5NAA+5N;;MCO76NA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAuB,QAAQ;AAiB7C;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,oBAAoB,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;AAC5C,gBAAA,qBAAqB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AAC/C,aAAA,EAAA,EAED,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorTextBubble","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-text-bubble/xplor-text-bubble.scss?tag=xplor-text-bubble&encapsulation=scoped","src/components/xplor-text-bubble/xplor-text-bubble.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.text-bubble {\n border-radius: 16px;\n padding: 12px;\n color: #000;\n\n &--green {\n border: 1px solid #00B2A8;\n background: #DFF2F1;\n }\n\n &--orange {\n border: 1px solid #F28602;\n background: #FEF2E0;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-text-bubble',\n styleUrl: 'xplor-text-bubble.scss',\n scoped: true,\n})\nexport class XplorTextBubble {\n @Prop() color: 'green' | 'orange' = 'orange';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'text-bubble': true,\n 'text-bubble--green': this.color === 'green',\n 'text-bubble--orange': this.color === 'orange',\n }}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-text-field.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface XplorTextField extends Components.XplorTextField, HTMLElement {}
+export const XplorTextField: {
+    prototype: XplorTextField;
+    new (): XplorTextField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-text-field.js ADDED Viewed

@@ -0,0 +1,191 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+const xplorTextFieldCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-text-field {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-text-field {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-text-field {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-text-field {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-text-field {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-text-field {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-text-field, ul.sc-xplor-text-field {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-text-field li.sc-xplor-text-field, ul.sc-xplor-text-field li.sc-xplor-text-field {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-text-field, ul.mdc-list.sc-xplor-text-field {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-text-field li.mdc-list-item.sc-xplor-text-field, ul.mdc-list.sc-xplor-text-field li.mdc-list-item.sc-xplor-text-field {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-text-field {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-text-field {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-text-field {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-text-field {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-text-field .mdc-text-field--outlined.sc-xplor-text-field .mdc-notched-outline__notch.sc-xplor-text-field {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-text-field .mdc-notched-outline__notch.sc-xplor-text-field {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-text-field .mdc-notched-outline.sc-xplor-text-field .mdc-notched-outline__notch.sc-xplor-text-field {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-text-field {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-text-field:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-text-field {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-text-field {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-text-field {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-text-field {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-text-field {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-text-field {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-text-field {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-text-field {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-text-field {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-text-field {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-text-field {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-text-field {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-text-field {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-text-field {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-text-field {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-text-field {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-text-field {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-text-field {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-text-field {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-text-field {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-text-field {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-text-field {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-text-field {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-text-field {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-text-field {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-text-field {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-text-field {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-text-field {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-text-field {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-text-field {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-text-field {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-text-field {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-text-field {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-text-field {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-text-field {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-text-field {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-text-field {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-text-field {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-text-field {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-text-field {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-text-field {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-text-field {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-text-field {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-text-field {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-text-field {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-text-field {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-text-field {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-text-field {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-text-field {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-text-field {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-text-field {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-text-field {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-text-field {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-text-field {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-text-field {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-text-field {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-text-field {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-text-field {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-text-field {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-text-field {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-text-field {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-text-field {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-text-field {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-text-field {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-text-field {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-text-field {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-text-field {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-text-field {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-text-field {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-text-field {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-text-field {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-text-field {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-text-field {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-text-field {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-text-field {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-text-field {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-text-field {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-text-field {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-text-field {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-text-field {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-text-field {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-text-field {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-text-field {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-text-field {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-text-field {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-text-field {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-text-field {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-text-field {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-text-field {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-text-field {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-text-field {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-text-field {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-text-field {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-text-field {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-text-field {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-text-field {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-text-field {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-text-field {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-text-field {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-text-field {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-text-field {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-text-field {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-text-field {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-text-field {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-text-field {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-text-field {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-text-field {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-text-field {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-text-field {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-text-field {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-text-field {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-text-field {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-text-field {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-text-field {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-text-field {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-text-field {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-text-field {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-text-field {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-text-field {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-text-field {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-text-field {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-text-field {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-text-field {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-text-field {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-text-field {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-text-field {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-text-field {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-text-field {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-text-field {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-text-field {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-text-field {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-text-field {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-text-field {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-text-field {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-text-field {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-text-field {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-text-field {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-text-field {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-text-field {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-text-field {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-text-field {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-text-field {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-text-field {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-text-field {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-text-field {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-text-field {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-text-field {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-text-field {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-text-field {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-text-field {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-text-field {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-text-field {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-text-field {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-text-field {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-text-field {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-text-field {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-text-field {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-text-field {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-text-field {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-text-field {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-text-field {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-text-field {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-text-field {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-text-field {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-text-field {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-text-field {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-text-field {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-text-field {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-text-field {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-text-field {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-text-field {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-text-field {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-text-field {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-text-field {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-text-field {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-text-field {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-text-field {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-text-field {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-text-field {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-text-field {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-text-field {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-text-field {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-text-field {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-text-field-h {\n  display: block;\n}\n\n.xplor-text-field.sc-xplor-text-field {\n  position: relative;\n  width: 100%;\n}\n.xplor-text-field__wrapper.sc-xplor-text-field {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.xplor-text-field__input-wrapper.sc-xplor-text-field {\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-height: 56px;\n  padding: 0 12px;\n}\n.xplor-text-field__input.sc-xplor-text-field {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: 1rem;\n  line-height: 1.5;\n  padding: 8px 0;\n  color: rgba(0, 0, 0, 0.87);\n  margin-top: 8px;\n}\n.xplor-text-field__input.sc-xplor-text-field::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-text-field__input.sc-xplor-text-field:disabled {\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-text-field__label.sc-xplor-text-field {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.6);\n  background-color: transparent;\n  padding: 0 4px;\n  max-width: calc(100% - 24px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-text-field__label--floating.sc-xplor-text-field {\n  top: 0;\n  transform: translateY(0);\n  font-size: 0.75rem;\n  background-color: inherit;\n}\n.xplor-text-field__required.sc-xplor-text-field {\n  color: var(--color-error, #f44336);\n  margin-left: 2px;\n}\n.xplor-text-field__append-inner.sc-xplor-text-field {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\n.xplor-text-field__append.sc-xplor-text-field {\n  display: flex;\n  align-items: center;\n  padding-right: 8px;\n}\n.xplor-text-field__clear-btn.sc-xplor-text-field {\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  outline: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  color: rgba(0, 0, 0, 0.54);\n  transition: all 0.2s ease;\n}\n.xplor-text-field__clear-btn.sc-xplor-text-field:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-text-field__clear-btn.sc-xplor-text-field:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n.xplor-text-field__outline.sc-xplor-text-field {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  padding: 0;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 16px;\n  pointer-events: none;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.xplor-text-field__outline-legend.sc-xplor-text-field {\n  padding: 0 4px;\n  font-size: 0.75rem;\n  visibility: hidden;\n  max-width: 0.01px;\n  transition: max-width 0.05s cubic-bezier(0, 0, 0.2, 1);\n  white-space: nowrap;\n}\n.xplor-text-field__outline-legend--floating.sc-xplor-text-field {\n  max-width: 100%;\n  transition: max-width 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;\n}\n.xplor-text-field__outline-legend.sc-xplor-text-field span.sc-xplor-text-field {\n  padding: 0 4px;\n  display: inline-block;\n}\n.xplor-text-field__details.sc-xplor-text-field {\n  padding: 4px 12px 0;\n  min-height: 22px;\n}\n.xplor-text-field__error-messages.sc-xplor-text-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.xplor-text-field__error.sc-xplor-text-field {\n  font-size: 0.75rem;\n  line-height: 1.5;\n  color: var(--color-error, #f44336);\n}\n.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-width: 2px;\n}\n.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-secondary);\n}\n.xplor-text-field--dirty.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: #008480;\n  border-width: 2px;\n}\n.xplor-text-field--dirty.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: #008480;\n}\n.xplor-text-field--error.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: var(--color-error, #f44336);\n}\n.xplor-text-field--error.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-error, #f44336);\n}\n.xplor-text-field--disabled.sc-xplor-text-field {\n  opacity: 0.6;\n}\n.xplor-text-field--disabled.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-style: dashed;\n}\n.xplor-text-field--disabled.sc-xplor-text-field .xplor-text-field__input.sc-xplor-text-field {\n  cursor: not-allowed;\n}\n.xplor-text-field--readonly.sc-xplor-text-field .xplor-text-field__input.sc-xplor-text-field {\n  cursor: default;\n}\n.xplor-text-field--primary.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: var(--color-primary);\n}\n.xplor-text-field--primary.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-primary);\n}\n.xplor-text-field--secondary.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: var(--color-secondary);\n}\n.xplor-text-field--secondary.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-secondary);\n}\n.xplor-text-field--success.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: var(--color-success, #4caf50);\n}\n.xplor-text-field--success.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-success, #4caf50);\n}\n.xplor-text-field--warning.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: var(--color-warning, #ff9800);\n}\n.xplor-text-field--warning.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-warning, #ff9800);\n}\n.xplor-text-field--info.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-color: var(--color-info, #2196f3);\n}\n.xplor-text-field--info.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__label.sc-xplor-text-field {\n  color: var(--color-info, #2196f3);\n}\n.xplor-text-field--filled.sc-xplor-text-field .xplor-text-field__wrapper.sc-xplor-text-field {\n  background-color: rgba(0, 0, 0, 0.06);\n  border-radius: 4px 4px 0 0;\n}\n.xplor-text-field--filled.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border: none;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n  border-radius: 0;\n}\n.xplor-text-field--filled.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-bottom-width: 2px;\n}\n.xplor-text-field--underlined.sc-xplor-text-field .xplor-text-field__wrapper.sc-xplor-text-field {\n  background-color: transparent;\n}\n.xplor-text-field--underlined.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border: none;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n  border-radius: 0;\n}\n.xplor-text-field--underlined.xplor-text-field--focused.sc-xplor-text-field .xplor-text-field__outline.sc-xplor-text-field {\n  border-bottom-width: 2px;\n}";
+const XplorTextField$1 = /*@__PURE__*/ proxyCustomElement(class XplorTextField extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.valueChange = createEvent(this, "valueChange");
+        this.inputBlur = createEvent(this, "inputBlur");
+        this.inputFocus = createEvent(this, "inputFocus");
+        this.clearClick = createEvent(this, "clearClick");
+        /**
+         * The current value of the text field
+         */
+        this.value = '';
+        /**
+         * The label text for the input
+         */
+        this.label = '';
+        /**
+         * Placeholder text when input is empty
+         */
+        this.placeholder = '';
+        /**
+         * Input type (text, email, password, number, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Color variant (primary, secondary, success, error, warning, info)
+         */
+        this.color = 'secondary';
+        /**
+         * Visual variant style
+         */
+        this.variant = 'outlined';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Error messages to display
+         */
+        this.errorMessages = [];
+        /**
+         * When to show details: true (always), false (never), 'auto' (only when error)
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Whether the field is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the field is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether the field is required
+         */
+        this.required = false;
+        /**
+         * Whether the field has been modified (dirty state)
+         */
+        this.isDirty = false;
+        /**
+         * Whether the field should be clearable
+         */
+        this.clearable = false;
+        /**
+         * Custom CSS classes to apply
+         */
+        this.customClass = '';
+        /**
+         * Internal focused state
+         */
+        this.isFocused = false;
+        /**
+         * Internal hasValue state
+         */
+        this.hasValue = false;
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.valueChange.emit(target.value);
+        };
+        this.handleFocus = (e) => {
+            this.isFocused = true;
+            this.inputFocus.emit(e);
+        };
+        this.handleBlur = (e) => {
+            this.isFocused = false;
+            this.inputBlur.emit(e);
+        };
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.value = '';
+            this.valueChange.emit('');
+            this.clearClick.emit();
+            if (this.inputElement) {
+                this.inputElement.focus();
+            }
+        };
+    }
+    handleValueChange(newValue) {
+        this.hasValue = !!newValue;
+    }
+    componentWillLoad() {
+        this.hasValue = !!this.value;
+    }
+    get hasError() {
+        return this.errorMessages && this.errorMessages.length > 0;
+    }
+    get showDetails() {
+        if (typeof this.hideDetails === 'boolean') {
+            return !this.hideDetails;
+        }
+        // hideDetails === 'auto'
+        return this.hasError;
+    }
+    get computedClasses() {
+        return {
+            'xplor-text-field': true,
+            [`xplor-text-field--${this.variant}`]: true,
+            [`xplor-text-field--${this.color}`]: true,
+            'xplor-text-field--focused': this.isFocused,
+            'xplor-text-field--error': this.hasError,
+            'xplor-text-field--disabled': this.disabled,
+            'xplor-text-field--readonly': this.readonly,
+            'xplor-text-field--dirty': this.isDirty,
+            'xplor-text-field--has-value': this.hasValue || this.isFocused,
+            [this.customClass]: !!this.customClass,
+        };
+    }
+    render() {
+        const labelFloating = this.isFocused || this.hasValue;
+        return (h(Host, { key: 'e5addac91e0cd95aae82078fca048c9cf3d63899' }, h("div", { key: '5af015996b692ba7a9da193d85aa982a3c314e5f', class: this.computedClasses }, h("div", { key: 'ce8f119584d984368ed267c6343d36d5023a7cc4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, h("div", { key: '65da1d866155e01344fafb88deb23b7c3e781e47', class: "xplor-text-field__input-wrapper" }, this.label && (h("label", { key: '2b21d90a9e9621262e87669ac64b588d712015de', class: {
+                'xplor-text-field__label': true,
+                'xplor-text-field__label--floating': labelFloating,
+            } }, h("slot", { key: 'eca54b3a90bce7b2437bb8f6034a72d38e95145a', name: "label" }, this.label), this.required && h("span", { key: 'dc29dc197c8ec0613602b199ddacb2901301b496', class: "xplor-text-field__required" }, "*"))), h("input", { key: 'ff58f03b2fd6ccd30e901e70116ddf13e392ec6c', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), h("div", { key: '01c6224679cf4709b51015943bb163d5e6cc929a', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (h("button", { key: 'e212288acbed1693c8a31c9fb01de80ed5d7509c', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, h("svg", { key: '8c457ed9da2b09b0457c12db18e7a4924251dfca', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '947f8e2599d17fb4fc763b864b1ab2fec0ca2ab2', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), h("slot", { key: '53062cd78fbbbadf85aa722e23c78f477145a34e', name: "append-inner" })), h("fieldset", { key: 'accd6fc547d7112f5806a82dc6826bbd386d9596', class: "xplor-text-field__outline" }, h("legend", { key: 'ef077a25a838e77901a747c65296529b694f6559', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? h("span", null, this.label, this.required && '*') : h("span", null, "\u200B")))), h("div", { key: '7374765a73e8e4cc21ad265290a35ed07a1fc2de', class: "xplor-text-field__append" }, h("slot", { key: '3cfeb58881b2103a516cfe38f6bedd0583c18aed', name: "append" }))), this.showDetails && (h("div", { key: '81677f56be4a7e77a415b5b21ea67448bed1c9ee', class: "xplor-text-field__details" }, this.hasError && (h("div", { key: '20539967a3acbc1f2165df9cbe85f9bad7fd577c', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (h("div", { class: "xplor-text-field__error" }, error))))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return xplorTextFieldCss; }
+}, [6, "xplor-text-field", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "type": [1],
+        "color": [1],
+        "variant": [1],
+        "bgColor": [1, "bg-color"],
+        "errorMessages": [16, "error-messages"],
+        "hideDetails": [8, "hide-details"],
+        "disabled": [4],
+        "readonly": [4],
+        "required": [4],
+        "isDirty": [4, "is-dirty"],
+        "clearable": [4],
+        "customClass": [1, "custom-class"],
+        "maxlength": [2],
+        "min": [2],
+        "max": [2],
+        "isFocused": [32],
+        "hasValue": [32]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-text-field"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-text-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorTextField$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const XplorTextField = XplorTextField$1;
+const defineCustomElement = defineCustomElement$1;
+export { XplorTextField, defineCustomElement };
+//# sourceMappingURL=xplor-text-field.js.map
+//# sourceMappingURL=xplor-text-field.js.map

package/dist/components/xplor-text-field.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"xplor-text-field.js","mappings":"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","names":["XplorTextField","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-text-field/xplor-text-field.scss?tag=xplor-text-field&encapsulation=scoped","src/components/xplor-text-field/xplor-text-field.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n@use '../../styles/mixins.scss' as mixins;\n\n:host {\n display: block;\n}\n\n.xplor-text-field {\n position: relative;\n width: 100%;\n\n &__wrapper {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 16px;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n &__input-wrapper {\n position: relative;\n flex: 1;\n display: flex;\n align-items: center;\n min-height: 56px;\n padding: 0 12px;\n }\n\n &__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n font-size: 1rem;\n line-height: 1.5;\n padding: 8px 0;\n color: rgba(0, 0, 0, 0.87);\n margin-top: 8px;\n\n &::placeholder {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n cursor: not-allowed;\n }\n }\n\n &__label {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.6);\n background-color: transparent;\n padding: 0 4px;\n max-width: calc(100% - 24px);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &--floating {\n top: 0;\n transform: translateY(0);\n font-size: 0.75rem;\n background-color: inherit;\n }\n }\n\n &__required {\n color: colours.$error;\n margin-left: 2px;\n }\n\n &__append-inner {\n display: flex;\n align-items: center;\n gap: 4px;\n margin-left: 8px;\n }\n\n &__append {\n display: flex;\n align-items: center;\n padding-right: 8px;\n }\n\n &__clear-btn {\n @include mixins.reset-button;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n color: rgba(0, 0, 0, 0.54);\n transition: all 0.2s ease;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.87);\n }\n\n &:focus-visible {\n @include mixins.focus-ring;\n }\n }\n\n // Outlined variant (fieldset border)\n &__outline {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: 0;\n padding: 0;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 16px;\n pointer-events: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n &__outline-legend {\n padding: 0 4px;\n font-size: 0.75rem;\n visibility: hidden;\n max-width: 0.01px;\n transition: max-width 0.05s cubic-bezier(0, 0, 0.2, 1);\n white-space: nowrap;\n\n &--floating {\n max-width: 100%;\n transition: max-width 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;\n }\n\n span {\n padding: 0 4px;\n display: inline-block;\n }\n }\n\n &__details {\n padding: 4px 12px 0;\n min-height: 22px;\n }\n\n &__error-messages {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n &__error {\n font-size: 0.75rem;\n line-height: 1.5;\n color: colours.$error;\n }\n\n // Focused state\n &--focused {\n .xplor-text-field__outline {\n border-width: 2px;\n }\n\n .xplor-text-field__label {\n color: colours.$secondary;\n }\n }\n\n // Dirty state (field has been modified)\n &--dirty {\n .xplor-text-field__outline {\n border-color: #008480;\n border-width: 2px;\n }\n\n .xplor-text-field__label {\n color: #008480;\n }\n }\n\n // Error state\n &--error {\n .xplor-text-field__outline {\n border-color: colours.$error;\n }\n\n .xplor-text-field__label {\n color: colours.$error;\n }\n }\n\n // Disabled state\n &--disabled {\n opacity: 0.6;\n\n .xplor-text-field__outline {\n border-style: dashed;\n }\n\n .xplor-text-field__input {\n cursor: not-allowed;\n }\n }\n\n // Readonly state\n &--readonly {\n .xplor-text-field__input {\n cursor: default;\n }\n }\n\n // Color variants\n &--primary {\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-color: colours.$primary;\n }\n\n .xplor-text-field__label {\n color: colours.$primary;\n }\n }\n }\n\n &--secondary {\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-color: colours.$secondary;\n }\n\n .xplor-text-field__label {\n color: colours.$secondary;\n }\n }\n }\n\n &--success {\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-color: colours.$success;\n }\n\n .xplor-text-field__label {\n color: colours.$success;\n }\n }\n }\n\n &--warning {\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-color: colours.$warning;\n }\n\n .xplor-text-field__label {\n color: colours.$warning;\n }\n }\n }\n\n &--info {\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-color: colours.$info;\n }\n\n .xplor-text-field__label {\n color: colours.$info;\n }\n }\n }\n\n // Filled variant\n &--filled {\n .xplor-text-field__wrapper {\n background-color: rgba(0, 0, 0, 0.06);\n border-radius: 4px 4px 0 0;\n }\n\n .xplor-text-field__outline {\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n border-radius: 0;\n }\n\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-bottom-width: 2px;\n }\n }\n }\n\n // Underlined variant\n &--underlined {\n .xplor-text-field__wrapper {\n background-color: transparent;\n }\n\n .xplor-text-field__outline {\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n border-radius: 0;\n }\n\n &.xplor-text-field--focused {\n .xplor-text-field__outline {\n border-bottom-width: 2px;\n }\n }\n }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch, Element } from '@stencil/core';\n\n@Component({\n tag: 'xplor-text-field',\n styleUrl: 'xplor-text-field.scss',\n scoped: true,\n})\nexport class XplorTextField {\n @Element() el: HTMLElement;\n\n /**\n * The current value of the text field\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * The label text for the input\n */\n @Prop() label: string = '';\n\n /**\n * Placeholder text when input is empty\n */\n @Prop() placeholder: string = '';\n\n /**\n * Input type (text, email, password, number, etc.)\n */\n @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n /**\n * Color variant (primary, secondary, success, error, warning, info)\n */\n @Prop() color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' = 'secondary';\n\n /**\n * Visual variant style\n */\n @Prop() variant: 'outlined' | 'filled' | 'underlined' = 'outlined';\n\n /**\n * Background color\n */\n @Prop() bgColor: string = 'white';\n\n /**\n * Error messages to display\n */\n @Prop() errorMessages: string[] = [];\n\n /**\n * When to show details: true (always), false (never), 'auto' (only when error)\n */\n @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n /**\n * Whether the field is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the field is readonly\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Whether the field is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the field has been modified (dirty state)\n */\n @Prop() isDirty: boolean = false;\n\n /**\n * Whether the field should be clearable\n */\n @Prop() clearable: boolean = false;\n\n /**\n * Custom CSS classes to apply\n */\n @Prop() customClass: string = '';\n\n /**\n * Maximum length of input\n */\n @Prop() maxlength: number;\n\n /**\n * Minimum value (for number type)\n */\n @Prop() min: number;\n\n /**\n * Maximum value (for number type)\n */\n @Prop() max: number;\n\n /**\n * Internal focused state\n */\n @State() isFocused: boolean = false;\n\n /**\n * Internal hasValue state\n */\n @State() hasValue: boolean = false;\n\n /**\n * Emitted when value changes\n */\n @Event() valueChange: EventEmitter<string>;\n\n /**\n * Emitted when input loses focus\n */\n @Event() inputBlur: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when input gains focus\n */\n @Event() inputFocus: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when clear button is clicked\n */\n @Event() clearClick: EventEmitter<void>;\n\n private inputElement?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.hasValue = !!newValue;\n }\n\n componentWillLoad() {\n this.hasValue = !!this.value;\n }\n\n private handleInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.value = target.value;\n this.valueChange.emit(target.value);\n };\n\n private handleFocus = (e: FocusEvent) => {\n this.isFocused = true;\n this.inputFocus.emit(e);\n };\n\n private handleBlur = (e: FocusEvent) => {\n this.isFocused = false;\n this.inputBlur.emit(e);\n };\n\n private handleClear = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = '';\n this.valueChange.emit('');\n this.clearClick.emit();\n if (this.inputElement) {\n this.inputElement.focus();\n }\n };\n\n private get hasError(): boolean {\n return this.errorMessages && this.errorMessages.length > 0;\n }\n\n private get showDetails(): boolean {\n if (typeof this.hideDetails === 'boolean') {\n return !this.hideDetails;\n }\n // hideDetails === 'auto'\n return this.hasError;\n }\n\n private get computedClasses(): { [key: string]: boolean } {\n return {\n 'xplor-text-field': true,\n [`xplor-text-field--${this.variant}`]: true,\n [`xplor-text-field--${this.color}`]: true,\n 'xplor-text-field--focused': this.isFocused,\n 'xplor-text-field--error': this.hasError,\n 'xplor-text-field--disabled': this.disabled,\n 'xplor-text-field--readonly': this.readonly,\n 'xplor-text-field--dirty': this.isDirty,\n 'xplor-text-field--has-value': this.hasValue || this.isFocused,\n [this.customClass]: !!this.customClass,\n };\n }\n\n render() {\n const labelFloating = this.isFocused || this.hasValue;\n\n return (\n <Host>\n <div class={this.computedClasses}>\n <div class=\"xplor-text-field__wrapper\" style={{ backgroundColor: this.bgColor }}>\n <div class=\"xplor-text-field__input-wrapper\">\n {/* Label */}\n {this.label && (\n <label\n class={{\n 'xplor-text-field__label': true,\n 'xplor-text-field__label--floating': labelFloating,\n }}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span class=\"xplor-text-field__required\">*</span>}\n </label>\n )}\n\n {/* Input */}\n <input\n ref={(el) => (this.inputElement = el)}\n class=\"xplor-text-field__input\"\n type={this.type}\n value={this.value}\n placeholder={this.isFocused ? this.placeholder : ''}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n min={this.min}\n max={this.max}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-invalid={this.hasError ? 'true' : 'false'}\n aria-describedby={this.hasError ? 'error-messages' : undefined}\n />\n\n {/* Append Inner Slot */}\n <div class=\"xplor-text-field__append-inner\">\n {this.clearable && this.hasValue && !this.disabled && !this.readonly && (\n <button\n type=\"button\"\n class=\"xplor-text-field__clear-btn\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n </svg>\n </button>\n )}\n <slot name=\"append-inner\" />\n </div>\n\n {/* Field Outline */}\n <fieldset class=\"xplor-text-field__outline\">\n <legend class={{ 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating }}>\n {labelFloating && this.label ? <span>{this.label}{this.required && '*'}</span> : <span></span>}\n </legend>\n </fieldset>\n </div>\n\n {/* Append Slot (outside input wrapper) */}\n <div class=\"xplor-text-field__append\">\n <slot name=\"append\" />\n </div>\n </div>\n\n {/* Details (error messages) */}\n {this.showDetails && (\n <div class=\"xplor-text-field__details\">\n {this.hasError && (\n <div id=\"error-messages\" class=\"xplor-text-field__error-messages\">\n {this.errorMessages.map((error) => (\n <div class=\"xplor-text-field__error\">{error}</div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-time-picker.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface XplorTimePicker extends Components.XplorTimePicker, HTMLElement {}
+export const XplorTimePicker: {
+    prototype: XplorTimePicker;
+    new (): XplorTimePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;