@kubex/zinc 1.0.107 → 1.0.109

package/src/components/tabs/tabs.component.ts

@@ -37,6 +37,7 @@ export default class ZnTabs extends ZincElement {
   @property({attribute: 'primary-caption', reflect: true}) primaryCaption = 'Navigation';
   @property({attribute: 'secondary-caption', reflect: true}) secondaryCaption = 'Content';
   @property({attribute: 'no-prefetch', type: Boolean, reflect: true}) noPrefetch = false;
+  @property({attribute: 'no-cache', type: Boolean, reflect: true}) noCache = false;
   // session storage if not local
   @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
   @property({attribute: 'store-key'}) storeKey: string;
@@ -72,7 +73,7 @@ export default class ZnTabs extends ZincElement {
       this.masterId = this.storeKey || Math.floor(Math.random() * 1000000).toString();
     }
 
-    this.preload = !this.noPrefetch;
+    this.preload = !this.noPrefetch && !this.noCache;
 
     await this.updateComplete;
     this._panel = this.shadowRoot?.querySelector('#content');
@@ -272,11 +273,14 @@ export default class ZnTabs extends ZincElement {
   }
 
   clickTab(target: HTMLElement, refresh: boolean) {
+    const tabUri = target.getAttribute('tab-uri');
+    const wasCached = !!tabUri && this._panels.has(this._uriToId(tabUri));
     this.fetchUriTab(target);
 
     if (target.hasAttribute('tab')) {
+      const forceRefresh = refresh || (this.noCache && wasCached);
       setTimeout(() => {
-        this.setActiveTab(target.getAttribute('tab') || '', true, refresh, this.getRefTab(target));
+        this.setActiveTab(target.getAttribute('tab') || '', true, forceRefresh, this.getRefTab(target));
       }, 10);
     }
   }

package/src/components/textarea/textarea.component.ts

@@ -233,6 +233,13 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.input.blur();
+      event.stopPropagation();
+    }
+  }
+
   private setTextareaHeight() {
     if (this.resize === 'auto') {
       this.input.style.height = 'auto';
@@ -436,6 +443,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
               @change=${this.handleChange}
               @input=${this.handleInput}
               @invalid=${this.handleInvalid}
+              @keydown=${this.handleKeyDown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             ></textarea>

package/src/components/textarea/textarea.test.ts

@@ -1,10 +1,43 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnTextarea from './textarea.component';
 
-describe('<zn-text-area>', () => {
+describe('<zn-textarea>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-text-area></zn-text-area> `);
+    const el = await fixture(html` <zn-textarea></zn-textarea> `);
 
     expect(el).to.exist;
   });
+
+  describe('Escape key', () => {
+    it('blurs the inner textarea and stops propagation when focused', async () => {
+      const wrapper = await fixture<HTMLDivElement>(html`
+        <div>
+          <zn-textarea></zn-textarea>
+        </div>
+      `);
+      const el = wrapper.querySelector('zn-textarea') as ZnTextarea;
+      await el.updateComplete;
+
+      let wrapperEscapes = 0;
+      wrapper.addEventListener('keydown', (e) => {
+        if ((e as KeyboardEvent).key === 'Escape') wrapperEscapes++;
+      });
+
+      el.focus();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement).to.equal(el.input);
+
+      el.input.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      }));
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement, 'inner textarea should be blurred').to.not.equal(el.input);
+      expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
+    });
+  });
 });

package/src/components/tile-property/tile-property.scss

@@ -1,24 +1,28 @@
 @use "../../wc";
 
+:host {
+  display: flex;
+  min-width: 0;
+  max-width: 240px;
+}
 
 .tile__property {
   display: flex;
   align-items: center;
   flex-direction: row;
-  width: 150px;
-  flex-basis: 150px;
-  max-width: 200px;
+  min-width: 0;
+  width: 100%;
 
   .tile__property_container {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    min-width: 0;
   }
 
   .tile__icon {
     margin-right: 15px;
+    flex-shrink: 0;
   }
 
   .tile__caption {
@@ -29,6 +33,7 @@
     color: rgb(var(--zn-text-heading));
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 
   .tile__description {
@@ -39,5 +44,6 @@
     color: rgb(var(--zn-text-color));
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 }

package/src/utilities/sha256.ts

@@ -0,0 +1,114 @@
+/* eslint-disable */
+export function sha256(input: string): string {
+  function rightRotate(value: number, amount: number) {
+    return (value >>> amount) | (value << (32 - amount));
+  }
+
+  function utf8Encode(string: string) {
+    string = string.replace(/\r\n/g, '\n');
+    let utfText = '';
+
+    for (let index = 0; index < string.length; index++) {
+      const charCode = string.charCodeAt(index);
+
+      if (charCode < 128) {
+        utfText += String.fromCharCode(charCode);
+      } else if (charCode < 2048) {
+        utfText += String.fromCharCode((charCode >> 6) | 192);
+        utfText += String.fromCharCode((charCode & 63) | 128);
+      } else {
+        utfText += String.fromCharCode((charCode >> 12) | 224);
+        utfText += String.fromCharCode(((charCode >> 6) & 63) | 128);
+        utfText += String.fromCharCode((charCode & 63) | 128);
+      }
+    }
+
+    return utfText;
+  }
+
+  const mathPow = Math.pow;
+  const maxWord = mathPow(2, 32);
+  const words: number[] = [];
+  const hash: number[] = [];
+  const roundConstants: number[] = [];
+  const isComposite: Record<number, boolean> = {};
+  let primeCounter = 0;
+  let message = utf8Encode(input);
+  const messageBitLength = message.length * 8;
+
+  for (let candidate = 2; primeCounter < 64; candidate++) {
+    if (!isComposite[candidate]) {
+      for (let index = 0; index < 313; index += candidate) {
+        isComposite[index] = true;
+      }
+
+      if (primeCounter < 8) {
+        hash[primeCounter] = (mathPow(candidate, 0.5) * maxWord) | 0;
+      }
+
+      roundConstants[primeCounter] = (mathPow(candidate, 1 / 3) * maxWord) | 0;
+      primeCounter++;
+    }
+  }
+
+  message += '\x80';
+
+  while (message.length % 64 !== 56) {
+    message += '\x00';
+  }
+
+  for (let index = 0; index < message.length; index++) {
+    words[index >> 2] |= message.charCodeAt(index) << ((3 - (index % 4)) * 8);
+  }
+
+  words[words.length] = (messageBitLength / maxWord) | 0;
+  words[words.length] = messageBitLength;
+
+  for (let chunkStart = 0; chunkStart < words.length; chunkStart += 16) {
+    const workingHash = hash.slice(0, 8);
+    const schedule = words.slice(chunkStart, chunkStart + 16);
+
+    for (let round = 16; round < 64; round++) {
+      const word15 = schedule[round - 15];
+      const word2 = schedule[round - 2];
+      const sigma0 = rightRotate(word15, 7) ^ rightRotate(word15, 18) ^ (word15 >>> 3);
+      const sigma1 = rightRotate(word2, 17) ^ rightRotate(word2, 19) ^ (word2 >>> 10);
+
+      schedule[round] = (schedule[round - 16] + sigma0 + schedule[round - 7] + sigma1) | 0;
+    }
+
+    for (let round = 0; round < 64; round++) {
+      const a = workingHash[0];
+      const b = workingHash[1];
+      const c = workingHash[2];
+      const d = workingHash[3];
+      const e = workingHash[4];
+      const f = workingHash[5];
+      const g = workingHash[6];
+      const h = workingHash[7];
+      const sigma1 = rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25);
+      const choose = (e & f) ^ (~e & g);
+      const temp1 = (h + sigma1 + choose + roundConstants[round] + schedule[round]) | 0;
+      const sigma0 = rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22);
+      const majority = (a & b) ^ (a & c) ^ (b & c);
+      const temp2 = (sigma0 + majority) | 0;
+
+      workingHash[7] = g;
+      workingHash[6] = f;
+      workingHash[5] = e;
+      workingHash[4] = (d + temp1) | 0;
+      workingHash[3] = c;
+      workingHash[2] = b;
+      workingHash[1] = a;
+      workingHash[0] = (temp1 + temp2) | 0;
+    }
+
+    for (let index = 0; index < 8; index++) {
+      hash[index] = (hash[index] + workingHash[index]) | 0;
+    }
+  }
+
+  return hash
+    .map(value => (value >>> 0).toString(16).padStart(8, '0'))
+    .join('');
+}