@vandeurenglenn/lite-elements 0.3.29 → 0.3.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/exports/bundle/dialog.js +10 -10
- package/exports/dialog.js +9 -9
- package/package.json +1 -1
package/exports/bundle/dialog.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
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=[],
|
|
1
|
+
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,b),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},_,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,b),t(this,_,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`
|
|
2
2
|
:host {
|
|
3
|
-
position:
|
|
3
|
+
position: absolute;
|
|
4
4
|
inset: 0;
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
@@ -121,25 +121,25 @@ import{_ as e,a as t,e as s}from"./custom-element-BMhVvZjf.js";import{t as o,j a
|
|
|
121
121
|
<custom-elevation level=${this.fullscreen?0:3}></custom-elevation>
|
|
122
122
|
<slot name="hero-icon"></slot>
|
|
123
123
|
<slot name="supporting-text"></slot>
|
|
124
|
-
<
|
|
125
|
-
<
|
|
124
|
+
<slot name="header">
|
|
125
|
+
<flex-row class="header" center></flex-row>
|
|
126
126
|
<flex-row center style="width: 100%">
|
|
127
127
|
<slot name="header-start">
|
|
128
128
|
${this.fullscreen?n`<custom-button @click=${this._close}
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
130
|
+
>`:""}
|
|
131
131
|
</slot>
|
|
132
132
|
<slot name="title"></slot>
|
|
133
133
|
<flex-it></flex-it>
|
|
134
134
|
<slot name="header-end">
|
|
135
135
|
${this.fullscreen?n`<slot name="actions"></slot>`:""}
|
|
136
136
|
${this.fullscreen?"":n`<custom-button @click=${this._close}
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
138
|
+
>`}
|
|
139
139
|
</slot>
|
|
140
140
|
</flex-row>
|
|
141
|
-
</
|
|
142
|
-
</
|
|
141
|
+
</flex-row>
|
|
142
|
+
</slot>
|
|
143
143
|
<flex-column class="body">
|
|
144
144
|
<slot></slot>
|
|
145
145
|
</flex-column>
|
package/exports/dialog.js
CHANGED
|
@@ -91,7 +91,7 @@ let CustomDialog = (() => {
|
|
|
91
91
|
static styles = [
|
|
92
92
|
css `
|
|
93
93
|
:host {
|
|
94
|
-
position:
|
|
94
|
+
position: absolute;
|
|
95
95
|
inset: 0;
|
|
96
96
|
display: flex;
|
|
97
97
|
flex-direction: column;
|
|
@@ -215,14 +215,14 @@ let CustomDialog = (() => {
|
|
|
215
215
|
<custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
|
|
216
216
|
<slot name="hero-icon"></slot>
|
|
217
217
|
<slot name="supporting-text"></slot>
|
|
218
|
-
<
|
|
219
|
-
<
|
|
218
|
+
<slot name="header">
|
|
219
|
+
<flex-row class="header" center></flex-row>
|
|
220
220
|
<flex-row center style="width: 100%">
|
|
221
221
|
<slot name="header-start">
|
|
222
222
|
${this.fullscreen
|
|
223
223
|
? html `<custom-button @click=${this._close}
|
|
224
|
-
|
|
225
|
-
|
|
224
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
225
|
+
>`
|
|
226
226
|
: ''}
|
|
227
227
|
</slot>
|
|
228
228
|
<slot name="title"></slot>
|
|
@@ -232,12 +232,12 @@ let CustomDialog = (() => {
|
|
|
232
232
|
${this.fullscreen
|
|
233
233
|
? ''
|
|
234
234
|
: html `<custom-button @click=${this._close}
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
236
|
+
>`}
|
|
237
237
|
</slot>
|
|
238
238
|
</flex-row>
|
|
239
|
-
</
|
|
240
|
-
</
|
|
239
|
+
</flex-row>
|
|
240
|
+
</slot>
|
|
241
241
|
<flex-column class="body">
|
|
242
242
|
<slot></slot>
|
|
243
243
|
</flex-column>
|