@dile/ui 3.12.4 → 3.13.0

package/components/input/input-search.spec.js

@@ -13,7 +13,7 @@ describe('dile-input-search', () => {
     return el;
   }
 
-  it('renders a native text input and a search icon', async () => {
+  it('renders a native search input and a search icon', async () => {
     const el = await renderInputSearch('<dile-input-search placeholder="Search..."></dile-input-search>');
     const input = el.shadowRoot.querySelector('input');
     expect(input).toBeTruthy();
@@ -21,6 +21,16 @@ describe('dile-input-search', () => {
     expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
   });
 
+  it('renders the input as a search field with browser and password manager autofill disabled', async () => {
+    const el = await renderInputSearch('<dile-input-search></dile-input-search>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input.type).toBe('search');
+    expect(input.getAttribute('autocomplete')).toBe('off');
+    expect(input.hasAttribute('data-1p-ignore')).toBe(true);
+    expect(input.getAttribute('data-lpignore')).toBe('true');
+    expect(input.getAttribute('data-form-type')).toBe('other');
+  });
+
   it('updates the value on input and dispatches dile-input-search after the delay', async () => {
     const el = await renderInputSearch('<dile-input-search delay="10"></dile-input-search>');
     const input = el.shadowRoot.querySelector('input');

package/components/input/src/DileInputSearch.js

@@ -35,6 +35,12 @@ export class DileInputSearch extends LitElement {
             input:focus {
                 outline: none;
             }
+            input::-webkit-search-cancel-button,
+            input::-webkit-search-decoration {
+                -webkit-appearance: none;
+                appearance: none;
+                display: none;
+            }
             input::placeholder {
               /* WCAG AA contrast: #666 sobre #fff = 7.5:1 */
               color: var(--dile-input-placeholder-color, #666);
@@ -116,10 +122,13 @@ export class DileInputSearch extends LitElement {
         <div class="${this.errored ? "errored" : ""}">
             <input 
                 id="elinput"
-                type="text" 
+                type="search"
                 placeholder="${this.placeholder}" 
                 @input=${this.inputHandler}
                 autocomplete="off"
+                data-1p-ignore
+                data-lpignore="true"
+                data-form-type="other"
                 .value="${this.value}"
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readOnly}"

package/components/tabs/src/DileTab.js

@@ -1,8 +1,16 @@
 import { html, css, LitElement } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { DileSelectableItem } from "../../../mixins/selectable/index.js";
 
 export class DileTab  extends DileSelectableItem(LitElement) {
 
+  static get properties() {
+    return {
+      href: { type: String },
+      target: { type: String },
+    };
+  }
+
   static get styles() {
     return css`
       :host {
@@ -40,6 +48,11 @@ export class DileTab  extends DileSelectableItem(LitElement) {
       .markselected {
         width: 100%;
       }
+      a {
+        display: block;
+        color: inherit;
+        text-decoration: none;
+      }
       .line {
         display: flex;
         justify-content: center;
@@ -48,6 +61,15 @@ export class DileTab  extends DileSelectableItem(LitElement) {
   }
 
   render() {
+    if (this.href) {
+      return html`
+        <a href="${this.href}" target="${ifDefined(this.target)}">${this.tabTemplate}</a>
+      `;
+    }
+    return this.tabTemplate;
+  }
+
+  get tabTemplate() {
     return html`
       <article @click='${this.select}' class="${this.selected ? 'selected' : ''}">
         <div class="label"><slot></slot></div>

package/components/tabs/tabs.spec.js

@@ -42,4 +42,44 @@ describe('dile-tabs', () => {
 
     expect(el.selected).toBe(1);
   });
+
+  it('renders a native link when the tab has an href', async () => {
+    const el = await renderTabs(`
+      <dile-tabs>
+        <dile-tab href="/one">One</dile-tab>
+        <dile-tab href="https://example.com" target="_blank">Two</dile-tab>
+        <dile-tab>Three</dile-tab>
+      </dile-tabs>
+    `);
+
+    const tabs = el.querySelectorAll('dile-tab');
+    await Promise.all([...tabs].map((tab) => tab.updateComplete));
+
+    const link1 = tabs[0].shadowRoot.querySelector('a');
+    expect(link1.getAttribute('href')).toBe('/one');
+    expect(link1.hasAttribute('target')).toBe(false);
+    expect(link1.querySelector('article')).not.toBeNull();
+
+    const link2 = tabs[1].shadowRoot.querySelector('a');
+    expect(link2.getAttribute('target')).toBe('_blank');
+
+    expect(tabs[2].shadowRoot.querySelector('a')).toBeNull();
+  });
+
+  it('keeps selection working for tabs with href', async () => {
+    const el = await renderTabs(`
+      <dile-tabs attrForSelected="name" selected="two">
+        <dile-tab name="one" href="#one">One</dile-tab>
+        <dile-tab name="two" href="#two">Two</dile-tab>
+      </dile-tabs>
+    `);
+
+    const tabs = el.querySelectorAll('dile-tab');
+    await tabs[1].updateComplete;
+    expect(tabs[1].selected).toBe(true);
+
+    tabs[0].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+    expect(el.selected).toBe('one');
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.12.4",
+  "version": "3.13.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "29dbec2b9bc0a8f5613158409950ffd3456af179"
+  "gitHead": "e4b428c6b9cee3e0f20520c5baa979e232f90dda"
 }