@dile/ui 2.13.1 → 2.14.1

package/components/confirm-text/confirm-text.js

@@ -0,0 +1,3 @@
+import { DileConfirmText } from './src/DileConfirmText.js';
+
+window.customElements.define('dile-confirm-text', DileConfirmText);

package/components/confirm-text/index.js

@@ -0,0 +1 @@
+export { DileConfirmText } from './src/DileConfirmText.js';

package/components/confirm-text/src/DileConfirmText.js

@@ -0,0 +1,107 @@
+import { LitElement, html, css } from 'lit';
+import { DileConfirm } from '../../confirm/src/DileConfirm.js';
+import '../../modal/modal.js';
+import '../../input/input.js';
+import '../../inline-feedback/inline-feedback.js';
+
+export class DileConfirmText extends DileConfirm {
+
+  static get styles() {
+    return [super.styles, css`
+      :host {
+        display: block;
+        --dile-modal-background-color: rgba(90, 0, 0, 0.8);
+        --dile-modal-content-shadow-color: rgba(20, 0, 0, 0.5);
+        --dile-confirm-cancel-button-color: #007bff;
+        --dile-confirm-accept-button-color: #dc3545;
+        --dile-input-message-color: #991010;
+      }
+      .content {
+        padding: 1rem;
+        text-align: left;
+      }
+      .title {
+        padding: 0 1rem;
+        padding-top: 1rem;
+        font-size: 1.2em;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+      }
+    `];
+  }
+
+  static get properties() {
+    return {
+      ...super.properties,
+      title: { type: String },
+      confirmationText: { type: String },
+      inputLabel: { type: String },
+      inputMessage: { type: String },
+      wrongTextMessage: { type: String },
+      emptyTextMessage: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.confirmationText = 'CONFIRM';
+    this.inputLabel = 'Type ' + this.confirmationText + ' in the text field to confirm your action.';
+    this.inputMessage = 'Your data will be deleted and cannot be recovered.';
+    this.wrongTextMessage = `You must type "${this.confirmationText}" in uppercase letters`;
+    this.emptyTextMessage = 'You have not typed anything in the text field';
+  }
+
+  render() {
+    return html`
+      <dile-modal 
+        ?blocking="${this.blocking}" 
+        ?opened="${this.opened}" 
+        id="modal" 
+        @dile-modal-background-closed="${this.cancel}">
+        ${this.title ? html`<div class="title">${this.title}</div>` : ''}
+        <div class="content">
+          <slot></slot>
+          <dile-input 
+            id="eltext" 
+            @focus="${this.cleanInline}" 
+            label="${this.inputLabel}"
+            message="${this.inputMessage}"></dile-input>
+          <dile-inline-feedback id="feedback"></dile-inline-feedback>
+          <div class="actions">
+            <a href="#" class="button cancel" @click="${this._cancelHandler}">${this.cancelLabel}</a>
+            <a href="#" class="button accept" @click="${this._acceptHandler}">${this.acceptLabel}</a>
+          </div>
+        </div>
+      </dile-modal>
+    `;
+  }
+
+  _acceptHandler(e) {
+    e.preventDefault();
+    this.feedback.clear();
+    let text = this.shadowRoot.getElementById('eltext').value;
+    if(text === '') {
+      this.feedback.negativeFeedback(this.emptyTextMessage);
+      return;
+    }
+    if(text !== this.confirmationText) {
+      this.feedback.negativeFeedback(this.wrongTextMessage);
+      return;
+    }
+    this.accept();
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.feedback = this.shadowRoot.getElementById('feedback');
+  }
+
+  cleanInline() {
+    this.feedback.clear();
+  }
+
+  cancel() {
+    super.cancel();
+    this.cleanInline();
+  }
+}

package/mixins/selectable/src/DileSelectable.js

@@ -86,7 +86,7 @@ export const DileSelectable = (SuperClass) =>
       this._onHashChange();
       this.setSelectedItem();
       if(this.selected !== undefined) {
-        setTimeout( () => this.dispatchSelectedChanged(), 500);
+        setTimeout( () => this.dispatchSelectedChanged(true), 500);
       }
     }
 
@@ -136,13 +136,14 @@ export const DileSelectable = (SuperClass) =>
       this.dispatchSelectedChanged();
     }
   
-    dispatchSelectedChanged() {
+    dispatchSelectedChanged(initializationEvent = false) {
       this.dispatchEvent(new CustomEvent('dile-selected-changed', {
         bubbles: true,
         composed: true,
         detail: {
           selected: this.selected,
           selectorId: this.selectorId,
+          initializationEvent,
         }
       }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.13.1",
+  "version": "2.14.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2cce4548dfe05e5ef9f72228ff1cb7d3eeb5e285"
+  "gitHead": "29c107ef8ff78170087a57c5c47904ce7c72996b"
 }