@paperless/core 0.1.0-alpha.5 → 0.1.0-alpha.50

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

@@ -0,0 +1,107 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class Stepper {
+  constructor() {
+    /**
+     * The currently active step
+     */
+    this.activeStep = 1;
+    /**
+     * The direction of the stepper
+     */
+    this.direction = 'horizontal';
+  }
+  componentWillRender() {
+    const activeStep = this.activeStep - 1;
+    this._steps = this._generateSteps(activeStep);
+    console.log(this._steps);
+  }
+  render() {
+    return h(Host, { class: "p-stepper" }, this._steps);
+  }
+  _generateSteps(activeStep) {
+    const elements = [];
+    const steps = this._el.querySelectorAll('p-stepper-step');
+    for (let i = 0; i < (steps === null || steps === void 0 ? void 0 : steps.length); i++) {
+      const step = steps.item(i);
+      if (i > 0) {
+        elements.push(h("p-stepper-line", { direction: this.direction, active: i <= activeStep }));
+      }
+      const newStep = (h("p-stepper-step", { active: i === activeStep, finished: i < activeStep, direction: this.direction, align: i === 0
+          ? 'start'
+          : i === (steps === null || steps === void 0 ? void 0 : steps.length) - 1
+            ? 'end'
+            : 'center' }, step.innerHTML));
+      elements.push(newStep);
+    }
+    return elements;
+    // return this._el
+    //     .querySelectorAll('p-stepper-step')
+    //     .map((child: any, index) => {
+    //         return (
+    //             <>
+    //                 {index > 0 && (
+    //                     <div
+    //                         className={`flex-auto transform ${
+    //                             direction === 'horizontal'
+    //                                 ? 'border-t-2 mb-3 -translate-y-1/2'
+    //                                 : 'border-r-2 ml-2 -translate-x-1/2'
+    //                         } transition duration-500 ease-in-out ${
+    //                             index <= activeStep
+    //                                 ? 'border-indigo'
+    //                                 : 'border-mystic-dark'
+    //                         }`}
+    //                     ></div>
+    //                 )}
+    //                 {child}
+    //             </>
+    //         );
+    //     });
+  }
+  static get is() { return "p-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper.component.css"]
+  }; }
+  static get properties() { return {
+    "activeStep": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The currently active step"
+      },
+      "attribute": "active-step",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+}

package/dist/collection/components/organisms/modal/modal.component.js

@@ -0,0 +1,111 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class Modal {
+  constructor() {
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+    /**
+     * Wether to show the modal or not
+     */
+    this.show = false;
+    this._hasFooterSlot = false;
+  }
+  componentWillLoad() {
+    this._hasFooterSlot = !!this._el.querySelector('[slot="footer"]');
+  }
+  render() {
+    if (!this.show) {
+      return;
+    }
+    const headerContent = h("slot", { name: "header" });
+    const bodyContent = h("slot", { name: "content" });
+    const footerContent = h("slot", { name: "footer" });
+    return (h(Host, { class: "p-modal" },
+      h("p-modal-backdrop", null,
+        h("p-modal-container", { size: this.size },
+          h("p-modal-header", null, this.header ? this.header : headerContent),
+          h("p-modal-body", { variant: this.variant }, bodyContent),
+          this._hasFooterSlot && (h("p-modal-footer", null, footerContent))))));
+  }
+  static get is() { return "p-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the modal container"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'md'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'table'",
+        "resolved": "\"default\" | \"table\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the modal body"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The Header of the modal"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the modal or not"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+}

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,8 +1,10 @@
 module.exports = {
-  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/grid.js

@@ -1,6 +1,26 @@
 module.exports = {
-  13: 'repeat(13, minmax(0, 1fr))',
-  14: 'repeat(14, minmax(0, 1fr))',
-  15: 'repeat(15, minmax(0, 1fr))',
-  16: 'repeat(16, minmax(0, 1fr))',
+  gridTemplateColumns: {
+    '13': 'repeat(13, minmax(0, 1fr))',
+    '14': 'repeat(14, minmax(0, 1fr))',
+    '15': 'repeat(15, minmax(0, 1fr))',
+    '16': 'repeat(16, minmax(0, 1fr))',
+  },
+  gridColumn: {
+    'span-13': 'span 13 / span 13',
+    'span-14': 'span 14 / span 14',
+    'span-15': 'span 15 / span 15',
+    'span-16': 'span 16 / span 16',
+  },
+  gridColumnStart: {
+    '13': '13',
+    '14': '14',
+    '15': '15',
+    '16': '16',
+  },
+  gridColumnEnd: {
+    '13': '13',
+    '14': '14',
+    '15': '15',
+    '16': '16',
+  },
 };

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/z-index.js

@@ -0,0 +1,3 @@
+module.exports = {
+    modal: 500,
+};

package/dist/collection/tailwind.config.js

@@ -4,20 +4,28 @@ 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');
 
 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: {
+            ...grid,
+            ...animation,
+            scale,
+            rotate,
+            fontSize: typeograhpy.fontSize,
+            lineHeight: typeograhpy.lineHeight,
+            backdropBlur,
+            zIndex,
+        },
     },
-  },
-  variants: {},
-  plugins: [require('@tailwindcss/aspect-ratio')],
+    plugins: [require('@tailwindcss/aspect-ratio')],
 };

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

@@ -3,6 +3,7 @@ import attachment from '../assets/icons/attachment.svg';
 import bread from '../assets/icons/bread.svg';
 import calendar from '../assets/icons/calendar.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,8 +15,10 @@ 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';
@@ -33,6 +36,8 @@ import search from '../assets/icons/search.svg';
 import settings from '../assets/icons/settings.svg';
 import sick from '../assets/icons/sick.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';
@@ -44,6 +49,7 @@ export default {
   bread,
   calendar,
   car,
+  checklist,
   checkmark,
   chevron,
   clock,
@@ -55,8 +61,10 @@ export default {
   explanation,
   eye,
   filter,
+  folder,
   grid,
   headset,
+  integration,
   list,
   location,
   megaphone,
@@ -74,6 +82,8 @@ export default {
   settings,
   sick,
   tachometer,
+  task,
+  template,
   tool,
   trash,
   turn,

package/dist/collection/utils/types.js

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

package/dist/components/counter.component.js

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const counterComponentCss = ".static{position:static!important}.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}";
+
+const Counter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { class: "p-counter" }, h("slot", null)));
+  }
+  static get style() { return counterComponentCss; }
+}, [1, "p-counter"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-counter"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-counter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Counter);
+      }
+      break;
+  } });
+}
+
+export { Counter as C, defineCustomElement as d };

package/dist/components/divider.component.js

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dividerComponentCss = ".static{position:static!important}.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.block{display:block!important}.h-px{height:1px!important}.w-80{width:20rem!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}.container{width:100%}@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}}:host{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));display:block;height:1px;margin-bottom:.5rem;margin-top:.5rem;width:100%}.w-\\[33\\.5rem\\]{width:33.5rem!important}.w-\\[38rem\\]{width:38rem!important}.w-\\[47\\.5rem\\]{width:47.5rem!important}.w-\\[57\\.5rem\\]{width:57.5rem!important}";
+
+const Divider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h(Host, { class: "p-divider" });
+  }
+  static get style() { return dividerComponentCss; }
+}, [1, "p-divider"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+export { Divider as D, defineCustomElement as d };

package/dist/components/dropdown-menu-container.component.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dropdownMenuContainerComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.flex{display:flex!important}.min-w-\\[222px\\]{min-width:222px!important}.flex-col{flex-direction:column!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!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}p-dropdown-menu-container{--tw-bg-opacity:1;--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));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.75rem;display:flex;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);flex-direction:column;min-width:222px;padding-bottom:.5rem;padding-top:.5rem}";
+
+const DropdownMenuContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: "p-dropdown-menu-container" }, h("slot", null)));
+  }
+  static get style() { return dropdownMenuContainerComponentCss; }
+}, [4, "p-dropdown-menu-container"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-dropdown-menu-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-dropdown-menu-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DropdownMenuContainer);
+      }
+      break;
+  } });
+}
+
+export { DropdownMenuContainer as D, defineCustomElement as d };