@dile/ui 2.13.0 → 2.14.0

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

@@ -25,6 +25,7 @@ export const DileSelectable = (SuperClass) =>
       this.hashSelection = false;
       this.itemSelectedChangedHandler = this._itemSelectedChanged.bind(this);
       this.onHashChangeHandler = this._onHashChange.bind(this);
+      this.someItemChangedHandler = this.someItemChanged.bind(this);
     }
 
     _onHashChange() {
@@ -64,12 +65,14 @@ export const DileSelectable = (SuperClass) =>
       super.connectedCallback();
       this.addEventListener('dile-item-selected', this.itemSelectedChangedHandler);
       window.addEventListener("hashchange", this.onHashChangeHandler);
+      window.addEventListener("dile-selected-changed", this.someItemChangedHandler);
     }
 
     disconnectedCallback() {
       super.disconnectedCallback();
       this.removeEventListener('dile-item-selected', this.itemSelectedChangedHandler);
       window.removeEventListener("hashchange", this.onHashChangeHandler);
+      window.removeEventListener("dile-selected-changed", this.someItemChangedHandler);
     }
 
     firstUpdated() {
@@ -151,4 +154,12 @@ export const DileSelectable = (SuperClass) =>
     getItems() {
       return this.shadowRoot.querySelector('slot').assignedElements({flatten: true});
     }
+
+    someItemChanged(e) {
+      if(this.selectorId && e.detail.selectorId === this.selectorId) {
+        if(this.selected != e.detail.selected) {
+          this.selected = e.detail.selected;
+        }
+      }
+    }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fe694c1012976386590ba407e057b6851fdfa0df"
+  "gitHead": "f7a66b88507409901e09b5ca7852358237a7559c"
 }