@empathyco/x-components 6.0.0-alpha.7 → 6.0.0-alpha.71

package/js/components/page-selector.vue2.js

@@ -0,0 +1,128 @@
+import { defineComponent, computed } from 'vue';
+import '../composables/create-use-device.js';
+import '@vue/devtools-api';
+import '../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../plugins/devtools/colors.utils.js';
+import '../plugins/x-bus.js';
+import '../plugins/x-plugin.js';
+import 'vuex';
+import { useXBus } from '../composables/use-x-bus.js';
+import '@vueuse/core';
+
+/**
+ * Component that renders a pagination control with buttons for navigating
+ * between pages. It displays the current page, allows selecting other pages,
+ * and emits events when a page is selected.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'PageSelector',
+    props: {
+        /**
+         * CSS classes to customize the prev/next buttons.
+         */
+        buttonClasses: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * The current page number.
+         */
+        currentPage: {
+            type: Number,
+            required: true,
+        },
+        /**
+         * The string content of the hidden pages.
+         */
+        hiddenPage: {
+            type: String,
+            default: '...',
+        },
+        /**
+         * CSS classes to customize the page items.
+         */
+        itemClasses: {
+            type: Function,
+            default: () => [],
+        },
+        /**
+         * The number of pages to show before and after the current page.
+         */
+        range: {
+            type: Number,
+            default: 2,
+        },
+        /**
+         * The class of the scroll container to scroll to top when a page is selected.
+         */
+        scrollTarget: {
+            type: String,
+            default: 'main-scroll',
+        },
+        /**
+         * The total number of pages.
+         */
+        totalPages: {
+            type: Number,
+            required: true,
+        },
+    },
+    setup(props) {
+        const bus = useXBus();
+        const visiblePages = computed(() => {
+            const start = Math.max(props.currentPage - props.range, 1);
+            const end = Math.min(props.currentPage + props.range, props.totalPages);
+            const pages = Array.from({ length: end - start + 1 }, (_, i) => {
+                const pageValue = start + i;
+                return { value: pageValue, isSelected: pageValue === props.currentPage };
+            });
+            // Ensure first and last pages are always visible when needed
+            if (start > 1) {
+                pages.unshift({ value: 1, isSelected: props.currentPage === 1 });
+                if (start > 2) {
+                    pages.splice(1, 0, { value: props.hiddenPage, isSelected: false });
+                }
+            }
+            if (end < props.totalPages) {
+                if (end < props.totalPages - 1) {
+                    pages.push({ value: props.hiddenPage, isSelected: false });
+                }
+                pages.push({
+                    value: props.totalPages,
+                    isSelected: props.totalPages === props.currentPage,
+                });
+            }
+            return pages;
+        });
+        /**
+         * Handles the selection of a page.
+         *
+         * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.
+         */
+        const selectPage = (page) => {
+            if (page === '...') {
+                return;
+            }
+            if (typeof page === 'number' && page > 0 && page <= props.totalPages) {
+                bus.emit('UserSelectedAPage', page);
+                /**
+                 * Emits scroll to top to prevent keeping the position if there is more content
+                 * after results, as for example Next Queries Preview.
+                 */
+                bus.emit('UserClickedScrollToTop', props.scrollTarget);
+            }
+        };
+        return {
+            visiblePages,
+            selectPage,
+        };
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=page-selector.vue2.js.map

package/js/components/page-selector.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-selector.vue2.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n      @click=\"selectPage(currentPage - 1)\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      class=\"x-button x-page-selector__page\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage,\n        },\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n      @click=\"selectPage(page.value)\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n      @click=\"selectPage(currentPage + 1)\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useXBus } from '../composables'\n\ninterface PageItem {\n  value: number | string\n  isSelected: boolean\n}\n\n/**\n * Component that renders a pagination control with buttons for navigating\n * between pages. It displays the current page, allows selecting other pages,\n * and emits events when a page is selected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PageSelector',\n  props: {\n    /**\n     * CSS classes to customize the prev/next buttons.\n     */\n    buttonClasses: {\n      type: Array as PropType<(string | Dictionary<boolean>)[]>,\n      default: () => [],\n    },\n    /**\n     * The current page number.\n     */\n    currentPage: {\n      type: Number,\n      required: true,\n    },\n    /**\n     * The string content of the hidden pages.\n     */\n    hiddenPage: {\n      type: String,\n      default: '...',\n    },\n    /**\n     * CSS classes to customize the page items.\n     */\n    itemClasses: {\n      type: Function as PropType<\n        (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * The number of pages to show before and after the current page.\n     */\n    range: {\n      type: Number,\n      default: 2,\n    },\n    /**\n     * The class of the scroll container to scroll to top when a page is selected.\n     */\n    scrollTarget: {\n      type: String,\n      default: 'main-scroll',\n    },\n    /**\n     * The total number of pages.\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    const visiblePages = computed(() => {\n      const start = Math.max(props.currentPage - props.range, 1)\n      const end = Math.min(props.currentPage + props.range, props.totalPages)\n      const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n        const pageValue: string | number = start + i\n        return { value: pageValue, isSelected: pageValue === props.currentPage }\n      })\n\n      // Ensure first and last pages are always visible when needed\n      if (start > 1) {\n        pages.unshift({ value: 1, isSelected: props.currentPage === 1 })\n        if (start > 2) {\n          pages.splice(1, 0, { value: props.hiddenPage, isSelected: false })\n        }\n      }\n      if (end < props.totalPages) {\n        if (end < props.totalPages - 1) {\n          pages.push({ value: props.hiddenPage, isSelected: false })\n        }\n        pages.push({\n          value: props.totalPages,\n          isSelected: props.totalPages === props.currentPage,\n        })\n      }\n\n      return pages\n    })\n\n    /**\n     * Handles the selection of a page.\n     *\n     * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n     */\n    const selectPage = (page: number | string): void => {\n      if (page === '...') {\n        return\n      }\n      if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n        bus.emit('UserSelectedAPage', page)\n        /**\n         * Emits scroll to top to prevent keeping the position if there is more content\n         * after results, as for example Next Queries Preview.\n         */\n        bus.emit('UserClickedScrollToTop', props.scrollTarget)\n      }\n    }\n\n    return {\n      visiblePages,\n      selectPage,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.x-page-selector {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n}\n\n.x-page-selector__page--current,\n.x-page-selector__page--hidden {\n  cursor: default;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 0,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"page\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 2,\n      totalPages: 10,\n    }\n  },\n}\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"page\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\nimport { PageSelector } from '@empathyco/x-components'\n\nexport default {\n  name: 'PageSelectorDemo',\n  components: {\n    PageSelector,\n  },\n  data() {\n    return {\n      page: 6,\n      totalPages: 100,\n      range: 4,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4DA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAE;AAClB,SAAA;AACD;;AAEE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;AAEE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;AAEE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,QAEL;AACD,YAAA,OAAO,EAAE,MAAM,EAAE;AAClB,SAAA;AACD;;AAEE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA;AACD;;AAEE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,GAAE,GAAI,OAAO,EAAC,CAAA;AAEpB,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM;AAClC,YAAA,MAAM,KAAI,GAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,WAAY,GAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAA,CAAA;AACzD,YAAA,MAAM,GAAI,GAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,WAAY,GAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA,CAAA;YACtE,MAAM,KAAK,GAAe,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAE,GAAI,KAAI,GAAI,CAAA,EAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;AAC1E,gBAAA,MAAM,SAAS,GAAoB,QAAQ,CAAA,CAAA;AAC3C,gBAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAQ,KAAM,KAAK,CAAC,WAAY,EAAA,CAAA;AACzE,aAAC,CAAA,CAAA;;YAGD,IAAI,KAAI,GAAI,CAAC,EAAE;AACb,gBAAA,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,WAAU,KAAM,CAAA,EAAG,CAAA,CAAA;gBAC/D,IAAI,KAAI,GAAI,CAAC,EAAE;AACb,oBAAA,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAI,EAAG,CAAA,CAAA;AACnE,iBAAA;AACF,aAAA;AACA,YAAA,IAAI,MAAM,KAAK,CAAC,UAAU,EAAE;AAC1B,gBAAA,IAAI,GAAE,GAAI,KAAK,CAAC,UAAS,GAAI,CAAC,EAAE;AAC9B,oBAAA,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAI,EAAG,CAAA,CAAA;AAC3D,iBAAA;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,KAAK,EAAE,KAAK,CAAC,UAAU;AACvB,oBAAA,UAAU,EAAE,KAAK,CAAC,eAAe,KAAK,CAAC,WAAW;AACnD,iBAAA,CAAA,CAAA;AACH,aAAA;AAEA,YAAA,OAAO,KAAI,CAAA;AACb,SAAC,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,UAAS,GAAI,CAAC,IAAqB,KAAW;YAClD,IAAI,IAAK,KAAI,KAAK,EAAE;gBAClB,OAAK;AACP,aAAA;AACA,YAAA,IAAI,OAAO,IAAG,KAAM,QAAO,IAAK,IAAK,GAAE,CAAE,IAAG,IAAK,IAAG,KAAK,CAAC,UAAU,EAAE;AACpE,gBAAA,GAAG,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAA,CAAA;AAClC;;;AAGE;gBACF,GAAG,CAAC,IAAI,CAAC,wBAAwB,EAAE,KAAK,CAAC,YAAY,CAAA,CAAA;AACvD,aAAA;AACF,SAAA,CAAA;QAEA,OAAO;YACL,YAAY;YACZ,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/page-selector.vue3.js

@@ -0,0 +1,7 @@
+import injectCss from '../../tools/inject-css.js';
+
+var css = ".x-page-selector[data-v-b08cf95a]{align-items:center;display:flex;gap:2px;justify-content:center}.x-page-selector__page--current[data-v-b08cf95a],.x-page-selector__page--hidden[data-v-b08cf95a]{cursor:default}";
+injectCss(css);
+
+export { css, css as default };
+//# sourceMappingURL=page-selector.vue3.js.map

package/js/components/page-selector.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-selector.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/panels/base-header-toggle-panel.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-header-toggle-panel.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createVNode, withCtx } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createVNode, withCtx } from 'vue';
 import './base-header-toggle-panel.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -7,18 +7,15 @@ const _hoisted_1 = { class: "x-header-toggle-panel" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseTogglePanel = resolveComponent("BaseTogglePanel");
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    createCommentVNode(" @slot (Required) Slot that is be used for replacing the whole header. "),
     renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({ toggleOpen: _ctx.toggleOpen, open: _ctx.open })), () => [
-      createCommentVNode(" header-toggle-panel__header "),
       createElementVNode(
         "button",
         {
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleOpen && _ctx.toggleOpen(...args)),
           class: normalizeClass(["x-header-toggle-panel__header", _ctx.headerClass]),
-          "data-test": "toggle-panel-header"
+          "data-test": "toggle-panel-header",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleOpen && _ctx.toggleOpen(...args))
         },
         [
-          createCommentVNode(" @slot (Required) Slot used to just pass the content. "),
           renderSlot(_ctx.$slots, "header-content", normalizeProps(guardReactiveProps({ open: _ctx.open })), void 0, true)
         ],
         2
@@ -30,7 +27,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       animation: _ctx.animation
     }, {
       default: withCtx(() => [
-        createCommentVNode(" @slot (Required) Default content. "),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]),
       _: 3

package/js/components/panels/base-header-toggle-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-header-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-header-toggle-panel.vue"],"sourcesContent":["<template>\n  <div class=\"x-header-toggle-panel\">\n    <!-- @slot (Required) Slot that is be used for replacing the whole header. -->\n    <slot name=\"header\" v-bind=\"{ toggleOpen, open }\">\n      <!-- header-toggle-panel__header -->\n      <button\n        @click=\"toggleOpen\"\n        class=\"x-header-toggle-panel__header\"\n        :class=\"headerClass\"\n        data-test=\"toggle-panel-header\"\n      >\n        <!-- @slot (Required) Slot used to just pass the content. -->\n        <slot name=\"header-content\" v-bind=\"{ open }\"></slot>\n      </button>\n    </slot>\n\n    <BaseTogglePanel :open=\"open\" :animation=\"animation\">\n      <!-- @slot (Required) Default content. -->\n      <slot />\n    </BaseTogglePanel>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { AnimationProp } from '../../types';\n  import { NoAnimation } from '../animations';\n  import BaseTogglePanel from './base-toggle-panel.vue';\n\n  /**\n   * Toggle panel which uses the base toggle panel, adds a header and manage the\n   * open / close state of the panel.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseHeaderTogglePanel',\n    components: { BaseTogglePanel },\n    props: {\n      /** Animation component that will be used to animate the base-toggle-panel. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /** Handles if the panel is open by default. */\n      startCollapsed: Boolean,\n      /** Class inherited by content element. */\n      headerClass: String\n    },\n    setup: function (props, { emit }) {\n      /**\n       * Handles if the base panel is open or closed.\n       *\n       * @internal\n       */\n      const open = ref(!props.startCollapsed);\n\n      /**\n       * Emits open status event.\n       *\n       * @internal\n       */\n      const emitOpenStatusEvent = () => {\n        emit(open.value ? 'open' : 'close');\n      };\n\n      /**\n       * Toggles the open property.\n       *\n       * @internal\n       */\n      const toggleOpen = () => {\n        open.value = !open.value;\n        emitOpenStatusEvent();\n      };\n\n      return {\n        open,\n        toggleOpen\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-header-toggle-panel__header {\n    cursor: pointer;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `open`: the event is emitted after the user clicks the element and opens it.\n- `close`: the event is emitted after the user clicks the element and closes it.\n\n## Examples\n\nToggle panel which uses the base toggle panel, adds a header and manage the open / close state of\nthe panel.\n\n### Basic usage\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"false\">\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Custom header\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"true\">\n  <template #header=\"{ toggleOpen, open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n    <button @click=\"toggleOpen\">Toggle</button>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Customizing default header with classes\n\nThe `headerClass` prop can be used to add classes to the header of the toggle panel.\n\n```vue\n<BaseHeaderTogglePanel\n  headerClass=\"custom-class\"\n  :animation=\"collapseHeight\"\n  :start-collapsed=\"false\"\n>\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_createVNode","animation","_withCtx"],"mappings":";;;;;;;qCACEA,gBAmBM,CAAA,iBAAA,CAAA,CAAA;AAjBJ,EAAA,OAAAC,SAAA,EAHJ,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA,CAIM,yEAAoC,CAAA;AAAA,IAAAC,UAAA,CACpC,IAQS,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,IAAA,EAAA,IAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,MAAAH,kBAAA,CAPD,+BAAE,CAAA;AAAA,MAAAI,kBAAA;AANhB,QAAA,QAAA;AAAA,QAOc;AAAA,UAEN,gBAAU,CAAqB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,+BAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAE/B,UAAA,WAAA,EAAA,qBAAA;AAAA,SAAA;AACA,QAAA;AAAA,UAAAL,kBAAA,CAAA,wDAAA,CAAA;;AAIJ,SAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAGkB;AAAA,KAAA,EAHA,IAAI,CAAA;AAAA,IAAAM,WAAA,CAAoBC,0BAAS,EAAA;AAAA,MAAA,IAAA,EAAA,IAAA,CAAA,IAAA;AAhBvD,MAAA,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,KAAA,EAAA;eAkBMC,OAAQ,CAAA,MAAA;AAAA,QAAAR,kBAAA,CAAA,qCAAA,CAAA;AAlBd,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"base-header-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-header-toggle-panel.vue"],"sourcesContent":["<template>\n  <div class=\"x-header-toggle-panel\">\n    <!-- @slot (Required) Slot that is be used for replacing the whole header. -->\n    <slot name=\"header\" v-bind=\"{ toggleOpen, open }\">\n      <!-- header-toggle-panel__header -->\n      <button\n        class=\"x-header-toggle-panel__header\"\n        :class=\"headerClass\"\n        data-test=\"toggle-panel-header\"\n        @click=\"toggleOpen\"\n      >\n        <!-- @slot (Required) Slot used to just pass the content. -->\n        <slot name=\"header-content\" v-bind=\"{ open }\"></slot>\n      </button>\n    </slot>\n\n    <BaseTogglePanel :open=\"open\" :animation=\"animation\">\n      <!-- @slot (Required) Default content. -->\n      <slot />\n    </BaseTogglePanel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { NoAnimation } from '../animations'\nimport BaseTogglePanel from './base-toggle-panel.vue'\n\n/**\n * Toggle panel which uses the base toggle panel, adds a header and manage the\n * open / close state of the panel.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseHeaderTogglePanel',\n  components: { BaseTogglePanel },\n  props: {\n    /** Animation component that will be used to animate the base-toggle-panel. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Handles if the panel is open by default. */\n    startCollapsed: Boolean,\n    /** Class inherited by content element. */\n    headerClass: String,\n  },\n  setup(props, { emit }) {\n    /**\n     * Handles if the base panel is open or closed.\n     *\n     * @internal\n     */\n    const open = ref(!props.startCollapsed)\n\n    /**\n     * Emits open status event.\n     *\n     * @internal\n     */\n    const emitOpenStatusEvent = () => {\n      emit(open.value ? 'open' : 'close')\n    }\n\n    /**\n     * Toggles the open property.\n     *\n     * @internal\n     */\n    const toggleOpen = () => {\n      open.value = !open.value\n      emitOpenStatusEvent()\n    }\n\n    return {\n      open,\n      toggleOpen,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-header-toggle-panel__header {\n  cursor: pointer;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `open`: the event is emitted after the user clicks the element and opens it.\n- `close`: the event is emitted after the user clicks the element and closes it.\n\n## Examples\n\nToggle panel which uses the base toggle panel, adds a header and manage the open / close state of\nthe panel.\n\n### Basic usage\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"false\">\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Custom header\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"true\">\n  <template #header=\"{ toggleOpen, open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n    <button @click=\"toggleOpen\">Toggle</button>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Customizing default header with classes\n\nThe `headerClass` prop can be used to add classes to the header of the toggle panel.\n\n```vue\n<BaseHeaderTogglePanel\n  headerClass=\"custom-class\"\n  :animation=\"collapseHeight\"\n  :start-collapsed=\"false\"\n>\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_renderSlot","_normalizeProps","headerClass","_createElementVNode","_normalizeClass","open","_createVNode","animation"],"mappings":";;;;;;;qCACEA,gBAmBM,CAAA,iBAAA,CAAA,CAAA;SAfFC,SAQS,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAbfC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAMcC,kCACEC,EAAW,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,IAAA,EAAA,IAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,MAAAC,kBAAA;AACT,QAAA,QAAA;AAAA,QAAA;AAAA,UACT,OAAKC,cAAE,CAAA,CAAA,+BAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,UAAA,WAAA,EAAA,qBAAA;AAGR,UAAA,OAAA,EAAA,MAAA,CAAqD,gCAZ7D,IAY8CC,CAAAA,UAAAA,IAAAA,IAAAA,CAAAA,UAAAA,CAAAA,GAAAA,IAAAA,CAAAA,CAAAA;AAAAA,SAAAA;;;AAI1C,SAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAGkB;AAAA,KAAA,EAHA,IAAI,CAAA;AAAA,IAAAC,WAAA,CAAoBC,0BAAS,EAAA;AAAA,MAAA,IAAA,EAAA,IAAA,CAAA,IAAA;AAhBvD,MAAA,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,KAAA,EAAA;;AAAA,QAAAP,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/components/panels/base-header-toggle-panel.vue2.js

@@ -1,5 +1,8 @@
 import { defineComponent, ref } from 'vue';
 import { AnimationProp } from '../../types/animation-prop.js';
+import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
+import '../animations/animate-scale/animate-scale.style.scss.js';
+import '../animations/animate-translate/animate-translate.style.scss.js';
 import '../animations/animate-width.vue2.js';
 import '../animations/animate-width.vue3.js';
 import '../animations/collapse-height.vue2.js';
@@ -8,16 +11,13 @@ import '../animations/collapse-width.vue2.js';
 import '../animations/collapse-width.vue3.js';
 import '../animations/cross-fade.vue2.js';
 import '../animations/cross-fade.vue3.js';
-import '../animations/fade.vue2.js';
-import '../animations/fade.vue3.js';
 import '../animations/fade-and-slide.vue2.js';
 import '../animations/fade-and-slide.vue3.js';
+import '../animations/fade.vue2.js';
+import '../animations/fade.vue3.js';
 import _sfc_main$1 from '../animations/no-animation.vue.js';
 import '../animations/staggered-fade-and-slide.vue2.js';
 import '../animations/staggered-fade-and-slide.vue3.js';
-import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
-import '../animations/animate-scale/animate-scale.style.scss.js';
-import '../animations/animate-translate/animate-translate.style.scss.js';
 import BaseTogglePanel from './base-toggle-panel.vue.js';
 
 /**
@@ -33,14 +33,14 @@ var _sfc_main = defineComponent({
         /** Animation component that will be used to animate the base-toggle-panel. */
         animation: {
             type: AnimationProp,
-            default: () => _sfc_main$1
+            default: () => _sfc_main$1,
         },
         /** Handles if the panel is open by default. */
         startCollapsed: Boolean,
         /** Class inherited by content element. */
-        headerClass: String
+        headerClass: String,
     },
-    setup: function (props, { emit }) {
+    setup(props, { emit }) {
         /**
          * Handles if the base panel is open or closed.
          *
@@ -66,9 +66,9 @@ var _sfc_main = defineComponent({
         };
         return {
             open,
-            toggleOpen
+            toggleOpen,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/panels/base-header-toggle-panel.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-header-toggle-panel.vue2.js","sources":["../../../../src/components/panels/base-header-toggle-panel.vue"],"sourcesContent":["<template>\n  <div class=\"x-header-toggle-panel\">\n    <!-- @slot (Required) Slot that is be used for replacing the whole header. -->\n    <slot name=\"header\" v-bind=\"{ toggleOpen, open }\">\n      <!-- header-toggle-panel__header -->\n      <button\n        @click=\"toggleOpen\"\n        class=\"x-header-toggle-panel__header\"\n        :class=\"headerClass\"\n        data-test=\"toggle-panel-header\"\n      >\n        <!-- @slot (Required) Slot used to just pass the content. -->\n        <slot name=\"header-content\" v-bind=\"{ open }\"></slot>\n      </button>\n    </slot>\n\n    <BaseTogglePanel :open=\"open\" :animation=\"animation\">\n      <!-- @slot (Required) Default content. -->\n      <slot />\n    </BaseTogglePanel>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { AnimationProp } from '../../types';\n  import { NoAnimation } from '../animations';\n  import BaseTogglePanel from './base-toggle-panel.vue';\n\n  /**\n   * Toggle panel which uses the base toggle panel, adds a header and manage the\n   * open / close state of the panel.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseHeaderTogglePanel',\n    components: { BaseTogglePanel },\n    props: {\n      /** Animation component that will be used to animate the base-toggle-panel. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /** Handles if the panel is open by default. */\n      startCollapsed: Boolean,\n      /** Class inherited by content element. */\n      headerClass: String\n    },\n    setup: function (props, { emit }) {\n      /**\n       * Handles if the base panel is open or closed.\n       *\n       * @internal\n       */\n      const open = ref(!props.startCollapsed);\n\n      /**\n       * Emits open status event.\n       *\n       * @internal\n       */\n      const emitOpenStatusEvent = () => {\n        emit(open.value ? 'open' : 'close');\n      };\n\n      /**\n       * Toggles the open property.\n       *\n       * @internal\n       */\n      const toggleOpen = () => {\n        open.value = !open.value;\n        emitOpenStatusEvent();\n      };\n\n      return {\n        open,\n        toggleOpen\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-header-toggle-panel__header {\n    cursor: pointer;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `open`: the event is emitted after the user clicks the element and opens it.\n- `close`: the event is emitted after the user clicks the element and closes it.\n\n## Examples\n\nToggle panel which uses the base toggle panel, adds a header and manage the open / close state of\nthe panel.\n\n### Basic usage\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"false\">\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Custom header\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"true\">\n  <template #header=\"{ toggleOpen, open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n    <button @click=\"toggleOpen\">Toggle</button>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Customizing default header with classes\n\nThe `headerClass` prop can be used to add classes to the header of the toggle panel.\n\n```vue\n<BaseHeaderTogglePanel\n  headerClass=\"custom-class\"\n  :animation=\"collapseHeight\"\n  :start-collapsed=\"false\"\n>\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;;AAED,QAAA,cAAc,EAAE,OAAO;;AAEvB,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;AACD,IAAA,KAAK,EAAE,UAAU,KAAK,EAAE,EAAE,IAAK,EAAC,EAAA;AAC9B;;;;AAIE;QACF,MAAM,IAAK,GAAE,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;AAEvC;;;;AAIE;QACF,MAAM,mBAAkB,GAAI,MAAM;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,KAAI,GAAI,MAAO,GAAE,OAAO,CAAC,CAAA;AACrC,SAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,IAAI,CAAC,KAAM,GAAE,CAAC,IAAI,CAAC,KAAK,CAAA;AACxB,YAAA,mBAAmB,EAAE,CAAA;AACvB,SAAC,CAAA;QAED,OAAO;YACL,IAAI;YACJ,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-header-toggle-panel.vue2.js","sources":["../../../../src/components/panels/base-header-toggle-panel.vue"],"sourcesContent":["<template>\n  <div class=\"x-header-toggle-panel\">\n    <!-- @slot (Required) Slot that is be used for replacing the whole header. -->\n    <slot name=\"header\" v-bind=\"{ toggleOpen, open }\">\n      <!-- header-toggle-panel__header -->\n      <button\n        class=\"x-header-toggle-panel__header\"\n        :class=\"headerClass\"\n        data-test=\"toggle-panel-header\"\n        @click=\"toggleOpen\"\n      >\n        <!-- @slot (Required) Slot used to just pass the content. -->\n        <slot name=\"header-content\" v-bind=\"{ open }\"></slot>\n      </button>\n    </slot>\n\n    <BaseTogglePanel :open=\"open\" :animation=\"animation\">\n      <!-- @slot (Required) Default content. -->\n      <slot />\n    </BaseTogglePanel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { NoAnimation } from '../animations'\nimport BaseTogglePanel from './base-toggle-panel.vue'\n\n/**\n * Toggle panel which uses the base toggle panel, adds a header and manage the\n * open / close state of the panel.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseHeaderTogglePanel',\n  components: { BaseTogglePanel },\n  props: {\n    /** Animation component that will be used to animate the base-toggle-panel. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Handles if the panel is open by default. */\n    startCollapsed: Boolean,\n    /** Class inherited by content element. */\n    headerClass: String,\n  },\n  setup(props, { emit }) {\n    /**\n     * Handles if the base panel is open or closed.\n     *\n     * @internal\n     */\n    const open = ref(!props.startCollapsed)\n\n    /**\n     * Emits open status event.\n     *\n     * @internal\n     */\n    const emitOpenStatusEvent = () => {\n      emit(open.value ? 'open' : 'close')\n    }\n\n    /**\n     * Toggles the open property.\n     *\n     * @internal\n     */\n    const toggleOpen = () => {\n      open.value = !open.value\n      emitOpenStatusEvent()\n    }\n\n    return {\n      open,\n      toggleOpen,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-header-toggle-panel__header {\n  cursor: pointer;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `open`: the event is emitted after the user clicks the element and opens it.\n- `close`: the event is emitted after the user clicks the element and closes it.\n\n## Examples\n\nToggle panel which uses the base toggle panel, adds a header and manage the open / close state of\nthe panel.\n\n### Basic usage\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"false\">\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Custom header\n\n```vue\n<BaseHeaderTogglePanel :animation=\"collapseHeight\" :start-collapsed=\"true\">\n  <template #header=\"{ toggleOpen, open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n    <button @click=\"toggleOpen\">Toggle</button>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n\n### Customizing default header with classes\n\nThe `headerClass` prop can be used to add classes to the header of the toggle panel.\n\n```vue\n<BaseHeaderTogglePanel\n  headerClass=\"custom-class\"\n  :animation=\"collapseHeight\"\n  :start-collapsed=\"false\"\n>\n  <template #header-content=\"{ open }\">\n    <p>Header, open: {{ open ? 'close' : 'open' }}</p>\n  </template>\n  <template>\n    <p>Default content</p>\n  </template>\n</BaseHeaderTogglePanel>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;;AAED,QAAA,cAAc,EAAE,OAAO;;AAEvB,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;AAIE;QACF,MAAM,IAAK,GAAE,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,CAAA,CAAA;AAEtC;;;;AAIE;QACF,MAAM,mBAAkB,GAAI,MAAM;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,KAAI,GAAI,MAAO,GAAE,OAAO,CAAA,CAAA;AACpC,SAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,IAAI,CAAC,KAAI,GAAI,CAAC,IAAI,CAAC,KAAI,CAAA;AACvB,YAAA,mBAAmB,EAAC,CAAA;AACtB,SAAA,CAAA;QAEA,OAAO;YACL,IAAI;YACJ,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/panels/base-id-toggle-panel-button.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-id-toggle-panel-button.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,7 +11,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-pressed": _ctx.isPanelOpen.toString()
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
       renderSlot(_ctx.$slots, "default", { isPanelOpen: _ctx.isPanelOpen })
     ]),
     _: 3

package/js/components/panels/base-id-toggle-panel-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel-button.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-base-id-toggle-panel-button x-button\"\n    data-test=\"base-id-toggle-button\"\n    :aria-pressed=\"isPanelOpen.toString()\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot :isPanelOpen=\"isPanelOpen\" />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref, computed } from 'vue';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import { WireMetadata } from '../../wiring/wiring.types';\n  import BaseEventButton from '../base-event-button.vue';\n  import { useXBus } from '../../composables';\n\n  /**\n   * Component containing an event button that emits\n   * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n   * the panelId as payload.\n   *\n   * It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseIdTogglePanelButton',\n    components: { BaseEventButton },\n    props: {\n      /**\n       * The panelId to use for the toggle event listeners.\n       */\n      panelId: {\n        type: String,\n        required: true\n      }\n    },\n    setup: function (props) {\n      const bus = useXBus();\n\n      /**\n       * The panel state to pass through the slot.\n       */\n      const isPanelOpen = ref(false);\n\n      /**\n       * List of events to emit by the BaseEventButton.\n       *\n       * @returns An object with the event and payload.\n       *\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedPanelToggleButton: props.panelId })\n      );\n\n      /**\n       * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n       * to update the `isPanelOpen` property.\n       *\n       * @param newState - The new isOpen state of the panel.\n       * @param id - The `panelId`.\n       */\n      const updatePanelState = (newState: boolean, { id }: WireMetadata) => {\n        if (props.panelId === id) {\n          isPanelOpen.value = newState;\n        }\n      };\n\n      bus\n        .on('TogglePanelStateChanged', false)\n        .subscribe(newState => updatePanelState(newState, { id: props.panelId, moduleName: null }));\n\n      return {\n        isPanelOpen,\n        events\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic example\n\nThe component rendering content passed to the default slot and opening the panel toggle with panelId\n`my-toggle`.\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton v-slot=\"{ isPanelOpen }\" panelId=\"myToggle\">\n      <template #default=\"{ isPanelOpen }\" v-if=\"isPanelOpen\">\n        <img src=\"./close-button-icon.svg\" />\n        <span>Close aside</span>\n      </template>\n      <template v-else>\n        <img src=\"./open-button-icon.svg\" />\n        <span>Open aside</span>\n      </template>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\n  import {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop\n  } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseIdTogglePanel,\n      BaseIdTogglePanelButton,\n      CollapseFromTop\n    },\n    data: function () {\n      return {\n        animation: CollapseFromTop\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANX,EAAA,OAAAC,SAAA,EAAyC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC9C,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IACT,KAAA,EAAA,wCAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;IALL,cAOyE,EAAA,IAAA,CAAA,WAAA,CAAA,QAAA,EAAA;AAAA,GAAA,EAAA;aACrEC,OAAmC,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,gEAAA,CAAA;AARvC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,IAAA,CAAA,WAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-id-toggle-panel-button.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-base-id-toggle-panel-button x-button\"\n    data-test=\"base-id-toggle-button\"\n    :aria-pressed=\"isPanelOpen.toString()\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot :is-panel-open=\"isPanelOpen\" />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { useXBus } from '../../composables'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component containing an event button that emits\n * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n * the panelId as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdTogglePanelButton',\n  components: { BaseEventButton },\n  props: {\n    /**\n     * The panelId to use for the toggle event listeners.\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    /**\n     * The panel state to pass through the slot.\n     */\n    const isPanelOpen = ref(false)\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedPanelToggleButton: props.panelId }),\n    )\n\n    /**\n     * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n     * to update the `isPanelOpen` property.\n     *\n     * @param newState - The new isOpen state of the panel.\n     * @param id - The `panelId`.\n     * @param id.id - The ID of the `panelId`.\n     */\n    const updatePanelState = (newState: boolean, { id }: WireMetadata) => {\n      if (props.panelId === id) {\n        isPanelOpen.value = newState\n      }\n    }\n\n    bus\n      .on('TogglePanelStateChanged', false)\n      .subscribe(newState => updatePanelState(newState, { id: props.panelId, moduleName: null }))\n\n    return {\n      isPanelOpen,\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic example\n\nThe component rendering content passed to the default slot and opening the panel toggle with panelId\n`my-toggle`.\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton v-slot=\"{ isPanelOpen }\" panelId=\"myToggle\">\n      <template #default=\"{ isPanelOpen }\" v-if=\"isPanelOpen\">\n        <img src=\"./close-button-icon.svg\" />\n        <span>Close aside</span>\n      </template>\n      <template v-else>\n        <img src=\"./open-button-icon.svg\" />\n        <span>Open aside</span>\n      </template>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\nimport {\n  BaseIdTogglePanel,\n  BaseIdTogglePanelButton,\n  CollapseFromTop,\n} from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop,\n  },\n  data: function () {\n    return {\n      animation: CollapseFromTop,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANX,EAAA,OAAAC,SAAA,EAAyC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC9C,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IACT,KAAA,EAAA,wCAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;IALL,cAQyC,EAAA,IAAA,CAAA,WAAA,CAAA,QAAA,EAAA;AAAA,GAAA,EAAA;;AARzC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,IAAA,CAAA,WAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/panels/base-id-toggle-panel-button.vue2.js

@@ -1,5 +1,4 @@
 import { defineComponent, ref, computed } from 'vue';
-import BaseEventButton from '../base-event-button.vue.js';
 import '../../composables/create-use-device.js';
 import '@vue/devtools-api';
 import '../../plugins/devtools/timeline.devtools.js';
@@ -12,6 +11,7 @@ import '../../plugins/x-plugin.js';
 import 'vuex';
 import { useXBus } from '../../composables/use-x-bus.js';
 import '@vueuse/core';
+import BaseEventButton from '../base-event-button.vue.js';
 
 /**
  * Component containing an event button that emits
@@ -31,10 +31,10 @@ var _sfc_main = defineComponent({
          */
         panelId: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
-    setup: function (props) {
+    setup(props) {
         const bus = useXBus();
         /**
          * The panel state to pass through the slot.
@@ -54,6 +54,7 @@ var _sfc_main = defineComponent({
          *
          * @param newState - The new isOpen state of the panel.
          * @param id - The `panelId`.
+         * @param id.id - The ID of the `panelId`.
          */
         const updatePanelState = (newState, { id }) => {
             if (props.panelId === id) {
@@ -65,9 +66,9 @@ var _sfc_main = defineComponent({
             .subscribe(newState => updatePanelState(newState, { id: props.panelId, moduleName: null }));
         return {
             isPanelOpen,
-            events
+            events,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/panels/base-id-toggle-panel-button.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel-button.vue2.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-base-id-toggle-panel-button x-button\"\n    data-test=\"base-id-toggle-button\"\n    :aria-pressed=\"isPanelOpen.toString()\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot :isPanelOpen=\"isPanelOpen\" />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref, computed } from 'vue';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import { WireMetadata } from '../../wiring/wiring.types';\n  import BaseEventButton from '../base-event-button.vue';\n  import { useXBus } from '../../composables';\n\n  /**\n   * Component containing an event button that emits\n   * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n   * the panelId as payload.\n   *\n   * It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseIdTogglePanelButton',\n    components: { BaseEventButton },\n    props: {\n      /**\n       * The panelId to use for the toggle event listeners.\n       */\n      panelId: {\n        type: String,\n        required: true\n      }\n    },\n    setup: function (props) {\n      const bus = useXBus();\n\n      /**\n       * The panel state to pass through the slot.\n       */\n      const isPanelOpen = ref(false);\n\n      /**\n       * List of events to emit by the BaseEventButton.\n       *\n       * @returns An object with the event and payload.\n       *\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedPanelToggleButton: props.panelId })\n      );\n\n      /**\n       * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n       * to update the `isPanelOpen` property.\n       *\n       * @param newState - The new isOpen state of the panel.\n       * @param id - The `panelId`.\n       */\n      const updatePanelState = (newState: boolean, { id }: WireMetadata) => {\n        if (props.panelId === id) {\n          isPanelOpen.value = newState;\n        }\n      };\n\n      bus\n        .on('TogglePanelStateChanged', false)\n        .subscribe(newState => updatePanelState(newState, { id: props.panelId, moduleName: null }));\n\n      return {\n        isPanelOpen,\n        events\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic example\n\nThe component rendering content passed to the default slot and opening the panel toggle with panelId\n`my-toggle`.\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton v-slot=\"{ isPanelOpen }\" panelId=\"myToggle\">\n      <template #default=\"{ isPanelOpen }\" v-if=\"isPanelOpen\">\n        <img src=\"./close-button-icon.svg\" />\n        <span>Close aside</span>\n      </template>\n      <template v-else>\n        <img src=\"./open-button-icon.svg\" />\n        <span>Open aside</span>\n      </template>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\n  import {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop\n  } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseIdTogglePanel,\n      BaseIdTogglePanelButton,\n      CollapseFromTop\n    },\n    data: function () {\n      return {\n        animation: CollapseFromTop\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,yBAAyB;IAC/B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB,QAAA,MAAM,GAAI,GAAE,OAAO,EAAE,CAAA;AAErB;;AAEE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AAE9B;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,4BAA4B,EAAE,KAAK,CAAC,SAAS,CAAA,CAC9E,CAAA;AAED;;;;;;AAME;QACF,MAAM,gBAAiB,GAAE,CAAC,QAAiB,EAAE,EAAE,EAAC,EAAiB,KAAK;AACpE,YAAA,IAAI,KAAK,CAAC,OAAQ,KAAI,EAAE,EAAE;AACxB,gBAAA,WAAW,CAAC,KAAM,GAAE,QAAQ,CAAA;AAC9B,aAAA;AACF,SAAC,CAAA;QAED,GAAE;AACC,aAAA,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAA;aACnC,SAAS,CAAC,QAAS,IAAG,gBAAgB,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,IAAK,EAAC,CAAC,CAAC,CAAA;QAE7F,OAAO;YACL,WAAW;YACX,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-id-toggle-panel-button.vue2.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-base-id-toggle-panel-button x-button\"\n    data-test=\"base-id-toggle-button\"\n    :aria-pressed=\"isPanelOpen.toString()\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot :is-panel-open=\"isPanelOpen\" />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { useXBus } from '../../composables'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Component containing an event button that emits\n * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n * the panelId as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdTogglePanelButton',\n  components: { BaseEventButton },\n  props: {\n    /**\n     * The panelId to use for the toggle event listeners.\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const bus = useXBus()\n\n    /**\n     * The panel state to pass through the slot.\n     */\n    const isPanelOpen = ref(false)\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedPanelToggleButton: props.panelId }),\n    )\n\n    /**\n     * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n     * to update the `isPanelOpen` property.\n     *\n     * @param newState - The new isOpen state of the panel.\n     * @param id - The `panelId`.\n     * @param id.id - The ID of the `panelId`.\n     */\n    const updatePanelState = (newState: boolean, { id }: WireMetadata) => {\n      if (props.panelId === id) {\n        isPanelOpen.value = newState\n      }\n    }\n\n    bus\n      .on('TogglePanelStateChanged', false)\n      .subscribe(newState => updatePanelState(newState, { id: props.panelId, moduleName: null }))\n\n    return {\n      isPanelOpen,\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic example\n\nThe component rendering content passed to the default slot and opening the panel toggle with panelId\n`my-toggle`.\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton v-slot=\"{ isPanelOpen }\" panelId=\"myToggle\">\n      <template #default=\"{ isPanelOpen }\" v-if=\"isPanelOpen\">\n        <img src=\"./close-button-icon.svg\" />\n        <span>Close aside</span>\n      </template>\n      <template v-else>\n        <img src=\"./open-button-icon.svg\" />\n        <span>Open aside</span>\n      </template>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\nimport {\n  BaseIdTogglePanel,\n  BaseIdTogglePanelButton,\n  CollapseFromTop,\n} from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop,\n  },\n  data: function () {\n    return {\n      animation: CollapseFromTop,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,yBAAyB;IAC/B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,GAAE,GAAI,OAAO,EAAC,CAAA;AAEpB;;AAEE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA,CAAA;AAE7B;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,4BAA4B,EAAE,KAAK,CAAC,OAAM,EAAG,CAAC,CAChF,CAAA;AAEA;;;;;;;AAOE;QACF,MAAM,gBAAiB,GAAE,CAAC,QAAiB,EAAE,EAAE,EAAC,EAAiB,KAAK;AACpE,YAAA,IAAI,KAAK,CAAC,OAAQ,KAAI,EAAE,EAAE;AACxB,gBAAA,WAAW,CAAC,KAAI,GAAI,QAAO,CAAA;AAC7B,aAAA;AACF,SAAA,CAAA;QAEA,GAAE;AACC,aAAA,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAA;aACnC,SAAS,CAAC,QAAS,IAAG,gBAAgB,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,IAAG,EAAG,CAAC,CAAA,CAAA;QAE5F,OAAO;YACL,WAAW;YACX,MAAM;SACR,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/panels/base-id-toggle-panel.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-id-toggle-panel.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -9,7 +9,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     animation: _ctx.animation
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Default content "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

package/js/components/panels/base-id-toggle-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel.vue"],"sourcesContent":["<template>\n  <BaseTogglePanel :open=\"isOpen\" :animation=\"animation\">\n    <!-- @slot (Required) Default content -->\n    <slot />\n  </BaseTogglePanel>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref, watch } from 'vue';\n  import { AnimationProp } from '../../types';\n  import { use$x } from '../../composables';\n  import { NoAnimation } from '../animations';\n  import BaseTogglePanel from './base-toggle-panel.vue';\n\n  /**\n   * Simple panel that could receives its initial open state via prop, if not the default is opens\n   * and a required prop, named `panelId`, which are responsible of rendering default slot\n   * inside a configurable transition.\n   *\n   * It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's\n   * 'panelId' prop, to handle its open/close state.\n   *\n   * The default slot offers the possibility to customise the modal content.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseIdTogglePanel',\n    components: { BaseTogglePanel },\n    props: {\n      /** Shows the panel open at the beginning or not, depending on its state. */\n      startOpen: {\n        type: Boolean,\n        default: true\n      },\n      /** Animation component that will be used to animate the panel content. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * The id to link with the BaseIdTogglePanelButton.\n       * Both components must use the same Id to make them interact.\n       */\n      panelId: {\n        type: String,\n        required: true\n      }\n    },\n    setup: function (props) {\n      const $x = use$x();\n\n      /** Whether the toggle panel is open or not. */\n      const isOpen = ref(props.startOpen);\n\n      /**\n       * Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n       *\n       * @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n       *\n       * @public\n       */\n      const togglePanel = (panelId: string) => {\n        if (props.panelId === panelId) {\n          isOpen.value = !isOpen.value;\n        }\n      };\n\n      $x.on('UserClickedPanelToggleButton', false).subscribe(togglePanel);\n\n      /**\n       * Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state\n       * changes.\n       *\n       * @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}\n       * component.\n       * @public\n       */\n      watch(\n        () => isOpen.value,\n        () => {\n          $x.emit('TogglePanelStateChanged', isOpen.value, {\n            id: props.panelId,\n            target: document.getElementById(props.panelId) as HTMLElement\n          });\n        },\n        { immediate: true }\n      );\n\n      return { isOpen };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will watch:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic usage\n\nUsing default slot:\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton panelId=\"myToggle\">\n      <img src=\"./open-button-icon.svg\" />\n      <span>Toggle Aside</span>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\n  import {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop\n  } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseIdTogglePanel,\n      BaseIdTogglePanelButton,\n      CollapseFromTop\n    },\n    data: function () {\n      return {\n        animation: CollapseFromTop\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AAIoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAHe,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAAA,IAAA,EAAA,IAAA,CAAA,MAAA;AADvD,IAAA,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,GAAA,EAAA;aAGIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,oCAAA,CAAA;AAHZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-id-toggle-panel.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel.vue"],"sourcesContent":["<template>\n  <BaseTogglePanel :open=\"isOpen\" :animation=\"animation\">\n    <!-- @slot (Required) Default content -->\n    <slot />\n  </BaseTogglePanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../composables'\nimport { AnimationProp } from '../../types'\nimport { NoAnimation } from '../animations'\nimport BaseTogglePanel from './base-toggle-panel.vue'\n\n/**\n * Simple panel that could receives its initial open state via prop, if not the default is opens\n * and a required prop, named `panelId`, which are responsible of rendering default slot\n * inside a configurable transition.\n *\n * It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's\n * 'panelId' prop, to handle its open/close state.\n *\n * The default slot offers the possibility to customise the modal content.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdTogglePanel',\n  components: { BaseTogglePanel },\n  props: {\n    /** Shows the panel open at the beginning or not, depending on its state. */\n    startOpen: {\n      type: Boolean,\n      default: true,\n    },\n    /** Animation component that will be used to animate the panel content. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * The id to link with the BaseIdTogglePanelButton.\n     * Both components must use the same Id to make them interact.\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /** Whether the toggle panel is open or not. */\n    const isOpen = ref(props.startOpen)\n\n    /**\n     * Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n     *\n     * @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n     *\n     * @public\n     */\n    const togglePanel = (panelId: string) => {\n      if (props.panelId === panelId) {\n        isOpen.value = !isOpen.value\n      }\n    }\n\n    $x.on('UserClickedPanelToggleButton', false).subscribe(togglePanel)\n\n    /**\n     * Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state\n     * changes.\n     *\n     * @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}\n     * component.\n     * @public\n     */\n    watch(\n      () => isOpen.value,\n      () => {\n        $x.emit('TogglePanelStateChanged', isOpen.value, {\n          id: props.panelId,\n          target: document.getElementById(props.panelId) as HTMLElement,\n        })\n      },\n      { immediate: true },\n    )\n\n    return { isOpen }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will watch:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic usage\n\nUsing default slot:\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton panelId=\"myToggle\">\n      <img src=\"./open-button-icon.svg\" />\n      <span>Toggle Aside</span>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\nimport {\n  BaseIdTogglePanel,\n  BaseIdTogglePanelButton,\n  CollapseFromTop,\n} from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop,\n  },\n  data: function () {\n    return {\n      animation: CollapseFromTop,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AAIoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAHe,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAAA,IAAA,EAAA,IAAA,CAAA,MAAA;AADvD,IAAA,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/panels/base-id-toggle-panel.vue2.js

@@ -1,5 +1,4 @@
 import { defineComponent, ref, watch } from 'vue';
-import { AnimationProp } from '../../types/animation-prop.js';
 import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
 import '@vue/devtools-api';
@@ -12,6 +11,10 @@ import '../../plugins/x-bus.js';
 import '../../plugins/x-plugin.js';
 import 'vuex';
 import '@vueuse/core';
+import { AnimationProp } from '../../types/animation-prop.js';
+import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
+import '../animations/animate-scale/animate-scale.style.scss.js';
+import '../animations/animate-translate/animate-translate.style.scss.js';
 import '../animations/animate-width.vue2.js';
 import '../animations/animate-width.vue3.js';
 import '../animations/collapse-height.vue2.js';
@@ -20,16 +23,13 @@ import '../animations/collapse-width.vue2.js';
 import '../animations/collapse-width.vue3.js';
 import '../animations/cross-fade.vue2.js';
 import '../animations/cross-fade.vue3.js';
-import '../animations/fade.vue2.js';
-import '../animations/fade.vue3.js';
 import '../animations/fade-and-slide.vue2.js';
 import '../animations/fade-and-slide.vue3.js';
+import '../animations/fade.vue2.js';
+import '../animations/fade.vue3.js';
 import _sfc_main$1 from '../animations/no-animation.vue.js';
 import '../animations/staggered-fade-and-slide.vue2.js';
 import '../animations/staggered-fade-and-slide.vue3.js';
-import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
-import '../animations/animate-scale/animate-scale.style.scss.js';
-import '../animations/animate-translate/animate-translate.style.scss.js';
 import BaseTogglePanel from './base-toggle-panel.vue.js';
 
 /**
@@ -51,12 +51,12 @@ var _sfc_main = defineComponent({
         /** Shows the panel open at the beginning or not, depending on its state. */
         startOpen: {
             type: Boolean,
-            default: true
+            default: true,
         },
         /** Animation component that will be used to animate the panel content. */
         animation: {
             type: AnimationProp,
-            default: () => _sfc_main$1
+            default: () => _sfc_main$1,
         },
         /**
          * The id to link with the BaseIdTogglePanelButton.
@@ -64,10 +64,10 @@ var _sfc_main = defineComponent({
          */
         panelId: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
-    setup: function (props) {
+    setup(props) {
         const $x = use$x();
         /** Whether the toggle panel is open or not. */
         const isOpen = ref(props.startOpen);
@@ -95,11 +95,11 @@ var _sfc_main = defineComponent({
         watch(() => isOpen.value, () => {
             $x.emit('TogglePanelStateChanged', isOpen.value, {
                 id: props.panelId,
-                target: document.getElementById(props.panelId)
+                target: document.getElementById(props.panelId),
             });
         }, { immediate: true });
         return { isOpen };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/panels/base-id-toggle-panel.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel.vue2.js","sources":["../../../../src/components/panels/base-id-toggle-panel.vue"],"sourcesContent":["<template>\n  <BaseTogglePanel :open=\"isOpen\" :animation=\"animation\">\n    <!-- @slot (Required) Default content -->\n    <slot />\n  </BaseTogglePanel>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref, watch } from 'vue';\n  import { AnimationProp } from '../../types';\n  import { use$x } from '../../composables';\n  import { NoAnimation } from '../animations';\n  import BaseTogglePanel from './base-toggle-panel.vue';\n\n  /**\n   * Simple panel that could receives its initial open state via prop, if not the default is opens\n   * and a required prop, named `panelId`, which are responsible of rendering default slot\n   * inside a configurable transition.\n   *\n   * It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's\n   * 'panelId' prop, to handle its open/close state.\n   *\n   * The default slot offers the possibility to customise the modal content.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseIdTogglePanel',\n    components: { BaseTogglePanel },\n    props: {\n      /** Shows the panel open at the beginning or not, depending on its state. */\n      startOpen: {\n        type: Boolean,\n        default: true\n      },\n      /** Animation component that will be used to animate the panel content. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * The id to link with the BaseIdTogglePanelButton.\n       * Both components must use the same Id to make them interact.\n       */\n      panelId: {\n        type: String,\n        required: true\n      }\n    },\n    setup: function (props) {\n      const $x = use$x();\n\n      /** Whether the toggle panel is open or not. */\n      const isOpen = ref(props.startOpen);\n\n      /**\n       * Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n       *\n       * @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n       *\n       * @public\n       */\n      const togglePanel = (panelId: string) => {\n        if (props.panelId === panelId) {\n          isOpen.value = !isOpen.value;\n        }\n      };\n\n      $x.on('UserClickedPanelToggleButton', false).subscribe(togglePanel);\n\n      /**\n       * Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state\n       * changes.\n       *\n       * @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}\n       * component.\n       * @public\n       */\n      watch(\n        () => isOpen.value,\n        () => {\n          $x.emit('TogglePanelStateChanged', isOpen.value, {\n            id: props.panelId,\n            target: document.getElementById(props.panelId) as HTMLElement\n          });\n        },\n        { immediate: true }\n      );\n\n      return { isOpen };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will watch:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic usage\n\nUsing default slot:\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton panelId=\"myToggle\">\n      <img src=\"./open-button-icon.svg\" />\n      <span>Toggle Aside</span>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\n  import {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop\n  } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseIdTogglePanel,\n      BaseIdTogglePanelButton,\n      CollapseFromTop\n    },\n    data: function () {\n      return {\n        animation: CollapseFromTop\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcE;;;;;;;;;;;AAWE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;AAGE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;;QAGlB,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AAEnC;;;;;;AAME;AACF,QAAA,MAAM,WAAY,GAAE,CAAC,OAAe,KAAK;AACvC,YAAA,IAAI,KAAK,CAAC,OAAM,KAAM,OAAO,EAAE;AAC7B,gBAAA,MAAM,CAAC,KAAM,GAAE,CAAC,MAAM,CAAC,KAAK,CAAA;AAC9B,aAAA;AACF,SAAC,CAAA;AAED,QAAA,EAAE,CAAC,EAAE,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;AAEnE;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,MAAM,CAAC,KAAK,EAClB,MAAM;YACJ,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,KAAK,EAAE;gBAC/C,EAAE,EAAE,KAAK,CAAC,OAAO;gBACjB,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAe;AAC7D,aAAA,CAAC,CAAA;AACJ,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;QAED,OAAO,EAAE,MAAK,EAAG,CAAA;KACnB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-id-toggle-panel.vue2.js","sources":["../../../../src/components/panels/base-id-toggle-panel.vue"],"sourcesContent":["<template>\n  <BaseTogglePanel :open=\"isOpen\" :animation=\"animation\">\n    <!-- @slot (Required) Default content -->\n    <slot />\n  </BaseTogglePanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../composables'\nimport { AnimationProp } from '../../types'\nimport { NoAnimation } from '../animations'\nimport BaseTogglePanel from './base-toggle-panel.vue'\n\n/**\n * Simple panel that could receives its initial open state via prop, if not the default is opens\n * and a required prop, named `panelId`, which are responsible of rendering default slot\n * inside a configurable transition.\n *\n * It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's\n * 'panelId' prop, to handle its open/close state.\n *\n * The default slot offers the possibility to customise the modal content.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseIdTogglePanel',\n  components: { BaseTogglePanel },\n  props: {\n    /** Shows the panel open at the beginning or not, depending on its state. */\n    startOpen: {\n      type: Boolean,\n      default: true,\n    },\n    /** Animation component that will be used to animate the panel content. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * The id to link with the BaseIdTogglePanelButton.\n     * Both components must use the same Id to make them interact.\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /** Whether the toggle panel is open or not. */\n    const isOpen = ref(props.startOpen)\n\n    /**\n     * Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n     *\n     * @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.\n     *\n     * @public\n     */\n    const togglePanel = (panelId: string) => {\n      if (props.panelId === panelId) {\n        isOpen.value = !isOpen.value\n      }\n    }\n\n    $x.on('UserClickedPanelToggleButton', false).subscribe(togglePanel)\n\n    /**\n     * Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state\n     * changes.\n     *\n     * @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}\n     * component.\n     * @public\n     */\n    watch(\n      () => isOpen.value,\n      () => {\n        $x.emit('TogglePanelStateChanged', isOpen.value, {\n          id: props.panelId,\n          target: document.getElementById(props.panelId) as HTMLElement,\n        })\n      },\n      { immediate: true },\n    )\n\n    return { isOpen }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will watch:\n\n- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the panelId\n  that is going to be toggled.\n\n## Examples\n\n### Basic usage\n\nUsing default slot:\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton panelId=\"myToggle\">\n      <img src=\"./open-button-icon.svg\" />\n      <span>Toggle Aside</span>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text1\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\nimport {\n  BaseIdTogglePanel,\n  BaseIdTogglePanelButton,\n  CollapseFromTop,\n} from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop,\n  },\n  data: function () {\n    return {\n      animation: CollapseFromTop,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;;;;;;;;AAWE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;AACD;;;AAGE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;;QAGjB,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,SAAS,CAAA,CAAA;AAElC;;;;;;AAME;AACF,QAAA,MAAM,WAAY,GAAE,CAAC,OAAe,KAAK;AACvC,YAAA,IAAI,KAAK,CAAC,OAAM,KAAM,OAAO,EAAE;AAC7B,gBAAA,MAAM,CAAC,KAAI,GAAI,CAAC,MAAM,CAAC,KAAI,CAAA;AAC7B,aAAA;AACF,SAAA,CAAA;AAEA,QAAA,EAAE,CAAC,EAAE,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAA,CAAA;AAElE;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,MAAM,CAAC,KAAK,EAClB,MAAM;YACJ,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,KAAK,EAAE;gBAC/C,EAAE,EAAE,KAAK,CAAC,OAAO;gBACjB,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAgB;AAC9D,aAAA,CAAA,CAAA;AACH,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;QAEA,OAAO,EAAE,MAAO,EAAA,CAAA;KACjB;AACF,CAAA,CAAA;;;;"}