1- import { property } from 'lit/decorators.js' ;
2- import { type CSSResultGroup , html , PropertyValues , unsafeCSS } from 'lit' ;
3- import ZnDialog from "../dialog" ;
41import { classMap } from "lit/directives/class-map.js" ;
5- import { unsafeHTML } from "lit/directives/unsafe-html.js" ;
2+ import { type CSSResultGroup , html , type PropertyValues , unsafeCSS } from 'lit' ;
3+ import { ifDefined } from "lit/directives/if-defined.js" ;
4+ import { property , query } from 'lit/decorators.js' ;
5+ import ZincElement from "../../internal/zinc-element" ;
6+ import ZnDialog from "../dialog" ;
67
78import styles from './confirm.scss' ;
89
@@ -23,107 +24,103 @@ import styles from './confirm.scss';
2324 *
2425 * @cssproperty --example - An example CSS custom property.
2526 */
26- export default class ZnConfirm extends ZnDialog {
27+ export default class ZnConfirm extends ZincElement {
28+ static styles : CSSResultGroup = unsafeCSS ( styles ) ;
29+ static dependencies = {
30+ 'zn-dialog' : ZnDialog
31+ } ;
2732
28- static get styles ( ) : CSSResultGroup {
29- return [ super . styles , unsafeCSS ( styles ) ] ;
30- }
33+ /** The dialog's theme variant. */
34+ @property ( { reflect : true } ) color : 'default' | 'warning' | 'announcement' = 'default' ;
35+
36+ /** The dialog's size. */
37+ @property ( { reflect : true } ) size : 'small' | 'medium' | 'large' = 'medium' ;
38+
39+ /** The dialogs type, which will determine the icon and color. */
40+ @property ( ) type : 'warning' | 'error' | 'success' | 'info' = 'warning' ;
41+
42+ /**
43+ * Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
44+ * use the `show()` and `hide()` methods and this attribute will reflect the dialog's state.
45+ */
46+ @property ( { type : Boolean , reflect : true } ) open = false ;
3147
3248 @property ( ) caption : string = '' ;
33- @ property ( ) content : string = '' ;
49+
3450 @property ( ) action : string = '' ;
51+
52+ @property ( ) content : string = '' ;
53+
3554 @property ( ) confirmText : string = "Confirm" ;
55+
3656 @property ( ) cancelText : string = "Cancel" ;
57+
3758 @property ( { type : Boolean , attribute : 'hide-icon' } ) hideIcon : boolean = false ;
3859
39- @property ( ) type : 'warning' | 'error' | 'success' | 'info' = 'warning' ;
40- @property ( ) size : 'small' | 'medium' | 'large' = 'medium' ;
60+ /**
61+ * The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you
62+ * will need to manually open the dialog using the `show()` method.
63+ */
64+ @property ( { reflect : true } ) trigger : string ;
4165
42- private _hasVisibleInput : boolean = false ;
66+ /** The Dialogs announcement text. */
67+ @property ( ) announcement : string = '' ;
4368
44- getIcon ( ) {
45- const src = {
46- 'warning' : 'priority_high' ,
47- 'error' : 'priority_high' ,
48- 'success' : 'check' ,
49- 'info' : 'help'
50- } ;
69+ /** The Dialogs footer text. */
70+ @property ( { attribute : 'footer-text' } ) footerText : string = '' ;
5171
52- return html `
53- < zn-icon slot ="primary " color ="${ this . type } src ="${ src [ this . type ] } size ="24 "> </ zn-icon >
54- ` ;
55- }
56-
57- connectedCallback ( ) {
58- this . emit ( 'zn-element-added' , { detail : { element : this } } ) ;
59- super . connectedCallback ( ) ;
60- }
72+ @query ( 'zn-dialog' ) dialog : ZnDialog ;
6173
6274 protected firstUpdated ( _changedProperties : PropertyValues ) {
6375 super . firstUpdated ( _changedProperties ) ;
76+ if ( this . open ) {
77+ this . dialog . show ( ) ;
78+ }
79+ }
6480
65- const slot = this . shadowRoot ?. querySelector ( 'slot' ) ;
66- if ( slot ) {
67- const nodes : Node [ ] = slot . assignedNodes ( ) ;
68- const form = nodes . filter ( ( node ) => node . nodeName === 'FORM' ) ;
69-
70- const elementNameMap = [
71- 'input' , 'select' , 'textarea' , 'zn-select' , 'zn-input' , 'zn-textarea'
72- ] ;
73-
74- const elements : any [ ] = [ ] ;
75- if ( form [ 0 ] ) {
76- elementNameMap . forEach ( ( elementName ) => {
77- elements . push ( ...( form [ 0 ] as HTMLFormElement ) . querySelectorAll ( elementName ) ) ;
78- } ) ;
79- }
81+ connectedCallback ( ) {
82+ super . connectedCallback ( ) ;
8083
81- // Check if there is an input that isn't hidden
82- for ( let i = 0 ; i < elements . length ; i ++ ) {
83- if ( elements [ i ] . type !== 'hidden' ) {
84- this . _hasVisibleInput = true ;
85- this . requestUpdate ( ) ;
86- break ;
87- }
84+ if ( this . trigger ) {
85+ const trigger = this . parentElement ?. querySelector ( '#' + this . trigger ) ;
86+ if ( trigger ) {
87+ trigger . addEventListener ( 'click' , ( ) => this . dialog . show ( ) ) ;
8888 }
8989 }
9090 }
9191
9292 render ( ) {
93- const icon = this . getIcon ( ) ;
93+ const src = {
94+ 'warning' : 'priority_high' ,
95+ 'error' : 'priority_high' ,
96+ 'success' : 'check' ,
97+ 'info' : 'help'
98+ } ;
9499
95100 return html `
96- < dialog class =${ classMap ( {
97- 'dialog' : true ,
98- 'dialog--small' : this . size === 'small' ,
99- 'dialog--medium' : this . size === 'medium' ,
100- 'dialog--large' : this . size === 'large'
101- } ) } >
102- < div id ="content "> <!-- default dialog close button -->
103- ${ ! this . hideIcon ? icon : '' }
104- < h2 class ="title "> ${ unsafeHTML ( this . caption ) } </ h2 >
105- ${ this . content && html `< p > ${ unsafeHTML ( this . content ) } </ p > ` }
106- < slot > </ slot >
107- < div class ="${ classMap ( {
108- 'button-group' : true ,
109- 'button-group--gap' : this . _hasVisibleInput
110- } ) } ">
111- < zn-button style ="flex-grow:1 " outline color ="${ this . type } dialog-closer modal-closer
112- @click ="${ this . closeModal } >
113- ${ this . cancelText }
114- </ zn-button >
115- < zn-button style ="flex-grow:1 " color ="${ this . type } @click ="${ this . submitDialog } > ${ this . confirmText }
116- </ zn-button >
117- </ div >
118- </ div >
119- < div class ="done ">
120- < zn-icon src ="check:success " size ="150 "> </ zn-icon >
121- </ div >
122- </ dialog > ` ;
123- }
101+ < zn-dialog size ="${ this . size } variant ="announcement " label =${ ifDefined ( this . caption ) } trigger =${ this . trigger }
102+ class=${ classMap ( {
103+ 'confirm-dialog' : true ,
104+ 'confirm-dialog--warning' : this . type === 'warning' ,
105+ 'confirm-dialog--error' : this . type === 'error' ,
106+ 'confirm-dialog--success' : this . type === 'success' ,
107+ 'confirm-dialog--info' : this . type === 'info'
108+ } ) } >
109+
110+ < slot name ="announcement-intro " slot ="announcement-intro "> ${ this . announcement } </ slot >
111+
112+ ${ ! this . hideIcon ? html `
113+ < zn-icon slot ="header-icon " color ="${ this . type } src ="${ src [ this . type ] } > </ zn-icon > `
114+ : '' }
115+
116+ ${ this . content ? html `< p class ="confirm-dialog__content "> ${ this . content } </ p > ` : '' }
117+ < slot > </ slot >
118+
119+ < zn-button outline color ="${ this . type } slot ="footer " dialog-closer > ${ this . cancelText } </ zn-button >
120+ < zn-button color ="${ this . type } slot ="footer " @click ="${ this . submitDialog } > ${ this . confirmText } </ zn-button >
124121
125- closeModal ( ) {
126- this . emit ( 'zn-close' , { detail : { element : this } } ) ;
122+ < slot name =" footer-text " slot =" footer-text " > ${ this . footerText } </ slot >
123+ </ zn-dialog > ` ;
127124 }
128125
129126 submitDialog ( ) {
@@ -141,7 +138,7 @@ export default class ZnConfirm extends ZnDialog {
141138
142139 if ( form && form . reportValidity ( ) ) {
143140 form . requestSubmit ( ) ;
144- this . close ( ) ;
141+ this . dialog . hide ( ) ;
145142 }
146143 }
147144}
0 commit comments