@vandeurenglenn/lite-elements 0.3.22 → 0.3.24

package/exports/bundle/dialog.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,e as s}from"./custom-element-BMhVvZjf.js";import{t as o,j as a,v as n,D as r}from"./property-Do5-bKhz.js";import"./elevation.js";import"./icon.js";import"./index-B3uz3f8C.js";let i=(()=>{let i,l,c,h,d,m,p,u=[s("custom-dialog")],g=[],f=r,y=[],v=[],x=[],_=[],b=[],w=[],H=[],k=[],A=[],j=[];return class extends f{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],h=[o({type:Boolean,reflect:!0})],d=[o({type:Boolean,reflect:!0,attribute:"has-actions"})],m=[o({type:Boolean,reflect:!0,attribute:"has-header"})],p=[o({type:Boolean,reflect:!0,attribute:"has-hero"})],e(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:t},y,v),e(this,null,h,{kind:"accessor",name:"fullscreen",static:!1,private:!1,access:{has:e=>"fullscreen"in e,get:e=>e.fullscreen,set:(e,t)=>{e.fullscreen=t}},metadata:t},x,_),e(this,null,d,{kind:"accessor",name:"hasActions",static:!1,private:!1,access:{has:e=>"hasActions"in e,get:e=>e.hasActions,set:(e,t)=>{e.hasActions=t}},metadata:t},b,w),e(this,null,m,{kind:"accessor",name:"hasHeader",static:!1,private:!1,access:{has:e=>"hasHeader"in e,get:e=>e.hasHeader,set:(e,t)=>{e.hasHeader=t}},metadata:t},H,k),e(this,null,p,{kind:"accessor",name:"hasHero",static:!1,private:!1,access:{has:e=>"hasHero"in e,get:e=>e.hasHero,set:(e,t)=>{e.hasHero=t}},metadata:t},A,j),e(null,i={value:l},u,{kind:"class",name:l.name,metadata:t},null,g),l=i.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,y,void 0);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,v),t(this,x,void 0));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,_),t(this,b,void 0));get hasActions(){return this.#s}set hasActions(e){this.#s=e}#o=(t(this,w),t(this,H,void 0));get hasHeader(){return this.#o}set hasHeader(e){this.#o=e}#a=(t(this,k),t(this,A,void 0));get hasHero(){return this.#a}set hasHero(e){this.#a=e}connectedCallback(){const e=this.shadowRoot.querySelector('slot[name="actions"]');this.hasActions=0!==Array.from(e?.assignedNodes()||[]).length;let t=this.shadowRoot.querySelector('slot[name="header"]');const s=["title","header-start","header-end"];let o=0;for(;0===Array.from(t.assignedElements()).length&&o<s.length;)t=this.shadowRoot.querySelector(`slot[name="${s[o]}"]`),o+=1;this.hasHeader=0!==t.assignedElements().length;const a=this.shadowRoot.querySelector('slot[name="hero-icon"]');this.hashero=0!==Array.from(a?.assignedNodes()||[]).length}onChange(e,t){"open"===e&&(this.open?this.querySelector('[slot="actions"]').addEventListener("click",this._close):this.querySelector('[slot="actions"]').removeEventListener("click",this._close))}_close=(t(this,j),e=>{const t=e.composedPath()[0];this.dispatchEvent(new CustomEvent("close",{detail:t.getAttribute("action")||"close"})),this.open=!1});static styles=[a`
+import{_ as e,a as t,e as s}from"./custom-element-BMhVvZjf.js";import{t as o,j as a,v as n,D as r}from"./property-Do5-bKhz.js";import"./elevation.js";import"./icon.js";import"./index-B3uz3f8C.js";let i=(()=>{let i,l,c,h,d,m,p,u=[s("custom-dialog")],g=[],f=r,y=[],v=[],x=[],_=[],b=[],w=[],H=[],k=[],A=[],j=[];return class extends f{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],h=[o({type:Boolean,reflect:!0})],d=[o({type:Boolean,reflect:!0,attribute:"has-actions"})],m=[o({type:Boolean,reflect:!0,attribute:"has-header"})],p=[o({type:Boolean,reflect:!0,attribute:"has-hero"})],e(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:t},y,v),e(this,null,h,{kind:"accessor",name:"fullscreen",static:!1,private:!1,access:{has:e=>"fullscreen"in e,get:e=>e.fullscreen,set:(e,t)=>{e.fullscreen=t}},metadata:t},x,_),e(this,null,d,{kind:"accessor",name:"hasActions",static:!1,private:!1,access:{has:e=>"hasActions"in e,get:e=>e.hasActions,set:(e,t)=>{e.hasActions=t}},metadata:t},b,w),e(this,null,m,{kind:"accessor",name:"hasHeader",static:!1,private:!1,access:{has:e=>"hasHeader"in e,get:e=>e.hasHeader,set:(e,t)=>{e.hasHeader=t}},metadata:t},H,k),e(this,null,p,{kind:"accessor",name:"hasHero",static:!1,private:!1,access:{has:e=>"hasHero"in e,get:e=>e.hasHero,set:(e,t)=>{e.hasHero=t}},metadata:t},A,j),e(null,i={value:l},u,{kind:"class",name:l.name,metadata:t},null,g),l=i.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,y,void 0);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,v),t(this,x,void 0));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,_),t(this,b,void 0));get hasActions(){return this.#s}set hasActions(e){this.#s=e}#o=(t(this,w),t(this,H,void 0));get hasHeader(){return this.#o}set hasHeader(e){this.#o=e}#a=(t(this,k),t(this,A,void 0));get hasHero(){return this.#a}set hasHero(e){this.#a=e}connectedCallback(){const e=this.shadowRoot.querySelector('slot[name="actions"]');this.hasActions=0!==Array.from(e?.assignedNodes()||[]).length;let t=this.shadowRoot.querySelector('slot[name="header"]');const s=["title","header-start","header-end"];let o=0;for(;0===Array.from(t.assignedElements()).length&&o<s.length;)t=this.shadowRoot.querySelector(`slot[name="${s[o]}"]`),o+=1;this.hasHeader=0!==t.assignedElements().length;const a=this.shadowRoot.querySelector('slot[name="hero-icon"]');this.hashero=0!==Array.from(a?.assignedNodes()||[]).length}onChange(e,t){"open"===e&&(this.open?this.querySelector('[slot="actions"]')?.addEventListener("click",this._close):this.querySelector('[slot="actions"]')?.removeEventListener("click",this._close))}_close=(t(this,j),e=>{const t=e.composedPath()[0];this.dispatchEvent(new CustomEvent("close",{detail:t.getAttribute("action")||"close"})),this.open=!1});static styles=[a`
       :host {
         position: fixed;
         inset: 0;

package/exports/bundle/summary-mirror.js

@@ -0,0 +1,20 @@
+import{_ as t,a as e,e as s}from"./custom-element-BMhVvZjf.js";import{v as i,D as a}from"./property-Do5-bKhz.js";let l=(()=>{let l,o,r=[s("custom-summary-mirror")],m=[],h=a;return class extends h{static{o=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;t(null,l={value:o},r,{kind:"class",name:o.name,metadata:s},null,m),o=l.value,s&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),e(o,m)}connectedCallback(){const t=window.matchMedia("(min-width: 1200px)");this._matches(t),this._matches=this._matches.bind(this),t.onchange=this._matches}_matches({matches:t}){const e=this.querySelector('[slot="left"]'),s=this.querySelector('[slot="right"]');t?s.hasAttribute("switched")&&(e.removeAttribute("switched"),e.setAttribute("slot","right"),s.setAttribute("slot","left")):(e.setAttribute("switched",""),e.setAttribute("slot","right"),s.setAttribute("slot","left"))}get template(){return i`
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          min-height: 400px;
+          max-width: 1200px;
+        }
+
+        @media (min-width: 1200px) {
+          :host {
+            flex-direction: row;
+            width: 80%;
+          }
+        }
+      </style>
+      <slot name="left"></slot>
+      <slot name="right"></slot>
+    `}},o})();export{l as CustomSummaryMirror};

package/exports/bundle/summary.js

@@ -0,0 +1,25 @@
+import{_ as t,a as e,e as a}from"./custom-element-BMhVvZjf.js";import{j as l,v as o,D as i}from"./property-Do5-bKhz.js";let s=(()=>{let s,m,n=[a("custom-summary")],r=[],d=i;return class extends d{static{m=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;t(null,s={value:m},n,{kind:"class",name:m.name,metadata:e},null,r),m=s.value,e&&Object.defineProperty(m,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static styles=[l`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 400px;
+        max-width: 1200px;
+      }
+      ::slotted([slot='left']) {
+        padding-bottom: 24px;
+      }
+      @media (min-width: 1200px) {
+        :host {
+          flex-direction: row;
+          width: 80%;
+        }
+        ::slotted([slot='left']) {
+          padding-right: 24px;
+          padding-bottom: 0;
+        }
+      }
+    `];render(){return o`
+      <slot name="left"></slot>
+      <slot name="right"></slot>
+    `}static{e(m,r)}},m})();export{s as CustomSummary};

package/exports/dialog.js

@@ -79,8 +79,8 @@ let CustomDialog = (() => {
         onChange(propertyKey, value) {
             if (propertyKey === 'open') {
                 this.open
-                    ? this.querySelector('[slot="actions"]').addEventListener('click', this._close)
-                    : this.querySelector('[slot="actions"]').removeEventListener('click', this._close);
+                    ? this.querySelector('[slot="actions"]')?.addEventListener('click', this._close)
+                    : this.querySelector('[slot="actions"]')?.removeEventListener('click', this._close);
             }
         }
         _close = (__runInitializers(this, _hasHero_extraInitializers), (event) => {

package/exports/summary/summary-mirror.d.ts

@@ -0,0 +1,8 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomSummaryMirror extends LiteElement {
+    connectedCallback(): void;
+    _matches({ matches }: {
+        matches: any;
+    }): void;
+    get template(): import("lit-html").TemplateResult<1>;
+}

package/exports/summary/summary.d.ts

@@ -0,0 +1,5 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomSummary extends LiteElement {
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/summary-mirror.js

@@ -0,0 +1,67 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomSummaryMirror = (() => {
+    let _classDecorators = [customElement('custom-summary-mirror')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        connectedCallback() {
+            const match = window.matchMedia('(min-width: 1200px)');
+            this._matches(match);
+            this._matches = this._matches.bind(this);
+            match.onchange = this._matches;
+        }
+        _matches({ matches }) {
+            const left = this.querySelector('[slot="left"]');
+            const right = this.querySelector('[slot="right"]');
+            if (matches) {
+                if (right.hasAttribute('switched')) {
+                    left.removeAttribute('switched');
+                    left.setAttribute('slot', 'right');
+                    right.setAttribute('slot', 'left');
+                }
+            }
+            else {
+                left.setAttribute('switched', '');
+                left.setAttribute('slot', 'right');
+                right.setAttribute('slot', 'left');
+            }
+        }
+        get template() {
+            return html `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          min-height: 400px;
+          max-width: 1200px;
+        }
+
+        @media (min-width: 1200px) {
+          :host {
+            flex-direction: row;
+            width: 80%;
+          }
+        }
+      </style>
+      <slot name="left"></slot>
+      <slot name="right"></slot>
+    `;
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomSummaryMirror };

package/exports/summary.js

@@ -0,0 +1,55 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomSummary = (() => {
+    let _classDecorators = [customElement('custom-summary')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 400px;
+        max-width: 1200px;
+      }
+      ::slotted([slot='left']) {
+        padding-bottom: 24px;
+      }
+      @media (min-width: 1200px) {
+        :host {
+          flex-direction: row;
+          width: 80%;
+        }
+        ::slotted([slot='left']) {
+          padding-right: 24px;
+          padding-bottom: 0;
+        }
+      }
+    `
+        ];
+        render() {
+            return html `
+      <slot name="left"></slot>
+      <slot name="right"></slot>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomSummary };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.22",
+	"version": "0.3.24",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -345,6 +345,22 @@
 			"import": "./exports/selector.js",
 			"types": "./exports/selector/selector.d.ts"
 		},
+		"./summary-mirror": {
+			"import": "./exports/summary-mirror.js",
+			"types": "./exports/summary/summary-mirror.d.ts"
+		},
+		"./summary-mirror.js": {
+			"import": "./exports/summary-mirror.js",
+			"types": "./exports/summary/summary-mirror.d.ts"
+		},
+		"./summary": {
+			"import": "./exports/summary.js",
+			"types": "./exports/summary/summary.d.ts"
+		},
+		"./summary.js": {
+			"import": "./exports/summary.js",
+			"types": "./exports/summary/summary.d.ts"
+		},
 		"./supporting-pane": {
 			"import": "./exports/supporting-pane.js",
 			"types": "./exports/supporting-pane/supporting-pane.d.ts"