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

package/dist/collection/components/atoms/tab-item/tab-item.component.css

@@ -0,0 +1,10 @@
+:host {
+  @apply flex items-center h-10;
+  @apply font-semibold text-storm-medium;
+  @apply cursor-pointer;
+  @apply border-0 border-b-2 border-transparent !important;
+}
+
+:host(.active) {
+  @apply border-indigo text-indigo !important;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/tab-item/tab-item.component.js

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class TabItem {
+  constructor() {
+    /**
+     * Wether the tab item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-tab-item ${this.active && 'active'}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-tab-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tab-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tab-item.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the tab item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/tag/tag.component.css

@@ -0,0 +1,51 @@
+:host {
+  @apply flex gap-1 items-center px-3 rounded;
+  @apply h-[1.375rem];
+  @apply text-xs font-semibold;
+}
+:host .circle {
+  @apply hidden rounded-round h-2 w-2;
+}
+
+:host([circle]) {
+  @apply pl-2;
+}
+:host([circle]) .circle {
+  @apply block;
+}
+
+:host([circle=false]) .circle {
+  @apply hidden;
+}
+
+:host([variant=info]) {
+  @apply bg-sky-light;
+  @apply text-sky;
+}
+:host([variant=info]) .circle {
+  @apply bg-sky;
+}
+
+:host([variant=positive]) {
+  @apply bg-positive-light;
+  @apply text-positive;
+}
+:host([variant=positive]) .circle {
+  @apply bg-positive;
+}
+
+:host([variant=unbiased]) {
+  @apply bg-unbiased-light;
+  @apply text-unbiased;
+}
+:host([variant=unbiased]) .circle {
+  @apply bg-unbiased;
+}
+
+:host([variant=negative]) {
+  @apply bg-negative-light;
+  @apply text-negative;
+}
+:host([variant=negative]) .circle {
+  @apply bg-negative;
+} .static{position:static!important}*{box-sizing:border-box}

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

@@ -0,0 +1,64 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Tag {
+  constructor() {
+    /**
+     * Variant of the tag
+     */
+    this.variant = 'info';
+    /**
+     * Wether to add the circle or not
+     */
+    this.circle = true;
+  }
+  render() {
+    return (h(Host, { class: "p-tag" },
+      h("div", { class: "circle" }),
+      h("slot", null)));
+  }
+  static get is() { return "p-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tag.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tag.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'positive'\n        | 'unbiased'\n        | 'negative'\n        | 'info'",
+        "resolved": "\"info\" | \"negative\" | \"positive\" | \"unbiased\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of the tag"
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "'info'"
+    },
+    "circle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to add the circle or not"
+      },
+      "attribute": "circle",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+}

package/dist/collection/components/atoms/tooltip/tooltip.component.css

@@ -0,0 +1,43 @@
+:host {
+  @apply flex cursor-pointer;
+}
+:host .popover-container {
+  @apply w-0 h-0 relative;
+}
+:host .popover-container .popover {
+  @apply bg-white hidden text-xs font-medium py-2 px-3 rounded drop-shadow-4;
+  max-width: 14.5rem;
+}
+:host .popover-container .popover.variant-hover, :host .popover-container .popover.variant-error {
+  @apply bg-storm text-white py-1;
+}
+:host .popover-container .popover.variant-error {
+  @apply bg-negative uppercase tracking-wider;
+}
+:host .popover-container .popover[data-show] {
+  @apply block;
+}
+:host .popover-container .popover .arrow,
+:host .popover-container .popover .arrow::before {
+  background: inherit;
+  @apply absolute w-2 h-2;
+}
+:host .popover-container .popover .arrow {
+  visibility: hidden;
+}
+:host .popover-container .popover .arrow::before {
+  @apply visible transform rotate-45;
+  content: "";
+}
+:host .popover-container .popover[data-popper-placement^=top] > .arrow {
+  @apply -bottom-1;
+}
+:host .popover-container .popover[data-popper-placement^=bottom] > .arrow {
+  @apply -top-1;
+}
+:host .popover-container .popover[data-popper-placement^=left] > .arrow {
+  @apply -right-1;
+}
+:host .popover-container .popover[data-popper-placement^=right] > .arrow {
+  @apply -left-1;
+} .static{position:static!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}*{box-sizing:border-box}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}

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

@@ -0,0 +1,317 @@
+import { createPopper } from '@popperjs/core';
+import { Component, Element, Event, h, Host, Listen, Prop, } from '@stencil/core';
+export class Tooltip {
+  constructor() {
+    /**
+     * The variant of the popover
+     */
+    this.variant = 'hover';
+    /**
+     * The content of the popover
+     */
+    this.popover = null;
+    /**
+     * The placement of the popover
+     */
+    this.placement = 'top';
+    /**
+     * The strategy of the popover placement
+     */
+    this.strategy = 'fixed';
+    /**
+     * Wether to show the popover
+     */
+    this.show = false;
+    /**
+     * Wether to someone can manually close the popover
+     */
+    this.canManuallyClose = true;
+    this._loaded = false;
+  }
+  componentShouldUpdate() {
+    this._setOptions();
+  }
+  render() {
+    return (h(Host, { class: "p-popover" },
+      h("slot", { name: "content" }),
+      h("div", { class: "popover-container" },
+        h("div", { class: `popover variant-${this.variant}`, role: "popover", ref: (el) => this._load(el) },
+          this.popover ? this.popover : h("slot", { name: "popover" }),
+          h("div", { class: "arrow", "data-popper-arrow": true })))));
+  }
+  clickHandler() {
+    if (this.variant === 'hover') {
+      return;
+    }
+    if (this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    this._show();
+  }
+  documentClickHandler() {
+    if (this.variant === 'hover' || !this.canManuallyClose) {
+      return;
+    }
+    if (!this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    this._hide();
+  }
+  mouseEnterHandler() {
+    if (this.variant !== 'hover') {
+      return;
+    }
+    this._show();
+  }
+  mouseLeaveHandler() {
+    if (this.show || this.variant !== 'hover') {
+      return;
+    }
+    this._hide();
+  }
+  _show() {
+    if (!this._loaded) {
+      return;
+    }
+    // Make the popover visible
+    this._popover.setAttribute('data-show', '');
+    // Enable the event listeners
+    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
+        ...options.modifiers,
+        { name: 'eventListeners', enabled: true },
+      ] })));
+    // Update its position
+    this._popper.update();
+    this.isOpen.emit(true);
+  }
+  _hide() {
+    if (!this._loaded) {
+      return;
+    }
+    // Hide the popover
+    this._popover.removeAttribute('data-show');
+    // Disable the event listeners
+    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
+        ...options.modifiers,
+        { name: 'eventListeners', enabled: false },
+      ] })));
+    this.isOpen.emit(false);
+  }
+  _load(popover) {
+    this._popover = popover;
+    if (popover) {
+      this._popper = createPopper(this._el, popover, {
+        strategy: this.strategy,
+      });
+      this._setOptions();
+      this._loaded = true;
+      if (this.show) {
+        setTimeout(() => this._show(), 100);
+      }
+    }
+  }
+  _setOptions() {
+    if (!this._popper) {
+      return;
+    }
+    this._popper.setOptions({
+      placement: this.variant === 'error' ? 'top-end' : this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: this.variant === 'error' ? [8, 14] : [0, 8],
+          },
+        },
+        {
+          name: 'arrow',
+          options: {
+            padding: 4,
+          },
+        },
+      ],
+    });
+  }
+  static get is() { return "p-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tooltip.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tooltip.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'hover' | 'click' | 'error'",
+        "resolved": "\"click\" | \"error\" | \"hover\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the popover"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'hover'"
+    },
+    "popover": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content of the popover"
+      },
+      "attribute": "popover",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@popperjs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the popover"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    },
+    "strategy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PositioningStrategy",
+        "resolved": "\"absolute\" | \"fixed\"",
+        "references": {
+          "PositioningStrategy": {
+            "location": "import",
+            "path": "@popperjs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The strategy of the popover placement"
+      },
+      "attribute": "strategy",
+      "reflect": false,
+      "defaultValue": "'fixed'"
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the popover"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "canManuallyClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to someone can manually close the popover"
+      },
+      "attribute": "can-manually-close",
+      "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": {}
+      }
+    }]; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "clickHandler",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "documentClickHandler",
+      "target": "document",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "mouseenter",
+      "method": "mouseEnterHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "focus",
+      "method": "mouseEnterHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseleave",
+      "method": "mouseLeaveHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "blur",
+      "method": "mouseLeaveHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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": {}
+      }
+    }]; }
+}