@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

package/dist/collection/index.js

@@ -1 +1,2 @@
-export {};
+export * from './types';
+export * from './utils';

package/dist/collection/tailwind/animation.js

@@ -0,0 +1,17 @@
+module.exports = {
+    animation: {
+        'fade-in': 'fadeIn .2s ease-in-out',
+        'fade-out': 'fadeOut .2s ease-in-out',
+    },
+
+    keyframes: {
+        fadeIn: {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 100 },
+        },
+        fadeOut: {
+            '0%': { opacity: 100 },
+            '100%': { opacity: 0 },
+        },
+    },
+};

package/dist/collection/tailwind/backdrop-blur.js

@@ -0,0 +1,3 @@
+module.exports = {
+    xs: '2px',
+};

package/dist/collection/tailwind/border-radius.js

@@ -1,9 +1,10 @@
 module.exports = {
-  xlarge: '0.5625rem',
-  large: '0.375rem',
-  DEFAULT: '0.25rem',
-  medium: '0.25rem',
-  small: '0.125rem',
-  none: 0,
-  round: '100%',
+    xxlarge: '0.75rem',
+    xlarge: '0.5625rem',
+    large: '0.375rem',
+    DEFAULT: '0.25rem',
+    medium: '0.25rem',
+    small: '0.125rem',
+    none: 0,
+    round: '100%',
 };

package/dist/collection/tailwind/height.js

@@ -0,0 +1,3 @@
+module.exports = {
+    unset: 'unset',
+};

package/dist/collection/tailwind/screens.js

@@ -0,0 +1,8 @@
+module.exports = {
+    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
+};

package/dist/collection/tailwind/shadows.js

@@ -1,7 +1,11 @@
 module.exports = {
-  1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
-  2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
-  3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
-  4: ['0px 0.3125rem 1rem rgba(0,24,98, 0.08)', '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)'],
-  5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
+    2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
+    3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
+    4: [
+        '0px 0.3125rem 1rem rgba(0,24,98, 0.08)',
+        '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)',
+    ],
+    5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    transparent: 'transparent',
 };

package/dist/collection/tailwind/spacing.js

@@ -0,0 +1,10 @@
+module.exports = {
+    // default variant layout
+    'content-mobile-x': '1rem',
+    'content-mobile-y': '1.5rem',
+
+    'content-desktop-x': '2rem',
+    'content-desktop-y': '2rem',
+
+    18: '4.5rem',
+};

package/dist/collection/tailwind/typography.js

@@ -0,0 +1,21 @@
+module.exports = {
+    fontSize: {
+        'h1': '2.5rem',
+        'h2': '2rem',
+        'h3': '1.5rem',
+        'h4': '1.25rem',
+        'h5': '1.125rem',
+        'body': '1rem',
+        'body-2': '1.125rem',
+        'xxs': '0.6875rem'
+    },
+    lineHeight: {
+        'h1': '3rem',
+        'h2': '2.5rem',
+        'h3': '1.875rem',
+        'h4': '1.625rem',
+        'h5': '1.375rem',
+        'body': '1.75rem',
+        'body-2': '1.875rem',
+    }
+}

package/dist/collection/tailwind/width.js

@@ -0,0 +1,18 @@
+module.exports = {
+    unset: 'unset',
+
+    // default variant
+    'sidebar-mobile': '100%',
+    'sidebar-desktop': '15rem',
+
+    'content-mobile': '100%',
+    'content-desktop-xs': '100%',
+    'content-desktop-sm': '100%',
+    'content-desktop': '69rem',
+    'content-desktop-lg': '69rem',
+    'content-desktop-xl': '69rem',
+
+    // login variant
+    'sidebar-desktop-login': '100%',
+    'content-desktop-login': '30rem',
+};

package/dist/collection/tailwind/z-index.js

@@ -0,0 +1,10 @@
+module.exports = {
+    navbar: 300,
+
+    backdrop: 400,
+
+    drawer: 500,
+    modal: 600,
+
+    toast: 700,
+};

package/dist/collection/tailwind.config.js

@@ -1,23 +1,37 @@
 const colors = require('./tailwind/colors');
 const shadows = require('./tailwind/shadows');
 const borderRadius = require('./tailwind/border-radius');
-const grid = require('./tailwind/grid');
 const scale = require('./tailwind/scale');
 const rotate = require('./tailwind/rotate');
+const typeograhpy = require('./tailwind/typography');
+const backdropBlur = require('./tailwind/backdrop-blur');
+const zIndex = require('./tailwind/z-index');
+const animation = require('./tailwind/animation');
+const screens = require('./tailwind/screens');
+const width = require('./tailwind/width');
+const height = require('./tailwind/height');
+const spacing = require('./tailwind/spacing');
 
 module.exports = {
-  important: true,
-  theme: {
-    colors,
-    boxShadow: shadows,
-    dropShadow: shadows,
-    borderRadius,
-    extend: {
-      ...grid,
-      scale,
-      rotate,
+    important: true,
+    theme: {
+        colors,
+        boxShadow: shadows,
+        dropShadow: shadows,
+        borderRadius,
+        extend: {
+            ...animation,
+            scale,
+            rotate,
+            fontSize: typeograhpy.fontSize,
+            lineHeight: typeograhpy.lineHeight,
+            backdropBlur,
+            zIndex,
+            screens,
+            width,
+            height,
+            spacing,
+        },
     },
-  },
-  variants: {},
-  plugins: [require('@tailwindcss/aspect-ratio')],
+    plugins: [require('@tailwindcss/aspect-ratio')],
 };

package/dist/collection/types/index.js

@@ -0,0 +1,2 @@
+export * from './table';
+export * from './tailwind';

package/dist/collection/types/table.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/tailwind.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/child-of.js

@@ -0,0 +1,5 @@
+export const childOf = (c, p) => {
+  while ((c = c.parentNode) && c !== p)
+    ;
+  return !!c;
+};

package/dist/collection/utils/icons.js

@@ -2,7 +2,9 @@ import arrow from '../assets/icons/arrow.svg';
 import attachment from '../assets/icons/attachment.svg';
 import bread from '../assets/icons/bread.svg';
 import calendar from '../assets/icons/calendar.svg';
+import camera from '../assets/icons/camera.svg';
 import car from '../assets/icons/car.svg';
+import checklist from '../assets/icons/checklist.svg';
 import checkmark from '../assets/icons/checkmark.svg';
 import chevron from '../assets/icons/chevron.svg';
 import clock from '../assets/icons/clock.svg';
@@ -14,12 +16,16 @@ import envelope from '../assets/icons/envelope.svg';
 import explanation from '../assets/icons/explanation.svg';
 import eye from '../assets/icons/eye.svg';
 import filter from '../assets/icons/filter.svg';
+import folder from '../assets/icons/folder.svg';
 import grid from '../assets/icons/grid.svg';
 import headset from '../assets/icons/headset.svg';
+import integration from '../assets/icons/integration.svg';
 import list from '../assets/icons/list.svg';
 import location from '../assets/icons/location.svg';
 import megaphone from '../assets/icons/megaphone.svg';
+import menu from '../assets/icons/menu.svg';
 import minus from '../assets/icons/minus.svg';
+import more from '../assets/icons/more.svg';
 import negative from '../assets/icons/negative.svg';
 import pagination from '../assets/icons/pagination.svg';
 import payment from '../assets/icons/payment.svg';
@@ -32,7 +38,11 @@ import report from '../assets/icons/report.svg';
 import search from '../assets/icons/search.svg';
 import settings from '../assets/icons/settings.svg';
 import sick from '../assets/icons/sick.svg';
+import signout from '../assets/icons/signout.svg';
+import switchIcon from '../assets/icons/switch.svg';
 import tachometer from '../assets/icons/tachometer.svg';
+import task from '../assets/icons/task.svg';
+import template from '../assets/icons/template.svg';
 import tool from '../assets/icons/tool.svg';
 import trash from '../assets/icons/trash.svg';
 import turn from '../assets/icons/turn.svg';
@@ -43,7 +53,9 @@ export default {
   attachment,
   bread,
   calendar,
+  camera,
   car,
+  checklist,
   checkmark,
   chevron,
   clock,
@@ -55,12 +67,16 @@ export default {
   explanation,
   eye,
   filter,
+  folder,
   grid,
   headset,
+  integration,
   list,
   location,
   megaphone,
+  menu,
   minus,
+  more,
   negative,
   pagination,
   payment,
@@ -73,7 +89,11 @@ export default {
   search,
   settings,
   sick,
+  signout,
+  switch: switchIcon,
   tachometer,
+  task,
+  template,
   tool,
   trash,
   turn,

package/dist/collection/utils/illustrations.js

@@ -1,5 +1,6 @@
 import emptyState from '../assets/illustrations/default-empty-state.svg';
 import departments from '../assets/illustrations/departments.svg';
+import email from '../assets/illustrations/e-mail.svg';
 import expenses from '../assets/illustrations/expenses.svg';
 import functions from '../assets/illustrations/functions.svg';
 import questions from '../assets/illustrations/questions.svg';
@@ -15,4 +16,5 @@ export default {
   'sick-leave': sickLeave,
   'time-off': timeOff,
   'upgrade-to-hr': upgradeToHr,
+  'e-mail': email,
 };

package/dist/collection/utils/index.js

@@ -0,0 +1,5 @@
+export * from './child-of';
+export * from './icons';
+export * from './illustrations';
+export * from './localization';
+export * from './object-get-by-path';

package/dist/collection/utils/localization.js

@@ -0,0 +1,55 @@
+const getComponentClosestLanguage = (element) => {
+  const closestElement = element.closest('[lang]');
+  const htmlElement = document.documentElement;
+  return closestElement
+    ? closestElement.lang
+    : (htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.lang)
+      ? htmlElement.lang
+      : 'en';
+};
+const fetchLocaleStringsForComponent = (componentName, locale) => {
+  return new Promise((resolve, reject) => {
+    fetch(`/assets/i18n/${componentName}.i18n.${locale}.json`).then((result) => {
+      if (result.ok) {
+        resolve(result.json());
+        return;
+      }
+      reject();
+    }, () => reject());
+  });
+};
+const cache = {};
+export const getLocaleComponentStrings = async (element) => {
+  var _a;
+  let componentName = element.tagName.toLowerCase().replace('p-', '');
+  let componentLanguage = getComponentClosestLanguage(element);
+  let strings;
+  if ((_a = cache[componentName]) === null || _a === void 0 ? void 0 : _a[componentLanguage]) {
+    return cache[componentName][componentLanguage];
+  }
+  if (!cache[componentName]) {
+    cache[componentName] = {};
+  }
+  if (!cache[componentName][componentLanguage]) {
+    cache[componentName][componentLanguage] = {};
+  }
+  try {
+    strings = await fetchLocaleStringsForComponent(componentName, componentLanguage);
+  }
+  catch (e) {
+    console.warn(`no locale for ${componentName} (${componentLanguage}) loading default locale en.`);
+    strings = await fetchLocaleStringsForComponent(componentName, 'en');
+  }
+  cache[componentName][componentLanguage] = strings;
+  return strings;
+};
+export const formatTranslation = (str, data) => {
+  if (!str || !data) {
+    return str;
+  }
+  for (const key of Object.keys(data)) {
+    const regex = `{${key}}`;
+    str = str.replace(new RegExp(regex, 'g'), data[key]);
+  }
+  return str;
+};

package/dist/collection/utils/object-get-by-path.js

@@ -0,0 +1,8 @@
+export const objectGetByPath = (obj, path, defaultValue = undefined) => {
+  const travel = (regexp) => String.prototype.split
+    .call(path, regexp)
+    .filter(Boolean)
+    .reduce((res, key) => res !== null && res !== undefined ? res[key] : res, obj);
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+  return result === undefined || result === obj ? defaultValue : result;
+};

package/dist/components/button.component.js

@@ -0,0 +1,125 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.component.js';
+import { d as defineCustomElement$1 } from './loader.component.js';
+
+const buttonComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-10{height:2.5rem!important}.h-8{height:2rem!important}.h-6{height:1.5rem!important}.w-1{width:.25rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-full{width:100%!important}.w-auto{width:auto!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{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))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{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))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{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))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{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))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{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))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{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))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{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))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{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))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{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))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{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))!important}.scale-y-flip{--tw-scale-y:-1!important}.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))!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.rounded-large{border-radius:.375rem!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo{background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.bg-indigo,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.outline{outline-style:solid!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}p-button{display:inline-block}p-button>a,p-button>button{align-items:center;border:0;border-radius:.375rem;cursor:pointer;display:flex;font-weight:600;height:2.5rem;justify-content:center;line-height:1rem;outline:0;width:auto;will-change:filter}p-button>a.icon-position-end>p-icon:not(.chevron),p-button>a>p-loader,p-button>button.icon-position-end>p-icon:not(.chevron),p-button>button>p-loader{margin-left:.5rem}p-button>a.icon-position-start>p-icon:not(.chevron),p-button>button.icon-position-start>p-icon:not(.chevron){margin-right:.5rem}p-button>a.variant-primary,p-button>a.variant-secondary,p-button>button.variant-primary,p-button>button.variant-secondary{padding-left:1rem;padding-right:1rem}p-button>a.variant-primary:hover:not([disabled]),p-button>a.variant-secondary:hover:not([disabled]),p-button>button.variant-primary:hover:not([disabled]),p-button>button.variant-secondary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}p-button>a.variant-primary,p-button>button.variant-primary{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}p-button>a.variant-primary.active:not([disabled]),p-button>a.variant-primary:active:not([disabled]),p-button>button.variant-primary.active:not([disabled]),p-button>button.variant-primary:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(44 75 169/var(--tw-bg-opacity))}p-button>a.variant-secondary,p-button>button.variant-secondary{--tw-border-opacity:1!important;--tw-text-opacity:1;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:1px!important;color:rgb(81 83 107/var(--tw-text-opacity))}p-button>a.variant-secondary.active:not([disabled]),p-button>a.variant-secondary:active:not([disabled]),p-button>button.variant-secondary.active:not([disabled]),p-button>button.variant-secondary:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity))}p-button>a.variant-text,p-button>button.variant-text{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button>a.variant-text:hover:not([disabled]),p-button>button.variant-text:hover:not([disabled]){--tw-text-opacity:1;color:rgb(44 75 169/var(--tw-text-opacity))}p-button>a.size-small,p-button>button.size-small{font-size:.875rem;height:2rem;line-height:1.25rem}p-button>a.width-full,p-button>button.width-full{width:100%}p-button>a[disabled],p-button>button[disabled]{opacity:.4}p-button>a.has-chevron.chevron-position-start,p-button>button.has-chevron.chevron-position-start{padding-left:.5rem}p-button>a.has-chevron.chevron-position-start>p-icon.chevron,p-button>button.has-chevron.chevron-position-start>p-icon.chevron{margin-right:.5rem}p-button>a.has-chevron.chevron-position-end,p-button>button.has-chevron.chevron-position-end{padding-right:.5rem}p-button>a.has-chevron.chevron-position-end>p-icon.chevron,p-button>button.has-chevron.chevron-position-end>p-icon.chevron{margin-left:.5rem}p-button>a.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child,p-button>button.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button>a.has-icon-only,p-button>button.has-icon-only{padding-left:.5rem;padding-right:.5rem}p-button>a.has-icon-only>p-icon:first-child,p-button>button.has-icon-only>p-icon:first-child{margin-left:0;margin-right:0}p-button>a.should-inherit-text,p-button>button.should-inherit-text{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{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))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.w-1\\/12{width:8.333333%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
+
+const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.onClick = createEvent(this, "onClick", 7);
+    /**
+     * The variant of the button
+     */
+    this.variant = 'primary';
+    /**
+     * The size of the button
+     */
+    this.size = 'medium';
+    /**
+     * The width of the button
+     */
+    this.width = 'auto';
+    /**
+     * Wether to show a loader or not
+     */
+    this.loading = false;
+    /**
+     * Wether to show a chevron or not
+     */
+    this.chevron = false;
+    /**
+     * Chevron position
+     */
+    this.chevronPosition = 'end';
+    /**
+     * Wether the button is disabled
+     */
+    this.disabled = false;
+    /**
+     * Wether the button is icon only
+     */
+    this.iconOnly = false;
+    /**
+     * Icon position
+     */
+    this.iconPosition = 'end';
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
+  }
+  render() {
+    let loaderColor = 'white';
+    switch (this.variant) {
+      case 'secondary':
+        loaderColor = 'storm';
+        break;
+      case 'text':
+        loaderColor = 'indigo';
+        break;
+    }
+    const VariableTag = this.variant === 'text' ? 'a' : 'button';
+    return (h(Host, { class: `p-button ${this.width === 'full' && 'w-full'}` }, h(VariableTag, { class: `variant-${this.variant} size-${this.size} ${this.width === 'full' && 'w-full'} icon-position-${this.iconPosition} ${this.chevron && 'has-chevron'} chevron-position-${this.chevronPosition} ${this.iconOnly && 'has-icon-only'} ${this.inheritText && 'should-inherit-text'} ${this._el.classList.value}`, disabled: this.disabled, href: this.href, target: this.target }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { class: "chevron", variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
+      this.iconPosition === 'start' &&
+      this._getIcon(), h("slot", null), this.icon &&
+      this.iconPosition === 'end' &&
+      this._getIcon(), this.loading && h("p-loader", { color: loaderColor }), this.chevron && this.chevronPosition === 'end' && (h("p-icon", { class: "chevron", variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })))));
+  }
+  handleClick(ev) {
+    if (this.loading || this.disabled) {
+      return;
+    }
+    this.onClick.emit(ev);
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  get _el() { return this; }
+  static get style() { return buttonComponentCss; }
+}, [4, "p-button", {
+    "variant": [1],
+    "href": [1],
+    "target": [1],
+    "size": [1],
+    "width": [1],
+    "loading": [4],
+    "chevron": [8],
+    "chevronPosition": [1, "chevron-position"],
+    "disabled": [4],
+    "icon": [1],
+    "iconOnly": [4, "icon-only"],
+    "iconPosition": [1, "icon-position"],
+    "iconFlip": [1, "icon-flip"],
+    "iconRotate": [2, "icon-rotate"],
+    "inheritText": [4, "inherit-text"]
+  }, [[2, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-button", "p-icon", "p-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Button);
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Button as B, defineCustomElement as d };

package/dist/components/counter.component.js

@@ -1,18 +1,29 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const counterComponentCss = "/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.flex{display:flex!important}.h-4{height:1rem!important}.justify-center{justify-content:center!important}.bg-indigo{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-bold{font-weight:700!important}.uppercase{text-transform:uppercase!important}.leading-3{line-height:.75rem!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-radius:.5625rem;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-size:.75rem;font-weight:700;height:1rem;justify-content:center;line-height:.75rem;padding-left:.5rem;padding-right:.5rem;text-transform:uppercase}.static{position:static!important}";
+const counterComponentCss = ".static{position:static!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.min-w-\\[1rem\\]{min-width:1rem!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.rounded-round{border-radius:100%!important}.bg-indigo{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.bg-positive-light{--tw-bg-opacity:1!important;background-color:rgb(229 255 242/var(--tw-bg-opacity))!important}.bg-unbiased-light{--tw-bg-opacity:1!important;background-color:rgb(255 246 220/var(--tw-bg-opacity))!important}.bg-negative-light{--tw-bg-opacity:1!important;background-color:rgb(255 204 211/var(--tw-bg-opacity))!important}.p-0{padding:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-bold{font-weight:700!important}.uppercase{text-transform:uppercase!important}.leading-3{line-height:.75rem!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-radius:.5625rem;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-size:.75rem;font-weight:700;height:1rem;justify-content:center;line-height:.75rem;padding-left:.5rem;padding-right:.5rem;text-transform:uppercase}:host(.variant-negative),:host(.variant-positive),:host(.variant-unbiased){border-radius:.25rem;min-width:1rem;padding-left:.25rem;padding-right:.25rem}:host(.variant-positive){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(229 255 242/var(--tw-bg-opacity));color:rgb(29 163 96/var(--tw-text-opacity))}:host(.variant-unbiased){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 246 220/var(--tw-bg-opacity));color:rgb(255 162 49/var(--tw-text-opacity))}:host(.variant-negative){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 204 211/var(--tw-bg-opacity));color:rgb(138 15 29/var(--tw-text-opacity))}:host(.size-mini){border-radius:100%;height:.5rem;min-width:0;padding:0;width:.5rem}:host(.size-mini) slot{display:none}";
 
 const Counter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /**
+     * The variant of the counter
+     */
+    this.variant = 'info';
+    /**
+     * The size of the counter
+     */
+    this.size = 'default';
   }
   render() {
-    return (h(Host, { class: "p-counter" }, h("slot", null)));
+    return (h(Host, { class: `p-counter variant-${this.variant} size-${this.size}` }, h("slot", null)));
   }
   static get style() { return counterComponentCss; }
-}, [1, "p-counter"]);
+}, [1, "p-counter", {
+    "variant": [1],
+    "size": [1]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;