@paperless/core 0.1.0-alpha.0 → 0.1.0-alpha.2

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

@@ -0,0 +1,153 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Loader {
+  constructor() {
+    /**
+     * Wether to show or hide the loader
+     */
+    this.show = true;
+    /**
+     * Variant of loader
+     */
+    this.variant = 'inline';
+    /**
+     * Color of the loader
+     */
+    this.color = 'indigo';
+    this._show = this.show;
+    this._loader = (h("div", { class: `loader color-${this.color}` }));
+  }
+  componentWillRender() {
+    this._checkShow();
+  }
+  componentShouldUpdate() {
+    this._checkShow();
+  }
+  render() {
+    if (!this._show) {
+      return;
+    }
+    if (this.variant === 'full-screen') {
+      return (h(Host, { class: "p-loader" },
+        h("div", { class: "loading-screen" },
+          h("div", { class: "content" },
+            h("slot", null),
+            h("div", { class: "loader-wrapper" }, this._loader)))));
+    }
+    return h(Host, { class: `p-loader ${this.variant === 'full-width' && 'w-100 d-block flex justify-center text-4xl'}` }, this._loader);
+  }
+  _checkShow() {
+    var _a;
+    if (this._showSubscriber) {
+      this._showSubscriber.unsubscribe();
+      this._showSubscriber = null;
+    }
+    if (typeof this.show !== 'boolean') {
+      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe(show => (this._show = show));
+      return;
+    }
+    this._show = this.show;
+  }
+  static get is() { return "p-loader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["loader.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["loader.component.css"]
+  }; }
+  static get properties() { return {
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | Observable<boolean>",
+        "resolved": "Observable<boolean> | boolean",
+        "references": {
+          "Observable": {
+            "location": "import",
+            "path": "rxjs"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show or hide the loader"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'inline' | 'full-width' | 'full-screen' | 'modal'",
+        "resolved": "\"full-screen\" | \"full-width\" | \"inline\" | \"modal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of loader"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'inline'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'indigo' | 'white' | 'storm'",
+        "resolved": "\"indigo\" | \"storm\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of the loader"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'indigo'"
+    },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "!NOT IMPLEMENTED! Modal title for modal variant"
+      },
+      "attribute": "modal-title",
+      "reflect": false
+    },
+    "modalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "!NOT IMPLEMENTED! Modal description for modal variant"
+      },
+      "attribute": "modal-description",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/{tooltip → atoms/tooltip}/tooltip.component.js

@@ -23,7 +23,7 @@ export class Tooltip {
     }
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { class: "p-tooltip" },
       h("slot", null),
       h("div", { class: "tooltip", role: "tooltip", ref: el => this._load(el) },
         this.content,

package/dist/collection/tailwind/rotate.js

@@ -0,0 +1,8 @@
+const rotateNumbers = {};
+
+for (let i = 1; i < 360; i++) {
+  rotateNumbers[`${i}`] = `${i}deg`;
+  rotateNumbers[`-${i}`] = `-${i}deg`;
+}
+
+module.exports = rotateNumbers;

package/dist/collection/tailwind/scale.js

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

package/dist/collection/tailwind.config.js

@@ -2,21 +2,20 @@ 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');
 
 module.exports = {
   important: true,
-  safelist: [
-    {
-      pattern: /./,
-    },
-  ],
   theme: {
     colors,
     boxShadow: shadows,
     dropShadow: shadows,
     borderRadius,
-    extends: {
+    extend: {
       grid,
+      scale,
+      rotate,
     },
   },
   variants: {},

package/dist/components/index.d.ts

@@ -1,7 +1,8 @@
 /* paperless custom elements */
 export { Button as PButton } from '../types/components/p-button/p-button';
 export { Icon as PIcon } from '../types/components/p-icon/p-icon';
-export { Icon as PIllustration } from '../types/components/p-illustration/p-illustration';
+export { Illustration as PIllustration } from '../types/components/p-illustration/p-illustration';
+export { Loader as PLoader } from '../types/components/p-loader/p-loader';
 export { Tooltip as PTooltip } from '../types/components/p-tooltip/p-tooltip';
 
 /**

package/dist/components/index.js

@@ -2,4 +2,5 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { PButton, defineCustomElement as defineCustomElementPButton } from './p-button.js';
 export { PIcon, defineCustomElement as defineCustomElementPIcon } from './p-icon.js';
 export { PIllustration, defineCustomElement as defineCustomElementPIllustration } from './p-illustration.js';
+export { PLoader, defineCustomElement as defineCustomElementPLoader } from './p-loader.js';
 export { PTooltip, defineCustomElement as defineCustomElementPTooltip } from './p-tooltip.js';