@paperless/core 2.0.1-beta.17 → 2.0.1-beta.19

package/dist/cjs/screens-e5439aeb.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const tableColumSizesOptions = [
+    'default',
+    'tablet',
+    'desktop-xs',
+    'desktop-sm',
+    'desktop',
+    'desktop-lg',
+    'desktop-xl',
+];
+
+const screens = {
+    tablet: '40rem', // 640 px
+    'desktop-xs': '64rem', // 1024 px
+    'desktop-sm': '80rem', // 1360 px
+    desktop: '85.375rem', // 1366
+    'desktop-lg': '90rem', // 1440
+    'desktop-xl': '120rem', // 1920
+    // layout sizes
+    'layout-1280': '80rem',
+    'layout-1440': '90rem',
+    'layout-1536': '96rem',
+    'layout-1680': '105rem',
+    'layout-1920': '120rem',
+    'layout-2560': '160rem',
+};
+
+const getScreenSize = (size) => screens[size];
+const getScreenSizeInRem = (size) => {
+    const screen = getScreenSize(size);
+    return parseInt(screen.replace('rem', ''), 10);
+};
+const getScreenSizeInPixels = (size) => {
+    const rem = getScreenSizeInRem(size);
+    return rem * 16;
+};
+const isBiggerThanScreen = (size) => {
+    const pixels = getScreenSizeInPixels(size);
+    return window.innerWidth > pixels;
+};
+const isSmallerThanScreen = (size) => {
+    const pixels = getScreenSizeInPixels(size);
+    return window.innerWidth < pixels;
+};
+const isBetweenScreens = (smallSize, bigSize) => {
+    return isBiggerThanScreen(smallSize) && isSmallerThanScreen(bigSize);
+};
+const isTouchDevice = () => !!window.matchMedia('(pointer: coarse)').matches;
+const isMobile = () => isTouchDevice() || isSmallerThanScreen('tablet');
+const isTablet = () => isBetweenScreens('tablet', 'desktop-xs');
+const isDesktop = () => isBiggerThanScreen('desktop-xs');
+
+exports.getScreenSize = getScreenSize;
+exports.getScreenSizeInPixels = getScreenSizeInPixels;
+exports.getScreenSizeInRem = getScreenSizeInRem;
+exports.isBetweenScreens = isBetweenScreens;
+exports.isBiggerThanScreen = isBiggerThanScreen;
+exports.isDesktop = isDesktop;
+exports.isMobile = isMobile;
+exports.isSmallerThanScreen = isSmallerThanScreen;
+exports.isTablet = isTablet;
+exports.isTouchDevice = isTouchDevice;
+exports.screens = screens;
+exports.tableColumSizesOptions = tableColumSizesOptions;
+
+//# sourceMappingURL=screens-e5439aeb.js.map

package/dist/cjs/screens-e5439aeb.js.map

@@ -0,0 +1 @@
+{"file":"screens-e5439aeb.js","mappings":";;MAEa,sBAAsB,GAAG;IACrC,SAAS;IACT,QAAQ;IACR,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,YAAY;IACZ,YAAY;;;ACTb,gBAAe;IACd,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,OAAO;IACrB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,OAAO;IACrB,YAAY,EAAE,QAAQ;;IAGtB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,QAAQ;CACvB;;MCXY,aAAa,GAAG,CAAC,IAAgB,KAAK,OAAO,CAAC,IAAI,EAAE;MAEpD,kBAAkB,GAAG,CAAC,IAAgB;IAClD,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACnC,OAAO,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAChD,EAAE;MAEW,qBAAqB,GAAG,CAAC,IAAgB;IACrD,MAAM,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,GAAG,GAAG,EAAE,CAAC;AACjB,EAAE;MAEW,kBAAkB,GAAG,CAAC,IAAgB;IAClD,MAAM,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC3C,OAAO,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC;AACnC,EAAE;MAEW,mBAAmB,GAAG,CAAC,IAAgB;IACnD,MAAM,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC3C,OAAO,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC;AACnC,EAAE;MAEW,gBAAgB,GAAG,CAC/B,SAAqB,EACrB,OAAmB;IAEnB,OAAO,kBAAkB,CAAC,SAAS,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACtE,EAAE;MAEW,aAAa,GAAG,MAC5B,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,QAAQ;MACrC,QAAQ,GAAG,MAAM,aAAa,EAAE,IAAI,mBAAmB,CAAC,QAAQ,EAAE;MAClE,QAAQ,GAAG,MAAM,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE;MAC1D,SAAS,GAAG,MAAM,kBAAkB,CAAC,YAAY;;;;;;;;;;;;;;;","names":[],"sources":["src/types/constants.ts","src/tailwind/theme/screens.ts","src/utils/screens.ts"],"sourcesContent":["import { TableColumnSizes } from './table';\n\nexport const tableColumSizesOptions = [\n\t'default',\n\t'tablet',\n\t'desktop-xs',\n\t'desktop-sm',\n\t'desktop',\n\t'desktop-lg',\n\t'desktop-xl',\n] as (keyof TableColumnSizes)[];\n","export default {\n\ttablet: '40rem', // 640 px\n\t'desktop-xs': '64rem', // 1024 px\n\t'desktop-sm': '80rem', // 1360 px\n\tdesktop: '85.375rem', // 1366\n\t'desktop-lg': '90rem', // 1440\n\t'desktop-xl': '120rem', // 1920\n\n\t// layout sizes\n\t'layout-1280': '80rem',\n\t'layout-1440': '90rem',\n\t'layout-1536': '96rem',\n\t'layout-1680': '105rem',\n\t'layout-1920': '120rem',\n\t'layout-2560': '160rem',\n};\n","import screens from '../tailwind/theme/screens';\n\nexport type ScreenSize = keyof typeof screens;\n\nexport const getScreenSize = (size: ScreenSize) => screens[size];\n\nexport const getScreenSizeInRem = (size: ScreenSize) => {\n\tconst screen = getScreenSize(size);\n\treturn parseInt(screen.replace('rem', ''), 10);\n};\n\nexport const getScreenSizeInPixels = (size: ScreenSize) => {\n\tconst rem = getScreenSizeInRem(size);\n\treturn rem * 16;\n};\n\nexport const isBiggerThanScreen = (size: ScreenSize) => {\n\tconst pixels = getScreenSizeInPixels(size);\n\treturn window.innerWidth > pixels;\n};\n\nexport const isSmallerThanScreen = (size: ScreenSize) => {\n\tconst pixels = getScreenSizeInPixels(size);\n\treturn window.innerWidth < pixels;\n};\n\nexport const isBetweenScreens = (\n\tsmallSize: ScreenSize,\n\tbigSize: ScreenSize\n) => {\n\treturn isBiggerThanScreen(smallSize) && isSmallerThanScreen(bigSize);\n};\n\nexport const isTouchDevice = () =>\n\t!!window.matchMedia('(pointer: coarse)').matches;\nexport const isMobile = () => isTouchDevice() || isSmallerThanScreen('tablet');\nexport const isTablet = () => isBetweenScreens('tablet', 'desktop-xs');\nexport const isDesktop = () => isBiggerThanScreen('desktop-xs');\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "components/atoms/icon/icon.component.js",
+    "components/molecules/field-container/field-container.component.js",
     "components/atoms/icon-deprecated/icon.component.js",
     "components/atoms/illustration/illustration.component.js",
     "components/molecules/page-size-select/page-size-select.component.js",
@@ -57,8 +58,8 @@
     "components/molecules/cropper/cropper.component.js",
     "components/molecules/datepicker/datepicker.component.js",
     "components/molecules/dropdown/dropdown.component.js",
+    "components/molecules/field/field.component.js",
     "components/molecules/input-error/input-error.component.js",
-    "components/molecules/input-group/input-group.component.js",
     "components/molecules/navigation-item/navigation-item.component.js",
     "components/molecules/navigation-section/navigation-section.component.js",
     "components/molecules/pagination/pagination.component.js",
@@ -75,8 +76,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.3.0",
-    "typescriptVersion": "5.1.6"
+    "version": "4.23.0",
+    "typescriptVersion": "5.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/atoms/avatar/avatar.component.js

@@ -1,145 +1,152 @@
 import { h, Host } from "@stencil/core";
 import { cva } from "class-variance-authority";
 const avatar = cva([
-  'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none font-bold text-black-teal-300',
+    'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none font-bold text-black-teal-300',
 ], {
-  variants: {
-    size: {
-      xs: 'h-4 text-xxs',
-      sm: 'h-6 text-xs',
-      base: 'h-8 text-base',
-      lg: 'h-10 text-xl',
-      xl: 'h-14 text-xl',
-      '2xl': 'h-20 text-4xl',
-      '3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',
-      '4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',
+    variants: {
+        size: {
+            xs: 'h-4 text-xxs',
+            sm: 'h-6 text-xs',
+            base: 'h-8 text-base',
+            lg: 'h-10 text-xl',
+            xl: 'h-14 text-xl',
+            '2xl': 'h-20 text-4xl',
+            '3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',
+            '4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',
+        },
     },
-  },
 });
 export class Avatar {
-  constructor() {
-    this.size = 'base';
-    this.defaultImage = undefined;
-    this.src = undefined;
-    this.letters = undefined;
-    this._src = undefined;
-    this._failed = false;
-  }
-  onSrchChange(src) {
-    this._failed = false;
-    this._src = src;
-  }
-  componentWillLoad() {
-    this.onSrchChange(this.src);
-    if (!this._src) {
-      this._setFailed();
+    constructor() {
+        this.size = 'base';
+        this.defaultImage = undefined;
+        this.src = undefined;
+        this.letters = undefined;
+        this._src = undefined;
+        this._failed = false;
+    }
+    onSrchChange(src) {
+        this._failed = false;
+        this._src = src;
+    }
+    componentWillLoad() {
+        this.onSrchChange(this.src);
+        if (!this._src) {
+            this._setFailed();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'fff35b491e4adc3a00cc3b15006c1017853a7f5e', class: avatar({
+                size: this.size,
+            }) }, this._failed ? (this.letters?.[0] ?? ' ') : (h("img", { src: this._src, class: 'z-0 aspect-branding h-full rounded-full object-cover', onError: () => this._setFailed() }))));
+    }
+    _setFailed() {
+        this._failed = true;
+        this._src = undefined;
+    }
+    static get is() { return "p-avatar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["avatar.component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["avatar.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl'",
+                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"base\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'base'"
+            },
+            "defaultImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The default image to show on errors"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-image",
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image used for the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "src",
+                "reflect": false
+            },
+            "letters": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The letters to show on the empty state variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "letters",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_src": {},
+            "_failed": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "onSrchChange"
+            }];
     }
-  }
-  render() {
-    var _a, _b;
-    return (h(Host, { class: avatar({
-        size: this.size,
-      }) }, this._failed ? ((_b = (_a = this.letters) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ' ') : (h("img", { src: this._src, class: 'z-0 aspect-branding h-full rounded-full object-cover', onError: () => this._setFailed() }))));
-  }
-  _setFailed() {
-    this._failed = true;
-    this._src = undefined;
-  }
-  static get is() { return "p-avatar"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["avatar.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["avatar.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl'",
-          "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"base\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the avatar"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'base'"
-      },
-      "defaultImage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default image to show on errors"
-        },
-        "attribute": "default-image",
-        "reflect": false
-      },
-      "src": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The image used for the avatar"
-        },
-        "attribute": "src",
-        "reflect": false
-      },
-      "letters": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The letters to show on the empty state variant"
-        },
-        "attribute": "letters",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_src": {},
-      "_failed": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "src",
-        "methodName": "onSrchChange"
-      }];
-  }
 }
 //# sourceMappingURL=avatar.component.js.map

package/dist/collection/components/atoms/avatar/avatar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/avatar/avatar.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,MAAM,GAAG,GAAG,CACjB;EACC,wLAAwL;CACxL,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,aAAa;MACjB,IAAI,EAAE,eAAe;MACrB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,cAAc;MAClB,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE,yCAAyC;MAChD,KAAK,EAAE,yCAAyC;KAChD;GACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,MAAM;;gBAYP,MAAM;;;;;mBAkBmB,KAAK;;EAGzC,YAAY,CAAC,GAAW;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;EACjB,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;EACF,CAAC;EAED,MAAM;;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,IAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,mCAAI,GAAG,CACxB,CAAC,CAAC,CAAC,CACH,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAC/B,CACF,CACK,CACP,CAAC;EACH,CAAC;EAEO,UAAU;IACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst avatar = cva(\n\t[\n\t\t'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none font-bold text-black-teal-300',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'h-4 text-xxs',\n\t\t\t\tsm: 'h-6 text-xs',\n\t\t\t\tbase: 'h-8 text-base',\n\t\t\t\tlg: 'h-10 text-xl',\n\t\t\t\txl: 'h-14 text-xl',\n\t\t\t\t'2xl': 'h-20 text-4xl',\n\t\t\t\t'3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',\n\t\t\t\t'4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setFailed();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={avatar({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._failed ? (\n\t\t\t\t\tthis.letters?.[0] ?? ' '\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tclass='z-0 aspect-branding h-full rounded-full object-cover'\n\t\t\t\t\t\tonError={() => this._setFailed()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setFailed() {\n\t\tthis._failed = true;\n\t\tthis._src = undefined;\n\t}\n}\n"]}
+{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/avatar/avatar.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,MAAM,GAAG,GAAG,CACjB;IACC,wLAAwL;CACxL,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,cAAc;YAClB,EAAE,EAAE,aAAa;YACjB,IAAI,EAAE,eAAe;YACrB,EAAE,EAAE,cAAc;YAClB,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,yCAAyC;YAChD,KAAK,EAAE,yCAAyC;SAChD;KACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,MAAM;;oBAYP,MAAM;;;;;uBAkBmB,KAAK;;IAGzC,YAAY,CAAC,GAAW;QACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;IACjB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aACf,CAAC,IAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CACxB,CAAC,CAAC,CAAC,CACH,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAC/B,CACF,CACK,CACP,CAAC;IACH,CAAC;IAEO,UAAU;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst avatar = cva(\n\t[\n\t\t'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none font-bold text-black-teal-300',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'h-4 text-xxs',\n\t\t\t\tsm: 'h-6 text-xs',\n\t\t\t\tbase: 'h-8 text-base',\n\t\t\t\tlg: 'h-10 text-xl',\n\t\t\t\txl: 'h-14 text-xl',\n\t\t\t\t'2xl': 'h-20 text-4xl',\n\t\t\t\t'3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',\n\t\t\t\t'4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setFailed();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={avatar({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._failed ? (\n\t\t\t\t\tthis.letters?.[0] ?? ' '\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tclass='z-0 aspect-branding h-full rounded-full object-cover'\n\t\t\t\t\t\tonError={() => this._setFailed()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setFailed() {\n\t\tthis._failed = true;\n\t\tthis._src = undefined;\n\t}\n}\n"]}

package/dist/collection/components/atoms/avatar-group/avatar-group.component.js

@@ -1,42 +1,44 @@
 import { h, Host } from "@stencil/core";
 export class AvatarGroup {
-  constructor() {
-    this.extra = undefined;
-  }
-  render() {
-    return (h(Host, { class: 'p-avatar-group flex items-center -space-x-1 overflow-hidden' }, h("slot", null), this.extra && (h("span", { class: 'pl-3 text-sm text-black-teal-300' }, "+", this.extra))));
-  }
-  static get is() { return "p-avatar-group"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["avatar-group.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["avatar-group.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "extra": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The amount to show after the avatars"
-        },
-        "attribute": "extra",
-        "reflect": false
-      }
-    };
-  }
+    constructor() {
+        this.extra = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'e3c1973bf7d96e664d7c4b7c7100128cba511659', class: 'p-avatar-group flex items-center -space-x-1 overflow-hidden' }, h("slot", { key: 'cde697efca3b8cbcdc2e264a33976b3e45bc5020' }), this.extra && (h("span", { key: '834e84a0170b36613fba9dcf237bf2c16d4cb6f7', class: 'pl-3 text-sm text-black-teal-300' }, "+", this.extra))));
+    }
+    static get is() { return "p-avatar-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["avatar-group.component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["avatar-group.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "extra": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount to show after the avatars"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "extra",
+                "reflect": false
+            }
+        };
+    }
 }
 //# sourceMappingURL=avatar-group.component.js.map

package/dist/collection/components/atoms/avatar-group/avatar-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/avatar-group/avatar-group.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,WAAW;;;;EAMvB,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,6DAA6D;MACxE,eAAQ;MAEP,IAAI,CAAC,KAAK,IAAI,CACd,YAAM,KAAK,EAAC,kCAAkC;;QAAG,IAAI,CAAC,KAAK,CAAQ,CACnE,CACK,CACP,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-avatar-group',\n\tstyleUrl: 'avatar-group.component.scss',\n})\nexport class AvatarGroup {\n\t/**\n\t * The amount to show after the avatars\n\t */\n\t@Prop() extra: number;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-avatar-group flex items-center -space-x-1 overflow-hidden'>\n\t\t\t\t<slot />\n\n\t\t\t\t{this.extra && (\n\t\t\t\t\t<span class='pl-3 text-sm text-black-teal-300'>+{this.extra}</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"avatar-group.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/avatar-group/avatar-group.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,WAAW;;;;IAMvB,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAC,6DAA6D;YACxE,8DAAQ;YAEP,IAAI,CAAC,KAAK,IAAI,CACd,6DAAM,KAAK,EAAC,kCAAkC;;gBAAG,IAAI,CAAC,KAAK,CAAQ,CACnE,CACK,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-avatar-group',\n\tstyleUrl: 'avatar-group.component.scss',\n})\nexport class AvatarGroup {\n\t/**\n\t * The amount to show after the avatars\n\t */\n\t@Prop() extra: number;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-avatar-group flex items-center -space-x-1 overflow-hidden'>\n\t\t\t\t<slot />\n\n\t\t\t\t{this.extra && (\n\t\t\t\t\t<span class='pl-3 text-sm text-black-teal-300'>+{this.extra}</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}