@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

package/dist/collection/components/helpers/table-column/table-column.component.js

@@ -0,0 +1,157 @@
+import { Component, Event, Prop } from '@stencil/core';
+export class TableColumn {
+  constructor() {
+    /**
+     * The type of the column
+     */
+    this.type = 'td';
+    /**
+     * Wether the column should use the slot
+     */
+    this.useSlot = false;
+    /**
+     * The alignment of the column
+     */
+    this.align = 'start';
+    /**
+     * The sizes of the column
+     */
+    this.sizes = 'auto';
+  }
+  componentDidUpdate() {
+    this.tableDefinitionChanged.emit(true);
+  }
+  render() {
+    return;
+  }
+  static get is() { return "p-table-column"; }
+  static get properties() { return {
+    "path": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The path of the value of the item you want to display"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'td' | 'th'",
+        "resolved": "\"td\" | \"th\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The type of the column"
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "'td'"
+    },
+    "name": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the column"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
+    "useSlot": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the column should use the slot"
+      },
+      "attribute": "use-slot",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "align": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'start' | 'center' | 'end'",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The alignment of the column"
+      },
+      "attribute": "align",
+      "reflect": true,
+      "defaultValue": "'start'"
+    },
+    "sizes": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "'auto' | number | TableColumnSizes",
+        "resolved": "\"auto\" | TableColumnSizes | number",
+        "references": {
+          "TableColumnSizes": {
+            "location": "import",
+            "path": "../../../types/table"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The sizes of the column"
+      },
+      "attribute": "sizes",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "tableDefinitionChanged",
+      "name": "tableDefinitionChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event to let the table know it has to re render"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  @apply block mb-6;
+} .static{position:static!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.flex{display:flex!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.font-medium{font-weight:500!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{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}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{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}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{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}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{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}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{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}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{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}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{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}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{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}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{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}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{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}.scale-y-flip{--tw-scale-y:-1!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}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}

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

@@ -0,0 +1,133 @@
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    /**
+     * Wether the accordion is open
+     */
+    this.open = false;
+    /**
+     * Wether the accordion can be closed
+     */
+    this.closeable = true;
+    /**
+     * Wether the accordion can be opened
+     */
+    this.openable = true;
+  }
+  render() {
+    return (h(Host, { class: "p-accordion" },
+      h("div", { class: "flex items-center gap-3 text-storm-vague cursor-pointer", onClick: () => this._onClick() },
+        h("p-icon", { class: "flex", variant: "chevron", rotate: this.open ? 0 : -90 }),
+        h("p", { class: "m-0 font-medium text-lg whitespace-nowrap" }, this.header),
+        h("p-divider", null)),
+      this.open && (h("div", { class: "mt-6" },
+        h("slot", null)))));
+  }
+  _onClick() {
+    if (!this.closeable && this.open) {
+      return;
+    }
+    if (!this.openable && !this.open) {
+      return;
+    }
+    this.open = !this.open;
+    this.isOpen.emit(this.open);
+  }
+  static get is() { return "p-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["accordion.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["accordion.component.css"]
+  }; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Header of the accordion"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the accordion is open"
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "closeable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the accordion can be closed"
+      },
+      "attribute": "closeable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "openable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the accordion can be opened"
+      },
+      "attribute": "openable",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get events() { return [{
+      "method": "isOpen",
+      "name": "isOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Open change event"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/molecules/content-slider/content-slider.component.css

@@ -0,0 +1,44 @@
+:host {
+  @apply flex flex-col overflow-hidden;
+  @apply p-16 -m-16;
+}
+:host .slider {
+  @apply overflow-visible relative box-content;
+}
+:host .slider.draggable {
+  @apply cursor-grab desktop-xs:cursor-auto;
+}
+:host .slider.draggable.dragging {
+  @apply cursor-grabbing desktop-xs:cursor-auto;
+}
+:host .slider.draggable.dragging .inner-slider {
+  @apply transition-none;
+}
+:host .slider .inner-slider {
+  @apply absolute flex flex-nowrap items-stretch w-full gap-2;
+  @apply will-change-transform transform-gpu translate-x-0;
+  @apply desktop-xs:gap-4 desktop-xs:flex-wrap;
+  @apply transition-all;
+  transition-duration: 0.5s;
+}
+:host .slider .inner-slider > ::slotted(*) {
+  @apply w-full;
+  @apply flex-shrink-0 z-10;
+  position: relative;
+}
+@screen tablet {
+  :host .slider .inner-slider > ::slotted(*) {
+    width: calc(50% - 0.5rem);
+  }
+}
+@screen desktop-xs {
+  :host .slider .inner-slider > ::slotted(*) {
+    @apply w-0 flex-1;
+  }
+}
+:host .indicator {
+  @apply flex justify-center items-center desktop-xs:hidden;
+}
+:host .indicator .item {
+  @apply mt-3 pt-1 px-1;
+} .visible{visibility:visible!important}.static{position:static!important}.hidden{display:none!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -0,0 +1,322 @@
+import { Component, Element, h, Host, Listen, Prop, State, } from '@stencil/core';
+export class ContentSlider {
+  constructor() {
+    /**
+     * Wether to hide the indicator on mobile
+     */
+    this.hideMobileIndicator = false;
+    /**
+     * Wether to disable dragging the content
+     */
+    this.disableDrag = false;
+    /**
+     * Wether to disable auto centering the content
+     */
+    this.disableAutoCenter = false;
+    /**
+     * Wether to disable clicking the indicator scrolls content
+     */
+    this.disableIndicatorClick = false;
+    this._outerHeight = 0;
+    this._totalWidth = 0;
+    this._items = [];
+    this._shouldCheckLocation = false;
+    this._dragging = false;
+  }
+  componentWillRender() {
+    const items = this._el.querySelectorAll(':scope > *');
+    this._items = Array.from(items);
+  }
+  componentDidLoad() {
+    this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+    this._calculateWidth();
+    this._calculateIndicator();
+  }
+  disconnectedCallback() {
+    if (this._innerSliderResizeObserver) {
+      this._innerSliderResizeObserver.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, { class: "p-content-slider" },
+      h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+          height: `${this._outerHeight}px`,
+        }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) },
+        h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() },
+          h("slot", null))),
+      h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` },
+        h("p-slider-indicator", { active: i === this._visibleIndex })))))));
+  }
+  _mouseDownHandler(e) {
+    var _a;
+    if (this.disableDrag || this._dragging) {
+      return;
+    }
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    if (innerSliderStyle.flexWrap === 'wrap') {
+      return;
+    }
+    this._startMouseX = e.x;
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    if (e.type === 'touchstart') {
+      this._startMouseX = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
+    }
+    const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
+    const offsetLeft = innerSliderRect.x - sliderRect.x;
+    this._startX = this._startMouseX - sliderRect.x - offsetLeft;
+    this._lastIndex = this._visibleIndex;
+    this._dragging = true;
+  }
+  _mouseMoveHandler(e) {
+    var _a, _b;
+    if (!e || !this._dragging || this.disableDrag) {
+      return;
+    }
+    e.preventDefault();
+    this._shouldCheckLocation = true;
+    if (this._innerSliderRef.style.getPropertyValue('pointer-events') === '') {
+      this._innerSliderRef.style.pointerEvents = 'none';
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    let x = e.clientX - sliderRect.left;
+    this._lastMouseX = e.x;
+    if (e.type === 'touchmove') {
+      x = ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX) - sliderRect.left;
+      this._lastMouseX = (_b = e.touches) === null || _b === void 0 ? void 0 : _b[0].clientX;
+    }
+    this._innerSliderRef.style.setProperty('--tw-translate-x', `${x - this._startX}px`);
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _transitionEndHandler() {
+    this._calculateIndicator();
+  }
+  mouseUpHandler() {
+    this._dragging = false;
+    this._innerSliderRef.style.removeProperty('pointer-events');
+    this._checkLocation();
+  }
+  resizeHandler() {
+    if (this._innerSliderRef) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', '0px');
+      this._calculateWidth();
+      this._calculateIndicator();
+    }
+  }
+  _setInnerSliderReft(ref) {
+    this._innerSliderRef = ref;
+    this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
+    this._innerSliderResizeObserver.observe(this._innerSliderRef);
+  }
+  _scrollTo(i, manual = false) {
+    if (this.disableIndicatorClick && manual) {
+      return;
+    }
+    const el = this._items[i];
+    if (i === 0) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+      return;
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const offsetLeft = elRect.x - innerSliderRect.x;
+    const centerOffset = offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+    this._innerSliderRef.style.setProperty('--tw-translate-x', `-${centerOffset}px`);
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _checkBoundary() {
+    let outer = this._sliderRef.getBoundingClientRect();
+    const left = parseInt(this._innerSliderRef.style.getPropertyValue('--tw-translate-x'));
+    if (left > 0) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+    }
+    const maxLeft = (this._totalWidth - outer.width) * -1;
+    if (left < maxLeft) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', `${maxLeft}px`);
+    }
+  }
+  _calculateIndicator() {
+    for (let i = 0; i < this._items.length; i++) {
+      const item = this._items[i];
+      const visible = this._isVisible(item);
+      if (visible) {
+        this._visibleIndex = i;
+      }
+      if (i === 0 && visible) {
+        break;
+      }
+    }
+  }
+  _checkLocation() {
+    var _a;
+    if (!this._shouldCheckLocation) {
+      return;
+    }
+    let scrollToIndex = null;
+    if (this._lastIndex !== this._visibleIndex) {
+      scrollToIndex = this._visibleIndex;
+    }
+    if (this._lastIndex === this._visibleIndex) {
+      if (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {
+        scrollToIndex = this._lastIndex - 1;
+      }
+      if (this._lastMouseX < this._startMouseX &&
+        this._lastIndex !== ((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) - 1) {
+        scrollToIndex = this._lastIndex + 1;
+      }
+    }
+    if (scrollToIndex !== null) {
+      this._shouldCheckLocation = false;
+      setTimeout(() => this._scrollTo(scrollToIndex), 100);
+    }
+  }
+  _isVisible(el) {
+    if (!this._el || !el) {
+      return false;
+    }
+    const elRect = el.getBoundingClientRect();
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return ((elRect.left >= sliderRect.left &&
+      elRect.right <= sliderRect.right) ||
+      (this._isMobile(el) &&
+        elRect.left + elRect.width / 2 >= sliderRect.left &&
+        elRect.left + elRect.width / 2 <= sliderRect.right));
+  }
+  _calculateWidth() {
+    let totalWidth = 0;
+    for (let item of this._items) {
+      const rect = item.getBoundingClientRect();
+      totalWidth += rect.width;
+    }
+    const sliderStyle = getComputedStyle(this._sliderRef);
+    const padding = parseInt(sliderStyle.padding) * 2;
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+    totalWidth += padding + gap;
+    this._totalWidth = totalWidth;
+  }
+  _calculateHeight() {
+    const outerHeight = this._items.at(0).getBoundingClientRect().height;
+    if (outerHeight != this._outerHeight) {
+      this._outerHeight = outerHeight;
+    }
+  }
+  _isMobile(el) {
+    if (!el) {
+      el = this._items.at(0);
+    }
+    const elRect = el.getBoundingClientRect();
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return sliderRect.width - elRect.width < 10;
+  }
+  static get is() { return "p-content-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["content-slider.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["content-slider.component.css"]
+  }; }
+  static get properties() { return {
+    "hideMobileIndicator": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to hide the indicator on mobile"
+      },
+      "attribute": "hide-mobile-indicator",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableDrag": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to disable dragging the content"
+      },
+      "attribute": "disable-drag",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableAutoCenter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to disable auto centering the content"
+      },
+      "attribute": "disable-auto-center",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableIndicatorClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to disable clicking the indicator scrolls content"
+      },
+      "attribute": "disable-indicator-click",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "_visibleIndex": {},
+    "_outerHeight": {},
+    "_totalWidth": {},
+    "_dragging": {}
+  }; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "mouseup",
+      "method": "mouseUpHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchend",
+      "method": "mouseUpHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "resize",
+      "method": "resizeHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}