@kubex/zinc 0.0.2 → 1.0.0

package/src/components/split-button/split-button.scss

@@ -0,0 +1,9 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+zn-button-group::part(base) {
+  justify-content: flex-start;
+}

package/src/components/split-button/split-button.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-split-button>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-split-button></zn-split-button> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/split-pane/index.ts

@@ -0,0 +1,12 @@
+import ZnSplitPane from './split-pane.component';
+
+export * from './split-pane.component';
+export default ZnSplitPane;
+
+ZnSplitPane.define('zn-split-pane');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-split-pane': ZnSplitPane;
+  }
+}

package/src/components/split-pane/split-pane.component.ts

@@ -0,0 +1,195 @@
+import {eventOptions, property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './split-pane.scss';
+import {Store} from "../../internal/storage";
+import {on} from "../../utilities/on";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/split-pane
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnSplitPane extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  storage: Storage;
+  mouseMoveHandler: null | EventListener = null;
+  mouseUpHandler: null | EventListener = null;
+
+  private currentPixelSize: number = 0;
+  private currentPercentSize: number = 0;
+  private currentContainerSize: number = 0;
+  private primaryFull: string;
+
+  @property({attribute: 'pixels', type: Boolean, reflect: true}) calculatePixels = false;
+  @property({attribute: 'secondary', type: Boolean, reflect: true}) preferSecondarySize = false;
+  @property({attribute: 'min-size', type: Number, reflect: true}) minimumPaneSize = 10;
+  @property({attribute: 'max-size', type: Number, reflect: true}) maximumPaneSize: number;
+  @property({attribute: 'initial-size', type: Number, reflect: true}) initialSize = 50;
+  @property({attribute: 'store-key', reflect: true}) storeKey: string = "";
+  @property({attribute: 'bordered', type: Boolean, reflect: true}) border = false;
+  @property({attribute: 'vertical', type: Boolean, reflect: true}) vertical = false;
+
+  @property({attribute: 'primary-caption', reflect: true}) primaryCaption = 'Primary';
+  @property({attribute: 'secondary-caption', reflect: true}) secondaryCaption = 'Secondary';
+
+  @property({attribute: 'focus-pane', type: Number, reflect: true}) _focusPane = 0;
+
+  @property({attribute: 'padded', type: Boolean, reflect: true}) padded = false;
+  @property({attribute: 'padded-right', type: Boolean, reflect: true}) paddedRight = false;
+
+  // session storage if not local
+  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
+  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
+  protected _store: Store;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "znsp:", this.storeTtl);
+    this.primaryFull = this.calculatePixels ? this.initialSize + 'px' : this.initialSize + '%';
+    on(this, 'click', '[split-pane-focus]', (e: Event & { selectedTarget: EventTarget }) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._setFocusPane(parseInt((e.selectedTarget as HTMLElement).getAttribute('split-pane-focus') as string));
+    });
+  }
+
+  firstUpdated(changedProperties: any) {
+    setTimeout(this.applyStoredSize.bind(this), 100);
+    super.firstUpdated(changedProperties);
+  }
+
+  applyStoredSize() {
+    this.currentContainerSize = (this.vertical ? this.getBoundingClientRect().height : this.getBoundingClientRect().width);
+    let applyPixels = this.preferSecondarySize ? this.currentContainerSize - this.initialSize : this.initialSize;
+    let applyPercent = this.preferSecondarySize ? 100 - this.initialSize : this.initialSize;
+
+
+    const storedValue = this._store.get(this.storeKey);
+    if (storedValue != null) {
+      const parts = storedValue.split(",");
+      if (parts.length >= 3) {
+        applyPixels = parseInt(parts[0]);
+        applyPercent = parseInt(parts[1]);
+        const storedBasis = parseInt(parts[2]);
+        if (this.preferSecondarySize && this.calculatePixels) {
+          applyPixels = (this.currentContainerSize / storedBasis) * applyPixels;
+        }
+      }
+    }
+    this.setSize(this.calculatePixels ? applyPixels : (this.currentContainerSize / 100) * applyPercent);
+  }
+
+  @eventOptions({passive: true})
+  resize(e: any) {
+    if (this.mouseUpHandler != null) {
+      this.mouseUpHandler(e);
+    }
+
+    this.classList.add('resizing');
+    this.currentContainerSize = this.vertical ? this.getBoundingClientRect().height : this.getBoundingClientRect().width;
+    const pageOffset = this.vertical ? this.getBoundingClientRect().top : this.getBoundingClientRect().left;
+
+    this.mouseMoveHandler = function (e: any) {
+      let offset = (this.vertical ? e.y : e.x);
+      if (e instanceof TouchEvent) {
+        offset = (this.vertical ? e.touches[0].clientY : e.touches[0].clientX);
+      }
+      this.setSize(offset - pageOffset);
+    }.bind(this);
+
+    this.mouseUpHandler = function () {
+      this._store.set(this.storeKey, Math.round(this.currentPixelSize) + "," + Math.round(this.currentPercentSize) + "," + this.currentContainerSize);
+      this.classList.remove('resizing');
+      window.removeEventListener('touchmove', this.mouseMoveHandler);
+      window.removeEventListener('mousemove', this.mouseMoveHandler);
+
+      window.removeEventListener('touchend', this.mouseUpHandler);
+      window.removeEventListener('mouseup', this.mouseUpHandler);
+    }.bind(this);
+
+    window.addEventListener('touchmove', this.mouseMoveHandler);
+    window.addEventListener('touchend', this.mouseUpHandler);
+
+    window.addEventListener('mousemove', this.mouseMoveHandler);
+    window.addEventListener('mouseup', this.mouseUpHandler);
+  }
+
+  setSize(primaryPanelPixels: number) {
+    let pixelSize = primaryPanelPixels;
+    let percentSize = (primaryPanelPixels / this.currentContainerSize) * 100;
+
+    if (this.calculatePixels) {
+      if (this.maximumPaneSize) {
+        pixelSize = Math.max(this.minimumPaneSize, Math.min(this.maximumPaneSize, pixelSize));
+      } else {
+        pixelSize = Math.max(this.minimumPaneSize, pixelSize);
+      }
+      this.initialSize = pixelSize;
+    } else {
+      if (this.maximumPaneSize) {
+        percentSize = Math.max(this.minimumPaneSize, Math.min(this.maximumPaneSize, percentSize));
+      } else {
+        percentSize = Math.max(this.minimumPaneSize, percentSize);
+      }
+      this.initialSize = percentSize;
+    }
+    this.currentPixelSize = pixelSize;
+    this.currentPercentSize = percentSize;
+    this.primaryFull = this.calculatePixels ? (this.currentPixelSize + 'px') : (this.currentPercentSize + '%');
+  }
+
+  _togglePane(e: any) {
+    this._setFocusPane(e.target.getAttribute('idx'));
+  }
+
+  _setFocusPane(idx: number) {
+    this._focusPane = idx;
+    this.querySelectorAll('ul#split-nav li').forEach((el) => {
+      el.classList.toggle('active', parseInt(el.getAttribute('idx') as string) == idx);
+    });
+  }
+
+  protected render(): unknown {
+    const resizeWidth = '2px';
+    const resizeMargin = '5px';
+    return html`
+      <style>:host {
+        --min-panel-size: ${this.minimumPaneSize}${this.calculatePixels ? 'px' : '%'};
+        --max-panel-size: ${this.maximumPaneSize ? this.maximumPaneSize + (this.calculatePixels ? 'px' : '%') : 'none'};
+        --initial-size: ${this.primaryFull};
+        --resize-size: ${resizeWidth};
+        --resize-margin: ${resizeMargin};
+      }</style>
+      <ul id="split-nav">
+        <li idx="0" class="${this._focusPane == 0 ? 'active' : ''}" @click="${this._togglePane}">
+          ${this.primaryCaption}
+        </li>
+        <li idx="1" class="${this._focusPane == 1 ? 'active' : ''}" @click="${this._togglePane}">
+          ${this.secondaryCaption}
+        </li>
+      </ul>
+      <div id="primary-pane">
+        <slot name="primary"></slot>
+      </div>
+      <div @mousedown="${this.resize}" @touchstart="${this.resize}" id="resizer"></div>
+      <div id="secondary-pane">
+        <slot name="secondary"></slot>
+      </div>
+    `;
+  }
+}

package/src/components/split-pane/split-pane.scss

@@ -0,0 +1,303 @@
+@use "sass:map";
+@use "../../wc";
+@use "../../../scss/mixins";
+
+:host([bordered]) #resizer:before {
+  background-color: rgb(var(--zn-border-color));
+}
+
+::slotted(*) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+:host {
+  display: flex;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  width: 100%;
+  flex: 1;
+  min-width: 350px;
+  container-type: inline-size;
+
+  #primary-pane, #secondary-pane {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  slot {
+    overflow: auto;
+  }
+
+  #resizer {
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      z-index: 500;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      z-index: 1;
+      transition: background-color 200ms ease-in-out;
+    }
+
+    cursor: col-resize;
+
+    //padding: var(--zn-padding);
+
+    &:hover:before {
+      background-color: rgb(var(--zn-blue));
+    }
+  }
+}
+
+:host(:not([vertical])), zn-split-pane:not([vertical]) {
+  padding-top: 40px;
+
+  #split-nav {
+    display: none;
+  }
+
+  @include wc.container-query(md) {
+    padding-top: 0;
+  }
+
+  @include wc.container-query(zero, md) {
+
+    #split-nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+      padding: 0;
+      margin: 0;
+      list-style-type: none;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid rgb(var(--zn-border-color));
+
+      li {
+        line-height: 39px;
+        flex-basis: 50%;
+        text-align: center;
+        position: relative;
+        cursor: pointer;
+
+        &::before {
+          content: '';
+          left: 50%;
+          right: 50%;
+          bottom: -1px;
+          position: absolute;
+          background-color: rgb(var(--zn-accent));
+          transition: all 300ms ease-in-out;
+          height: var(--zn-spacing-2x-small);
+        }
+
+        &:hover:before {
+          left: 20%;
+          right: 20%;
+        }
+
+        &.active::before {
+          left: 0;
+          right: 0;
+        }
+      }
+    }
+
+    #resizer, #primary-pane, #secondary-pane {
+      display: none;
+    }
+
+    #primary-pane, #secondary-pane {
+      max-width: 100% !important;
+      width: 100%;
+    }
+  }
+
+  #primary-pane, #secondary-pane {
+    min-width: var(--min-panel-size, 15%);
+  }
+
+  #primary-pane {
+    max-width: var(--max-panel-size, var(--initial-size, 50%));
+  }
+
+  #secondary-pane {
+    max-width: calc(100% - var(--initial-size, 0));
+    width: 100%;
+  }
+
+  #resizer {
+    min-width: 1px;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    &:after {
+      inset: 0 -10px;
+      width: 20px;
+    }
+
+
+    &:before {
+      height: 100%;
+      width: 1px;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+:host([focus-pane="0"]) {
+  #primary-pane {
+    display: block;
+  }
+}
+
+:host([focus-pane="1"]) {
+  #secondary-pane {
+    display: block;
+  }
+}
+
+:host([vertical]) {
+  flex-direction: column;
+
+
+  #split-nav {
+    display: none;
+  }
+
+  #primary-pane, #secondary-pane {
+    min-height: var(--min-panel-size, 15%);
+  }
+
+  #primary-pane {
+    max-height: var(--initial-size, 50%);
+  }
+
+  #secondary-pane {
+    height: 100%;
+    max-height: calc(100% - var(--initial-size, 0));
+  }
+
+  #resizer {
+
+    min-height: 1px;
+    padding-left: 0;
+    padding-right: 0;
+    cursor: row-resize;
+
+    &:after {
+      inset: -10px 0;
+      height: 20px;
+    }
+
+    &:before {
+      width: 100%;
+      height: 1px;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+:host(.resizing) {
+  cursor: col-resize;
+  user-select: none;
+
+  #primary-pane {
+    min-width: 1%;
+  }
+
+  #primary-pane, #secondary-pane {
+    pointer-events: none;
+  }
+}
+
+$padding: 8px;
+@include wc.container-query(null, md) {
+  :host([padded]) {
+    padding-left: $padding;
+    overflow: hidden;
+
+    #primary-pane {
+      border-left: 1px solid rgb(var(--zn-border-color));
+    }
+
+    #split-nav {
+      left: $padding;
+      border-radius: 10px 0 0 0;
+      border-left: 1px solid rgb(var(--zn-border-color));
+      border-top: 1px solid rgb(var(--zn-border-color));
+    }
+  }
+}
+
+// Only wrap on md and above screens
+@include wc.container-query(md) {
+  :host([padded]) {
+    #primary-pane {
+      padding: 0 $padding;
+
+      ::slotted(*) {
+        border-radius: 10px 10px 0 0;
+        border: 1px solid rgb(var(--zn-border-color)) !important;
+        border-bottom-width: 0 !important;
+      }
+    }
+
+    #resizer {
+      margin-right: $padding;
+    }
+
+    #secondary-pane {
+      overflow: hidden;
+      border-radius: 10px 0 0 0;
+      background-color: #fbfbfb;
+      border: 1px solid rgb(var(--zn-border-color)) !important;
+      border-bottom-width: 0 !important;
+    }
+  }
+
+  :host([padded-right]) {
+    #primary-pane {
+      padding-right: $padding;
+
+      ::slotted(*) {
+        border-radius: 0 10px 0 0;
+        border: 1px solid rgb(var(--zn-border-color)) !important;
+        border-bottom-width: 0 !important;
+      }
+    }
+
+    #resizer::before {
+      background-color: transparent !important;
+    }
+  }
+}
+
+:host([padded]:not(.resizing)),
+:host([padded-right]:not(.resizing)) {
+  #resizer::before {
+    background-color: transparent;
+  }
+
+  #resizer:hover::before {
+    background-color: rgb(var(--zn-blue)) !important;
+  }
+}

package/src/components/split-pane/split-pane.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-split-pane>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-split-pane></zn-split-pane> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/stat/index.ts

@@ -0,0 +1,12 @@
+import ZnStat from './stat.component';
+
+export * from './stat.component';
+export default ZnStat;
+
+ZnStat.define('zn-stat');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-stat': ZnStat;
+  }
+}

package/src/components/stat/stat.component.ts

@@ -0,0 +1,117 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+import {classMap} from "lit/directives/class-map.js";
+
+import styles from './stat.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/stats-tile
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnStatsTile extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() caption = '';
+  @property() description = '';
+  @property() amount = '0';
+  @property() type = 'number';
+  @property() previous = '0';
+  @property() currency = '';
+  @property({type: Boolean, attribute: 'show-delta'}) showDelta = false;
+
+  calcPercentageDifference() {
+    const previous = parseFloat(this.previous);
+    const amount = parseFloat(this.amount);
+
+    let diff = ((amount - previous) / previous) * 100;
+    diff = Math.round(diff * 10) / 10;
+
+    return diff;
+  }
+
+  getCurrentAmount() {
+    if (this.currency == "") {
+      return this.amount;
+    }
+    // convert string to money
+    const amount = parseFloat(this.amount);
+    const currency = this.currency;
+
+    const formattedAmount = amount.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return `${currency}${formattedAmount}`;
+  }
+
+  private getDisplayAmount() {
+    if (this.currency !== '') {
+      return this.getCurrentAmount();
+    }
+    if (this.type === 'percent') {
+      return `${this.amount}%`;
+    }
+
+    if (this.type === 'time') {
+      const seconds = parseInt(this.amount);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+
+      if (hours <= 0) {
+        return [minutes % 60, seconds % 60].map(v => v.toString().padStart(2, '0')).join(':') + 's';
+      }
+
+      return [hours, minutes % 60, seconds % 60].map(v => v.toString().padStart(2, '0')).join(':') + 's';
+    }
+    return this.amount;
+  }
+
+  diffText() {
+    if (this.showDelta) {
+      const diff = this.calcPercentageDifference();
+      let diffClass = 'neutral';
+      let diffIcon = '~';
+      if (diff > 0) {
+        diffClass = 'positive';
+        diffIcon = '+';
+      }
+
+      if (diff < 0) {
+        diffClass = 'negative';
+        diffIcon = '-';
+      }
+
+      return html`<p class="diff"><span class="${diffClass}">${diffIcon}${diff}%</span> on Previous Period</p>`;
+    }
+
+    return null;
+  }
+
+  render() {
+    return html`
+      <div class="${classMap({'stat-tile': true})}">
+        <div class="container">
+          <div class="left">
+            <div>
+              <h3 class="caption">${this.caption}</h3>
+              <p class="description">${this.description}</p>
+            </div>
+            <p class="amount">${this.getDisplayAmount()}</p>
+            <p class="bottom">${this.diffText()}</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}