@dile/ui 3.6.4 → 3.6.6

package/components/confirm/confirm.spec.js

@@ -29,4 +29,29 @@ describe('dile-confirm', () => {
 
     expect(accepted).toBe(true);
   });
+
+  it('handles dontCloseOnAccept and can be reset with resetProcessing()', async () => {
+    const el = await renderConfirm('<dile-confirm dontCloseOnAccept>Are you sure?</dile-confirm>');
+    let acceptCount = 0;
+    el.addEventListener('dile-confirm-accepted', () => { acceptCount++; });
+
+    el.shadowRoot.querySelector('.accept').click();
+    await el.updateComplete;
+    expect(acceptCount).toBe(1);
+    expect(el._isProcessing).toBe(true);
+    expect(el.shadowRoot.querySelector('.accept').classList.contains('disabled')).toBe(true);
+
+    // Clicking again while processing should not trigger accept
+    el.shadowRoot.querySelector('.accept').click();
+    expect(acceptCount).toBe(1);
+
+    // Calling resetProcessing should unlock the buttons
+    el.resetProcessing();
+    await el.updateComplete;
+    expect(el._isProcessing).toBe(false);
+    expect(el.shadowRoot.querySelector('.accept').classList.contains('disabled')).toBe(false);
+
+    el.shadowRoot.querySelector('.accept').click();
+    expect(acceptCount).toBe(2);
+  });
 });

package/components/confirm/src/DileConfirm.js

@@ -52,6 +52,7 @@ export class DileConfirm extends LitElement {
       cancelLabel: { type: String },
       blocking: { type: Boolean },
       dontCloseOnAccept: { type: Boolean },
+      _isProcessing: { state: true },
     };
   }
 
@@ -61,6 +62,7 @@ export class DileConfirm extends LitElement {
     this.cancelLabel = "Cancell";
     this.opened = false;
     this.blocking = false;
+    this.dontCloseOnAccept = false;
     this._isProcessing = false;
   }
 
@@ -100,6 +102,7 @@ export class DileConfirm extends LitElement {
 
   open() {
     this.modal.open();
+    this._isProcessing = false;
   }
 
   close() {
@@ -107,6 +110,10 @@ export class DileConfirm extends LitElement {
     this._isProcessing = false;
   }
 
+  resetProcessing() {
+    this._isProcessing = false;
+  }
+
   firstUpdated() {
     this.modal = this.shadowRoot.getElementById("modal");
   }

package/components/input/src/DileInputIcon.js

@@ -28,7 +28,9 @@ export class DileInputIcon extends DileInput {
       ...super.styles,
       css`
         .input-icon-btn {
+          box-sizing: border-box;
           background: none;
+          background-color: var(--dile-input-icon-background-color, var(--dile-input-icon-bg, transparent));
           border: none;
           cursor: pointer;
           padding: var(--dile-input-icon-padding, var(--dile-input-padding, 5px));
@@ -37,16 +39,18 @@ export class DileInputIcon extends DileInput {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: var(--dile-input-icon-width, 32px);
-          height: var(--dile-input-icon-height, 32px);
+          width: var(--dile-input-icon-width, auto);
+          height: var(--dile-input-icon-height, auto);
+          min-width: var(--dile-input-icon-width, 32px);
+          min-height: var(--dile-input-icon-height, 32px);
           border-radius: var(--dile-input-icon-border-radius, var(--dile-input-border-radius, 5px));
           transition: var(--dile-input-icon-transition, background-color 0.2s);
         }
         .input-icon-btn:hover {
-          background-color: var(--dile-input-icon-hover-bg, rgba(0, 0, 0, 0.05));
+          background-color: var(--dile-input-icon-hover-background-color, var(--dile-input-icon-hover-bg, rgba(0, 0, 0, 0.05)));
         }
         .input-icon-btn:active {
-          background-color: var(--dile-input-icon-active-bg, rgba(0, 0, 0, 0.1));
+          background-color: var(--dile-input-icon-active-background-color, var(--dile-input-icon-active-bg, rgba(0, 0, 0, 0.1)));
         }
         .input-icon-btn:disabled {
           cursor: not-allowed;
@@ -71,44 +75,62 @@ export class DileInputIcon extends DileInput {
   }
 
   render() {
-    const inputType = this.type || 'text';
-    
     return html`
-    <div>
-      ${this.label
-        ? html`<label for="textField">${this.label}</label>`
-        : ''
-      }
-      <section class="for-input">
-        <input
-          type="${inputType}"
-          id="textField"
-          name="${this.name}"
-          placeholder="${this.placeholder}"
-          ?disabled="${this.disabled}"
-          ?readonly="${this.readonly}"
-          @keypress="${this._lookForEnter}"
-          @input="${this._input}"
-          @blur="${this.doBlur}"
-          @focus="${this.doFocus}"
-          .value="${this.value}"
-          class="${this.errored ? 'errored' : ''}"
-          autocomplete="${this.disableAutocomplete ? 'off' : 'on'}"
-          ?selectonfocus="${this.selectOnFocus}"
-        >
-        ${this.icon
-          ? this.renderIconButton()
-          : ''
-        }
-      </section>
-      ${this.message
-        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
-        : ''
-      }
-    </div>
+      <main>
+        ${this.labelTemplate}
+        <section class="for-input">
+          ${this.inputTemplate}
+          ${this.icon ? this.renderIconButton() : ''}
+          ${this.labelRight ? html`<span class="labelright">${this.labelRight}</span>` : ''}
+        </section>
+        ${this.messageTemplate}
+      </main>
+    `;
+  }
+
+  get labelTemplate() {
+    return this.label
+      ? html`<label for="textField">${this.label}</label>`
+      : '';
+  }
+
+  get inputTemplate() {
+    return html`
+      <input
+        type="${this.availableType(this.type)}"
+        id="textField"
+        name="${this.name}"
+        placeholder="${this.placeholder}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        autocomplete="${this.disableAutocomplete ? 'off' : 'on'}"
+        .value="${this.computeValue(this.value)}"
+        class="${this.errored ? 'errored' : ''}"
+        @keypress="${this._lookForEnter}"
+        @input="${this._input}"
+        @blur="${this.doBlur}"
+        @focus="${this.doFocus}"
+        ?selectonfocus="${this.selectOnFocus}"
+      >
     `;
   }
 
+  get iconTemplate() {
+    return this.renderIconlibIcon(this.icon);
+  }
+
+  get buttonTemplate() {
+    return html`<button
+      class="input-icon-btn"
+      type="button"
+      @click="${this._handleIconClick}"
+      ?disabled="${this.disabled}"
+      aria-label="Icon action button"
+    >
+      ${this.iconTemplate}
+    </button>`;
+  }
+
   /**
    * Renders an icon using dile-iconlib
    * Supports format "family.name" (e.g., "lucide.eye", "material.home")
@@ -137,15 +159,7 @@ export class DileInputIcon extends DileInput {
    * @returns {TemplateResult}
    */
   renderIconButton() {
-    const button = html`<button
-      class="input-icon-btn"
-      type="button"
-      @click="${this._handleIconClick}"
-      ?disabled="${this.disabled}"
-      aria-label="Icon action button"
-    >
-      ${this.renderIconlibIcon(this.icon)}
-    </button>`;
+    const button = this.buttonTemplate;
 
     // If tooltip is defined, wrap button with dile-tooltip
     if (this.tooltip) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.6.4",
+  "version": "3.6.6",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6e81c1423870da7d209a2cc421c96fd63008bdb8"
+  "gitHead": "3bc0a2459a5ced3e7105ce061f93f07a9c798759"
 }