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

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

@@ -0,0 +1,242 @@
+import { Component, Event, h, Host, Prop, Watch, } from '@stencil/core';
+export class Pagination {
+  constructor() {
+    /**
+     * The current page
+     */
+    this.page = 1;
+    /**
+     * The amount of items per page
+     */
+    this.pageSize = 12;
+    this._pages = [];
+    this._set = [];
+    this._nextClick = () => {
+      const nextPage = this.page + 1;
+      if (nextPage > this._pages[this._pages.length - 1]) {
+        return;
+      }
+      this._changePage(nextPage);
+    };
+    this._pageClick = (p) => this._changePage(p);
+    this._generateSet = (range = 1, enableBoundaries = true) => {
+      const totalPages = this._pages.length;
+      if (!totalPages) {
+        return [];
+      }
+      let start = this.page - range;
+      let end = this.page + range;
+      if (end > totalPages) {
+        end = totalPages;
+        start = totalPages - range * 2;
+        start = start < 1 ? 1 : start;
+      }
+      if (start <= 1) {
+        start = 1;
+        end = Math.min(range * 2 + 1, totalPages);
+      }
+      const set = [];
+      const previous = {
+        type: 'previous',
+        value: h("p-icon", { variant: "chevron", rotate: 90 }),
+      };
+      const next = {
+        type: 'next',
+        value: h("p-icon", { variant: "chevron", rotate: -90 }),
+      };
+      // Disable page range, display all the pages
+      if (range === null) {
+        const p = this._pages.map((p) => ({
+          type: 'page',
+          value: p,
+        }));
+        return enableBoundaries ? [previous, ...p, next] : p;
+      }
+      if (enableBoundaries) {
+        set.push(previous);
+      }
+      if (start <= 3) {
+        for (let i = 1; i < start; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'page',
+          value: 1,
+        });
+        set.push({
+          type: 'ellipsis',
+          value: 'ellipsis',
+        });
+      }
+      for (let i = start; i <= end; i++) {
+        set.push({
+          type: 'page',
+          value: this._pages[i - 1],
+        });
+      }
+      if (end >= totalPages - 2) {
+        for (let i = end + 1; i <= totalPages; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'ellipsis',
+        });
+        set.push({
+          type: 'page',
+          value: this._pages[this._pages.length - 1],
+        });
+      }
+      if (enableBoundaries) {
+        set.push(next);
+      }
+      return set;
+    };
+  }
+  componentWillRender() {
+    this._generate();
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "p-pagination" }, (_a = this._set) === null || _a === void 0 ? void 0 : _a.map((p) => {
+      if (p.type === 'previous' || p.type === 'next') {
+        return (h("p-pagination-item", { onClick: () => p.type === 'previous'
+            ? this._previousClick()
+            : this._nextClick() }, p.value));
+      }
+      if (p.type === 'ellipsis') {
+        return h("p-pagination-item", null, "...");
+      }
+      return (h("p-pagination-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
+    })));
+  }
+  pageChangeHandler() {
+    this._generate();
+  }
+  _generate() {
+    var _a;
+    this._pages = this._generatePages();
+    this._set = this._generateSet();
+    if (this.page > ((_a = this._pages) === null || _a === void 0 ? void 0 : _a.length)) {
+      this._changePage(this._pages.length);
+    }
+  }
+  _changePage(p) {
+    if (!p) {
+      return;
+    }
+    this.page = p;
+    this.pageChange.emit(this.page);
+  }
+  _previousClick() {
+    const previousPage = this.page - 1;
+    if (previousPage < this._pages[0]) {
+      return;
+    }
+    this._changePage(previousPage);
+  }
+  _generatePages() {
+    if (!this.total || !this.pageSize) {
+      return [];
+    }
+    const pages = Math.ceil(this.total / this.pageSize);
+    return new Array(pages).fill(undefined).map((_, i) => i + 1);
+  }
+  static get is() { return "p-pagination"; }
+  static get originalStyleUrls() { return {
+    "$": ["pagination.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pagination.component.css"]
+  }; }
+  static get properties() { return {
+    "page": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current page"
+      },
+      "attribute": "page",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "pageSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The amount of items per page"
+      },
+      "attribute": "page-size",
+      "reflect": false,
+      "defaultValue": "12"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total amount of items"
+      },
+      "attribute": "total",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "pageChange",
+      "name": "pageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "page",
+      "methodName": "pageChangeHandler"
+    }, {
+      "propName": "pageSize",
+      "methodName": "pageChangeHandler"
+    }, {
+      "propName": "total",
+      "methodName": "pageChangeHandler"
+    }]; }
+}

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.config.js

@@ -13,7 +13,7 @@ module.exports = {
     dropShadow: shadows,
     borderRadius,
     extend: {
-      grid,
+      ...grid,
       scale,
       rotate,
     },

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/components/counter.component.js

@@ -0,0 +1,30 @@
+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 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/dropdown-menu-container.component.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dropdownMenuContainerComponentCss = "/*! 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}.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}.visible{visibility:visible!important}.static{position:static!important}";
+
+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 };

package/dist/components/icon.component.js

@@ -85,6 +85,24 @@ const car = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const checklist = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1526.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="checklist" transform="translate(0.000000, 1318.000000)">
+                        <g id="⚛️-Atoms/icons/checklist" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L3,0 C3.55228475,-1.01453063e-16 4,0.44771525 4,1 L4,3 C4,3.55228475 3.55228475,4 3,4 L1,4 C0.44771525,4 6.76353751e-17,3.55228475 0,3 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M7,1 L15,1 C15.5522847,1 16,1.44771525 16,2 C16,2.55228475 15.5522847,3 15,3 L7,3 C6.44771525,3 6,2.55228475 6,2 C6,1.44771525 6.44771525,1 7,1 Z M7,7 L15,7 C15.5522847,7 16,7.44771525 16,8 C16,8.55228475 15.5522847,9 15,9 L7,9 C6.44771525,9 6,8.55228475 6,8 C6,7.44771525 6.44771525,7 7,7 Z M7,13 L15,13 C15.5522847,13 16,13.4477153 16,14 C16,14.5522847 15.5522847,15 15,15 L7,15 C6.44771525,15 6,14.5522847 6,14 C6,13.4477153 6.44771525,13 7,13 Z M1,6 L3,6 C3.55228475,6 4,6.44771525 4,7 L4,9 C4,9.55228475 3.55228475,10 3,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 L0,7 C-6.76353751e-17,6.44771525 0.44771525,6 1,6 Z M1,12 L3,12 C3.55228475,12 4,12.4477153 4,13 L4,15 C4,15.5522847 3.55228475,16 3,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13 C-6.76353751e-17,12.4477153 0.44771525,12 1,12 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const checkmark = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>EB3016C2-A1DF-47ED-937C-697443FD3F3C@1x</title>
@@ -283,6 +301,26 @@ const filter = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const folder = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1622.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="projects" transform="translate(0.000000, 1414.000000)">
+                        <g id="default" transform="translate(243.000000, 0.000000)">
+                            <g id="⚛️-Atoms/icons/projects" transform="translate(0.000000, 1.000000)">
+                                <path d="M1,0 L5.58578644,0 C5.85100293,-1.26996481e-15 6.10535684,0.10535684 6.29289322,0.292893219 L7.70710678,1.70710678 C7.89464316,1.89464316 8.14899707,2 8.41421356,2 L15,2 C15.5522847,2 16,2.44771525 16,3 L16,13 C16,13.5522847 15.5522847,14 15,14 L1,14 C0.44771525,14 6.76353751e-17,13.5522847 0,13 L0,1 C-6.76353751e-17,0.44771525 0.44771525,-4.5365845e-16 1,0 Z" id="Combined-Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const grid = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>0B846487-E152-44B1-B058-D5E90C916406@1x</title>
@@ -319,6 +357,24 @@ const headset = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const integration = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1590.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="koppelingen" transform="translate(0.000000, 1382.000000)">
+                        <g id="⚛️-Atoms/icons/koppelingen" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M12.5,9 C13.0522847,9 13.5,9.44771525 13.5,10 L13.5,11.5 L15,11.5 C15.5522847,11.5 16,11.9477153 16,12.5 C16,13.0522847 15.5522847,13.5 15,13.5 L13.5,13.5 L13.5,15 C13.5,15.5522847 13.0522847,16 12.5,16 C11.9477153,16 11.5,15.5522847 11.5,15 L11.5,13.5 L10,13.5 C9.44771525,13.5 9,13.0522847 9,12.5 C9,11.9477153 9.44771525,11.5 10,11.5 L11.5,11.5 L11.5,10 C11.5,9.44771525 11.9477153,9 12.5,9 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const list = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>680FABDB-CA3A-4C86-A241-59CFA9DF98BD@1x</title>
@@ -633,6 +689,42 @@ const tachometer = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const task = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1494.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="task" transform="translate(0.000000, 1286.000000)">
+                        <g id="⚛️-Atoms/icons/task" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M12.5824067,4.15329919 C12.2191499,3.89109673 11.7287641,3.97276881 11.4568977,4.34074885 L11.4568977,4.34074885 L6.727,10.74 L4.48421797,8.28557606 C4.2033448,7.97804494 3.76334089,7.9304898 3.43345171,8.15708233 L3.34641434,8.22568799 L3.28382396,8.28198278 C3.11439636,8.43435761 3.01189474,8.65551042 3.00097092,8.89225358 C2.9900471,9.12899673 3.07168957,9.35990745 3.22626317,9.52945129 L3.22626317,9.52945129 L6.15124558,12.7298698 C6.40900695,13.0122133 6.80862496,13.0809955 7.13592632,12.899353 C7.28904921,12.8466515 7.42987755,12.7460396 7.5366165,12.6011104 L7.5366165,12.6011104 L12.8282975,5.43729943 C12.9657189,5.25134381 13.0245403,5.01239255 12.9905957,4.77799163 C12.9566512,4.5435907 12.8330171,4.33498317 12.6494679,4.20240741 L12.6494679,4.20240741 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
+const template = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1558.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="template" transform="translate(0.000000, 1350.000000)">
+                        <g id="⚛️-Atoms/icons/template" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M8,3 C7.44771525,3 7,3.44771525 7,4 L7,4 L7,7 L4,7 C3.44771525,7 3,7.44771525 3,8 C3,8.55228475 3.44771525,9 4,9 L4,9 L7,9 L7,12 C7,12.5522847 7.44771525,13 8,13 C8.55228475,13 9,12.5522847 9,12 L9,12 L9,9 L12,9 C12.5522847,9 13,8.55228475 13,8 C13,7.44771525 12.5522847,7 12,7 L12,7 L9,7 L9,4 C9,3.44771525 8.55228475,3 8,3 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const tool = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>3412434A-3941-4BA7-AF31-A18B70C22235@1x</title>
@@ -729,6 +821,7 @@ const icons = {
   bread,
   calendar,
   car,
+  checklist,
   checkmark,
   chevron,
   clock,
@@ -740,8 +833,10 @@ const icons = {
   explanation,
   eye,
   filter,
+  folder,
   grid,
   headset,
+  integration,
   list,
   location,
   megaphone,
@@ -759,6 +854,8 @@ const icons = {
   settings,
   sick,
   tachometer,
+  task,
+  template,
   tool,
   trash,
   turn,
@@ -770,10 +867,6 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
     /**
      * The size of the icon, using tailwind sizes
      */

package/dist/components/index.d.ts

@@ -1,8 +1,22 @@
 /* paperless custom elements */
+export { Avatar as PAvatar } from '../types/components/p-avatar/p-avatar';
 export { Button as PButton } from '../types/components/p-button/p-button';
+export { Counter as PCounter } from '../types/components/p-counter/p-counter';
+export { Divider as PDivider } from '../types/components/p-divider/p-divider';
+export { Dropdown as PDropdown } from '../types/components/p-dropdown/p-dropdown';
+export { DropdownMenuContainer as PDropdownMenuContainer } from '../types/components/p-dropdown-menu-container/p-dropdown-menu-container';
+export { DropdownMenuItem as PDropdownMenuItem } from '../types/components/p-dropdown-menu-item/p-dropdown-menu-item';
+export { Helper as PHelper } from '../types/components/p-helper/p-helper';
 export { Icon as PIcon } from '../types/components/p-icon/p-icon';
 export { Illustration as PIllustration } from '../types/components/p-illustration/p-illustration';
+export { InfoPanel as PInfoPanel } from '../types/components/p-info-panel/p-info-panel';
 export { Loader as PLoader } from '../types/components/p-loader/p-loader';
+export { NavigationItem as PNavigationItem } from '../types/components/p-navigation-item/p-navigation-item';
+export { Pagination as PPagination } from '../types/components/p-pagination/p-pagination';
+export { PaginationItem as PPaginationItem } from '../types/components/p-pagination-item/p-pagination-item';
+export { SegmentContainer as PSegmentContainer } from '../types/components/p-segment-container/p-segment-container';
+export { SegmentItem as PSegmentItem } from '../types/components/p-segment-item/p-segment-item';
+export { Status as PStatus } from '../types/components/p-status/p-status';
 export { Tooltip as PTooltip } from '../types/components/p-tooltip/p-tooltip';
 
 /**

package/dist/components/index.js

@@ -1,6 +1,20 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { PAvatar, defineCustomElement as defineCustomElementPAvatar } from './p-avatar.js';
 export { PButton, defineCustomElement as defineCustomElementPButton } from './p-button.js';
+export { PCounter, defineCustomElement as defineCustomElementPCounter } from './p-counter.js';
+export { PDivider, defineCustomElement as defineCustomElementPDivider } from './p-divider.js';
+export { PDropdown, defineCustomElement as defineCustomElementPDropdown } from './p-dropdown.js';
+export { PDropdownMenuContainer, defineCustomElement as defineCustomElementPDropdownMenuContainer } from './p-dropdown-menu-container.js';
+export { PDropdownMenuItem, defineCustomElement as defineCustomElementPDropdownMenuItem } from './p-dropdown-menu-item.js';
+export { PHelper, defineCustomElement as defineCustomElementPHelper } from './p-helper.js';
 export { PIcon, defineCustomElement as defineCustomElementPIcon } from './p-icon.js';
 export { PIllustration, defineCustomElement as defineCustomElementPIllustration } from './p-illustration.js';
+export { PInfoPanel, defineCustomElement as defineCustomElementPInfoPanel } from './p-info-panel.js';
 export { PLoader, defineCustomElement as defineCustomElementPLoader } from './p-loader.js';
+export { PNavigationItem, defineCustomElement as defineCustomElementPNavigationItem } from './p-navigation-item.js';
+export { PPagination, defineCustomElement as defineCustomElementPPagination } from './p-pagination.js';
+export { PPaginationItem, defineCustomElement as defineCustomElementPPaginationItem } from './p-pagination-item.js';
+export { PSegmentContainer, defineCustomElement as defineCustomElementPSegmentContainer } from './p-segment-container.js';
+export { PSegmentItem, defineCustomElement as defineCustomElementPSegmentItem } from './p-segment-item.js';
+export { PStatus, defineCustomElement as defineCustomElementPStatus } from './p-status.js';
 export { PTooltip, defineCustomElement as defineCustomElementPTooltip } from './p-tooltip.js';