@paperless/core 0.1.0-alpha.30 → 0.1.0-alpha.301

package/dist/collection/index.js

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

package/dist/collection/tailwind/animation.js

@@ -0,0 +1,87 @@
+module.exports = {
+    animation: {
+        'fade-in': 'forwards fadeIn .2s ease',
+        'fade-out': 'forwards fadeOut .2s ease',
+        'slide-in-right': 'forwards slideInRight .5s ease',
+        'slide-in-left': 'forwards slideInLeft .5s ease',
+        'slide-in-top': 'forwards slideInTop .25 ease',
+        'slide-in-bottom': 'forwards slideInBottom .5s ease',
+        'slide-in-right-small': 'forwards slideInRightSmall .5s ease',
+        'slide-in-left-small': 'forwards slideInLeftSmall .5s ease',
+        'slide-in-top-small': 'forwards slideInTopSmall .5s ease',
+        'slide-in-bottom-small': 'forwards slideInBottomSmall .5s ease',
+        'slide-out-right': 'forwards slideOutRight .2s ease',
+        'slide-out-left': 'forwards slideOutLeft .2s ease',
+        'slide-out-top': 'forwards slideOutTop .2s ease',
+        'slide-out-bottom': 'forwards slideOutBottom .5s ease',
+        'slide-out-top-small': 'forwards slideOutTopSmall .5s ease',
+        'slide-out-bottom-small': 'forwards slideOutBottomSmall .5s ease',
+    },
+
+    keyframes: {
+        fadeIn: {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 100 },
+        },
+        fadeOut: {
+            '0%': { opacity: 100 },
+            '100%': { opacity: 0 },
+        },
+        slideInRight: {
+            '0%': { transform: 'translateX(100%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInLeft: {
+            '0%': { transform: 'translateX(-100%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInTop: {
+            '0%': { transform: 'translateY(-100%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInBottom: {
+            '0%': { transform: 'translateY(100%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInRightSmall: {
+            '0%': { transform: 'translateX(20%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInLeftSmall: {
+            '0%': { transform: 'translateX(-20%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInTopSmall: {
+            '0%': { transform: 'translateY(-20%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInBottomSmall: {
+            '0%': { transform: 'translateY(20%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideOutRight: {
+            '0%': { transform: 'translateX(0)' },
+            '100%': { transform: 'translateX(100%)' },
+        },
+        slideOutLeft: {
+            '0%': { transform: 'translateX(0)' },
+            '100%': { transform: 'translateX(-100%)' },
+        },
+        slideOutTop: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(-100%)' },
+        },
+        slideOutBottom: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(100%)' },
+        },
+        slideOutTopSmall: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(-20%)' },
+        },
+        slideOutBottomSmall: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(20%)' },
+        },
+    },
+};

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

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

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,13 @@
 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',
+    'button-primary-hover': '0px 2px 4px rgba(44,75,169, 0.4)',
+    'button-secondary-hover': '0px 2px 4px rgba(176,178,203, 0.4)',
 };

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,17 @@
+module.exports = {
+    dropdown: 200,
+
+    'navbar-backdrop': 290,
+    navbar: 300,
+
+    backdrop: 490,
+
+    drawer: 500,
+    'drawer-header': 501,
+
+    modal: 600,
+
+    tooltip: 601,
+
+    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/icons.js

@@ -2,6 +2,7 @@ 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';
@@ -22,7 +23,9 @@ 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';
@@ -31,10 +34,13 @@ import person from '../assets/icons/person.svg';
 import plus from '../assets/icons/plus.svg';
 import question from '../assets/icons/question.svg';
 import receipt from '../assets/icons/receipt.svg';
+import reload from '../assets/icons/reload.svg';
 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';
@@ -48,6 +54,7 @@ export default {
   attachment,
   bread,
   calendar,
+  camera,
   car,
   checklist,
   checkmark,
@@ -68,7 +75,9 @@ export default {
   list,
   location,
   megaphone,
+  menu,
   minus,
+  more,
   negative,
   pagination,
   payment,
@@ -76,11 +85,14 @@ export default {
   person,
   plus,
   question,
+  reload,
   receipt,
   report,
   search,
   settings,
   sick,
+  signout,
+  switch: switchIcon,
   tachometer,
   task,
   template,

package/dist/collection/utils/illustrations.js

@@ -1,5 +1,8 @@
 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 emptyStateOverview from '../assets/illustrations/empty-state-overview.svg';
+import emptyStateSearch from '../assets/illustrations/empty-state-search.svg';
 import expenses from '../assets/illustrations/expenses.svg';
 import functions from '../assets/illustrations/functions.svg';
 import questions from '../assets/illustrations/questions.svg';
@@ -8,6 +11,8 @@ import timeOff from '../assets/illustrations/time-off.svg';
 import upgradeToHr from '../assets/illustrations/upgrade-to-hr.svg';
 export default {
   'empty-state': emptyState,
+  'empty-state-search': emptyStateSearch,
+  'empty-state-overview': emptyStateOverview,
   departments,
   expenses,
   functions,
@@ -15,4 +20,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,6 @@
+export * from './child-of';
+export * from './icons';
+export * from './illustrations';
+export * from './localization';
+export * from './object-get-by-path';
+export * from './transformers';

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];
+  }
+  try {
+    strings = await fetchLocaleStringsForComponent(componentName, componentLanguage);
+  }
+  catch (e) {
+    console.warn(`no locale for ${componentName} (${componentLanguage}) loading default locale en.`);
+    strings = await fetchLocaleStringsForComponent(componentName, 'en');
+  }
+  if (!cache[componentName]) {
+    cache[componentName] = {};
+  }
+  if (!cache[componentName][componentLanguage]) {
+    cache[componentName][componentLanguage] = {};
+  }
+  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/collection/utils/transformers.js

@@ -0,0 +1,4 @@
+export const camelToSnakeCase = (str) => str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+export const snakeToCamelCase = (str) => str
+  .toLowerCase()
+  .replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''));

package/dist/components/backdrop.component.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.w-full{width:100%!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}.items-end{align-items:flex-end!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.bg-storm-dark{--tw-bg-opacity:1!important;background-color:rgb(39 40 56/var(--tw-bg-opacity))!important}.p-0{padding:0!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{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}.bg-storm-dark\\/50{background-color:rgba(39,40,56,.5)!important}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}";
+
+const Backdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clicked = createEvent(this, "clicked", 7);
+    this.variant = 'modal';
+    this.applyBlur = false;
+    this.closing = false;
+    this.scrollLock = true;
+  }
+  componentWillLoad() {
+    if (this.scrollLock) {
+      document.querySelector(':root').classList.add('scroll-lock');
+    }
+  }
+  disconnectedCallback() {
+    if (this.scrollLock) {
+      document.querySelector(':root').classList.remove('scroll-lock');
+    }
+  }
+  render() {
+    return (h(Host, { class: `p-backdrop variant-${this.variant} ${this.applyBlur && 'blurred'} ${this.closing && 'closing'}` }, h("div", { class: "content-container" }, h("slot", null))));
+  }
+  handleClick(ev) {
+    if (ev.target !== this._el) {
+      return;
+    }
+    this.clicked.emit(ev);
+  }
+  get _el() { return this; }
+  static get style() { return backdropComponentCss; }
+}, [1, "p-backdrop", {
+    "variant": [1],
+    "applyBlur": [4, "apply-blur"],
+    "closing": [4],
+    "scrollLock": [4, "scroll-lock"]
+  }, [[2, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-backdrop"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-backdrop":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Backdrop);
+      }
+      break;
+  } });
+}
+
+export { Backdrop as B, defineCustomElement as d };

package/dist/components/button.component.js

@@ -0,0 +1,98 @@
+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}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.mb-14{margin-bottom:3.5rem!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-full{height:100%!important}.h-6{height:1.5rem!important}.h-8{height:2rem!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-1{width:.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink: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}.cursor-pointer{cursor:pointer!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}.self-center{align-self:center!important}.justify-self-end{justify-self:end!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}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!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-dark,.text-storm-medium{--tw-text-opacity:1!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/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}*{box-sizing:border-box}p-button{height:2.5rem;width:auto}p-button,p-button a,p-button button{display:flex;font-size:1rem;line-height:1.5rem}p-button a,p-button button{align-items:center;border:0;border-radius:.375rem;cursor:pointer;font-weight:600;height:100%;justify-content:center;outline:0;width:100%;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{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);padding-left:1rem;padding-right:1rem}p-button a.variant-primary.active,p-button a.variant-primary:active,p-button a.variant-secondary.active,p-button a.variant-secondary:active,p-button button.variant-primary.active,p-button button.variant-primary:active,p-button button.variant-secondary.active,p-button button.variant-secondary:active{--tw-drop-shadow:drop-shadow(transparent);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))}@media (pointer:fine){p-button a.variant-primary:hover:not([disabled]),p-button button.variant-primary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 2px 4px rgba(44,75,169,.4));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-secondary,p-button button.variant-secondary{--tw-border-opacity:1!important;--tw-bg-opacity:1;--tw-text-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))}@media (pointer:fine){p-button a.variant-secondary:hover:not([disabled]),p-button button.variant-secondary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 2px 4px rgba(176,178,203,.4));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-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[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.should-inherit-text,p-button button.should-inherit-text{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}p-button.has-icon-only{width:2.5rem}p-button.has-icon-only a,p-button.has-icon-only button{padding:0}p-button.has-icon-only a>p-icon:first-child,p-button.has-icon-only button>p-icon:first-child{margin-left:0;margin-right:0}p-button.size-small{height:2rem}p-button.size-small a,p-button.size-small button{font-size:.875rem;line-height:1.25rem}p-button.size-small a>p-icon,p-button.size-small button>p-icon{font-size:1rem;line-height:1.5rem}p-button.size-small.has-icon-only{width:2rem}.-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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}.max-w-\\[20rem\\]{max-width:20rem!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}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.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);
+    this.variant = 'primary';
+    this.href = undefined;
+    this.target = undefined;
+    this.size = 'medium';
+    this.loading = false;
+    this.chevron = false;
+    this.chevronPosition = 'end';
+    this.disabled = false;
+    this.icon = undefined;
+    this.iconOnly = false;
+    this.iconPosition = 'end';
+    this.iconFlip = undefined;
+    this.iconRotate = undefined;
+    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 size-${this.size} ${this.iconOnly && 'has-icon-only'} ` }, h(VariableTag, { class: `variant-${this.variant}  icon-position-${this.iconPosition} ${this.chevron && 'has-chevron'} chevron-position-${this.chevronPosition} ${this.inheritText && 'should-inherit-text'}`, 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) {
+      ev.preventDefault();
+      return;
+    }
+    this.onClick.emit(ev);
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  static get style() { return buttonComponentCss; }
+}, [4, "p-button", {
+    "variant": [1],
+    "href": [1],
+    "target": [1],
+    "size": [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 };