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

@xplor-education/core-stencil-components 2.0.0 → 3.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 (314) hide show

package/dist/components/xplor-section-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-section-card.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,4woBAA4woB;;MCO3xoBA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AACvB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;~~AAyBnC~~;~~IAvBC~~,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,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;aACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAG,CAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,~~CAAA~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAM~~,IAAI,EAAC,MAAM,EAAA,~~CAAG~~,~~CAChB~~,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-card/xplor-section-card.scss?tag=xplor-section-card&encapsulation=scoped","src/components/xplor-section-card/xplor-section-card.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n.section-card {\n background: white;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &--outlined {\n border: 2px solid #D0C7E5;\n }\n\n &--rounded {\n border-radius: 1rem;\n }\n\n &__body {\n flex: 1;\n }\n\n &__actions {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-top: 0.5rem;\n\n &:empty {\n display: none;\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-card',\n styleUrl: 'xplor-section-card.scss',\n scoped: true,\n})\nexport class XplorSectionCard {\n @Prop() outlined: boolean = true;\n @Prop() rounded: boolean = true;\n @Prop() padding: string = '1.5rem';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'section-card': true,\n 'section-card--outlined': this.outlined,\n 'section-card--rounded': this.rounded,\n }}\n style={{ padding: this.padding }}\n >\n <slot name=\"title\" />\n <slot name=\"subtitle\" />\n <div class=\"section-card__body\">\n <slot name=\"body\" />\n </div>\n <div class=\"section-card__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-section-card.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,4woBAA4woB;;MCO3xoBA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AACvB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;AA0BnC;IAxBC,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,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;aACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAG,CAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-card/xplor-section-card.scss?tag=xplor-section-card&encapsulation=scoped","src/components/xplor-section-card/xplor-section-card.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n.section-card {\n background: white;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &--outlined {\n border: 2px solid #D0C7E5;\n }\n\n &--rounded {\n border-radius: 1rem;\n }\n\n &__body {\n flex: 1;\n }\n\n &__actions {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-top: 0.5rem;\n\n &:empty {\n display: none;\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-card',\n styleUrl: 'xplor-section-card.scss',\n scoped: true,\n})\nexport class XplorSectionCard {\n @Prop() outlined: boolean = true;\n @Prop() rounded: boolean = true;\n @Prop() padding: string = '1.5rem';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'section-card': true,\n 'section-card--outlined': this.outlined,\n 'section-card--rounded': this.rounded,\n }}\n style={{ padding: this.padding }}\n >\n <slot name=\"title\" />\n <slot name=\"subtitle\" />\n <div class=\"section-card__body\">\n <slot name=\"body\" />\n <slot />\n </div>\n <div class=\"section-card__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-section-heading.js CHANGED Viewed

@@ -7,18 +7,24 @@ const XplorSectionHeading$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectio
         super();
         this.__registerHost();
         this.size = 'medium';
+        /**
+         * Heading level (1-6), renders as h1-h6. Defaults to 2.
+         */
+        this.level = 2;
     }
     render() {
-        return (h(Host, { key: '4c30a434a144abb7ba1925a4fe98847fb8a0e09c' }, h("span", { key: 'faa456eebb9ba58d55945f0b5f6db9e02efd9d31', class: {
+        const HeadingTag = `h${this.level}`;
+        return (h(Host, { key: 'dbd9dc5f552dd6a20d6a5e39efd636ced45df7cb' }, h(HeadingTag, { key: '90ceffcb3383b8d167e11e42cb6a2e915ddeec1b', class: {
                 'section-heading': true,
                 'section-heading--small': this.size === 'small',
                 'section-heading--large': this.size === 'large',
-            } }, h("slot", { key: '3a164def63f5365f6a76702e7a8462fe0ce4fcc9' }, this.text))));
+            } }, h("slot", { key: 'dd861c58c3e59e0bb4b0e7195ecaaa55ffab4912' }, this.text))));
     }
     static get style() { return xplorSectionHeadingCss; }
 }, [6, "xplor-section-heading", {
         "size": [1],
-        "text": [1]
+        "text": [1],
+        "level": [2]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/xplor-section-heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-section-heading.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,yjOAAyjO;;MCO3kOA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;~~AAkBtD~~;~~IAfC~~,MAAM,GAAA;~~QACJ~~,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,~~CAAA~~,CAAA,~~MAAA~~,~~EAAA~~,EAAA,GAAA,EAAA,0CAAA,~~EACE~~,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC/C,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,~~CACnB~~,~~CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorSectionHeading","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-heading/xplor-section-heading.scss?tag=xplor-section-heading&encapsulation=scoped","src/components/xplor-section-heading/xplor-section-heading.tsx"],"sourcesContent":[":host {\n display: block;\n font-size: 1rem;\n}\n\n.section-heading {\n line-height: 1.33;\n letter-spacing: 3.2px;\n text-transform: uppercase;\n font-weight: 500;\n\n &--small {\n font-size: 0.9em;\n }\n\n &--large {\n font-size: 1.1em;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-heading',\n styleUrl: 'xplor-section-heading.scss',\n scoped: true,\n})\nexport class XplorSectionHeading {\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n @Prop() text: string;\n\n render() {\n return (\n <Host>\n <~~span~~\n class={{\n 'section-heading': true,\n 'section-heading--small': this.size === 'small',\n 'section-heading--large': this.size === 'large',\n }}\n >\n <slot>{this.text}</slot>\n </~~span~~>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-section-heading.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,yjOAAyjO;;MCO3kOA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAGrD;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAA0B,CAAC;AAmBzC;IAjBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,EAAS;QAE1C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC/C,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACb,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionHeading","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-heading/xplor-section-heading.scss?tag=xplor-section-heading&encapsulation=scoped","src/components/xplor-section-heading/xplor-section-heading.tsx"],"sourcesContent":[":host {\n display: block;\n font-size: 1rem;\n}\n\n.section-heading {\n line-height: 1.33;\n letter-spacing: 3.2px;\n text-transform: uppercase;\n font-weight: 500;\n\n &--small {\n font-size: 0.9em;\n }\n\n &--large {\n font-size: 1.1em;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-heading',\n styleUrl: 'xplor-section-heading.scss',\n scoped: true,\n})\nexport class XplorSectionHeading {\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n @Prop() text: string;\n\n /*\n Heading level (1-6), renders as h1-h6. Defaults to 2.\n */\n @Prop() level: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 2;\n\n render() {\n const HeadingTag = `h${this.level}` as any;\n\n return (\n <Host>\n <HeadingTag\n class={{\n 'section-heading': true,\n 'section-heading--small': this.size === 'small',\n 'section-heading--large': this.size === 'large',\n }}\n >\n <slot>{this.text}</slot>\n </HeadingTag>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-table.js CHANGED Viewed

@@ -185,18 +185,23 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
         if (this.hasScrolled)
             className += ' xpl-table--has-scrolled';
         const paginatedData = this.getPaginatedData();
-        return (h(Host, { key: '2d97030af789ed65f7021cb28a7afc2419fbccd5', class: "xplor-table" }, h("div", { key: 'e790897b07a94c98f28af0c1a8d9acbc0bded6c6', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a1f167a0de10b05288715269bc9c469a547c6102', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, { key: 'da8ded4b349560e2272fd0ffa1395ffc04d92769', class: "xplor-table" }, h("div", { key: '5cddb71e28a6eb512bbe0a209816fb8ba8050e22', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: '24abe132c8b2889e656f39b197dcb2348cf7c49b', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("div", { key: '84ab92d9467e4ac9d866a3220ccba9d63b8c8cc8', class: "mb-6" }, h("h1", { key: 'f8746a5162a38476937b83d9549a2fad2a030f8a', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '1e7188d1e0a7dd74f466dab3e6ee00189ab88e53', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: 'c3f2d92bef894ccc749e1249536154147a324711', class: "flex items-center gap-2" }, h("label", { key: '6156ed236c96b1e1f7d480bc97bb0ab8b0b01a87', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'da1caff2afb5a1b4786adec7fd9ca7a9480c0f57', 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",
+            } }, h("div", { key: 'afd56f434c013d1175c198790562f60cbed5d6ce', class: "mb-6" }, h("h1", { key: 'ba650cfc24623c63910f9dfb7547272dc2adbe68', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '4150efe6295d6697a787322e6bc8550d82296b69', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: '1bef7dc05a99081de7b2cf0588c58fb4cd0cb429', class: "flex items-center gap-2" }, h("label", { key: 'ce45f248fd5151412bd64f75038996e3febf09a1', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'cc7b10bb86619c119bb3d4f5ab5267f733ad7805', 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",
             // value={this.selectedDateRange}
-            onInput: this.handleDateRangeChange }, h("option", { key: '6c31c50fe2119d1f5086e3f33ddff4903a290a03', value: "All" }, "All"), h("option", { key: '17d4c7b7c52763065dab2f5dceb85ddd8d23e892', value: "Today" }, "Today"), h("option", { key: '1ec247907dc275825d6a8a105b3c841d2de131f0', value: "This Week" }, "This Week"), h("option", { key: '3fa99b268c42232eb3dccf73dd125b27608d2ba8', value: "This Month" }, "This Month"), h("option", { key: 'bfeea456dde4d67cdc12b00cdba0b694fb5fa3cf', value: "Custom" }, "Custom Range")), h("button", { key: 'f5d3badb19132f137573b4248f0ce99e95e38daa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'f32657ec8d66d3e1a10cdb304406999a933ad7ee', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '4b63cca1e36df1a5cd5b598f558fc5bd88f25f17', "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" })))), h("button", { key: 'f5133d241b1669c8ae425a76b69a25db91bc9e69', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '4df30f93e7b019be1ad293a7e70fad80df5c42a8', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: '18dc2f9716e0f5bc095d84349f85703f38d23238', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'cbcfc4fd12a099008c3fcbf762cbfccc63b1706c', "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" })), "Download All"))), h("table", { key: 'cf9f942709fcc413f99891d612b1640eed94debf', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'baeee3644d8fb2fd9e2d038200b24d433bbdf87b' }, this.columns.map((column, i) => {
+            onInput: this.handleDateRangeChange }, h("option", { key: '62474a4b5ad2fd7ba9f0806bf7bb26b487df04ff', value: "All" }, "All"), h("option", { key: 'aba4fb209168ae645d87475f0467ba38ee258f7e', value: "Today" }, "Today"), h("option", { key: '8203884e17bdcd012f90245dde1b9aec9abf16ed', value: "This Week" }, "This Week"), h("option", { key: '7a721035e8d8e31d61869f7513b586e06d06b1e9', value: "This Month" }, "This Month"), h("option", { key: '9a1d085c513236cb746cc9a6ebac1c48c8e35214', value: "Custom" }, "Custom Range")), h("button", { key: '7119eae652a26a19f774fe2a3e2564a993937caa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'c430ab8a591ebd2e9c7cf14dd0f0758419be1178', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '8330e74a528e0890375f9277d8dc7481bb88e8f9', "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" })))), h("button", { key: '85dc3c28587d7ce09cdb8dfe50e2b44f0f04b7c9', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '36d9d5fc49d73a0944c7abf1f5b96932d9789f0b', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: '81cbf1b31e01c1d4fbba64b53b21bc26146d6f84', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'd3c68b2337d4a4ab9a8d218d9aa722814d548e1b', "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" })), "Download All"))), h("table", { key: '782e125327cea0381296ab5a3f2e3ddec6f42f24', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'ad3958e4d04f974dd47136da227afb662ff6cc7f' }, this.columns.map((column, i) => {
             const iconType = getIconType(this.sortTypeArray[i]);
             const isColumnSortable = !!(this.isSortable &&
                 this.sortableColumns[i]);
-            return (h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600" }, this.multiselect && i === 0 ? (h("label", { onClick: (e) => {
+            return (h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600", "aria-sort": isColumnSortable && this.sortTypeArray[i]
+                    ? this.sortTypeArray[i] === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : isColumnSortable
+                        ? 'none'
+                        : undefined }, this.multiselect && i === 0 ? (h("label", { onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    debugger;
                     if (isColumnSortable) {
                         this.sortBy(i);
                     }
@@ -210,11 +215,11 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
                     this.selected.some((a) => a), onClick: (e) => {
                     e.stopPropagation();
                     this.selectAll(e);
-                }, type: "checkbox", value: `select-all-${this.selectAllValue}` }), column, isColumnSortable &&
+                }, type: "checkbox", value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" }), column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))) : (h("label", { onClick: () => isColumnSortable &&
                     this.sortBy(i), class: isColumnSortable
                     ? 'cursor-pointer'
-                    : '' }, column, isColumnSortable &&
+                    : '', "aria-label": isColumnSortable ? `Sort by ${column}` : undefined }, column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (h("svg", { width: "11", height: "6", viewBox: "0 0 11 6", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z", fill: "currentColor" }))
             // <xpl-icon
             //     icon={iconType}
@@ -222,11 +227,11 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
             //     id="__xpl-icon-sort"
             // ></xpl-icon>
             )))));
-        }))), h("tbody", { key: 'b0715075cfba14dd9ac1e783e0c27a197e41a725' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+        }))), h("tbody", { key: '1168d8fb9e1f324b37abdc1e8a899bb14dedf786' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
                 .length > 0
                 ? this
                     .selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '658aec34fd3394c205d12ab67d06c6f1bb385aa6', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: 'aa7d796792186a3bd76f4201ead86e2055d65cf9', class: "flex items-center gap-2" }, h("button", { key: '7517d034c1456224fb24a0d66c3f60a446e96ef0', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '9af8fe875c042ffdd8fd7015b01703d29789a1af', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '41a1023ce1243190df484411ac9390ccd1496f10', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: 'ac9f0e09603e4bd45d6aa10dd45303f8bc90f892', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: 'af67ed98c91a36076f1578e5eaa49321aa919984', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'f0e3498f7b8e784e4848c0190eaab285f1c220af', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '29ae566f6e8f3cbaad39998165529b5022073a56', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '91da8153fd11fac318ef63b768e3ce0fda3e4b63', class: "flex items-center gap-2" }, h("button", { key: 'f8e399e46605f060d09c0f1fcc5864dae84949fd', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '93a0154407f0034993b31f79f746b905d8c720ba', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '67341c2e70e6e0e51bca7f6c0f8d790577efb80c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: '6c4e12bf4877e44ffb5cb6cec4a91dd41c76a95d', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: 'b476cb40832e1116db85780080839fe87fc75777', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'da32eb5c65018fe776af2f65ccd433573b21822e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: 'dddc5e97acb0270689af29fdfbb0a96018074f48', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: 'e7a37384aacfcd801b904082b028dd7b646b7938', class: "flex items-center gap-2" }, h("button", { key: '0d099c93f970f255015df19a10736c76317f3d58', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '3ef73d6177480ef3c6bb2e0ba3c11faf93fad40a', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '61447e4f959176a412b9702dfd5f0c126dfd1dcf', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: '5d996706416e30beeb36b3ccf5f49a0f728c9d46', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: 'a4e874b1db8cb252698f36497aebbfd8dfef9f7d', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '9ea64241e49ebfdc43f26317c1403a0dec074a2e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '25c2b77e2d374c782bef6907bbaa5f7d1c2b9a51', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '6586812fde391e75b56da67db64eeece80629dbc', class: "flex items-center gap-2" }, h("button", { key: 'f63385fd3ccae39ecb97b10fc92f204fb3e2fd62', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '2024b6fa282b30ffcd8870dab2f50c0f1af0f4ef', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '397312376d85ef4262c42f0f4382371aeb0c5eef', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: 'bb42b666d217a21b3f2b91b28eaa39a96ad403ba', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '2e8f28f57ef6fd799559ae70c3c9bc9d7d74cdc3', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '02270640aefaf430f27acf75465bfc5b30d2a881', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
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}
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\n class=\"text-left py-3 px-4 text-sm font-medium text-gray-600\"\n aria-sort={\n isColumnSortable && this.sortTypeArray[i]\n ? this.sortTypeArray[i] === 'asc'\n ? 'ascending'\n : 'descending'\n : isColumnSortable\n ? 'none'\n : undefined\n }\n >\n {this.multiselect && i === 0 ? (\n <label\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\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 aria-label=\"Select all rows\"\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 aria-label={isColumnSortable ? `Sort by ${column}` : undefined}\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.js CHANGED Viewed

@@ -9,11 +9,11 @@ const XplorTextBubble$1 = /*@__PURE__*/ proxyCustomElement(class XplorTextBubble
         this.color = 'orange';
     }
     render() {
-        return (h(Host, { key: '5b22dd9c96119743c998364cdd27667709f4e52f' }, h("div", { key: 'd42bc901517dce4e629a5d19fe2667925afcdf6e', class: {
+        return (h(Host, { key: 'bd93a7c09ef941a3c5a18b8b6b0704b2c9842b23' }, h("div", { key: '234e72bed4c9cdf297901639130b452dd82392cf', class: {
                 'text-bubble': true,
                 'text-bubble--green': this.color === 'green',
                 'text-bubble--orange': this.color === 'orange',
-            } }, h("slot", { key: '1ee2dc33d86906cdebd22019c3794ad1be606c1a' }))));
+            } }, h("slot", { key: '92c5fe22e00dd2506b15d49333ba8e31021d9bbf' }))));
     }
     static get style() { return xplorTextBubbleCss; }
 }, [6, "xplor-text-bubble", {

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

@@ -133,10 +133,10 @@ const XplorTextField$1 = /*@__PURE__*/ proxyCustomElement(class XplorTextField e
     }
     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: {
+        return (h(Host, { key: '3c7117a290dc3f7157270b083559266c94ad21b8' }, h("div", { key: 'f97ceed7ef938aed090f297d070cd240b658d8a7', class: this.computedClasses }, h("div", { key: '81ba47f6a22762d85e33052765896949e87e824f', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, h("div", { key: '33190e56a1443af9e4891d4a166442daa52ecb79', class: "xplor-text-field__input-wrapper" }, this.label && (h("label", { key: 'a44ab99f0e1719b2a93edcd7963c89476154f2f6', 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))))))))));
+            } }, h("slot", { key: 'c2299aedeb64c404c6bb7b6c0a29c9daae67fc44', name: "label" }, this.label), this.required && h("span", { key: '0d6ed2e883c3a651986470ef89f7be59ba33a645', class: "xplor-text-field__required" }, "*"))), h("input", { key: 'de966a8eb84dd86bd8a0e529561badffe71d3d46', 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: 'b0bcd17da89b2f63f25d212f863d875489175a8c', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (h("button", { key: '0cac263bf21ccc5536d62d420ce493e906811fd6', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, h("svg", { key: '2c02a7e8a9dbe7f9d133fc3c3156389db914bf73', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'bfaf865c53bb90b7d14ba27e419ca131e4107bfd', 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: '82eb809592dcc52a9c447c837b614d57e47f1678', name: "append-inner" })), h("fieldset", { key: '828c5d47eab64b6ff91edd9d739c87fdaa88c589', class: "xplor-text-field__outline" }, h("legend", { key: 'e1fef5e2002b8ea21c07c8f06272c6f53785f8b0', 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: 'f5d2af691c5e9adb1295bbc4eb74b5510ab203f6', class: "xplor-text-field__append" }, h("slot", { key: '8b26d1a847bfbbecd77067d2addb2a555464684e', name: "append" }))), this.showDetails && (h("div", { key: '63acbf8b66a619b74769b5aba9559da813e3081e', class: "xplor-text-field__details" }, this.hasError && (h("div", { key: 'c1e72205a335a0cf361ebb1936d19a0a6e1f52fd', 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 {

package/dist/components/xplor-time-picker.js CHANGED Viewed

@@ -291,16 +291,16 @@ const XplorTimePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorTimePicker
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const clockIcon = (h("svg", { key: 'ed28bf3f52630c4da2ad6a8e870bb8c3a4f3d190', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: '8bc107ea8c5b9762965b64c12393466f4373fd89', cx: "12", cy: "12", r: "10" }), h("polyline", { key: 'ff49c4901b312dc15e6bd09dca83b5413112fb75', points: "12 6 12 12 16 14" })));
-        return (h(Host, { key: 'c096645386cd430139108770b6808647fbaadf70' }, h("div", { key: '64c8c4afd184aef1b2e4ca8b8d4f63363470081a', class: {
+        const clockIcon = (h("svg", { key: '4ceaab6e781f50e8a90c075c56cfadabb647d44a', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: '468d7d3f69e93dfa1dbd1c57922c62747d0332fc', cx: "12", cy: "12", r: "10" }), h("polyline", { key: 'c6e3f11bc952645e9016ff95b3a712394c4a22b8', points: "12 6 12 12 16 14" })));
+        return (h(Host, { key: 'c645e604a3e24895a27018db69116ab12f83f8bf' }, h("div", { key: '67a035080a85b790df31f65292babdddf4e4e61b', class: {
                 'time-picker': true,
                 'time-picker--disabled': this.disabled,
                 'time-picker--error': !!this.error,
                 'time-picker--open': this.isOpen,
-            } }, this.label && (h("label", { key: '0e7bcf1942c56009e2396a777288529b6f5f53a1', class: "time-picker__label" }, this.label, this.required && h("span", { key: '034692f862e15e2719759706a2b487d208cf379d', class: "time-picker__required" }, "*"))), h("div", { key: '6cfa2b11f58478a9fc7cdae83408331980a6760d', class: "time-picker__field" }, h("input", { key: '4ac1c82ccc1ab5f7dc0441544495ffca40077045', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { key: '223f64d070ee70d5930bbcf416c5790bb4338adc', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { key: '41282f7c47134fce27192eb28402a9f2d5cf1c87', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { key: 'd0f1150c1acf001eb6b5861ae4acf2d340f76f95', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (h("div", { key: '70610a25a848c840e606f6a1b93558e057aede46', class: "time-picker__details" }, this.error && h("div", { key: 'c7e4ae629d26c606b2c06a4c8998748ce5942a80', class: "time-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '0a17052ddf4e3af3e1b5f324b817a8db63729484', class: "time-picker__dropdown" }, h("div", { key: '6cfba596b82f570ac55c6fcb4e0b3e5eecf2a107', class: "time-picker__columns" }, h("div", { key: '61c18caf8b91ecd1f0afd11f26183ba371272065', class: "time-picker__column" }, h("button", { key: '96b264a2bd6f40dd39cbca273c7c884b6ec4d6c6', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), h("div", { key: '89b079611ff601cec4e247be6a86941333c71857', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), h("button", { key: '332143c42d2cb34039a4b5efb7dae27c1e7b5d90', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), h("div", { key: '852197ee83d55ed901492f9bb124639154f2ae52', class: "time-picker__separator" }, ":"), h("div", { key: 'b5e99a034ccce887449004989d584207bbb3b191', class: "time-picker__column" }, h("button", { key: 'dc19cd280092e3e8f22e3ef9f4c45eda87a0cdef', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), h("div", { key: '5f7086f5917eefa76612e0ca083fb62bddf2bb98', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), h("button", { key: '047266d75f4fb274e9046a1524104bda6786fa24', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
-            h("div", { key: 'e4d548f5010bc56ca617be43bcd7e7e098909d5d', class: "time-picker__separator" }, ":"),
-            h("div", { key: '20ff897d25fa596d82e4a28e0d9784272e0eecfb', class: "time-picker__column" }, h("button", { key: '0a0f99b92f2b341233b7c51f0a66c2af96e82756', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), h("div", { key: '6b8a50efc2fa8417ba5b8b2cdc0463f6fe56a3cb', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), h("button", { key: '10870c306b1a9491aab977290a1f257bbd72aa63', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
-        ], h("div", { key: '8c5b9eab81c3710418f051cbde691bed9cfe7f3f', class: "time-picker__column time-picker__column--period" }, h("button", { key: '728512b9552f759f48238c33a99e4bff23c821e8', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), h("div", { key: 'b7721c167f5bd7c7162eed89ecd47f77979557b6', class: "time-picker__value time-picker__value--period" }, this.period), h("button", { key: 'aa075ac24108e4f29b34574abb68b9b19a8d5a61', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
+            } }, this.label && (h("label", { key: 'fc39aebaf65eb55a47e36b9e502329938a50deac', class: "time-picker__label" }, this.label, this.required && h("span", { key: 'f55931cd0b55c17176fa0f3da333f44b57b7e6a9', class: "time-picker__required" }, "*"))), h("div", { key: '3f4e57bf5c2973baaa0e53ec9bed0658e23c4c9c', class: "time-picker__field" }, h("input", { key: 'd893bd5ed3793a2e3d4aae60f16846db6c3d84a4', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { key: '7cb62a66b55645c2bc3c18a60abcb0098f4700d9', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { key: 'a547394c2508cddbcad2f3ebc52e7f361cab8f2e', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { key: '48bac21bb410015f81b539205bafad2f556ced51', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (h("div", { key: 'f10a2918e0d2cd57c7fc1d64f24e3fd4038463be', class: "time-picker__details" }, this.error && h("div", { key: 'da588b32f0fb80a797b44df89a4526ab337ec491', class: "time-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: 'b23b28c312732c033a28bcb39f862311554d599c', class: "time-picker__dropdown" }, h("div", { key: 'fd8811287be54584fac873644be6da4d9a90a918', class: "time-picker__columns" }, h("div", { key: '9373ac9977bb02507c09673783ecc9fc34f796f6', class: "time-picker__column" }, h("button", { key: '64506ff04f398acf50e11e15adfabfc8a6e2950a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), h("div", { key: 'b593fe8ea7cc1c1620f534a010d0828297845f8a', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), h("button", { key: '1b2729ac84afa3aa5cbace2b027a8be77de7453c', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), h("div", { key: 'cfc0910a6a02a6545d03dc6fd56dce45e389825b', class: "time-picker__separator" }, ":"), h("div", { key: '084da53c62bfe3cfb2cf8843761509393541b82d', class: "time-picker__column" }, h("button", { key: '017378d4bd006957267a242fd5da84bb5364626a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), h("div", { key: '344202f97262fbf267b872927c054d1fbcc636c4', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), h("button", { key: '690a243ddce9f3da11d172647202e65212e87b53', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
+            h("div", { key: '6ca3eae6b03f75773a39d1eb67b0db8cbf00021d', class: "time-picker__separator" }, ":"),
+            h("div", { key: 'ce31e8550cff9783229d58f866f5b2cab6b236e6', class: "time-picker__column" }, h("button", { key: '6be3f03bb5cb13f95d9381e22ed4ef27a2c31786', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), h("div", { key: 'faae89dc8d1a40f7a91df944c33d6cb0347dab72', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), h("button", { key: '2e6094b085acefb6b80c835fc49d6d0c6fcde192', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
+        ], h("div", { key: '2b029185906910cf1336726691b491bd8cd10421', class: "time-picker__column time-picker__column--period" }, h("button", { key: 'a1cced2dca331985851a8b2a71733cdc75540339', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), h("div", { key: 'b17134d423b342cb077af961e9a684a985ed6f13', class: "time-picker__value time-picker__value--period" }, this.period), h("button", { key: '4c4d04f7ba212eb7babccf6ec2ead94fa63dcb04', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
     }
     get el() { return this; }
     static get style() { return xplorTimePickerCss; }

package/dist/components/xplor-tooltip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorTooltip$1, d as defineCustomElement$1 } from './p-4l9DAhAo.js';
+import { X as XplorTooltip$1, d as defineCustomElement$1 } from './p-DbQ6ZNvh.js';
 const XplorTooltip = XplorTooltip$1;
 const defineCustomElement = defineCustomElement$1;