@paperless/core 2.0.1-beta.0 → 2.0.1-beta.10

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

@@ -0,0 +1,707 @@
+import { h, Host, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const button = cva([
+  'group',
+  'font-semibold leading-4',
+  'flex items-center justify-center gap-2',
+  'cursor-pointer',
+], {
+  variants: {
+    variant: {
+      primary: ['bg-supportive-lilac border-black-teal/20'],
+      secondary: null,
+      text: ['text-teal'],
+      transparent: ['bg-transparent'],
+      dropdown: null,
+    },
+    active: {
+      true: null,
+      false: null,
+    },
+    loading: {
+      true: 'cursor-wait',
+      false: null,
+    },
+    size: {
+      sm: ['text-xs h-6'],
+      base: ['text-sm h-8'],
+      lg: ['text-base h-10'],
+    },
+    disabled: {
+      true: 'cursor-not-allowed',
+      false: null,
+    },
+    underline: {
+      true: null,
+      false: null,
+    },
+    buttonGroupPosition: {
+      none: null,
+      start: null,
+      center: null,
+      end: null,
+    },
+    iconOnly: {
+      true: 'justify-center',
+      false: 'w-inherit py-1',
+    },
+  },
+  compoundVariants: [
+    // variants
+    {
+      variant: ['secondary', 'dropdown'],
+      class: ['bg-white border-black-teal/10'],
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      class: 'border',
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      class: 'active:border-supportive-lilac-800 active:ring active:ring-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      active: true,
+      class: 'border-supportive-lilac-800 ring ring-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+      buttonGroupPosition: 'none',
+      class: 'rounded-lg',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+      buttonGroupPosition: 'start',
+      class: 'rounded-s-lg',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+      buttonGroupPosition: 'end',
+      class: 'rounded-e-lg',
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      class: 'text-black-teal',
+    },
+    {
+      variant: 'primary',
+      disabled: true,
+      class: 'bg-supportive-lilac-100 text-black-teal-100',
+    },
+    {
+      variant: 'primary',
+      disabled: false,
+      loading: false,
+      class: 'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',
+    },
+    {
+      variant: 'primary',
+      disabled: false,
+      loading: false,
+      active: true,
+      class: 'ring-black-teal/10',
+    },
+    {
+      variant: ['secondary', 'dropdown'],
+      disabled: true,
+      class: 'border bg-white-600 text-black-teal-100',
+    },
+    {
+      variant: ['secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      class: 'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',
+    },
+    {
+      variant: ['secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      active: true,
+      class: 'ring-supportive-lilac-100',
+    },
+    {
+      variant: 'text',
+      underline: true,
+      disabled: false,
+      class: 'border-b border-teal',
+    },
+    {
+      variant: 'text',
+      underline: true,
+      disabled: true,
+      class: 'border-b border-teal-100',
+    },
+    {
+      variant: 'text',
+      disabled: true,
+      class: 'text-teal-100',
+    },
+    {
+      variant: 'text',
+      disabled: false,
+      loading: false,
+      class: 'active:text-teal-800',
+    },
+    {
+      variant: 'transparent',
+      disabled: false,
+      class: 'text-dark-teal-100',
+    },
+    {
+      variant: 'transparent',
+      disabled: false,
+      loading: false,
+      class: 'hover:bg-dark-teal active:text-dark-teal-100/60',
+    },
+    {
+      variant: 'transparent',
+      disabled: true,
+      class: 'text-dark-teal-100/60',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent'],
+      size: ['base', 'sm'],
+      iconOnly: false,
+      class: 'px-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent'],
+      size: 'lg',
+      iconOnly: false,
+      class: 'px-3',
+    },
+    {
+      variant: 'dropdown',
+      iconOnly: false,
+      class: 'p-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'text'],
+      iconOnly: false,
+      class: 'py-1',
+    },
+    {
+      size: 'sm',
+      iconOnly: true,
+      class: 'w-6',
+    },
+    {
+      size: 'base',
+      iconOnly: true,
+      class: 'w-8',
+    },
+    {
+      size: 'lg',
+      iconOnly: true,
+      class: 'w-10',
+    },
+  ],
+});
+const icon = cva([], {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      base: 'text-base',
+      lg: 'text-base',
+    },
+  },
+});
+export class Button {
+  constructor() {
+    this.as = 'button';
+    this.variant = 'primary';
+    this.active = false;
+    this.underline = true;
+    this.href = undefined;
+    this.target = undefined;
+    this.size = 'base';
+    this.type = 'button';
+    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;
+    this.buttonGroupPosition = 'none';
+    this.class = undefined;
+  }
+  render() {
+    var _a, _b;
+    let loaderColor = 'white';
+    switch (this.variant) {
+      case 'secondary':
+        loaderColor = 'storm';
+        break;
+      case 'text':
+        loaderColor = 'indigo';
+        break;
+    }
+    const VariableTag = this.variant === 'text' || ((_a = this.href) === null || _a === void 0 ? void 0 : _a.length) || this.as === 'a'
+      ? 'a'
+      : 'button';
+    const active = this.active || ((_b = this.class) === null || _b === void 0 ? void 0 : _b.includes('active'));
+    return (h(Host, { class: 'p-button block' }, h(VariableTag, { disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
+        variant: this.variant,
+        size: this.size,
+        underline: this.underline,
+        loading: this.loading,
+        disabled: this.disabled,
+        buttonGroupPosition: this.buttonGroupPosition,
+        iconOnly: this.iconOnly,
+        active,
+      }) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
+      this.iconPosition === 'start' &&
+      !(this.iconOnly && this.loading) &&
+      this._getIcon(), h("slot", null), this.icon &&
+      this.iconPosition === 'end' &&
+      !this.loading &&
+      !this.chevron &&
+      this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.loading && h("p-loader", { color: loaderColor }))));
+  }
+  handleClick(ev) {
+    if (this.loading || this.disabled) {
+      ev.preventDefault();
+      return;
+    }
+    this.onClick.emit(ev);
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (h("p-icon", { class: icon({
+        size: this.size,
+      }), variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  static get is() { return "p-button"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["button.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["button.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "as": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'a' | 'button'",
+          "resolved": "\"a\" | \"button\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the button"
+        },
+        "attribute": "as",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'primary'\n\t\t| 'secondary'\n\t\t| 'transparent'\n\t\t| 'text'\n\t\t| 'dropdown'",
+          "resolved": "\"dropdown\" | \"primary\" | \"secondary\" | \"text\" | \"transparent\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the button"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to force an active state"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "underline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the text variant has underline"
+        },
+        "attribute": "underline",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href in case of \"text\" version"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target in case of \"text\" version"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'base' | 'lg'",
+          "resolved": "\"base\" | \"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the button"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'base'"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'submit'",
+          "resolved": "\"button\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the button"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show a loader or not"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "chevron": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | 'up' | 'down'",
+          "resolved": "\"down\" | \"up\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show a chevron or not"
+        },
+        "attribute": "chevron",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "chevronPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'end'",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chevron position"
+        },
+        "attribute": "chevron-position",
+        "reflect": false,
+        "defaultValue": "'end'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the button is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconVariant",
+          "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
+          "references": {
+            "IconVariant": {
+              "location": "import",
+              "path": "../../atoms/icon/icon.component",
+              "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to show on the button"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the button is icon only"
+        },
+        "attribute": "icon-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'end'",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon position"
+        },
+        "attribute": "icon-position",
+        "reflect": false,
+        "defaultValue": "'end'"
+      },
+      "iconFlip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconFlipOptions",
+          "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
+          "references": {
+            "IconFlipOptions": {
+              "location": "import",
+              "path": "../../atoms/icon/icon.component",
+              "id": "src/components/atoms/icon/icon.component.tsx::IconFlipOptions"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon flip"
+        },
+        "attribute": "icon-flip",
+        "reflect": false
+      },
+      "iconRotate": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "RotateOptions",
+          "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+          "references": {
+            "RotateOptions": {
+              "location": "import",
+              "path": "../../../types/tailwind",
+              "id": "src/types/tailwind.ts::RotateOptions"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon rotate"
+        },
+        "attribute": "icon-rotate",
+        "reflect": false
+      },
+      "inheritText": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the button should inherit text styles"
+        },
+        "attribute": "inherit-text",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "buttonGroupPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center' | 'end' | 'none'",
+          "resolved": "\"center\" | \"end\" | \"none\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the button in the button group, mostly un-used if not in a group"
+        },
+        "attribute": "button-group-position",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The class of the container passed by parent"
+        },
+        "attribute": "class",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onClick",
+        "name": "onClick",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Button click event"
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global",
+              "id": "global::MouseEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=button.component.js.map