@kubex/zinc 0.0.2 → 1.0.0

package/src/components/popup/popup.scss

@@ -0,0 +1,59 @@
+@use "../../wc";
+
+:host {
+  --arrow-color: rgb(0, 0, 0, 0.9);
+  --arrow-size: 6px;
+  --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+  --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+
+  display: contents;
+}
+
+.popup {
+  position: absolute;
+  isolation: isolate;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
+  max-width: var(--auto-size-available-width, none);
+  // max-height: var(--auto-size-available-height, none);
+
+  &--fixed {
+    position: fixed;
+  }
+
+  &:not(&--active) {
+    display: none;
+  }
+
+  &__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+
+  /* Hover bridge */
+  &-hover-bridge:not(&-hover-bridge--visible) {
+    display: none;
+  }
+
+  &-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--zn-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+        var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+        var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+        var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
+        var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
+}

package/src/components/popup/popup.test.ts

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

package/src/components/progress-bar/index.ts

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

package/src/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,80 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './progress-bar.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/progress-bar
+ * @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 ZnProgressBar extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: String, reflect: true}) caption: string | undefined;
+  @property({type: String, reflect: true}) description: string | undefined;
+  @property({type: Number, reflect: true}) value: number | undefined;
+  @property({type: Boolean, reflect: true, attribute: 'show-progress'})
+  showProgress: boolean | undefined;
+
+  render() {
+    return html`
+      ${this.caption || this.showProgress
+        ? html`
+          <div class="header">
+            <p class="caption">${this.caption}</p>
+            ${this.showProgress
+              ? html`
+                <p class="progress">${this.value}%</p> `
+              : ''}
+          </div>
+        `
+        : ''}
+      <svg width="100%" height="8">
+        <defs>
+          <clipPath id="clip-path">
+            <rect width="100%" height="8px" rx="4px"/>
+          </clipPath>
+        </defs>
+        <rect
+          fill="rgba(var(--zn-border-color))"
+          width="100%"
+          height="100%"
+          rx="4px"
+        />
+        <rect
+          fill='rgb(var(--zn-primary))'
+          width="${this.value}%"
+          height="100%"
+          clip-path="url(#clip-path)"
+          rx="4px"
+        />
+      </svg>
+      ${this.description
+        ? html`
+          <div class="footer">
+            ${this.description
+              ? html`
+                <p class="info">
+                  ${this.description}
+                </p>`
+              : ''}
+          </div>
+        `
+        : ''}
+    `;
+  }
+}

package/src/components/progress-bar/progress-bar.scss

@@ -0,0 +1,46 @@
+@use "../../wc";
+
+
+:host {
+  width: calc(100% - 4px);
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+.header {
+  font-weight: 500;
+  color: rgb(var(--zn-text-heading));
+}
+
+.header,
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.progress {
+  color: rgb(var(--zn-text));
+}
+
+.label,
+.info {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.info {
+  font-size: 90%;
+}
+
+.header {
+  margin-bottom: var(--zn-spacing-x-small);
+}
+
+.footer {
+  margin-top: var(--zn-spacing-x-small);
+}
+

package/src/components/progress-bar/progress-bar.test.ts

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

package/src/components/progress-tile/index.ts

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

package/src/components/progress-tile/progress-tile.component.ts

@@ -0,0 +1,127 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './progress-tile.scss';
+import {classMap} from "lit/directives/class-map.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/progress-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 ZnProgressTile extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+
+  @property({type: Number, attribute: 'start-time'}) startTime: number;
+  @property({type: Number, attribute: 'wait-time', reflect: true}) waitTime: number;
+  @property({type: Number, attribute: 'max-time'}) maxTime: number;
+  @property({type: Number, attribute: 'end-time'}) endTime: number;
+
+  @property({type: Number, attribute: 'max-wait-time'}) maxWaitTime: number = 60 * 5;
+  @property({type: Boolean, attribute: 'waiting-agent-response'}) waitingAgentResponse: boolean;
+
+  @property() status: string;
+  @property() avatar: string;
+  @property() caption: string;
+
+  private _timerInterval: any;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.status !== 'Ended') {
+      this._timerInterval = setInterval(() => this.requestUpdate(), 1000);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this._timerInterval);
+  }
+
+  private getHumanReadableTime(time: number): string {
+    time = Math.round(time);
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = time % 60;
+
+    if (hours) {
+      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  }
+
+  protected render(): unknown {
+    const now = new Date().getTime() / 1000;
+    const duration = now - this.startTime;
+    const maxDuration = now - this.maxTime;
+
+    if (this.waitingAgentResponse) {
+      this.waitTime += 1;
+    }
+
+    let firstBarWidth = (duration / maxDuration) * 100;
+    firstBarWidth = firstBarWidth > 100 ? 100 : firstBarWidth;
+
+    let secondBarWidth = (this.waitTime / this.maxWaitTime) * 100;
+    secondBarWidth = secondBarWidth > 100 ? 100 : secondBarWidth;
+
+    const start: string = this.getHumanReadableTime(duration);
+    const wait: string = this.getHumanReadableTime(this.waitTime);
+
+    const status = this.waitingAgentResponse ? 'Waiting for Agent' : this.status;
+    const hasHours = start.match(/:/g)?.length === 2 || wait.match(/:/g)?.length === 2;
+
+    return html`
+      <div class="${classMap({
+        'progress-tile': true,
+        'progress-tile--with-hours': hasHours,
+        'progress-tile--ended': this.status === 'Ended',
+        'progress-tile--waiting-agent': this.waitingAgentResponse,
+        'progress-tile--interacting': this.status === 'Interacting',
+        'progress-tile--warn': this.waitTime > 60 && this.waitTime < (this.maxWaitTime / 2),
+        'progress-tile--danger': this.waitTime >= this.maxWaitTime
+      })}">
+        <zn-icon size="45" src="${this.avatar}"></zn-icon>
+        <div class="progress-tile__content">
+
+          <div class="progress-tile__header">
+            <div class="header__caption">
+              <p>${this.caption}</p>
+            </div>
+            <div class="header__wait-time">
+              <p>${status}</p>
+              <p>${this.endTime || wait === '00:00' ? '' : wait}</p>
+            </div>
+          </div>
+
+          <div class="progress-tile__progress-bars">
+            <div class="progress-tile__progress-bars__first"
+                 style="width: ${firstBarWidth}%;"></div>
+            <div class="progress-tile__progress-bars__second"
+                 style="width: ${secondBarWidth}%;"></div>
+          </div>
+
+        </div>
+
+        <div class="progress-tile__total-time">
+          ${this.endTime ? this.getHumanReadableTime(this.endTime - this.startTime) : start}
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,116 @@
+@use "../../wc";
+
+:ost {
+  display: contents;
+}
+
+.progress-tile {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  margin-bottom: 20px;
+
+  zn-icon {
+    display: flex;
+    flex-shrink: 0;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    overflow: hidden;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+
+    .header__caption {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--zn-spacing-x-small);
+      margin-bottom: var(--zn-spacing-2x-small);
+
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: rgb(var(--zn-text));
+      }
+    }
+
+    .header__wait-time {
+      display: flex;
+      flex-direction: row;
+      gap: 3px;
+      font-size: 12px;
+      font-weight: 400;
+      color: rgb(var(--zn-primary));
+    }
+  }
+
+  &__progress-bars {
+    flex-grow: 1;
+
+    &__first, &__second {
+      height: 4px;
+      background-color: rgba(var(--zn-border-color));
+      transition: width 0.3s;
+    }
+
+    &__second {
+      background-color: rgb(var(--zn-color-success));
+    }
+  }
+
+  &__total-time {
+    min-width: 40px;
+    text-align: end;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgb(var(--zn-text-heading));
+  }
+
+  &--with-hours {
+    .progress-tile__total-time {
+      min-width: 60px;
+    }
+  }
+
+  &--ended {
+    .progress-tile__progress-bars__first {
+      background-color: rgb(var(--zn-primary));
+    }
+
+    .progress-tile__progress-bars__second {
+      display: none;
+    }
+  }
+
+  &--warning {
+    .progress-tile__progress-bars__second {
+      background-color: rgb(var(--zn-color-warning));
+    }
+
+    .header__wait-time {
+      color: rgb(var(--zn-color-warning));
+    }
+  }
+
+  &--danger {
+    .progress-tile__progress-bars__second {
+      background-color: rgb(var(--zn-color-error));
+    }
+
+    .header__wait-time {
+      color: rgb(var(--zn-color-error));
+    }
+  }
+}

package/src/components/progress-tile/progress-tile.test.ts

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

package/src/components/query-builder/index.ts

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