@paperless/core 0.1.0-alpha.98 → 1.0.1

package/dist/tailwind/animation.js

@@ -1,7 +1,21 @@
 module.exports = {
     animation: {
-        'fade-in': 'fadeIn .2s ease-in-out',
-        'fade-out': 'fadeOut .2s ease-in-out',
+        '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: {
@@ -13,5 +27,61 @@ module.exports = {
             '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/border-radius.js

@@ -1,4 +1,5 @@
 module.exports = {
+    xxxlarge: '1.5625rem',
     xxlarge: '0.75rem',
     xlarge: '0.5625rem',
     large: '0.375rem',

package/dist/tailwind/height.js

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

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

@@ -0,0 +1,98 @@
+// 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': {
+            minHeight: '100vh',
+        },
+        '.min-h-screen-safe': {
+            minHeight:
+                'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
+        },
+        '.max-h-screen': {
+            maxHeight: '100vh',
+        },
+        '.max-h-screen-safe': {
+            maxHeight:
+                'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
+        },
+        '.h-screen-safe': {
+            height: 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
+        },
+        '.min-w-screen': {
+            minWidth: '100vw',
+        },
+        '.min-w-screen-safe': {
+            minWidth:
+                'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
+        },
+        '.max-w-screen': {
+            maxWidth: '100vw',
+        },
+        '.max-w-screen-safe': {
+            maxWidth:
+                'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
+        },
+        '.w-screen-safe': {
+            width: 'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
+        },
+    };
+
+    addUtilities(utilities);
+});
+
+// eslint-disable-next-line unicorn/prefer-module
+module.exports = safeArea;

package/dist/tailwind/screens.js

@@ -1,8 +1,8 @@
 module.exports = {
-    tablet: '40rem',
-    'desktop-xs': '64rem',
-    'desktop-sm': '80rem',
-    desktop: '85.375rem',
-    'desktop-lg': '90rem',
-    'desktop-xl': '120rem',
+    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

@@ -8,4 +8,6 @@ module.exports = {
     ],
     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/width.js

@@ -1,18 +1,20 @@
 module.exports = {
-    unset: 'unset',
+    width: {
+        unset: 'unset',
 
-    // default variant
-    'sidebar-mobile': '100%',
-    'sidebar-desktop': '15rem',
+        // default variant
+        'sidebar-mobile': '100%',
+        'sidebar-desktop': '15rem',
 
-    'content-mobile': '100%',
-    'content-desktop-xs': '45rem',
-    'content-desktop-sm': '60rem',
-    'content-desktop': '65rem',
-    'content-desktop-lg': '65rem',
-    'content-desktop-xl': '70rem',
+        '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',
+        // login variant
+        'sidebar-desktop-login': '100%',
+        'content-desktop-login': '30rem',
+    },
 };

package/dist/tailwind/z-index.js

@@ -1,3 +1,17 @@
 module.exports = {
-    modal: 500,
+    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

@@ -9,6 +9,7 @@ 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 = {
@@ -27,9 +28,15 @@ module.exports = {
             backdropBlur,
             zIndex,
             screens,
-            width,
+            width: width.width,
+            maxWidth: width.maxWidth,
+            height: height.height,
             spacing,
         },
     },
-    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

@@ -6,7 +6,7 @@ export declare class Avatar {
   /**
    * The size of the avatar
    */
-  size: 'small' | 'medium' | 'large';
+  size: 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * The default image to show on errors
    */
@@ -16,6 +16,8 @@ export declare class Avatar {
    */
   src: string;
   private _src;
+  onSrchChange(src: string): void;
+  componentWillLoad(): void;
   render(): any;
   private _setDefaultLink;
 }

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,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { RotateOptions } from '../../../utils/types';
+import { RotateOptions } from '../../../types/tailwind';
 import { IconFlipOptions, IconVariant } from '../icon/icon.component';
 export declare class Button {
   /**
@@ -18,10 +18,6 @@ export declare class Button {
    * The size of the button
    */
   size: 'small' | 'medium';
-  /**
-   * The width of the button
-   */
-  width: 'auto' | 'full';
   /**
    * Wether to show a loader or not
    */
@@ -30,6 +26,10 @@ export declare class Button {
    * Wether to show a chevron or not
    */
   chevron: boolean | 'up' | 'down';
+  /**
+   * Chevron position
+   */
+  chevronPosition: 'start' | 'end';
   /**
    * Wether the button is disabled
    */

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

@@ -1,3 +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

@@ -4,6 +4,10 @@ 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
    */

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

@@ -1,4 +1,4 @@
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/dom';
 export declare class Helper {
   /**
    * The placement of the helper popover

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

@@ -1,7 +1,7 @@
+import { RotateOptions, TextSizeOptions } from '../../../types/tailwind';
 import icons from '../../../utils/icons';
-import { RotateOptions, TextSizeOptions } from '../../../utils/types';
-export declare type IconVariant = keyof typeof icons;
-export declare type IconFlipOptions = 'horizontal' | 'vertical';
+export type IconVariant = keyof typeof icons;
+export type IconFlipOptions = 'horizontal' | 'vertical';
 export declare class Icon {
   /**
    * The icon the be displayed

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

@@ -1,5 +1,5 @@
 import illustrations from '../../../utils/illustrations';
-export declare type IllustrationVariant = keyof typeof illustrations;
+export type IllustrationVariant = keyof typeof illustrations;
 export declare class Illustration {
   /**
    * The icon the be displayed

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

@@ -0,0 +1,33 @@
+import { RotateOptions } from '../../../types';
+import { IconFlipOptions, IconVariant } from '../icon/icon.component';
+export declare class Label {
+  /**
+   * Variant of the label
+   */
+  variant: 'positive' | 'unbiased' | 'negative' | 'info';
+  /**
+   * Define the behavior of the label
+   */
+  behavior: 'icon' | 'circle' | 'combination' | 'text' | 'icon-only';
+  /**
+   * Icon to show on the label
+   */
+  icon: IconVariant;
+  /**
+   * Icon flip
+   */
+  iconFlip: IconFlipOptions;
+  /**
+   * Icon rotate
+   */
+  iconRotate: RotateOptions;
+  /**
+   * The size of the label
+   */
+  size: 'small' | 'default';
+  /**
+   * Wether to keep the content on mobile
+   */
+  keepMobileContent: boolean;
+  render(): any;
+}

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

@@ -7,7 +7,7 @@ export declare class Loader {
   /**
    * Variant of loader
    */
-  variant: 'inline' | 'full-width' | 'full-screen' | 'modal';
+  variant: 'inline' | 'full-width' | 'full-screen' | 'modal' | 'ghost';
   /**
    * Color of the loader
    */

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

@@ -3,5 +3,9 @@ export declare class ModalBody {
    * The variant of the modal body
    */
   variant: 'default' | 'table';
+  /**
+   * Wether the modal body should be rounded at the bottom
+   */
+  rounded: boolean;
   render(): any;
 }

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

@@ -3,5 +3,9 @@ export declare class ModalContainer {
    * The size of the modal container
    */
   size: 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * Wether the container is closing
+   */
+  closing: boolean;
   render(): any;
 }

package/dist/types/components/atoms/modal-footer/modal-footer.component.d.ts

@@ -1,7 +1,3 @@
 export declare class ModalFooter {
-  /**
-   * Wether to show the footer on mobile
-   */
-  hideOnMobile: boolean;
   render(): any;
 }

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

@@ -3,7 +3,7 @@ export declare class ModalHeader {
   /**
    * Wether to show the close button on mobile
    */
-  showMobileClose: boolean;
+  showClose: boolean;
   /**
    * Close click event
    */

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

@@ -1,4 +1,4 @@
-import { RotateOptions } from '../../../utils/types';
+import { RotateOptions } from '../../../types/tailwind';
 import { IconFlipOptions, IconVariant } from '../icon/icon.component';
 export declare class SegmentItem {
   /**

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

@@ -1,4 +1,4 @@
-import { RotateOptions } from '../../../utils/types';
+import { RotateOptions } from '../../../types/tailwind';
 import { IconFlipOptions, IconVariant } from '../icon/icon.component';
 export declare class Status {
   /**

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

@@ -7,6 +7,10 @@ export declare class StepperItem {
    * The direction of the stepper step
    */
   direction: 'horizontal' | 'vertical';
+  /**
+   * The position of the content in case of vertical direction
+   */
+  contentPosition: 'start' | 'end';
   /**
    * Wether the step is finished
    */

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

@@ -0,0 +1,3 @@
+export declare class TableContainer {
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+export declare class ToastContainer {
+  /**
+   * The placement of the container
+   */
+  placement: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  render(): any;
+}

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

@@ -1,10 +1,10 @@
-import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Placement, Strategy } from '@floating-ui/dom';
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class Tooltip {
   /**
    * The variant of the popover
    */
-  variant: 'hover' | 'click' | 'error';
+  variant: 'hover' | 'click' | 'error' | 'error-element';
   /**
    * The content of the popover
    */
@@ -16,7 +16,11 @@ export declare class Tooltip {
   /**
    * The strategy of the popover placement
    */
-  strategy: PositioningStrategy;
+  strategy: Strategy;
+  /**
+   * Wether the tooltip can be shown by user input
+   */
+  enableUserInput: boolean;
   /**
    * Wether to show the popover
    */
@@ -34,9 +38,10 @@ export declare class Tooltip {
    */
   private _el;
   private _loaded;
-  private _popper;
   private _popover;
+  private _cleanup;
   componentShouldUpdate(): void;
+  disconnectedCallback(): void;
   render(): any;
   protected clickHandler(): void;
   protected documentClickHandler(): void;
@@ -45,5 +50,5 @@ export declare class Tooltip {
   private _show;
   private _hide;
   private _load;
-  private _setOptions;
+  private _update;
 }