@kubex/zinc 0.0.2 → 1.0.0

package/src/components/editor/modules/time-tracking-module.ts

@@ -0,0 +1,35 @@
+import Quill from 'quill';
+
+type TimeTrackingModuleOptions = {
+  startTimeInput?: HTMLInputElement;
+  openTimeInput?: HTMLInputElement;
+}
+
+export default class TimeTrackingModule {
+  private _quill: Quill;
+  private _options: TimeTrackingModuleOptions;
+  private _startTime: number;
+  private _openTime: number;
+
+  constructor(quill: Quill, options: TimeTrackingModuleOptions) {
+    this._quill = quill;
+    this._options = options;
+
+    this._quill.on('editor-change', this._updateStartTime.bind(this));
+    this._updateOpenTime();
+  }
+
+  private _updateOpenTime() {
+    if (this._options.openTimeInput && !this._openTime) {
+      this._openTime = Math.floor(new Date().getTime() / 1000);
+      this._options.openTimeInput.value = this._openTime.toString();
+    }
+  }
+
+  private _updateStartTime() {
+    if (this._options.startTimeInput && !this._startTime) {
+      this._startTime = Math.floor(new Date().getTime() / 1000);
+      this._options.startTimeInput.value = this._startTime.toString();
+    }
+  }
+}

package/src/components/empty-state/empty-state.component.ts

@@ -0,0 +1,63 @@
+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 './empty-state.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/empty-state
+ * @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 ZnEmptyState extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: String}) icon: string = '';
+
+  @property({type: String}) caption: string = '';
+
+  @property({type: String}) description: string = '';
+
+  @property({type: String}) type: 'error' | 'info' | 'primary' | '' = '';
+
+  @property({type: Boolean}) padded: boolean = false;
+
+  render() {
+    return html`
+      <div class="${classMap({
+        'empty-state': true,
+        'empty-state--error': this.type === 'error',
+        'empty-state--info': this.type === 'info',
+        'empty-state--primary': this.type === 'primary',
+        'empty-state--padded': this.padded
+      })}">
+        <div class="empty-state__wrapper">
+          ${this.icon
+            ? html`<zn-icon src="${this.icon}" size="48" color="${this.type ? this.type : 'primary'}"></zn-icon>`
+            : ''}
+          ${this.caption
+            ? html`
+              <div class="caption">${this.caption}</div>`
+            : ''}
+          ${this.description
+            ? html`
+              <div class="description">${this.description}</div>`
+            : ''}
+          <slot></slot>
+        </div>
+      </div>`
+  }
+}

package/src/components/empty-state/empty-state.scss

@@ -0,0 +1,91 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  container-type: inline-size;
+  width: 100%;
+}
+
+.empty-state {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zn-spacing-x-small);
+
+  ::slotted(*) {
+    display: flex;
+    margin-top: var(--zn-spacing-small);
+  }
+
+  .caption {
+    font-weight: 500;
+    color: rgb(var(--zn-text-heading));
+    text-align: center;
+  }
+
+  .description {
+    text-align: center;
+  }
+
+  &__wrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--zn-spacing-x-small);
+    padding: var(--zn-spacing-large);
+    flex-grow: 1;
+  }
+
+  // Colors
+
+  &--error {
+    background-color: rgba(var(--zn-color-error), .05);
+    min-height: 100px;
+
+    .empty-state__wrapper {
+      border: dashed 1px rgb(var(--zn-color-error)) !important;
+    }
+
+    ::slotted(*), .caption, .description {
+      color: rgb(var(--zn-color-error));
+    }
+  }
+
+  &--info {
+    background-color: rgba(var(--zn-color-info), .05);
+    min-height: 100px;
+
+    .empty-state__wrapper {
+      border: dashed 1px rgb(var(--zn-color-info)) !important;
+    }
+
+    ::slotted(*), .caption, .description {
+      color: rgb(var(--zn-color-info));
+    }
+  }
+
+  &--primary {
+    background-color: rgba(var(--zn-primary), .05);
+    min-height: 100px;
+
+    .empty-state__wrapper {
+      border: dashed 1px rgb(var(--zn-primary)) !important;
+    }
+
+    ::slotted(*), .caption, .description {
+      color: rgb(var(--zn-primary));
+    }
+  }
+
+  // End colors
+
+  &--padded {
+    padding: var(--zn-spacing-medium);
+  }
+}

package/src/components/empty-state/empty-state.test.ts

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

package/src/components/empty-state/index.ts

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

package/src/components/expanding-action/expanding-action.component.ts

@@ -0,0 +1,312 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
+import {md5} from "../../utilities/md5";
+import {property} from 'lit/decorators.js';
+import {styleMap} from "lit/directives/style-map.js";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './expanding-action.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/expanding-action
+ * @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 ZnExpandingAction extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() icon: string;
+
+  @property() method: 'drop' | 'fill' = 'drop';
+
+  @property({attribute: 'context-uri', reflect: true}) contextUri: string;
+  @property({reflect: true}) count: string;
+  @property({reflect: true}) color: string;
+
+  @property({type: Boolean}) prefetch = false;
+
+  @property() basis: string = '300';
+
+  @property({attribute: 'max-height'}) maxHeight: string;
+
+  @property({reflect: true, type: Boolean}) open = false;
+
+  @property({attribute: 'master-id', reflect: true}) masterId: string;
+  @property({attribute: 'fetch-style', type: String, reflect: true}) fetchStyle = "";
+
+  @property({attribute: 'no-prefetch', type: Boolean, reflect: true}) noPrefetch = false;
+
+  private _panel: Element | null | undefined;
+  private _panels: Map<string, Element[]>;
+  private _knownUri: Map<string, string> = new Map<string, string>();
+  private _actions: HTMLElement[] = [];
+  private _preload = true;
+  private _countObserver?: MutationObserver;
+  private _colorObserver?: MutationObserver;
+
+  constructor() {
+    super();
+    this._panels = new Map<string, Element[]>();
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.masterId) {
+      this.masterId = Math.floor(Math.random() * 1000000).toString();
+    }
+
+    this._preload = !this.noPrefetch;
+
+    await this.updateComplete;
+    this._panel = this.shadowRoot?.querySelector('#content');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._countObserver?.disconnect();
+    this._colorObserver?.disconnect();
+  }
+
+  firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    setTimeout(() => {
+      this._registerActions();
+    }, 10);
+
+    // Make HEAD request for initial count
+    if (this.contextUri) {
+      setTimeout(() => {
+        this.fetchContextHeaders().then(r => r);
+      }, 10)
+    }
+  }
+
+  _observeMetaData() {
+    const appContent = deepQuerySelectorAll('app-content', this, '')[0];
+
+    this._countObserver = new MutationObserver(() => {
+      const metaCount = appContent?.shadowRoot?.querySelector('meta[name="count"]');
+      if (!metaCount) {
+        return;
+      }
+      const count = metaCount.getAttribute('content');
+      const notification = this.shadowRoot?.querySelector('.expanding-action__dropdown zn-button');
+      if (count && notification) {
+        notification.setAttribute('notification', count);
+      }
+    });
+
+    this._colorObserver = new MutationObserver(() => {
+      const metaColor = appContent?.shadowRoot?.querySelector('meta[name="color"]');
+      if (!metaColor) {
+        return;
+      }
+      const color = metaColor.getAttribute('content');
+      if (color) {
+        this.color = color;
+      }
+    });
+
+    const root = appContent.shadowRoot;
+    if (root) {
+      const options: MutationObserverInit = {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['content'],
+        childList: true,
+      };
+
+      this._countObserver.observe(root, options);
+      this._colorObserver.observe(root, options);
+    }
+  }
+
+  _registerActions() {
+    deepQuerySelectorAll('[action-uri]', this, 'zn-expanding-action').forEach(ele => {
+      if (ele.getAttribute('action-uri') === '') {
+        ele.setAttribute('action', '');
+        ele.removeAttribute('action-uri');
+      }
+      this._addAction(ele as HTMLElement);
+    });
+  }
+
+  _addAction(action: HTMLElement) {
+    if (this._actions.includes(action)) {
+      return;
+    }
+    this._actions.push(action);
+
+    if (this._preload) {
+      action.addEventListener('mouseover', this.fetchUri.bind(this, action));
+    }
+
+    action.addEventListener('click', this._handleClick.bind(this));
+  }
+
+  _uriToId(actionUri: string): string {
+    return "action-" + md5(actionUri).substr(0, 8) + "-" + this.masterId;
+  }
+
+  _handleClick(event: PointerEvent) {
+    // ts-ignore
+    const target = (event.relatedTarget ?? event.target) as HTMLElement;
+    if (target) {
+      this.clickAction(target);
+    }
+  }
+
+  _createUriPanel(actionEle: Element, actionUri: string, actionId: string): HTMLDivElement {
+    if (!actionEle.hasAttribute('action')) {
+      actionEle.setAttribute('action', actionId);
+    }
+
+    if (!this._knownUri.has(actionUri)) {
+      this._knownUri.set(actionUri, actionId);
+    }
+
+    if (this._panels.has(actionId) && this._panels.get(actionId) !== undefined) {
+      return this._panels.get(actionId)![0] as HTMLDivElement;
+    }
+
+    const actionNode = document.createElement('div');
+    actionNode.setAttribute("id", actionId);
+    if (this.fetchStyle !== "") {
+      actionNode.setAttribute("data-fetch-style", this.fetchStyle);
+    }
+    actionNode.setAttribute('data-self-uri', actionUri);
+    actionNode.setAttribute('data-fetch-style', "expanding-action");
+    actionNode.textContent = "Loading ...";
+    if (this._panel instanceof HTMLElement) {
+      // Append the action if the panel has not yet been constructed
+      this._panel.appendChild(actionNode);
+      this._panels.set(actionId, [actionNode]);
+    }
+    document.dispatchEvent(new CustomEvent('zn-new-element', {
+      detail: {element: actionNode, source: actionEle}
+    }));
+    return actionNode;
+  }
+
+  fetchUri(target: HTMLElement) {
+    if (!target.hasAttribute('action') && target.hasAttribute('action-uri')) {
+      const actionUri: string | null = target.getAttribute("action-uri") ?? "";
+      this._createUriPanel(target, actionUri, this._uriToId(actionUri));
+
+      // Observer must wait until the panel is created
+      this._observeMetaData();
+    }
+  }
+
+  async fetchContextHeaders() {
+    try {
+      const response = await fetch(this.contextUri, {
+        credentials: 'same-origin',
+        method: 'head',
+        headers: {
+          'x-requested-with': 'XMLHttpRequest',
+        }
+      });
+      const count = response.headers.get('x-kubex-count');
+      if (count) {
+        this.count = count;
+      }
+      const color = response.headers.get('x-kubex-color');
+      if (color) {
+        this.color = color;
+      }
+    } catch {
+      console.log('Unable to fetch context headers');
+    }
+  }
+
+  clickAction(target: HTMLElement) {
+    this.fetchUri(target);
+  }
+
+  handleIconClicked = () => {
+    this.open = !this.open;
+  }
+
+  handleIconCloseClicked = () => {
+    this.open = false;
+  }
+
+  render() {
+    return html`
+      ${this.method === 'fill' ? html`
+        <zn-button color="transparent"
+                   size="x-small"
+                   class="expanding-action__button"
+                   @click="${this.handleIconClicked}"
+                   icon="${this.icon}"
+                   icon-color="${this.color}"
+                   icon-size="20">
+        </zn-button>` : nothing}
+      <div
+        class="${classMap({
+          "expanding-action": true,
+          'expanding-action--open': this.open,
+          'expanding-action--closed': !this.open,
+          'expanding-action--drop': this.method === 'drop',
+          'expanding-action--fill': this.method === 'fill',
+        })}"
+        style=${styleMap({
+          '--expanding-action-basis': this.method === "drop" && this.basis ? this.basis.replace('px', '') + 'px' : 'none',
+          '--expanding-action-max-height': this.method === "drop" && this.maxHeight ? this.maxHeight.replace('px', '') + 'px' : null,
+        })}>
+        ${this.method === 'drop' ? this.renderDropdown() : this.renderFill()}
+      </div>`;
+  }
+
+  protected renderDropdown() {
+    return html`
+      <zn-dropdown class="expanding-action__dropdown"
+                   placement="bottom-end">
+        <zn-button slot="trigger"
+                   class="expanding-action__button"
+                   color="transparent"
+                   size="x-small"
+                   icon="${this.icon}"
+                   icon-color="${this.color}"
+                   icon-size="20"
+                   notification="${this.count || nothing}"
+                   @click="${this.handleIconClicked}">
+        </zn-button>
+        <div id="content" class="expanding-action__content">
+          <slot></slot>
+        </div>
+      </zn-dropdown>`
+  }
+
+  protected renderFill() {
+    return html`
+      <zn-icon src="${this.icon}" size="20"></zn-icon>
+      <div id="content" class="expanding-action__content">
+        <slot></slot>
+      </div>
+      <zn-button slot="trigger"
+                 class="expanding-action__button expanding-action__close-icon"
+                 color="transparent"
+                 size="x-small"
+                 @click="${this.handleIconCloseClicked}"
+                 icon="close"
+                 icon-size="20">
+      </zn-button>`
+  }
+}

package/src/components/expanding-action/expanding-action.scss

@@ -0,0 +1,87 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  padding-bottom: var(--zn-spacing-2x-small);
+}
+
+.expanding-action--fill {
+  padding-inline: var(--zn-spacing-medium);
+  padding-bottom: var(--zn-spacing-2x-small);
+  position: absolute;
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  background-color: rgb(var(--zn-panel));
+  width: 0;
+  transition: width var(--zn-transition-slow) cubic-bezier(0.62, 0.16, 0.13, 1.01), opacity var(--zn-transition-slow) cubic-bezier(0.62, 0.16, 0.13, 1.01), display var(--zn-transition-slow) ease-in-out allow-discrete;
+
+  &.expanding-action--open {
+    @starting-style {
+      width: 0;
+    }
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    height: 100%;
+    width: min(100%, 800px);
+    overflow: hidden;
+    z-index: 100;
+    max-width: 800px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: calc(var(--zn-spacing-medium) * -1);
+      right: calc(var(--zn-spacing-medium) * -1);
+      bottom: 6px; // Magic number to add space for tabs
+      background-color: rgb(var(--zn-primary));
+      height: 2px;
+    }
+
+    & > zn-icon {
+      display: block;
+      color: rgb(var(--zn-primary));
+    }
+  }
+
+  &.expanding-action--closed {
+    display: none;
+    opacity: 0;
+  }
+
+  .expanding-action__content {
+    @starting-style {
+      opacity: 0;
+    }
+
+    opacity: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0;
+  }
+}
+
+zn-button.expanding-action__button::part(base) {
+  padding: 7px 5px;
+}
+
+.expanding-action--drop .expanding-action__content {
+  min-width: 300px;
+  width: var(--expanding-action-basis, var(--zn-container-smp, 320px));
+  max-width: 80vw;
+  max-height: min(60vh, var(--expanding-action-max-height, var(--auto-size-available-height, 50vh)));
+  box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
+  background-color: rgb(var(--zn-panel));
+  border: solid 1px rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-large);
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+}

package/src/components/expanding-action/expanding-action.test.ts

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

package/src/components/expanding-action/index.ts

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