@paperless/core 0.1.0-alpha.4 → 0.1.0-alpha.400

package/dist/tailwind/animation.js

@@ -0,0 +1,87 @@
+module.exports = {
+    animation: {
+        'fade-in': 'forwards fadeIn .2s ease',
+        'fade-out': 'forwards fadeOut .2s ease',
+        'slide-in-right': 'forwards slideInRight .5s ease',
+        'slide-in-left': 'forwards slideInLeft .5s ease',
+        'slide-in-top': 'forwards slideInTop .25 ease',
+        'slide-in-bottom': 'forwards slideInBottom .5s ease',
+        'slide-in-right-small': 'forwards slideInRightSmall .5s ease',
+        'slide-in-left-small': 'forwards slideInLeftSmall .5s ease',
+        'slide-in-top-small': 'forwards slideInTopSmall .5s ease',
+        'slide-in-bottom-small': 'forwards slideInBottomSmall .5s ease',
+        'slide-out-right': 'forwards slideOutRight .2s ease',
+        'slide-out-left': 'forwards slideOutLeft .2s ease',
+        'slide-out-top': 'forwards slideOutTop .2s ease',
+        'slide-out-bottom': 'forwards slideOutBottom .5s ease',
+        'slide-out-top-small': 'forwards slideOutTopSmall .5s ease',
+        'slide-out-bottom-small': 'forwards slideOutBottomSmall .5s ease',
+    },
+
+    keyframes: {
+        fadeIn: {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 100 },
+        },
+        fadeOut: {
+            '0%': { opacity: 100 },
+            '100%': { opacity: 0 },
+        },
+        slideInRight: {
+            '0%': { transform: 'translateX(100%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInLeft: {
+            '0%': { transform: 'translateX(-100%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInTop: {
+            '0%': { transform: 'translateY(-100%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInBottom: {
+            '0%': { transform: 'translateY(100%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInRightSmall: {
+            '0%': { transform: 'translateX(20%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInLeftSmall: {
+            '0%': { transform: 'translateX(-20%)' },
+            '100%': { transform: 'translateX(0)' },
+        },
+        slideInTopSmall: {
+            '0%': { transform: 'translateY(-20%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideInBottomSmall: {
+            '0%': { transform: 'translateY(20%)' },
+            '100%': { transform: 'translateY(0)' },
+        },
+        slideOutRight: {
+            '0%': { transform: 'translateX(0)' },
+            '100%': { transform: 'translateX(100%)' },
+        },
+        slideOutLeft: {
+            '0%': { transform: 'translateX(0)' },
+            '100%': { transform: 'translateX(-100%)' },
+        },
+        slideOutTop: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(-100%)' },
+        },
+        slideOutBottom: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(100%)' },
+        },
+        slideOutTopSmall: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(-20%)' },
+        },
+        slideOutBottomSmall: {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(20%)' },
+        },
+    },
+};

package/dist/tailwind/backdrop-blur.js

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

package/dist/tailwind/border-radius.js

@@ -0,0 +1,11 @@
+module.exports = {
+    xxxlarge: '1.5625rem',
+    xxlarge: '0.75rem',
+    xlarge: '0.5625rem',
+    large: '0.375rem',
+    DEFAULT: '0.25rem',
+    medium: '0.25rem',
+    small: '0.125rem',
+    none: 0,
+    round: '100%',
+};

package/dist/tailwind/colors.js

@@ -0,0 +1,52 @@
+module.exports = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  indigo: {
+    dark: '#2C4BA9',
+    DEFAULT: '#528AFA',
+    light: '#F1F6FF',
+  },
+  sky: {
+    dark: '#30C2C9',
+    DEFAULT: '#1EDAE3',
+    light: '#F5FEFF',
+    vague: '#BBF4F6',
+  },
+  mystic: {
+    blank: '#FFF',
+    dark: '#DAE6F0',
+    DEFAULT: '#F7FAFC',
+    light: '#FCFDFE',
+    medium: '#E3ECF3',
+  },
+  redberry: {
+    dark: '#BD0F1E',
+    DEFAULT: '#E63241',
+    light: '#FFE8EA',
+    medium: '#FF7D88',
+  },
+  storm: {
+    dark: '#272838',
+    DEFAULT: '#51536B',
+    light: '#B0B2CB',
+    medium: '#80829E',
+    vague: '#989AB7',
+  },
+  negative: {
+    dark: '#8A0F1D',
+    DEFAULT: '#B91E28',
+    light: '#FFCCD3',
+  },
+  positive: {
+    dark: '#1DA360',
+    DEFAULT: '#28D17C',
+    light: '#E5FFF2',
+  },
+  unbiased: {
+    dark: '#FFA231',
+    DEFAULT: '#FFC72D',
+    light: '#FFF6DC',
+  },
+  white: '#FFF',
+  black: '#000',
+};

package/dist/tailwind/height.js

@@ -0,0 +1,5 @@
+module.exports = {
+    height: {
+        unset: 'unset',
+    },
+};

package/dist/tailwind/plugins/safe-area.js

@@ -0,0 +1,100 @@
+// eslint-disable-next-line unicorn/prefer-module
+const plugin = require('tailwindcss/plugin');
+
+const safeArea = plugin(({ addUtilities }) => {
+    const utilities = {
+        '.m-safe': {
+            marginTop: 'env(safe-area-inset-top)',
+            marginRight: 'env(safe-area-inset-right)',
+            marginBottom: 'env(safe-area-inset-bottom)',
+            marginLeft: 'env(safe-area-inset-left)',
+        },
+        '.mx-safe': {
+            marginRight: 'env(safe-area-inset-right)',
+            marginLeft: 'env(safe-area-inset-left)',
+        },
+        '.my-safe': {
+            marginTop: 'env(safe-area-inset-top)',
+            marginBottom: 'env(safe-area-inset-bottom)',
+        },
+        '.mt-safe': {
+            marginTop: 'env(safe-area-inset-top)',
+        },
+        '.mr-safe': {
+            marginRight: 'env(safe-area-inset-right)',
+        },
+        '.mb-safe': {
+            marginBottom: 'env(safe-area-inset-bottom)',
+        },
+        '.ml-safe': {
+            marginLeft: 'env(safe-area-inset-left)',
+        },
+        '.p-safe': {
+            paddingTop: 'env(safe-area-inset-top)',
+            paddingRight: 'env(safe-area-inset-right)',
+            paddingBottom: 'env(safe-area-inset-bottom)',
+            paddingLeft: 'env(safe-area-inset-left)',
+        },
+        '.px-safe': {
+            paddingRight: 'env(safe-area-inset-right)',
+            paddingLeft: 'env(safe-area-inset-left)',
+        },
+        '.py-safe': {
+            paddingTop: 'env(safe-area-inset-top)',
+            paddingBottom: 'env(safe-area-inset-bottom)',
+        },
+        '.pt-safe': {
+            paddingTop: 'env(safe-area-inset-top)',
+        },
+        '.pr-safe': {
+            paddingRight: 'env(safe-area-inset-right)',
+        },
+        '.pb-safe': {
+            paddingBottom: 'env(safe-area-inset-bottom)',
+        },
+        '.pl-safe': {
+            paddingLeft: 'env(safe-area-inset-left)',
+        },
+        '.min-h-screen-safe': {
+            minHeight: [
+                'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
+                '-webkit-fill-available',
+            ],
+        },
+        '.max-h-screen-safe': {
+            maxHeight: [
+                'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
+                '-webkit-fill-available',
+            ],
+        },
+        '.h-screen-safe': {
+            height: [
+                'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
+                '-webkit-fill-available',
+            ],
+        },
+        '.min-w-screen-safe': {
+            minWidth: [
+                'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
+                '-webkit-fill-available',
+            ],
+        },
+        '.max-w-screen-safe': {
+            maxWidth: [
+                'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
+                '-webkit-fill-available',
+            ],
+        },
+        '.w-screen-safe': {
+            width: [
+                'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
+                '-webkit-fill-available',
+            ],
+        },
+    };
+
+    addUtilities(utilities);
+});
+
+// eslint-disable-next-line unicorn/prefer-module
+module.exports = safeArea;

package/dist/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/tailwind/scale.js

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

package/dist/tailwind/screens.js

@@ -0,0 +1,8 @@
+module.exports = {
+    tablet: '40rem', // 640 px
+    'desktop-xs': '64rem', // 1024 px
+    'desktop-sm': '80rem', // 1360 px
+    desktop: '85.375rem', // 1366
+    'desktop-lg': '90rem', // 1440
+    'desktop-xl': '120rem', // 1920
+};

package/dist/tailwind/shadows.js

@@ -0,0 +1,13 @@
+module.exports = {
+    1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
+    2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
+    3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
+    4: [
+        '0px 0.3125rem 1rem rgba(0,24,98, 0.08)',
+        '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)',
+    ],
+    5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    transparent: 'transparent',
+    'button-primary-hover': '0px 2px 4px rgba(44,75,169, 0.4)',
+    'button-secondary-hover': '0px 2px 4px rgba(176,178,203, 0.4)',
+};

package/dist/tailwind/spacing.js

@@ -0,0 +1,10 @@
+module.exports = {
+    // default variant layout
+    'content-mobile-x': '1rem',
+    'content-mobile-y': '1.5rem',
+
+    'content-desktop-x': '2rem',
+    'content-desktop-y': '2rem',
+
+    18: '4.5rem',
+};

package/dist/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/tailwind/width.js

@@ -0,0 +1,20 @@
+module.exports = {
+    width: {
+        unset: 'unset',
+
+        // default variant
+        'sidebar-mobile': '100%',
+        'sidebar-desktop': '15rem',
+
+        'content-mobile': '100%',
+        'content-desktop-xs': '100%',
+        'content-desktop-sm': '100%',
+        'content-desktop': '69rem',
+        'content-desktop-lg': '69rem',
+        'content-desktop-xl': '69rem',
+
+        // login variant
+        'sidebar-desktop-login': '100%',
+        'content-desktop-login': '30rem',
+    },
+};

package/dist/tailwind/z-index.js

@@ -0,0 +1,17 @@
+module.exports = {
+    dropdown: 200,
+
+    'navbar-backdrop': 290,
+    navbar: 300,
+
+    backdrop: 490,
+
+    drawer: 500,
+    'drawer-header': 501,
+
+    modal: 600,
+
+    tooltip: 601,
+
+    toast: 700,
+};

package/dist/tailwind.config.js

@@ -1,23 +1,42 @@
 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');
+const typeograhpy = require('./tailwind/typography');
+const backdropBlur = require('./tailwind/backdrop-blur');
+const zIndex = require('./tailwind/z-index');
+const animation = require('./tailwind/animation');
+const screens = require('./tailwind/screens');
+const width = require('./tailwind/width');
+const height = require('./tailwind/height');
+const spacing = require('./tailwind/spacing');
 
 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: {
+            ...animation,
+            scale,
+            rotate,
+            fontSize: typeograhpy.fontSize,
+            lineHeight: typeograhpy.lineHeight,
+            backdropBlur,
+            zIndex,
+            screens,
+            width: width.width,
+            maxWidth: width.maxWidth,
+            height: height.height,
+            spacing,
+        },
     },
-  },
-  variants: {},
-  plugins: [require('@tailwindcss/aspect-ratio')],
+    plugins: [
+        require('@tailwindcss/aspect-ratio'),
+        require('tailwind-scrollbar-hide'),
+        require('./tailwind/plugins/safe-area'),
+    ],
 };

package/dist/types/components/atoms/avatar/avatar.component.d.ts

@@ -0,0 +1,23 @@
+export declare class Avatar {
+  /**
+   * The variant of the avatar
+   */
+  variant: 'user' | 'company';
+  /**
+   * The size of the avatar
+   */
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * The default image to show on errors
+   */
+  defaultImage: string;
+  /**
+   * The image used for the avatar
+   */
+  src: string;
+  private _src;
+  onSrchChange(src: string): void;
+  componentWillLoad(): void;
+  render(): any;
+  private _setDefaultLink;
+}

package/dist/types/components/atoms/avatar-group/avatar-group.component.d.ts

@@ -0,0 +1,7 @@
+export declare class AvatarGroup {
+  /**
+   * The amount to show after the avatars
+   */
+  extra: number;
+  render(): any;
+}

package/dist/types/components/atoms/backdrop/backdrop.component.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class Backdrop {
+  /**
+   * The variant of the backdrop
+   */
+  variant: 'modal' | 'drawer';
+  /**
+   * Wether to apply blur on the background of the backdrop
+   */
+  applyBlur: boolean;
+  /**
+   * Wether the backdrop is closing
+   */
+  closing: boolean;
+  /**
+   * Wether we should scroll lock the body
+   */
+  scrollLock: boolean;
+  /**
+   * When the backdrop is clicked
+   */
+  clicked: EventEmitter<MouseEvent>;
+  /**
+   * The host element
+   */
+  private _el;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+  handleClick(ev: MouseEvent): void;
+}

package/dist/types/components/atoms/button/button.component.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { RotateOptions } from '../../../types/tailwind';
 import { IconFlipOptions, IconVariant } from '../icon/icon.component';
 export declare class Button {
   /**
@@ -21,6 +22,14 @@ export declare class Button {
    * Wether to show a loader or not
    */
   loading: boolean;
+  /**
+   * Wether to show a chevron or not
+   */
+  chevron: boolean | 'up' | 'down';
+  /**
+   * Chevron position
+   */
+  chevronPosition: 'start' | 'end';
   /**
    * Wether the button is disabled
    */
@@ -29,6 +38,10 @@ export declare class Button {
    * Icon to show on the button
    */
   icon: IconVariant;
+  /**
+   * Wether the button is icon only
+   */
+  iconOnly: boolean;
   /**
    * Icon position
    */
@@ -40,11 +53,15 @@ export declare class Button {
   /**
    * Icon rotate
    */
-  iconRotate: number;
+  iconRotate: RotateOptions;
+  /**
+   * Wether the button should inherit text styles
+   */
+  inheritText: boolean;
   /**
-   * Button press event
+   * Button click event
    */
-  click: EventEmitter<MouseEvent>;
+  onClick: EventEmitter<MouseEvent>;
   render(): any;
   handleClick(ev: MouseEvent): void;
   private _getIcon;

package/dist/types/components/atoms/card-body/card-body.component.d.ts

@@ -0,0 +1,7 @@
+export declare class CardBody {
+  /**
+   * Wether the button should inherit text styles
+   */
+  inheritText: boolean;
+  render(): any;
+}

package/dist/types/components/atoms/card-container/card-container.component.d.ts

@@ -0,0 +1,11 @@
+export declare class CardContainer {
+  /**
+   * Wether the card should be hoverable
+   */
+  hoverable: boolean;
+  /**
+   * Wether the card should have shadow
+   */
+  shadow: boolean;
+  render(): any;
+}

package/dist/types/components/atoms/card-header/card-header.component.d.ts

@@ -0,0 +1,11 @@
+export declare class CardHeader {
+  /**
+   * Content of the card header
+   */
+  header: string;
+  /**
+   * Enable the title arrow
+   */
+  arrow: boolean;
+  render(): any;
+}

package/dist/types/components/atoms/counter/counter.component.d.ts

@@ -0,0 +1,11 @@
+export declare class Counter {
+  /**
+   * The variant of the counter
+   */
+  variant: 'info' | 'negative' | 'positive' | 'unbiased';
+  /**
+   * The size of the counter
+   */
+  size: 'default' | 'mini';
+  render(): any;
+}

package/dist/types/components/atoms/divider/divider.component.d.ts

@@ -0,0 +1,7 @@
+export declare class Divider {
+  /**
+   * The host element
+   */
+  private _el;
+  render(): any;
+}

package/dist/types/components/atoms/drawer-body/drawer-body.component.d.ts

@@ -0,0 +1,7 @@
+export declare class ModalBody {
+  /**
+   * The variant of the modal body
+   */
+  variant: 'default' | 'table';
+  render(): any;
+}

package/dist/types/components/atoms/drawer-container/drawer-container.component.d.ts

@@ -0,0 +1,7 @@
+export declare class ModalContainer {
+  /**
+   * Wether the container is closing
+   */
+  closing: boolean;
+  render(): any;
+}

package/dist/types/components/atoms/drawer-header/drawer-header.component.d.ts

@@ -0,0 +1,12 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class ModalHeader {
+  /**
+   * Wether to show the close button on mobile
+   */
+  showClose: boolean;
+  /**
+   * Close click event
+   */
+  close: EventEmitter<MouseEvent>;
+  render(): any;
+}

package/dist/types/components/atoms/dropdown-menu-container/dropdown-menu-container.component.d.ts

@@ -0,0 +1,11 @@
+export declare class DropdownMenuContainer {
+  /**
+   * Wether the container applies it's max width
+   */
+  maxWidth: boolean;
+  /**
+   * Wether the container should all available space
+   */
+  fullWidth: boolean;
+  render(): any;
+}

package/dist/types/components/atoms/dropdown-menu-item/dropdown-menu-item.component.d.ts

@@ -0,0 +1,16 @@
+import { IconVariant } from '../icon/icon.component';
+export declare class DropdownMenuItem {
+  /**
+   * Wether the dropdown menu item is active
+   */
+  active: boolean;
+  /**
+   * Wether to enable the hover state
+   */
+  enableHover: boolean;
+  /**
+   * Icon of the navigation item
+   */
+  icon: IconVariant;
+  render(): any;
+}