@paperless/core 3.5.1 → 3.6.1

package/dist/collection/components/molecules/navigation/item/navigation-item.stories.js

@@ -0,0 +1,33 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Navigation/Item',
+    component: 'p-navigation-item',
+    args: {
+        content: 'NavigationItem',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+        counter: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, icon, active, loading, as, counter, href, target, class: className, }) => html `
+		<p-navigation-item
+			icon=${icon ?? nothing}
+			active=${active ?? nothing}
+			loading=${loading ?? nothing}
+			as=${as ?? nothing}
+			counter=${counter ?? nothing}
+			href=${href ?? nothing}
+			target=${target ?? nothing}
+			class=${className ?? nothing}
+		>
+			${content}
+		</p-navigation-item>
+	`,
+};

package/dist/collection/components/molecules/navigation/section/navigation-section.stories.js

@@ -0,0 +1,21 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Navigation/Section',
+    component: 'p-navigation-section',
+    args: {
+        content: 'NavigationSection',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, header }) => html `
+		<p-navigation-section header=${header ?? nothing}>
+			${content}
+		</p-navigation-section>
+	`,
+};

package/dist/collection/components/molecules/pagination/pages/pagination-pages.component.js

@@ -4,7 +4,7 @@ import { ThemedHost } from "../../../../internal/themed-host.component";
 import { childOfComposed } from "../../../../utils/child-of";
 import { PAGINATION_DEFAULT_PAGE_SIZE } from "../../../../utils/constants";
 import { formatTranslation, getLocaleComponentStrings, } from "../../../../utils/localization";
-const pagination = cva(['p-pagination', 'flex items-center gap-2'], {
+const pagination = cva(['flex items-center gap-2'], {
     variants: {
         hidden: {
             false: 'flex',
@@ -61,7 +61,7 @@ export class PaginationPages {
         this._generate();
     }
     render() {
-        return (h(ThemedHost, { key: 'f907f831961866c8c54361d1cb24bfc1d6782a91' }, h("div", { key: 'd23cdee3d91f4fc7fccd64bc13fb0e1c71885cf1', class: pagination({
+        return (h(ThemedHost, { key: '5320ff0fd0f44f422fda718e796b46d02c38d5aa' }, h("div", { key: 'e459750f29cc6e773478ff5aec76c8f19865069b', class: pagination({
                 hidden: this.hideOnSinglePage && this._set?.length === 3,
             }) }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {

package/dist/collection/components/molecules/pagination/pages/pagination-pages.stories.js

@@ -0,0 +1,32 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Pagination/Pages',
+    component: 'p-pagination-pages',
+    args: {
+        total: 1000,
+    },
+    parameters: {
+        layout: 'centered',
+        docs: {
+            iframeHeight: 200,
+            story: {
+                height: '300px',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ page, 'page-size': pageSize, 'hide-on-single-page': hideOnSinglePage, total, }) => html `
+		<p-pagination-pages
+			class="mt-[250px] block"
+			page=${page ?? nothing}
+			page-size=${pageSize ?? nothing}
+			hide-on-single-page=${hideOnSinglePage ?? nothing}
+			total=${total ?? nothing}
+			@pageChange=${action('pageChange')}
+			@pagesChange=${action('pagesChange')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/pagination/pagination/pagination.component.js

@@ -3,7 +3,6 @@ import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { PAGINATION_DEFAULT_PAGE_SIZE, PAGINATION_DEFAULT_PAGE_SIZE_OPTIONS, } from "../../../../utils/constants";
 const pagination = cva([
-    'p-pagination',
     'items-center gap-2',
     'rounded-full',
     'border border-solid border-off-white-700 bg-off-white-300',
@@ -61,12 +60,12 @@ export class Pagination {
     _hasPaginationPages = true;
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];
-        return (h(ThemedHost, { key: '29ed189925a9e93e1939cfd66cf91915a5b8474d' }, h("div", { key: '2705a46004eb47c6cbbf6dfa448ae69a6dfc96dc', class: pagination({
+        return (h(ThemedHost, { key: '21cd272621360d4d505510c1faa0991e58cedd3a' }, h("div", { key: '2eff06826af604b9a8b640bd18b416b934c3dba8', class: pagination({
                 hidden: (hidePageSizeSelect && !this._hasPaginationPages) ||
                     (!this.enablePaginationSize && !this.enablePaginationPages),
-            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: 'bb6985dd638fea4e904aae04ba70edc7d94b3c52' }, h("p-pagination-size", { key: '730a4c91d7b3d8d0e2c57dc5e120222daef8b3c4', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
+            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: 'd40e819bfb23ef1ce37df622c349c747c5e30430' }, h("p-pagination-size", { key: '8b974865374b5e1de9b7dc6649472f85a9b09333', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
             this.hideOnSinglePage &&
-            this._hasPaginationPages && (h("p-divider", { key: '1496283b26ea9d0801e94bd8dc3987a6dc14480f', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '5aaf4021a8b4166bbb8a50b0e6127af1fc0995f7', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
+            this._hasPaginationPages && (h("p-divider", { key: '941d0fb3dedd42c1cfead1f95008fd81e5ea135d', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: 'dbe42788b40a0c071ef466e7a0896d269cb7d7c9', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
                 this._hasPaginationPages = detail > 1;
                 this.pagesChange.emit(detail);
             } })))));

package/dist/collection/components/molecules/pagination/pagination/pagination.stories.js

@@ -0,0 +1,34 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Pagination/Pagination',
+    component: 'p-pagination',
+    args: {
+        total: 100,
+    },
+    parameters: {
+        layout: 'centered',
+        docs: {
+            iframeHeight: 300,
+            story: {
+                height: '300px',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ 'hide-on-single-page': hideOnSinglePage, 'enable-pagination-size': enablePaginationSize, 'enable-pagination-pages': enablePaginationPages, page, total, 'page-size': pageSize, 'page-size-options': pageSizeOptions, }) => html `
+		<p-pagination
+			hide-on-single-page=${hideOnSinglePage ?? nothing}
+			enable-pagination-size=${enablePaginationSize ?? nothing}
+			enable-pagination-pages=${enablePaginationPages ?? nothing}
+			page=${page ?? nothing}
+			total=${total ?? nothing}
+			page-size=${pageSize ?? nothing}
+			page-size-options=${pageSizeOptions ?? nothing}
+			@pageChange=${action('pageChange')}
+			@pageSizeChange=${action('pageSizeChange')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/pagination/size/pagination-size.component.js

@@ -5,7 +5,7 @@ import { cn } from "../../../../utils";
 import { asBoolean } from "../../../../utils/as-boolean";
 import { PAGINATION_DEFAULT_PAGE_SIZE, PAGINATION_DEFAULT_PAGE_SIZE_OPTIONS, } from "../../../../utils/constants";
 import { formatTranslation, getLocaleComponentStrings, } from "../../../../utils/localization";
-const paginationSize = cva('p-pagination-size', {
+const paginationSize = cva([], {
     variants: {
         hidden: {
             false: null,
@@ -79,18 +79,18 @@ export class PaginationSize {
         this._setLocales();
     }
     render() {
-        return (h(ThemedHost, { key: 'bd468fb3b2889b8cd35ea4cbe39423e47c804e20', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: 'd8e97c2c1f86d393d7c2c2bb6e8fbf6a0f44567e', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: 'ff75dd123c0a3543ef2118d0a14f15aae96f49f8', class: trigger({
+        return (h(ThemedHost, { key: 'e506bfc11cef32de513059aced858d76c7b107c7', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: 'c700ce697ed43c6fa65f07eb39c71bd1b4146a73', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: '5c3a85572980eb3aa7c3e9d13ef99968b865e231', class: trigger({
                 active: this.dropdownIsOpen,
-            }), slot: 'trigger' }, h("p", { key: '986ddcf2e5c81ff4dc132aa3612764508e6287d4', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
+            }), slot: 'trigger' }, h("p", { key: '010e37c4d1d0aa59a1d38ce0b4ef7aaafdc6eb77', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
             ? this.itemTemplate(this.size)
-            : this._defaultItemTemplate(this.size)), h("p-icon", { key: '4b335f1178302bcbd7682be7c442eab43e8950d5', class: cn([
+            : this._defaultItemTemplate(this.size)), h("p-icon", { key: 'd28fe5d9b081bd90c1f728c1f20293a2ceb6aa4c', class: cn([
                 'flex-shrink-0',
                 'group-hover/pagination-size-trigger:text-storm-500',
                 'dark:group-hover/pagination-size-trigger:text-white',
             ], {
                 'text-storm-300 dark:text-hurricane-200': !this.dropdownIsOpen,
                 'text-storm-500 dark:text-white': !!this.dropdownIsOpen,
-            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: 'b26417bae87adfb4d18452c8d953fe4faa4bd868', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: '6b0722b71b46818a821c8c6f2b88025522f8c214', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
             ? this.itemTemplate(option)
             : this._defaultItemTemplate(option))))))));
     }

package/dist/collection/components/molecules/pagination/size/pagination-size.stories.js

@@ -0,0 +1,18 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Pagination/Size',
+    component: 'p-pagination-size',
+};
+export default meta;
+export const Default = {
+    render: ({ size, 'size-options': sizeOptions, 'item-template': itemTemplate, hidden, }) => html `
+		<p-pagination-size
+			size=${size ?? nothing}
+			size-options=${sizeOptions ?? nothing}
+			item-template=${itemTemplate ?? nothing}
+			hidden=${hidden ?? nothing}
+			@sizeChange=${action('sizeChange')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/profile/profile.stories.js

@@ -0,0 +1,61 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Profile',
+    component: 'p-profile',
+    args: {
+        title: 'Title',
+        subTitle: null,
+        'dropdown-location': 'bottom-end',
+    },
+    argTypes: {
+        title: {
+            type: {
+                required: true,
+            },
+        },
+        subTitle: {
+            type: 'string',
+        },
+    },
+    parameters: {
+        layout: 'centered',
+        docs: {
+            iframeHeight: 300,
+            story: {
+                height: '300px',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ title, subTitle, 'dropdown-location': dropdownLocation }) => html `
+		<p-profile dropdown-location=${dropdownLocation ?? nothing}>
+			<span slot="title">${title}</span>
+			<span slot="subtitle">${subTitle}</span>
+			<p-avatar
+				slot="avatar"
+				letters="A"
+			/>
+		</p-profile>
+	`,
+};
+export const Dropdown = {
+    render: ({ title, subTitle, 'dropdown-location': dropdownLocation }) => html `
+		<div class="flex w-full flex-col items-stretch">
+			<p-profile dropdown-location=${dropdownLocation}>
+				<span slot="title">${title}</span>
+				<span slot="subtitle">${subTitle}</span>
+				<div slot="dropdown">
+					<p-dropdown-menu-item>Item 1</p-dropdown-menu-item>
+					<p-dropdown-menu-item>Item 2</p-dropdown-menu-item>
+					<p-dropdown-menu-item>Item 3</p-dropdown-menu-item>
+				</div>
+				<p-avatar
+					slot="avatar"
+					letters="A"
+				/>
+			</p-profile>
+		</div>
+	`,
+};

package/dist/collection/components/molecules/range/range.component.css

@@ -1 +1 @@
-.m-0{margin:0}.mt-\[calc\(\(0\.5rem-1px\)\*-1\)\]{margin-top:calc(-.5rem + 1px)}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[2px\]{height:2px}.w-4{width:1rem}.w-full{width:100%}.appearance-none{appearance:none}.rounded-full{border-radius:9999px}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}*{box-sizing:border-box}:host{input{appearance:none;background-color:transparent;height:1.5rem;margin:0;width:100%}input::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input::-webkit-slider-thumb{--tw-bg-opacity:1;appearance:none;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;margin-top:calc(-.5rem + 1px);width:1rem}input::-webkit-slider-thumb:hover{cursor:grab}input::-webkit-slider-thumb:active,input::-webkit-slider-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-webkit-slider-thumb:active{cursor:grabbing}input::-moz-range-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;width:1rem}input::-moz-range-thumb:hover{cursor:grab}input::-moz-range-thumb:active,input::-moz-range-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-moz-range-thumb:active{cursor:grabbing}}.hover\:cursor-grab:hover{cursor:grab}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-1\/2{top:50%}.flex{display:flex}.w-inherit{width:inherit}.flex-1{flex:1 1 0%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.gap-2{gap:.5rem}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}
+.m-0{margin:0}.mt-\[calc\(\(0\.5rem-1px\)\*-1\)\]{margin-top:calc(-.5rem + 1px)}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[2px\]{height:2px}.w-4{width:1rem}.w-full{width:100%}.appearance-none{appearance:none}.rounded-full{border-radius:9999px}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}*{box-sizing:border-box}:host{input{appearance:none;background-color:transparent;height:1.5rem;margin:0;width:100%}input::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input::-webkit-slider-thumb{--tw-bg-opacity:1;appearance:none;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;margin-top:calc(-.5rem + 1px);width:1rem}input::-webkit-slider-thumb:hover{cursor:grab}input::-webkit-slider-thumb:active,input::-webkit-slider-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-webkit-slider-thumb:active{cursor:grabbing}input::-moz-range-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;width:1rem}input::-moz-range-thumb:hover{cursor:grab}input::-moz-range-thumb:active,input::-moz-range-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-moz-range-thumb:active{cursor:grabbing}}.hover\:cursor-grab:hover{cursor:grab}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-1\/2{top:50%}.z-\[1\]{z-index:1}.flex{display:flex}.w-inherit{width:inherit}.flex-1{flex:1 1 0%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.gap-2{gap:.5rem}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}

package/dist/collection/components/molecules/range/range.component.js

@@ -27,9 +27,9 @@ export class Range {
                 const value = ev.target.value;
                 this.value = Number.parseFloat(value);
                 this.valueChange.emit(value);
-            } }), h("div", { key: '0bea7f03b87ab00d74780796f00f3eda90bc1b96', class: '\n         z-1 absolute left-0 top-1/2 h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
+            } }), h("div", { key: 'aa3025e342179b0b046835aba388737e4d723986', class: '\n         absolute left-0 top-1/2 z-[1] h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
                 width: `calc(${percentage}% - (1rem * ${percentage} / 100))`,
-            } })), h("p-icon", { key: '8136e15955e461ec30c3bb8d83cabbd80c8089f2', variant: 'plus' }))));
+            } })), h("p-icon", { key: '7b7c6f55fe81458e96f8edf67f1fc47a028d707b', variant: 'plus' }))));
     }
     static get is() { return "p-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/range/range.stories.js

@@ -0,0 +1,18 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Range',
+    component: 'p-range',
+};
+export default meta;
+export const Default = {
+    render: ({ min, max, step, value }) => html `
+		<p-range
+			min=${min ?? nothing}
+			max=${max ?? nothing}
+			step=${step ?? nothing}
+			value=${value ?? nothing}
+			@valueChange=${action('valueChange')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/select/select.stories.js

@@ -0,0 +1,116 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Select',
+    component: 'p-select',
+    args: {
+        label: 'Label',
+        items: JSON.stringify([
+            {
+                value: 'value',
+                text: 'Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ',
+                class: 'text-negative-red-500',
+                iconClass: 'text-negative-red-500 group-hover/button:text-negative-red-800',
+                icon: 'user',
+            },
+            {
+                value: 'value2',
+                text: 'Option 2',
+            },
+            {
+                value: 'value3',
+                text: 'Option 3',
+            },
+            {
+                value: 'value4',
+                text: 'Option 4',
+            },
+            {
+                value: 'value5',
+                text: 'Option 5',
+            },
+            {
+                value: 'value6',
+                text: 'Option 6',
+            },
+            {
+                value: 'value7',
+                text: 'Option 7',
+            },
+            {
+                value: 'value8',
+                text: 'Option 8',
+            },
+            {
+                value: 'value9',
+                text: 'Option 9',
+            },
+            {
+                value: 'value10',
+                text: 'Option 10',
+            },
+        ]),
+        'identifier-key': 'value',
+    },
+    parameters: {
+        docs: {
+            iframeHeight: 300,
+            story: {
+                height: '350px',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ items, multi, strategy, icon, query, placeholder, 'autocomplete-placeholder': autocompletePlaceholder, value, 'display-key': displayKey, 'dropdown-display-key': dropdownDisplayKey, 'selection-display-key': selectionDisplayKey, 'value-key': valueKey, 'avatar-key': avatarKey, 'icon-key': iconKey, 'show-icon-in-selected-item': showIconInSelectedItem, 'class-key': classKey, 'apply-class-on-selected-item': applyClassOnSelectedItem, 'avatar-letters-key': avatarLettersKey, 'identifier-key': identifierKey, 'query-key': queryKey, 'auto-select-first': autoSelectFirst, 'show-chevron': showChevron, 'max-displayed-items': maxDisplayedItems, 'enable-autocomplete': enableAutocomplete, 'enable-text-wrap': enableTextWrap, 'async-filter': asyncFilter, loading, 'enable-select-all': enableSelectAll, 'select-all-text': selectAllText, 'select-all-icon': selectAllIcon, size, prefix, label, helper, required, 'show-optional': showOptional, error, disabled, 'show-add-item': showAddItem, 'add-item-text': addItemText, 'empty-state-text': emptyStateText, }) => html `
+		<p-select
+			items=${items ?? nothing}
+			multi=${multi ?? nothing}
+			strategy=${strategy ?? nothing}
+			icon=${icon ?? nothing}
+			query=${query ?? nothing}
+			placeholder=${placeholder ?? nothing}
+			autocomplete-placeholder=${autocompletePlaceholder ?? nothing}
+			value=${value ?? nothing}
+			display-key=${displayKey ?? nothing}
+			dropdown-display-key=${dropdownDisplayKey ?? nothing}
+			selection-display-key=${selectionDisplayKey ?? nothing}
+			value-key=${valueKey ?? nothing}
+			avatar-key=${avatarKey ?? nothing}
+			icon-key=${iconKey ?? nothing}
+			show-icon-in-selected-item=${showIconInSelectedItem ?? nothing}
+			class-key=${classKey ?? nothing}
+			apply-class-on-selected-item=${applyClassOnSelectedItem ?? nothing}
+			avatar-letters-key=${avatarLettersKey ?? nothing}
+			identifier-key=${identifierKey ?? nothing}
+			query-key=${queryKey ?? nothing}
+			auto-select-first=${autoSelectFirst ?? nothing}
+			show-chevron=${showChevron ?? nothing}
+			max-displayed-items=${maxDisplayedItems ?? nothing}
+			enable-autocomplete=${enableAutocomplete ?? nothing}
+			enable-text-wrap=${enableTextWrap ?? nothing}
+			async-filter=${asyncFilter ?? nothing}
+			loading=${loading ?? nothing}
+			enable-select-all=${enableSelectAll ?? nothing}
+			select-all-text=${selectAllText ?? nothing}
+			select-all-icon=${selectAllIcon ?? nothing}
+			size=${size ?? nothing}
+			prefix=${prefix ?? nothing}
+			label=${label ?? nothing}
+			helper=${helper ?? nothing}
+			required=${required ?? nothing}
+			show-optional=${showOptional ?? nothing}
+			error=${error ?? nothing}
+			disabled=${disabled ?? nothing}
+			show-add-item=${showAddItem ?? nothing}
+			add-item-text=${addItemText ?? nothing}
+			empty-state-text=${emptyStateText ?? nothing}
+			@queryChange=${action('queryChange')}
+			@valueChange=${action('valueChange')}
+			@selectAllChange=${action('selectAllChange')}
+			@dropdownShown=${action('dropdownShown')}
+			@add=${action('add')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/table/cell/table-cell.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static}.flex{display:flex}.table{display:table}.table-cell{display:table-cell}.hidden{display:none}.h-6{height:1.5rem}.w-1\/12{width:8.333333%}.w-10\/12{width:83.333333%}.w-11\/12{width:91.666667%}.w-2\/12{width:16.666667%}.w-3\/12{width:25%}.w-4\/12{width:33.333333%}.w-5\/12{width:41.666667%}.w-6\/12{width:50%}.w-7\/12{width:58.333333%}.w-8\/12{width:66.666667%}.w-9\/12{width:75%}.w-\[calc\(100\%-1rem\)\]{width:calc(100% - 1rem)}.flex-1{flex:1 1 0%}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:.25rem}.pl-8{padding-left:2rem}.pr-0{padding-right:0}.pr-4{padding-right:1rem}.text-center{text-align:center}.text-start{text-align:start}.text-end{text-align:end}.font-semibold{font-weight:600}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.last-of-type\:pr-0:last-of-type{padding-right:0}.group:hover .group-hover\:flex{display:flex}.group:hover .group-hover\:hidden{display:none}@media (min-width:40rem){.tablet\:flex{display:flex}.tablet\:hidden{display:none}.tablet\:w-1\/12{width:8.333333%}.tablet\:w-10\/12{width:83.333333%}.tablet\:w-11\/12{width:91.666667%}.tablet\:w-2\/12{width:16.666667%}.tablet\:w-3\/12{width:25%}.tablet\:w-4\/12{width:33.333333%}.tablet\:w-5\/12{width:41.666667%}.tablet\:w-6\/12{width:50%}.tablet\:w-7\/12{width:58.333333%}.tablet\:w-8\/12{width:66.666667%}.tablet\:w-9\/12{width:75%}.tablet\:pr-0{padding-right:0}.tablet\:pr-4{padding-right:1rem}.group:hover .tablet\:group-hover\:flex{display:flex}.group:hover .tablet\:group-hover\:hidden{display:none}}@media (min-width:64rem){.desktop-xs\:flex{display:flex}.desktop-xs\:hidden{display:none}.desktop-xs\:w-1\/12{width:8.333333%}.desktop-xs\:w-10\/12{width:83.333333%}.desktop-xs\:w-11\/12{width:91.666667%}.desktop-xs\:w-2\/12{width:16.666667%}.desktop-xs\:w-3\/12{width:25%}.desktop-xs\:w-4\/12{width:33.333333%}.desktop-xs\:w-5\/12{width:41.666667%}.desktop-xs\:w-6\/12{width:50%}.desktop-xs\:w-7\/12{width:58.333333%}.desktop-xs\:w-8\/12{width:66.666667%}.desktop-xs\:w-9\/12{width:75%}.desktop-xs\:pr-0{padding-right:0}.desktop-xs\:pr-4{padding-right:1rem}.group:hover .desktop-xs\:group-hover\:flex{display:flex}.group:hover .desktop-xs\:group-hover\:hidden{display:none}}@media (min-width:80rem){.desktop-sm\:flex{display:flex}.desktop-sm\:hidden{display:none}.desktop-sm\:w-1\/12{width:8.333333%}.desktop-sm\:w-10\/12{width:83.333333%}.desktop-sm\:w-11\/12{width:91.666667%}.desktop-sm\:w-2\/12{width:16.666667%}.desktop-sm\:w-3\/12{width:25%}.desktop-sm\:w-4\/12{width:33.333333%}.desktop-sm\:w-5\/12{width:41.666667%}.desktop-sm\:w-6\/12{width:50%}.desktop-sm\:w-7\/12{width:58.333333%}.desktop-sm\:w-8\/12{width:66.666667%}.desktop-sm\:w-9\/12{width:75%}.desktop-sm\:pr-0{padding-right:0}.desktop-sm\:pr-4{padding-right:1rem}.group:hover .desktop-sm\:group-hover\:flex{display:flex}.group:hover .desktop-sm\:group-hover\:hidden{display:none}}@media (min-width:85.375rem){.desktop\:flex{display:flex}.desktop\:hidden{display:none}.desktop\:w-1\/12{width:8.333333%}.desktop\:w-10\/12{width:83.333333%}.desktop\:w-11\/12{width:91.666667%}.desktop\:w-2\/12{width:16.666667%}.desktop\:w-3\/12{width:25%}.desktop\:w-4\/12{width:33.333333%}.desktop\:w-5\/12{width:41.666667%}.desktop\:w-6\/12{width:50%}.desktop\:w-7\/12{width:58.333333%}.desktop\:w-8\/12{width:66.666667%}.desktop\:w-9\/12{width:75%}.desktop\:pr-0{padding-right:0}.desktop\:pr-4{padding-right:1rem}.group:hover .desktop\:group-hover\:flex{display:flex}.group:hover .desktop\:group-hover\:hidden{display:none}}@media (min-width:90rem){.desktop-lg\:flex{display:flex}.desktop-lg\:hidden{display:none}.desktop-lg\:w-1\/12{width:8.333333%}.desktop-lg\:w-10\/12{width:83.333333%}.desktop-lg\:w-11\/12{width:91.666667%}.desktop-lg\:w-2\/12{width:16.666667%}.desktop-lg\:w-3\/12{width:25%}.desktop-lg\:w-4\/12{width:33.333333%}.desktop-lg\:w-5\/12{width:41.666667%}.desktop-lg\:w-6\/12{width:50%}.desktop-lg\:w-7\/12{width:58.333333%}.desktop-lg\:w-8\/12{width:66.666667%}.desktop-lg\:w-9\/12{width:75%}.desktop-lg\:pr-0{padding-right:0}.desktop-lg\:pr-4{padding-right:1rem}.group:hover .desktop-lg\:group-hover\:flex{display:flex}.group:hover .desktop-lg\:group-hover\:hidden{display:none}}@media (min-width:120rem){.desktop-xl\:flex{display:flex}.desktop-xl\:hidden{display:none}.desktop-xl\:w-1\/12{width:8.333333%}.desktop-xl\:w-10\/12{width:83.333333%}.desktop-xl\:w-11\/12{width:91.666667%}.desktop-xl\:w-2\/12{width:16.666667%}.desktop-xl\:w-3\/12{width:25%}.desktop-xl\:w-4\/12{width:33.333333%}.desktop-xl\:w-5\/12{width:41.666667%}.desktop-xl\:w-6\/12{width:50%}.desktop-xl\:w-7\/12{width:58.333333%}.desktop-xl\:w-8\/12{width:66.666667%}.desktop-xl\:w-9\/12{width:75%}.desktop-xl\:pr-0{padding-right:0}.desktop-xl\:pr-4{padding-right:1rem}.group:hover .desktop-xl\:group-hover\:flex{display:flex}.group:hover .desktop-xl\:group-hover\:hidden{display:none}}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
+*{box-sizing:border-box}.static{position:static}.flex{display:flex}.table{display:table}.table-cell{display:table-cell}.hidden{display:none}.h-6{height:1.5rem}.w-1\/12{width:8.333333%}.w-10\/12{width:83.333333%}.w-11\/12{width:91.666667%}.w-2\/12{width:16.666667%}.w-3\/12{width:25%}.w-4\/12{width:33.333333%}.w-5\/12{width:41.666667%}.w-6\/12{width:50%}.w-7\/12{width:58.333333%}.w-8\/12{width:66.666667%}.w-9\/12{width:75%}.w-\[calc\(100\%-1rem\)\]{width:calc(100% - 1rem)}.w-full{width:100%}.flex-1{flex:1 1 0%}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:.25rem}.pl-8{padding-left:2rem}.pr-0{padding-right:0}.pr-4{padding-right:1rem}.text-center{text-align:center}.text-start{text-align:start}.text-end{text-align:end}.font-semibold{font-weight:600}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.last-of-type\:pr-0:last-of-type{padding-right:0}.group:hover .group-hover\:flex{display:flex}.group:hover .group-hover\:hidden{display:none}@media (min-width:40rem){.tablet\:flex{display:flex}.tablet\:hidden{display:none}.tablet\:w-1\/12{width:8.333333%}.tablet\:w-10\/12{width:83.333333%}.tablet\:w-11\/12{width:91.666667%}.tablet\:w-2\/12{width:16.666667%}.tablet\:w-3\/12{width:25%}.tablet\:w-4\/12{width:33.333333%}.tablet\:w-5\/12{width:41.666667%}.tablet\:w-6\/12{width:50%}.tablet\:w-7\/12{width:58.333333%}.tablet\:w-8\/12{width:66.666667%}.tablet\:w-9\/12{width:75%}.tablet\:w-full{width:100%}.tablet\:pr-0{padding-right:0}.tablet\:pr-4{padding-right:1rem}.group:hover .tablet\:group-hover\:flex{display:flex}.group:hover .tablet\:group-hover\:hidden{display:none}}@media (min-width:64rem){.desktop-xs\:flex{display:flex}.desktop-xs\:hidden{display:none}.desktop-xs\:w-1\/12{width:8.333333%}.desktop-xs\:w-10\/12{width:83.333333%}.desktop-xs\:w-11\/12{width:91.666667%}.desktop-xs\:w-2\/12{width:16.666667%}.desktop-xs\:w-3\/12{width:25%}.desktop-xs\:w-4\/12{width:33.333333%}.desktop-xs\:w-5\/12{width:41.666667%}.desktop-xs\:w-6\/12{width:50%}.desktop-xs\:w-7\/12{width:58.333333%}.desktop-xs\:w-8\/12{width:66.666667%}.desktop-xs\:w-9\/12{width:75%}.desktop-xs\:w-full{width:100%}.desktop-xs\:pr-0{padding-right:0}.desktop-xs\:pr-4{padding-right:1rem}.group:hover .desktop-xs\:group-hover\:flex{display:flex}.group:hover .desktop-xs\:group-hover\:hidden{display:none}}@media (min-width:80rem){.desktop-sm\:flex{display:flex}.desktop-sm\:hidden{display:none}.desktop-sm\:w-1\/12{width:8.333333%}.desktop-sm\:w-10\/12{width:83.333333%}.desktop-sm\:w-11\/12{width:91.666667%}.desktop-sm\:w-2\/12{width:16.666667%}.desktop-sm\:w-3\/12{width:25%}.desktop-sm\:w-4\/12{width:33.333333%}.desktop-sm\:w-5\/12{width:41.666667%}.desktop-sm\:w-6\/12{width:50%}.desktop-sm\:w-7\/12{width:58.333333%}.desktop-sm\:w-8\/12{width:66.666667%}.desktop-sm\:w-9\/12{width:75%}.desktop-sm\:w-full{width:100%}.desktop-sm\:pr-0{padding-right:0}.desktop-sm\:pr-4{padding-right:1rem}.group:hover .desktop-sm\:group-hover\:flex{display:flex}.group:hover .desktop-sm\:group-hover\:hidden{display:none}}@media (min-width:85.375rem){.desktop\:flex{display:flex}.desktop\:hidden{display:none}.desktop\:w-1\/12{width:8.333333%}.desktop\:w-10\/12{width:83.333333%}.desktop\:w-11\/12{width:91.666667%}.desktop\:w-2\/12{width:16.666667%}.desktop\:w-3\/12{width:25%}.desktop\:w-4\/12{width:33.333333%}.desktop\:w-5\/12{width:41.666667%}.desktop\:w-6\/12{width:50%}.desktop\:w-7\/12{width:58.333333%}.desktop\:w-8\/12{width:66.666667%}.desktop\:w-9\/12{width:75%}.desktop\:w-full{width:100%}.desktop\:pr-0{padding-right:0}.desktop\:pr-4{padding-right:1rem}.group:hover .desktop\:group-hover\:flex{display:flex}.group:hover .desktop\:group-hover\:hidden{display:none}}@media (min-width:90rem){.desktop-lg\:flex{display:flex}.desktop-lg\:hidden{display:none}.desktop-lg\:w-1\/12{width:8.333333%}.desktop-lg\:w-10\/12{width:83.333333%}.desktop-lg\:w-11\/12{width:91.666667%}.desktop-lg\:w-2\/12{width:16.666667%}.desktop-lg\:w-3\/12{width:25%}.desktop-lg\:w-4\/12{width:33.333333%}.desktop-lg\:w-5\/12{width:41.666667%}.desktop-lg\:w-6\/12{width:50%}.desktop-lg\:w-7\/12{width:58.333333%}.desktop-lg\:w-8\/12{width:66.666667%}.desktop-lg\:w-9\/12{width:75%}.desktop-lg\:w-full{width:100%}.desktop-lg\:pr-0{padding-right:0}.desktop-lg\:pr-4{padding-right:1rem}.group:hover .desktop-lg\:group-hover\:flex{display:flex}.group:hover .desktop-lg\:group-hover\:hidden{display:none}}@media (min-width:120rem){.desktop-xl\:flex{display:flex}.desktop-xl\:hidden{display:none}.desktop-xl\:w-1\/12{width:8.333333%}.desktop-xl\:w-10\/12{width:83.333333%}.desktop-xl\:w-11\/12{width:91.666667%}.desktop-xl\:w-2\/12{width:16.666667%}.desktop-xl\:w-3\/12{width:25%}.desktop-xl\:w-4\/12{width:33.333333%}.desktop-xl\:w-5\/12{width:41.666667%}.desktop-xl\:w-6\/12{width:50%}.desktop-xl\:w-7\/12{width:58.333333%}.desktop-xl\:w-8\/12{width:66.666667%}.desktop-xl\:w-9\/12{width:75%}.desktop-xl\:w-full{width:100%}.desktop-xl\:pr-0{padding-right:0}.desktop-xl\:pr-4{padding-right:1rem}.group:hover .desktop-xl\:group-hover\:flex{display:flex}.group:hover .desktop-xl\:group-hover\:hidden{display:none}}.dark\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}

package/dist/collection/components/molecules/table/cell/table-cell.component.js

@@ -87,7 +87,7 @@ export class TableCell {
         };
     }
     render() {
-        return (h(ThemedHost, { key: 'f6abd4c007ae672b8d3bba899ee69ceaf5c258a3', class: this._getColumnClasses() }, this.checkbox, this._getContent(), false && (h(Fragment, { key: 'd159248e3497fb96ce1c32cfd4a6a4844cbebf8d' }, h("div", { key: '4d3e542141053c22602cad4c90d4dba92623119c', class: 'pl-8' }), h("div", { key: '3949cd37f6ef5780d07edd596b5277328f3fbf49', class: '\n         text-storm-300 text-storm-400 text-storm-500\n         dark:text-hurricane-200 dark:text-white\n       ' }), h("div", { key: '052667e85e826a81165ed89ccc868b5a27d033e5', class: 'justify-start justify-end justify-center' }), h("div", { key: 'a5daeef9545ed0621440bed0d0ccfc4da823ccc6', class: 'font-semibold text-storm-300 text-storm-400 text-storm-500' }), h("div", { key: '1b5a1acc5a10eea9aa71f2168dc84d99b9475982', class: '\n         w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12\n         w-7/12 w-8/12 w-9/12\n       ' }), h("div", { key: '0ec29e97cb7d7691d41de1bc9f037a3e944bd65c', class: '\n         tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12\n         tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12\n         tablet:w-7/12 tablet:w-8/12 tablet:w-9/12\n       ' }), h("div", { key: 'b651ae024c6637455019d674c62e81967bfbce06', class: '\n         desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12\n         desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12\n         desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12\n         desktop-xs:w-8/12 desktop-xs:w-9/12\n       ' }), h("div", { key: '6f907538695a22fd769df111253bb6bec3bb9725', class: '\n         desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12\n         desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12\n         desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12\n         desktop-xs:w-8/12 desktop-xs:w-9/12\n       ' }), h("div", { key: 'd8090ea7e8ff56758169d61633a1826dd3b26a53', class: '\n         desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12\n         desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12\n         desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12\n         desktop-sm:w-8/12 desktop-sm:w-9/12\n       ' }), h("div", { key: 'b91d878f9123e6b92d11572277e9562d1fbb250c', class: '\n         desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12\n         desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12\n         desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12\n       ' }), h("div", { key: 'f026ea577772db721c4471a0883eb0347684fe62', class: '\n         desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12\n         desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12\n         desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12\n         desktop-lg:w-8/12 desktop-lg:w-9/12\n       ' }), h("div", { key: 'ffd7250140092e5c783b322c1df9187994f4aa82', class: '\n         desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12\n         desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12\n         desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12\n         desktop-xl:w-8/12 desktop-xl:w-9/12\n       ' }), h("div", { key: '82fb0211042f848c2d3532e65074353055af8f33', class: '\n         flex hidden\n         group-hover:flex group-hover:hidden\n       ' }), h("div", { key: 'a1b33113aaccdfc6b7f82e6b65bfc5a1bb759817', class: '\n         tablet:flex tablet:hidden\n         tablet:group-hover:flex tablet:group-hover:hidden\n       ' }), h("div", { key: '988ea10da46c0f793a0800f8a292187e52a79898', class: '\n         desktop-xs:flex desktop-xs:hidden\n         desktop-xs:group-hover:flex desktop-xs:group-hover:hidden\n       ' }), h("div", { key: '2aa7fd3ea97e9f885b08da52658bb88c350f7c6d', class: '\n         desktop-sm:flex desktop-sm:hidden\n         desktop-sm:group-hover:flex desktop-sm:group-hover:hidden\n       ' }), h("div", { key: '9c2be7307dd42c431cf7c561552c600fba2b4005', class: '\n         desktop:flex desktop:hidden\n         desktop:group-hover:flex desktop:group-hover:hidden\n       ' }), h("div", { key: 'b255dce7a16f9495a53057791091c2b98f871a4b', class: '\n         desktop-lg:flex desktop-lg:hidden\n         desktop-lg:group-hover:flex desktop-lg:group-hover:hidden\n       ' }), h("div", { key: '8e67e5aeafb17101640b608792ed7ec12d85dfc1', class: '\n         desktop-xl:flex desktop-xl:hidden\n         desktop-xl:group-hover:flex desktop-xl:group-hover:hidden\n       ' }), h("div", { key: '94662519983b5cf10e80b179e6d2b728301fea35', class: '\n         pr-0 pr-4\n         last-of-type:pr-0\n       ' }), h("div", { key: '68ed717de03180b7f3626df29d33c834bf51ccba', class: 'tablet:pr-0 tablet:pr-4' }), h("div", { key: '12ade478db0b2ec5eb7512db86ac1a3339ca6f77', class: 'desktop-xs:pr-0 desktop-xs:pr-4' }), h("div", { key: '1866441bd649bb98a586b5a2b682e575e677174a', class: 'desktop-sm:pr-0 desktop-sm:pr-4' }), h("div", { key: '18b758c62ebd22df1878b0031a5694ca4b50e596', class: 'desktop:pr-0 desktop:pr-4' }), h("div", { key: '957ffd7a68d85b538a8467e213ef642bc3a3f903', class: 'desktop-lg:pr-0 desktop-lg:pr-4' }), h("div", { key: '8df0f6b939349d97692884b3b9ef334be1930766', class: 'desktop-xl:pr-0 desktop-xl:pr-4' })))));
+        return (h(ThemedHost, { key: 'f6abd4c007ae672b8d3bba899ee69ceaf5c258a3', class: this._getColumnClasses() }, this.checkbox, this._getContent(), false && (h(Fragment, { key: 'd159248e3497fb96ce1c32cfd4a6a4844cbebf8d' }, h("div", { key: '4d3e542141053c22602cad4c90d4dba92623119c', class: 'pl-8' }), h("div", { key: '3949cd37f6ef5780d07edd596b5277328f3fbf49', class: '\n         text-storm-300 text-storm-400 text-storm-500\n         dark:text-hurricane-200 dark:text-white\n       ' }), h("div", { key: '052667e85e826a81165ed89ccc868b5a27d033e5', class: 'justify-start justify-end justify-center' }), h("div", { key: 'a5daeef9545ed0621440bed0d0ccfc4da823ccc6', class: 'font-semibold text-storm-300 text-storm-400 text-storm-500' }), h("div", { key: '9644bcf8534845b5994de63a355404e14640063e', class: '\n         w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12\n         w-9/12 w-full\n       ' }), h("div", { key: 'e4b339622abcbeb41fe04e11617b3c376b102557', class: '\n         tablet:w-1/12 tablet:w-10/12 tablet:w-11/12 tablet:w-2/12 tablet:w-3/12\n         tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12\n         tablet:w-9/12 tablet:w-full\n       ' }), h("div", { key: '5d1c171849417cea00b65f9028d43a8a4ed33a19', class: '\n         desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12\n         desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12\n         desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12\n         desktop-xs:w-full\n       ' }), h("div", { key: '0ff7ff7feff9bb5f4398be0ccf222c24af0c9ffa', class: '\n         desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12\n         desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12\n         desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12\n         desktop-xs:w-full\n       ' }), h("div", { key: 'a443302173a989b0efeb47e02c0186134207fd5e', class: '\n         desktop-sm:w-1/12 desktop-sm:w-10/12 desktop-sm:w-11/12\n         desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12\n         desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12\n         desktop-sm:w-full\n       ' }), h("div", { key: 'ea801cbb837c30f6bf93b556d57920690faaf54d', class: '\n         desktop:w-1/12 desktop:w-10/12 desktop:w-11/12 desktop:w-2/12\n         desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12\n         desktop:w-7/12 desktop:w-8/12 desktop:w-9/12 desktop:w-full\n       ' }), h("div", { key: '63d5d2516054847b99c711f6ca9177e102c7016f', class: '\n         desktop-lg:w-1/12 desktop-lg:w-10/12 desktop-lg:w-11/12\n         desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12\n         desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12\n         desktop-lg:w-full\n       ' }), h("div", { key: 'd8c5562ecbaabf6aa8031267b002cd1a6d61df7d', class: '\n         desktop-xl:w-1/12 desktop-xl:w-10/12 desktop-xl:w-11/12\n         desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12\n         desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12\n         desktop-xl:w-full\n       ' }), h("div", { key: '7905ab5d8d28c57d66f855219257688b975754e8', class: '\n         flex hidden\n         group-hover:flex group-hover:hidden\n       ' }), h("div", { key: '7252c96ddf8a8e1925c95a25d598f33c0cd31ec3', class: '\n         tablet:flex tablet:hidden\n         tablet:group-hover:flex tablet:group-hover:hidden\n       ' }), h("div", { key: '604b6ae34593fb237af64cda7f94038bf6aaa9a5', class: '\n         desktop-xs:flex desktop-xs:hidden\n         desktop-xs:group-hover:flex desktop-xs:group-hover:hidden\n       ' }), h("div", { key: 'e0fd3a78c6c3ca78dc1cca453220cf27e482407a', class: '\n         desktop-sm:flex desktop-sm:hidden\n         desktop-sm:group-hover:flex desktop-sm:group-hover:hidden\n       ' }), h("div", { key: 'bdeae20e2da2094d0d332c9b0370b86fd72e23ab', class: '\n         desktop:flex desktop:hidden\n         desktop:group-hover:flex desktop:group-hover:hidden\n       ' }), h("div", { key: 'a0483d5c76e8c5d29c9dbee479ac0451ca07ae53', class: '\n         desktop-lg:flex desktop-lg:hidden\n         desktop-lg:group-hover:flex desktop-lg:group-hover:hidden\n       ' }), h("div", { key: '484239af649c9c8ff78d3f0046ecf69cc9929694', class: '\n         desktop-xl:flex desktop-xl:hidden\n         desktop-xl:group-hover:flex desktop-xl:group-hover:hidden\n       ' }), h("div", { key: '87810fb881c72609cb81f0a6c0ee56c9c2454b3e', class: '\n         pr-0 pr-4\n         last-of-type:pr-0\n       ' }), h("div", { key: '3bfbfcff44dd9403d484a961039f6f753670570e', class: 'tablet:pr-0 tablet:pr-4' }), h("div", { key: '8b1b9c999c09e900a6ae1a6c849d4aefa3da2b00', class: 'desktop-xs:pr-0 desktop-xs:pr-4' }), h("div", { key: 'e86a9aa00985ce6be258c16c88a65cc27d191d48', class: 'desktop-sm:pr-0 desktop-sm:pr-4' }), h("div", { key: '583d14283901e179df7e5abbfe14777d553f73f9', class: 'desktop:pr-0 desktop:pr-4' }), h("div", { key: '6f7ed4a64f62d24abc43528eb7b4acfda580e5c8', class: 'desktop-lg:pr-0 desktop-lg:pr-4' }), h("div", { key: 'def1e7396e879327c4c7532162d29083d95b5ee8', class: 'desktop-xl:pr-0 desktop-xl:pr-4' })))));
     }
     _getContent() {
         if (this.variant === 'loading') {

package/dist/collection/components/molecules/table/cell/table-cell.stories.js

@@ -0,0 +1,31 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Table/Cell',
+    component: 'p-table-cell',
+    args: {
+        content: 'TableCell',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, index, 'row-index': rowIndex, definition, item, value, 'table-has-actions': tableHasActions, checkbox, template, }) => html `
+		<p-table-cell
+			variant=${variant ?? nothing}
+			index=${index ?? nothing}
+			row-index=${rowIndex ?? nothing}
+			definition=${definition ?? nothing}
+			item=${item ?? nothing}
+			value=${value ?? nothing}
+			table-has-actions=${tableHasActions ?? nothing}
+			checkbox=${checkbox ?? nothing}
+			template=${template ?? nothing}
+		>
+			${content}
+		</p-table-cell>
+	`,
+};

package/dist/collection/components/molecules/table/footer/table-footer.stories.js

@@ -0,0 +1,29 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Table/Footer',
+    component: 'p-table-footer',
+    args: {
+        total: 100,
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ 'enable-page-size': enablePageSize, 'enable-pagination': enablePagination, 'enable-export': enableExport, loading, page, total, 'page-size': pageSize, 'page-size-options': pageSizeOptions, 'hide-on-single-page': hideOnSinglePage, }) => html `
+		<p-table-footer
+			enable-page-size=${enablePageSize ?? nothing}
+			enable-pagination=${enablePagination ?? nothing}
+			enable-export=${enableExport ?? nothing}
+			loading=${loading ?? nothing}
+			page=${page ?? nothing}
+			total=${total ?? nothing}
+			page-size=${pageSize ?? nothing}
+			page-size-options=${pageSizeOptions ?? nothing}
+			hide-on-single-page=${hideOnSinglePage ?? nothing}
+			@pageChange=${action('pageChange')}
+			@pageSizeChange=${action('pageSizeChange')}
+			@export=${action('export')}
+			@hidden=${action('hidden')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/table/header/table-header.component.js

@@ -144,7 +144,7 @@ export class TableHeader {
          `, icon: 'filter', variant: 'secondary', onOnClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: 'f82cc292316723b26ed2f163a8a4e5bd6b321f33', class: '\n           hidden h-4\n           tablet:flex\n           dark:text-white/15\n         ', variant: 'vertical' })), !this.loading && this.enableExport && (h("p-button", { key: '68b77661274b6e9c6e8764bbe16519539966e0f9', class: '\n           desktop-xs:auto\n           w-full\n         ', icon: 'upload', variant: 'secondary', onOnClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '5156a9e3cdcef6ce1aa15efa4909d88abed010da', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: 'a8125d245e8a194734b50c2ead689a9bfb7d686e', class: '\n         fixed bottom-0 left-0 z-[2] block w-full border border-solid\n         border-transparent bg-white p-4\n         desktop-xs:hidden\n         dark:border-t-hurricane-400 dark:bg-hurricane-500\n       ' }, this._buttonTemplate(true))))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: 'f82cc292316723b26ed2f163a8a4e5bd6b321f33', class: '\n           hidden h-4\n           tablet:flex\n           dark:text-white/15\n         ', variant: 'vertical' })), !this.loading && this.enableExport && (h("p-button", { key: 'b89bfdd9fe038efd02f8c7b733f14a1526cbafda', class: '\n           w-full\n           desktop-xs:w-auto\n         ', icon: 'upload', variant: 'secondary', onOnClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '0ffc61bd03ba493ce6d2331aea707d08a81ec29d', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '5141609a08425f481e8a396e596eb2a5a9f37ddf', class: '\n         fixed bottom-0 left-0 z-[2] block w-full border border-solid\n         border-transparent bg-white p-4\n         desktop-xs:hidden\n         dark:border-t-hurricane-400 dark:bg-hurricane-500\n       ' }, this._buttonTemplate(true))))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

package/dist/collection/components/molecules/table/header/table-header.stories.js

@@ -0,0 +1,33 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Table/Header',
+    component: 'p-table-header',
+};
+export default meta;
+export const Default = {
+    render: ({ 'quick-filters': quickFilters, 'active-quick-filter-identifier': activeQuickFilterIdentifier, loading, 'enable-search': enableSearch, 'items-selected-amount': itemsSelectedAmount, query, 'enable-filter': enableFilter, 'enable-filter-desktop': enableFilterDesktop, 'selected-filters-amount': selectedFiltersAmount, 'filter-button-template': filterButtonTemplate, 'enable-action': enableAction, 'action-loading': actionLoading, 'action-icon': actionIcon, 'action-text': actionText, 'can-use-action': canUseAction, 'action-button-template': actionButtonTemplate, }) => html `
+		<p-table-header
+			quick-filters=${quickFilters ?? nothing}
+			active-quick-filter-identifier=${activeQuickFilterIdentifier ?? nothing}
+			loading=${loading ?? nothing}
+			enable-search=${enableSearch ?? nothing}
+			items-selected-amount=${itemsSelectedAmount ?? nothing}
+			query=${query ?? nothing}
+			enable-filter=${enableFilter ?? nothing}
+			enable-filter-desktop=${enableFilterDesktop ?? nothing}
+			selected-filters-amount=${selectedFiltersAmount ?? nothing}
+			filter-button-template=${filterButtonTemplate ?? nothing}
+			enable-action=${enableAction ?? nothing}
+			action-loading=${actionLoading ?? nothing}
+			action-icon=${actionIcon ?? nothing}
+			action-text=${actionText ?? nothing}
+			can-use-action=${canUseAction ?? nothing}
+			action-button-template=${actionButtonTemplate ?? nothing}
+			@quickFilter=${action('quickFilter')}
+			@queryChange=${action('queryChange')}
+			@filter=${action('filter')}
+			@action=${action('action')}
+		/>
+	`,
+};