@vandeurenglenn/lite-elements 0.3.82 → 0.3.84

package/exports/bundle/demo-shell.js

@@ -68,6 +68,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
             <custom-drawer-item route="toggle">toggle</custom-drawer-item>
             <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
             <custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
+            <custom-drawer-item route="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 
@@ -536,6 +537,10 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
             </demo-section>
           </custom-pages>
         </flex-column>
+
+        <demo-section route="places-input">
+          <places-input placeholder="place"> </places-input>
+        </demo-section>
       </custom-drawer-layout>
       <!-- </custom-root> -->
       <!-- </flex-row> -->

package/exports/bundle/demo.js

@@ -25,6 +25,8 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s as o,i as s,x as i}f
             <custom-drawer-item route="list-item">list-item</custom-drawer-item>
             <custom-drawer-item route="toggle">toggle</custom-drawer-item>
             <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
+
+            <custom-drawer-item route="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 

package/exports/bundle/input2.js

@@ -0,0 +1 @@
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as a,x as l}from"./dark-mode-m29sAj4H.js";import{e as r}from"./custom-element-B_TPyPQO.js";let s=(()=>{let s,o,m=[r("custom-pane")],n=[],c=a;return class extends c{static{o=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;e(null,s={value:o},m,{kind:"class",name:o.name,metadata:t},null,n),o=s.value,t&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static styles=[];render(){return l`<input type="text" placeholder="Search for places..." />`}static{t(o,n)}},o})();export{s as CustomPlacesInput};

package/exports/bundle/pane.js

@@ -87,15 +87,18 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{i as s,s as o,r as a,x
     box-sizing: border-box;
     align-items: center;
   }
-`;let c=(()=>{let s,c,l,m,d,h,p,g,u=[r("custom-pane")],f=[],b=o,v=[],y=[],_=[],x=[],w=[],j=[],k=[],z=[],S=[],B=[],P=[],X=[];return class extends b{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],m=[a({type:Boolean,reflect:!0})],d=[a({type:String,reflect:!0})],h=[a({type:Boolean,reflect:!0})],p=[a({type:Boolean,reflect:!0})],g=[a({type:String})],e(this,null,l,{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},v,y),e(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:e=>"mobile"in e,get:e=>e.mobile,set:(e,t)=>{e.mobile=t}},metadata:t},_,x),e(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},w,j),e(this,null,h,{kind:"accessor",name:"left",static:!1,private:!1,access:{has:e=>"left"in e,get:e=>e.left,set:(e,t)=>{e.left=t}},metadata:t},k,z),e(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:e=>"right"in e,get:e=>e.right,set:(e,t)=>{e.right=t}},metadata:t},S,B),e(this,null,g,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:e=>"id"in e,get:e=>e.id,set:(e,t)=>{e.id=t}},metadata:t},P,X),e(null,s={value:c},u,{kind:"class",name:c.name,metadata:t},null,f),c=s.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,v,!1);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,y),t(this,_,!1));get mobile(){return this.#t}set mobile(e){this.#t=e}#s=(t(this,x),t(this,w,void 0));get type(){return this.#s}set type(e){this.#s=e}#o=(t(this,j),t(this,k,!0));get left(){return this.#o}set left(e){this.#o=e}#a=(t(this,z),t(this,S,!1));get right(){return this.#a}set right(e){this.#a=e}#i=(t(this,B),t(this,P,void 0));get id(){return this.#i}set id(e){this.#i=e}closePane(e){e.stopPropagation(),this.open=!1,document.dispatchEvent(new CustomEvent("custom-pane-close",{detail:this.id||""+(this.left?"left":"right")}))}static styles=[n];render(){return i`
+`;let c=(()=>{let s,c,l,m,d,h,p,g,u,f=[r("custom-pane")],_=[],v=o,b=[],y=[],x=[],w=[],k=[],j=[],z=[],S=[],B=[],P=[],X=[],$=[],E=[],O=[];return class extends v{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],m=[a({type:Boolean,reflect:!0})],d=[a({type:String,reflect:!0})],h=[a({type:Boolean,reflect:!0})],p=[a({type:Boolean,reflect:!0})],g=[a({type:String})],u=[a({type:String})],e(this,null,l,{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},b,y),e(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:e=>"mobile"in e,get:e=>e.mobile,set:(e,t)=>{e.mobile=t}},metadata:t},x,w),e(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},k,j),e(this,null,h,{kind:"accessor",name:"left",static:!1,private:!1,access:{has:e=>"left"in e,get:e=>e.left,set:(e,t)=>{e.left=t}},metadata:t},z,S),e(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:e=>"right"in e,get:e=>e.right,set:(e,t)=>{e.right=t}},metadata:t},B,P),e(this,null,g,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:e=>"id"in e,get:e=>e.id,set:(e,t)=>{e.id=t}},metadata:t},X,$),e(this,null,u,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:t},E,O),e(null,s={value:c},f,{kind:"class",name:c.name,metadata:t},null,_),c=s.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,b,!1);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,y),t(this,x,!1));get mobile(){return this.#t}set mobile(e){this.#t=e}#s=(t(this,w),t(this,k,void 0));get type(){return this.#s}set type(e){this.#s=e}#o=(t(this,j),t(this,z,!0));get left(){return this.#o}set left(e){this.#o=e}#a=(t(this,S),t(this,B,!1));get right(){return this.#a}set right(e){this.#a=e}#i=(t(this,P),t(this,X,void 0));get id(){return this.#i}set id(e){this.#i=e}#r=(t(this,$),t(this,E,void 0));get icon(){return this.#r}set icon(e){this.#r=e}closePane(e){e.stopPropagation(),this.open=!1,document.dispatchEvent(new CustomEvent("custom-pane-close",{detail:this.id||""+(this.left?"left":"right")}))}static styles=[n];render(){return i`
       <custom-elevation></custom-elevation>
       <aside>
         <slot name="header">
           <flex-row center>
             <slot name="headline"></slot>
             <flex-it></flex-it>
-            <custom-icon-button @click=${e=>this.closePane(e)} .id=${this.id} icon="menu_open">
-            </custom-icon-button>
+
+            <slot name="close">
+              <custom-icon-button @click=${e=>this.closePane(e)} .id=${this.id} .icon=${this.icon||"menu_open"}>
+              </custom-icon-button>
+            </slot>
           </flex-row>
         </slot>
         <flex-column class="content">
@@ -105,4 +108,4 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{i as s,s as o,r as a,x
           <slot name="footer"></slot>
         </flex-row>
       </aside>
-    `}constructor(){super(...arguments),t(this,X)}static{t(c,f)}},c})();export{c as CustomPane};
+    `}constructor(){super(...arguments),t(this,O)}static{t(c,_)}},c})();export{c as CustomPane};

package/exports/demo-shell.js

@@ -171,6 +171,7 @@ let DemoShell = (() => {
             <custom-drawer-item route="toggle">toggle</custom-drawer-item>
             <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
             <custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
+            <custom-drawer-item route="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 
@@ -639,6 +640,10 @@ let DemoShell = (() => {
             </demo-section>
           </custom-pages>
         </flex-column>
+
+        <demo-section route="places-input">
+          <places-input placeholder="place"> </places-input>
+        </demo-section>
       </custom-drawer-layout>
       <!-- </custom-root> -->
       <!-- </flex-row> -->

package/exports/demo.js

@@ -79,6 +79,8 @@ let DemoShell = (() => {
             <custom-drawer-item route="list-item">list-item</custom-drawer-item>
             <custom-drawer-item route="toggle">toggle</custom-drawer-item>
             <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
+
+            <custom-drawer-item route="places-input">places-input</custom-drawer-item>
           </custom-selector>
         </flex-column>
 

package/exports/input2.js

@@ -0,0 +1,29 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
+import { customElement, LiteElement, html } from '@vandeurenglenn/lite';
+
+let CustomPlacesInput = (() => {
+    let _classDecorators = [customElement('custom-pane')];
+    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 = [];
+        render() {
+            return html `<input type="text" placeholder="Search for places..." />`;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomPlacesInput };

package/exports/pane/pane.d.ts

@@ -9,6 +9,7 @@ export declare class CustomPane extends LiteElement {
     accessor left: boolean;
     accessor right: boolean;
     accessor id: string;
+    accessor icon: string;
     closePane(event: any): void;
     static styles: import("lit").CSSResultOrNative[];
     render(): import("lit-html").TemplateResult<1>;

package/exports/pane.js

@@ -32,6 +32,9 @@ let CustomPane = (() => {
     let _id_decorators;
     let _id_initializers = [];
     let _id_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
     (class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -42,12 +45,14 @@ let CustomPane = (() => {
             _left_decorators = [property({ type: Boolean, reflect: true })];
             _right_decorators = [property({ type: Boolean, reflect: true })];
             _id_decorators = [property({ type: String })];
+            _icon_decorators = [property({ type: String })];
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __esDecorate(this, null, _mobile_decorators, { kind: "accessor", name: "mobile", static: false, private: false, access: { has: obj => "mobile" in obj, get: obj => obj.mobile, set: (obj, value) => { obj.mobile = value; } }, metadata: _metadata }, _mobile_initializers, _mobile_extraInitializers);
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
             __esDecorate(this, null, _left_decorators, { kind: "accessor", name: "left", static: false, private: false, access: { has: obj => "left" in obj, get: obj => obj.left, set: (obj, value) => { obj.left = value; } }, metadata: _metadata }, _left_initializers, _left_extraInitializers);
             __esDecorate(this, null, _right_decorators, { kind: "accessor", name: "right", static: false, private: false, access: { has: obj => "right" in obj, get: obj => obj.right, set: (obj, value) => { obj.right = value; } }, metadata: _metadata }, _right_initializers, _right_extraInitializers);
             __esDecorate(this, null, _id_decorators, { kind: "accessor", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __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 });
@@ -70,6 +75,9 @@ let CustomPane = (() => {
         #id_accessor_storage = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _id_initializers, void 0));
         get id() { return this.#id_accessor_storage; }
         set id(value) { this.#id_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
         closePane(event) {
             event.stopPropagation();
             this.open = false;
@@ -84,8 +92,11 @@ let CustomPane = (() => {
           <flex-row center>
             <slot name="headline"></slot>
             <flex-it></flex-it>
-            <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} icon="menu_open">
-            </custom-icon-button>
+
+            <slot name="close">
+              <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} .icon=${this.icon || 'menu_open'}>
+              </custom-icon-button>
+            </slot>
           </flex-row>
         </slot>
         <flex-column class="content">
@@ -99,7 +110,7 @@ let CustomPane = (() => {
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _id_extraInitializers);
+            __runInitializers(this, _icon_extraInitializers);
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);

package/exports/places/input.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.82",
+	"version": "0.3.84",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {