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

package/dist/collection/components/atoms/stepper-line/stepper-line.component.js

@@ -0,0 +1,62 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class StepperLine {
+  constructor() {
+    /**
+     * Wether the line is active
+     */
+    this.active = false;
+    /**
+     * The direction of the stepper line
+     */
+    this.direction = 'horizontal';
+  }
+  render() {
+    return h(Host, { class: "p-stepper-line" });
+  }
+  static get is() { return "p-stepper-line"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper-line.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper-line.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the line is active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "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 line"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/stepper-step/stepper-step.component.css

@@ -0,0 +1,59 @@
+:host {
+  @apply flex items-end justify-center relative;
+}
+:host .content {
+  @apply whitespace-nowrap;
+  @apply text-sm font-semibold text-storm-light;
+}
+:host .circle {
+  @apply transition duration-500 ease-in-out;
+  @apply flex items-center justify-center;
+  @apply rounded-round h-4 w-4;
+  @apply bg-mystic-dark text-white;
+}
+:host .circle p-icon {
+  @apply flex !important;
+  font-size: 0.625rem;
+}
+
+:host([direction=horizontal]) {
+  @apply h-10;
+}
+:host([direction=horizontal]) .content {
+  @apply absolute top-0;
+  @apply order-1;
+}
+:host([direction=horizontal]) .circle {
+  @apply order-2;
+}
+
+:host([direction=vertical]) {
+  @apply h-4;
+}
+:host([direction=vertical]) .content {
+  @apply ml-4 order-2;
+}
+:host([direction=vertical]) .circle {
+  @apply order-1;
+}
+
+:host([active]) .content,
+:host([finished]) .content {
+  @apply text-indigo;
+}
+:host([active]) .circle,
+:host([finished]) .circle {
+  @apply bg-indigo;
+}
+
+:host([direction=horizontal][align=start]) .content {
+  @apply left-0;
+}
+
+:host([direction=horizontal][align=end]) .content {
+  @apply right-0;
+}
+
+:host([direction=horizontal][align=center]) .content {
+  @apply left-1/2 text-center transform -translate-x-1/2;
+} .static{position:static!important}.mb-3{margin-bottom:.75rem!important}.ml-2{margin-left:.5rem!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{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}.-translate-x-1\/2{--tw-translate-x:-50%!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}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-indigo,.border-mystic-dark{--tw-border-opacity:1!important}.border-mystic-dark{border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}

package/dist/collection/components/atoms/stepper-step/stepper-step.component.js

@@ -0,0 +1,109 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class StepperStep {
+  constructor() {
+    /**
+     * The alignment of the step content
+     */
+    this.align = 'center';
+    /**
+     * The direction of the stepper step
+     */
+    this.direction = 'horizontal';
+    /**
+     * Wether the step is finished
+     */
+    this.finished = false;
+    /**
+     * Wether the step is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: "p-stepper-step" },
+      h("div", { class: "content" },
+        h("slot", null)),
+      h("div", { class: "circle" }, this.finished && h("p-icon", { variant: "checkmark" }))));
+  }
+  static get is() { return "p-stepper-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper-step.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper-step.component.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'center' | 'end'",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The alignment of the step content"
+      },
+      "attribute": "align",
+      "reflect": true,
+      "defaultValue": "'center'"
+    },
+    "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 step"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    },
+    "finished": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the step is finished"
+      },
+      "attribute": "finished",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the step is active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/tooltip/tooltip.component.css

@@ -1,34 +1,40 @@
 :host {
-  @apply cursor-pointer;
+  @apply cursor-pointer inline-block;
 }
-:host .tooltip {
-  @apply bg-storm hidden text-xs font-medium text-white py-1 px-3 rounded drop-shadow-1;
+:host .popover {
+  @apply bg-white hidden text-xs font-medium py-2 px-3 rounded drop-shadow-4;
   max-width: 14.5rem;
 }
-:host .tooltip[data-show] {
+:host .popover.variant-hover, :host .popover.variant-error {
+  @apply bg-storm text-white py-1;
+}
+:host .popover.variant-error {
+  @apply bg-negative;
+}
+:host .popover[data-show] {
   @apply block;
 }
-:host .tooltip .arrow,
-:host .tooltip .arrow::before {
+:host .popover .arrow,
+:host .popover .arrow::before {
   background: inherit;
   @apply absolute w-2 h-2;
 }
-:host .tooltip .arrow {
+:host .popover .arrow {
   visibility: hidden;
 }
-:host .tooltip .arrow::before {
+:host .popover .arrow::before {
   @apply visible transform rotate-45;
   content: "";
 }
-:host .tooltip[data-popper-placement^=top] > .arrow {
+:host .popover[data-popper-placement^=top] > .arrow {
   @apply -bottom-1;
 }
-:host .tooltip[data-popper-placement^=bottom] > .arrow {
+:host .popover[data-popper-placement^=bottom] > .arrow {
   @apply -top-1;
 }
-:host .tooltip[data-popper-placement^=left] > .arrow {
+:host .popover[data-popper-placement^=left] > .arrow {
   @apply -right-1;
 }
-:host .tooltip[data-popper-placement^=right] > .arrow {
+:host .popover[data-popper-placement^=right] > .arrow {
   @apply -left-1;
-}
+} .visible{visibility:visible!important}.static{position:static!important}.blur{--tw-blur:blur(8px)!important;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}.static{position:static!important}.visible{visibility:visible!important}.static{position:static!important}.blur{--tw-blur:blur(8px)!important;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}

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

@@ -3,60 +3,104 @@ import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
 export class Tooltip {
   constructor() {
     /**
-     * The content of the tooltip
+     * The variant of the popover
      */
-    this.content = null;
+    this.variant = 'hover';
     /**
-     * The content of the tooltip
+     * The content of the popover
+     */
+    this.popover = null;
+    /**
+     * The content of the popover
      */
     this.placement = 'top';
     /**
-     * Wether to force show the tooltip
+     * Wether to show the popover
+     */
+    this.show = false;
+    /**
+     * Wether to someone can manually close the popover
      */
-    this.forceShow = false;
+    this.canManuallyClose = true;
     this._loaded = false;
   }
   componentShouldUpdate() {
     this._setOptions();
-    if (this.forceShow) {
+    if (this._loaded && this.show) {
       this._show();
     }
   }
   render() {
-    return (h(Host, { class: "p-tooltip" },
-      h("slot", null),
-      h("div", { class: "tooltip", role: "tooltip", ref: el => this._load(el) },
-        this.content,
+    return (h(Host, { class: "p-popover" },
+      h("slot", { name: "content" }),
+      h("div", { class: `popover variant-${this.variant}`, role: "popover", ref: (el) => this._load(el) },
+        this.popover ? this.popover : h("slot", { name: "popover" }),
         h("div", { class: "arrow", "data-popper-arrow": true }))));
   }
+  clickHandler() {
+    if (this.variant !== 'click') {
+      return;
+    }
+    if (this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    this._show();
+  }
+  documentClickHandler() {
+    if (this.variant !== 'click' || !this.canManuallyClose) {
+      return;
+    }
+    if (!this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    this._hide();
+  }
+  mouseEnterHandler() {
+    if (this.variant !== 'hover') {
+      return;
+    }
+    this._show();
+  }
+  mouseLeaveHandler() {
+    if (this.show || this.variant !== 'hover') {
+      return;
+    }
+    this._hide();
+  }
   _show() {
     if (!this._loaded) {
       return;
     }
-    // Make the tooltip visible
-    this._tooltip.setAttribute('data-show', '');
+    // Make the popover visible
+    this._popover.setAttribute('data-show', '');
     // Enable the event listeners
-    this._popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
+        ...options.modifiers,
+        { name: 'eventListeners', enabled: true },
+      ] })));
     // Update its position
     this._popper.update();
   }
   _hide() {
-    if (!this._loaded && !this.forceShow) {
+    if (!this._loaded) {
       return;
     }
-    // Hide the tooltip
-    this._tooltip.removeAttribute('data-show');
+    // Hide the popover
+    this._popover.removeAttribute('data-show');
     // Disable the event listeners
-    this._popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
+        ...options.modifiers,
+        { name: 'eventListeners', enabled: false },
+      ] })));
   }
-  _load(tooltip) {
-    this._tooltip = tooltip;
-    if (tooltip) {
-      this._popper = createPopper(this._el, tooltip);
+  _load(popover) {
+    this._popover = popover;
+    if (popover) {
+      this._popper = createPopper(this._el, popover);
       this._setOptions();
       this._loaded = true;
-      if (this.forceShow) {
-        this._show();
+      if (this.show) {
+        setTimeout(() => this._show(), 100);
       }
     }
   }
@@ -65,7 +109,7 @@ export class Tooltip {
       return;
     }
     this._popper.setOptions({
-      placement: this.placement,
+      placement: this.variant === 'error' ? 'bottom-start' : this.placement,
       modifiers: [
         {
           name: 'offset',
@@ -73,6 +117,12 @@ export class Tooltip {
             offset: [0, 8],
           },
         },
+        {
+          name: 'arrow',
+          options: {
+            padding: 4,
+          },
+        },
       ],
     });
   }
@@ -85,7 +135,25 @@ export class Tooltip {
     "$": ["tooltip.component.css"]
   }; }
   static get properties() { return {
-    "content": {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'hover' | 'click' | 'error'",
+        "resolved": "\"click\" | \"error\" | \"hover\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the popover"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'hover'"
+    },
+    "popover": {
       "type": "any",
       "mutable": false,
       "complexType": {
@@ -97,9 +165,9 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the tooltip"
+        "text": "The content of the popover"
       },
-      "attribute": "content",
+      "attribute": "popover",
       "reflect": false,
       "defaultValue": "null"
     },
@@ -120,13 +188,13 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the tooltip"
+        "text": "The content of the popover"
       },
       "attribute": "placement",
       "reflect": false,
       "defaultValue": "'top'"
     },
-    "forceShow": {
+    "show": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -138,35 +206,65 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Wether to force show the tooltip"
+        "text": "Wether to show the popover"
       },
-      "attribute": "force-show",
+      "attribute": "show",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "canManuallyClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to someone can manually close the popover"
+      },
+      "attribute": "can-manually-close",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get elementRef() { return "_el"; }
   static get listeners() { return [{
+      "name": "click",
+      "method": "clickHandler",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "documentClickHandler",
+      "target": "document",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "mouseenter",
-      "method": "_show",
+      "method": "mouseEnterHandler",
       "target": undefined,
       "capture": false,
       "passive": true
     }, {
       "name": "focus",
-      "method": "_show",
+      "method": "mouseEnterHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
       "name": "mouseleave",
-      "method": "_hide",
+      "method": "mouseLeaveHandler",
       "target": undefined,
       "capture": false,
       "passive": true
     }, {
       "name": "blur",
-      "method": "_hide",
+      "method": "mouseLeaveHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/molecules/dropdown/dropdown.component.css

@@ -0,0 +1,9 @@
+:host .trigger {
+  @apply w-auto h-auto inline-block;
+}
+:host p-dropdown-menu-container {
+  @apply hidden;
+}
+:host p-dropdown-menu-container[data-show] {
+  @apply flex;
+} .visible{visibility:visible!important}.static{position:static!important}.static{position:static!important}