vira 0.1.2 → 0.2.0

package/dist/element-book/all-element-book-entries.js

@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.allElementBookEntries = void 0;
 const elements_book_1 = require("../elements/elements.book");
 const vira_button_element_book_1 = require("../elements/vira-button/vira-button.element.book");
+const vira_collapsible_wrapper_element_book_1 = require("../elements/vira-collapsible/vira-collapsible-wrapper.element.book");
 const vira_icon_element_book_1 = require("../elements/vira-icon/vira-icon.element.book");
 const icons_book_1 = require("../icons/icons.book");
 exports.allElementBookEntries = [
     elements_book_1.elementsBookChapter,
     ...icons_book_1.iconBookEntries,
     ...vira_button_element_book_1.viraButtonBookEntries,
+    ...vira_collapsible_wrapper_element_book_1.viraCollapsibleBookEntries,
     ...vira_icon_element_book_1.viraIconBookEntries,
 ];

package/dist/elements/index.d.ts

@@ -1,4 +1,5 @@
 /** This file is automatically updated by update-element-exports.ts */
 export * from './define-vira-element';
 export * from './vira-button/vira-button.element';
+export * from './vira-collapsible/vira-collapsible-wrapper.element';
 export * from './vira-icon/vira-icon.element';

package/dist/elements/index.js

@@ -17,4 +17,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./define-vira-element"), exports);
 __exportStar(require("./vira-button/vira-button.element"), exports);
+__exportStar(require("./vira-collapsible/vira-collapsible-wrapper.element"), exports);
 __exportStar(require("./vira-icon/vira-icon.element"), exports);

package/dist/elements/vira-button/vira-button.element.js

@@ -86,7 +86,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         }
 
         ${(0, focus_1.createFocusStyles)({
-        mainSelector: 'button:focus:focus-visible:not(:active)',
+        mainSelector: 'button:focus:focus-visible:not(:active):not([disabled])',
         elementBorderSize: 2,
     })}
 
@@ -110,7 +110,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
               `
             : '';
         return (0, element_vir_1.html) `
-            <button>${iconTemplate} ${textTemplate}</button>
+            <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
         `;
     },
 });

package/dist/elements/vira-collapsible/vira-collapsible-wrapper.element.d.ts

@@ -0,0 +1,10 @@
+export declare enum ViraCollapsibleSlotNameEnum {
+    Header = "header"
+}
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
+    expanded: boolean;
+}, {
+    contentHeight: number;
+}, {
+    expandChange: import("element-vir").DefinedTypedEventNameDefinition<boolean>;
+}, "vira-collapsible-wrapper-expanded", `vira-collapsible-wrapper-${string}`, import("lit-html").HTMLTemplateResult>;

package/dist/elements/vira-collapsible/vira-collapsible-wrapper.element.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViraCollapsibleWrapper = exports.ViraCollapsibleSlotNameEnum = void 0;
+const element_vir_1 = require("element-vir");
+const styles_1 = require("../../styles");
+const define_vira_element_1 = require("../define-vira-element");
+var ViraCollapsibleSlotNameEnum;
+(function (ViraCollapsibleSlotNameEnum) {
+    ViraCollapsibleSlotNameEnum["Header"] = "header";
+})(ViraCollapsibleSlotNameEnum = exports.ViraCollapsibleSlotNameEnum || (exports.ViraCollapsibleSlotNameEnum = {}));
+exports.ViraCollapsibleWrapper = (0, define_vira_element_1.defineViraElement)()({
+    tagName: 'vira-collapsible-wrapper',
+    hostClasses: {
+        'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
+    },
+    styles: ({ hostClasses }) => (0, element_vir_1.css) `
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header-wrapper {
+            cursor: pointer;
+            ${styles_1.removeNativeFormStyles};
+        }
+
+        .content-wrapper,
+        .collapsing-element {
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+        }
+
+        .collapsing-element {
+            transition: height ${styles_1.viraAnimationDurations['vira-pretty-animation-duration'].value};
+            overflow: hidden;
+        }
+        ${hostClasses['vira-collapsible-wrapper-expanded'].name} .collapsing-element {
+            pointer-events: none;
+        }
+    `,
+    events: {
+        expandChange: (0, element_vir_1.defineElementEvent)(),
+    },
+    stateInitStatic: {
+        contentHeight: 0,
+    },
+    renderCallback({ state, updateState, dispatch, events, inputs }) {
+        const collapsingStyles = inputs.expanded
+            ? (0, element_vir_1.css) `
+                  height: ${state.contentHeight}px;
+              `
+            : (0, element_vir_1.css) `
+                  height: 0;
+              `;
+        return (0, element_vir_1.html) `
+            <button
+                class="header-wrapper"
+                ${(0, element_vir_1.listen)('click', () => {
+            dispatch(new events.expandChange(!inputs.expanded));
+        })}
+            >
+                <slot name=${ViraCollapsibleSlotNameEnum.Header}>Header</slot>
+            </button>
+            <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
+                <div
+                    ${(0, element_vir_1.onResize)(({ contentRect }) => {
+            updateState({ contentHeight: contentRect.height });
+        })}
+                    class="content-wrapper"
+                >
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/electrovir/vira",