@kubex/zinc 0.0.2 → 1.0.0

package/src/components/toggle/toggle.scss

@@ -0,0 +1,93 @@
+@use "../../wc";
+
+:host {
+  --zn-toggle-margin: 8px 0;
+}
+
+.switch__wrapper {
+  display: inline-flex;
+}
+
+.switch__input-wrapper {
+  text-align: left;
+  position: relative;
+  display: inline-flex;
+  width: 50px;
+  height: 25px;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: 20px;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.15);
+  border-width: 1px !important;
+  margin: var(--zn-toggle-margin);
+  transition: color .2s ease-in-out, background-color .4s ease-in-out, border-color .2s ease-in-out;
+}
+
+:host(:focus) .switch__input-wrapper {
+  outline: rgb(var(--zn-primary)) solid 1px;
+}
+
+:host([checked]) .switch__input-wrapper {
+  background: rgba(var(--zn-primary), 0.8);
+
+  .switch__control {
+    transform: translateX(calc(100% - 1px)) scale(0.8);
+    background: rgba(255, 255, 255, 1);
+    width: 25px;
+  }
+}
+
+.switch {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.switch-label {
+  font-size: 90%;
+}
+
+.switch__control {
+  pointer-events: none;
+  display: inline-block;
+  width: 100%;
+  height: 25px;
+  border-radius: 100px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(59, 130, 246, 0.5) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
+
+  position: relative;
+  top: 0;
+  transform: scale(0.8);
+  transition: transform .3s ease-in-out, background-color .4s ease-in-out, opacity .2s ease-in-out, max-width .2s, width .4s;
+  outline: none;
+  max-width: 25px;
+}
+
+.switch__input {
+  position: absolute;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+// sizes
+.switch__wrapper--small .switch__input-wrapper {
+  height: 20px;
+  width: 35px;
+}
+
+:host([checked])  .switch__wrapper--small .switch__input-wrapper {
+  .switch__control {
+    transform: translateX(calc(100% - 7px)) scale(0.8);
+  }
+}
+
+.switch__wrapper--small .switch__control {
+  max-width: 20px;
+  height: 20px;
+}

package/src/components/toggle/toggle.test.ts

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

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/tooltip.component.ts

@@ -0,0 +1,215 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property, query} from 'lit/decorators.js';
+import {waitForEvent} from "../../internal/event";
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+import type Popup from "../popup";
+
+import styles from './tooltip.scss';
+
+/**
+ * @summary The Tooltip component is used to display additional information when a user hovers over or clicks
+ * on an element.
+ *
+ * @documentation https://zinc.style/components/tooltip
+ * @status experimental
+ * @since 1.0
+ *
+ * @event zn-show - Emitted when the tooltip is shown.
+ * @event zn-after-show - Emitted after the tooltip is shown.
+ * @event zn-hide - Emitted when the tooltip is hidden.
+ * @event zn-after-hide - Emitted after the tooltip is hidden.
+ *
+ * @slot - The content of the tooltip
+ * @slot anchor - The anchor the tooltip is attached to.
+ */
+export default class ZnTooltip extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private hoverTimeout: number;
+  private closeWatcher: CloseWatcher | null;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.tooltip__body') body: HTMLElement;
+  @query('zn-popup') popup: Popup;
+
+  @property() content = '';
+
+  @property() placement: | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |
+    'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' = 'top';
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @property({type: Number}) distance = 4;
+
+  @property({type: Boolean, reflect: true}) open = false;
+
+  @property({type: Number}) skidding = 0;
+
+  @property() trigger = 'hover focus';
+
+  @property({type: Boolean}) hoist = true;
+
+  constructor() {
+    super();
+    this.addEventListener('blur', this.handleBlur, true);
+    this.addEventListener('focus', this.handleFocus, true);
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('mouseover', this.handleMouseOver);
+    this.addEventListener('mouseout', this.handleMouseOut);
+  }
+
+  disconnectedCallback() {
+    this.closeWatcher?.destroy();
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    this.body.hidden = !this.open;
+
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+
+    super.firstUpdated(_changedProperties);
+  }
+
+  private hasTrigger(triggerType: string) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+
+  private handleBlur = () => {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  };
+
+  private handleClick = () => {
+    if (this.hasTrigger('click')) {
+      if (this.open) {
+        this.hide()
+      }
+      this.show();
+    }
+  };
+
+  private handleFocus = () => {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  };
+
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+    }
+  };
+
+  private handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.show(), 0);
+    }
+  }
+
+  private handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), 0);
+    }
+  }
+
+  @watch('open', {waitUntilFirstUpdate: true})
+  handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+
+      this.emit('zn-show');
+      if ('CloseWatcher' in window) {
+        this.closeWatcher?.destroy();
+        this.closeWatcher = new CloseWatcher();
+        this.closeWatcher.onclose = () => {
+          this.hide();
+        };
+      } else {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+      }
+      this.body.hidden = false;
+      this.popup.active = true;
+      this.popup.reposition();
+      this.emit('zn-after-show');
+    } else {
+      this.emit('zn-hide');
+      this.popup.active = false;
+      this.body.hidden = true;
+      this.emit('zn-after-hide');
+    }
+  }
+
+  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+
+
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'zn-after-show');
+  }
+
+  hide() {
+    if (!this.open) {
+      return;
+    }
+
+    this.open = false;
+    waitForEvent(this, 'zn-after-hide');
+  }
+
+  render() {
+    return html`
+      <zn-popup
+        part="base"
+        exportparts="popup:base__popup,arrow:base__arrow"
+        class=${classMap({
+          tooltip: true,
+          'tooltip--open': this.open
+        })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        arrow
+        hover-bridge>
+        <slot slot="anchor"></slot>
+        <div part="body" id="tooltip" class="tooltip__body"
+             role="tooltip"
+             aria-live=${this.open ? 'polite' : 'off'}
+             aria-label="tooltip">
+          <slot name="content">${this.content}</slot>
+        </div>
+      </zn-popup>`;
+  }
+}

package/src/components/tooltip/tooltip.scss

@@ -0,0 +1,43 @@
+@use "../../wc";
+
+
+:host {
+  display: contents;
+}
+
+.tooltip {
+  --arrow-size: 6px;
+}
+
+.tooltip[placement^='top']::part(popup) {
+  transform-origin: bottom;
+}
+
+.tooltip[placement^='bottom']::part(popup) {
+  transform-origin: top;
+}
+
+.tooltip[placement^='left']::part(popup) {
+  transform-origin: right;
+}
+
+.tooltip[placement^='right']::part(popup) {
+  transform-origin: left;
+}
+
+.tooltip__body {
+  display: block;
+  width: max-content;
+  max-width: max-content;
+  border-radius: 5px;
+  background-color: var(--arrow-color);
+  font-size: 12px;
+  text-align: start;
+  white-space: normal;
+  color: white;
+  padding: 5px;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+

package/src/components/tooltip/tooltip.test.ts

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

package/src/components/vertical-stepper/index.ts

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

package/src/components/vertical-stepper/vertical-stepper.component.ts

@@ -0,0 +1,53 @@
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './vertical-stepper.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/vertical-stepper
+ * @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 ZnVerticalStepper extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({ type: Boolean, reflect: true }) last = false;
+  @property({ type: Boolean, reflect: true }) first = false;
+  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ reflect: true }) description: string;
+  @property({ reflect: true }) caption: string;
+
+  render() {
+    return html`
+      <div class="vs">
+        <div class="vs__left">
+          <div class="vs__icon">
+            <slot name="icon"></slot>
+          </div>
+          <div class="vs__line"></div>
+        </div>
+        <div class="vs__right">
+          <div class="vs__caption">
+            ${this.caption}
+          </div>
+          <div class="vs__description">
+            ${this.description}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/vertical-stepper/vertical-stepper.scss

@@ -0,0 +1,84 @@
+@use "../../wc";
+
+.vs {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+
+  &__left {
+    flex-shrink: 1;
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 var(--zn-spacing-small);
+  }
+
+  &__icon {
+    width: var(--zn-spacing-large);
+    height: var(--zn-spacing-large);
+    background-color: rgb(var(--zn-input-bg));
+    border-width: 1px;
+    border-radius: 100%;
+  }
+
+  &__line {
+    min-height: 50px;
+    width: 4px;
+    border-width: 1px;
+    border-top: none;
+    border-bottom: none;
+    background-color: rgba(var(--zn-input-bg));
+    flex-grow: 1;
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-x-small);
+    flex-grow: 1;
+    margin-bottom: 50px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  &__caption {
+    font-size: 14px;
+    color: rgb(var(--zn-text-heading));
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+
+  &__description {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    color: rgb(var(--zn-text));
+  }
+}
+
+:host([last]) {
+  .vs__line {
+    display: none;
+  }
+}
+
+:host([first]) {
+  .vs {
+    margin-top: 40px;
+  }
+}
+
+:host([active]) {
+  .vs__icon {
+    background-color: rgb(var(--zn-primary));
+  }
+
+  .vs__line {
+    background-color: rgb(var(--zn-primary));
+  }
+}

package/src/components/vertical-stepper/vertical-stepper.test.ts

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

package/src/components/well/index.ts

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

package/src/components/well/well.component.ts

@@ -0,0 +1,43 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+
+import styles from './well.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/well
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ */
+export default class ZnWell extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() icon: string = '';
+  @property({attribute: 'inline', type: Boolean, reflect: true}) inline: boolean;
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
+
+  render() {
+    return html`
+      <div class="${classMap({
+        'well': true,
+        'well--inline': this.inline,
+      })}">
+        ${this.icon ? html`
+          <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
+        ${this.hasSlotController.test('[default]') ? html`
+          <div>
+            <slot></slot>
+          </div>` : ''}
+        ${this.hasSlotController.test('action') ? html`
+          <slot name="action" class="well__action"></slot>` : ''}
+      </div>
+    `;
+  }
+}

package/src/components/well/well.scss

@@ -0,0 +1,19 @@
+@use "../../wc";
+
+.well {
+  display: flex;
+
+  border-radius: 5px;
+  background: rgba(var(--zn-border-color), 0.7);
+  border: 1px solid rgb(var(--zn-border-color));
+
+  padding: var(--zn-spacing-small, 0);
+
+  zn-icon {
+    margin-right: var(--zn-spacing-small);
+  }
+}
+
+.well--inline {
+  display: inline-flex;
+}

package/src/components/well/well.test.ts

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

package/src/declaration.d.ts

@@ -0,0 +1,39 @@
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}
+
+declare namespace Chai {
+  interface Assertion {
+    // chai-a11y-axe returns a promise-like object and should be awaited but the types are incorrect
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    accessible: (options?: Object) => PromiseLike<Assertion>;
+  }
+}
+
+interface HTMLInputElement {
+  showPicker: () => void;
+}
+
+/* eslint-disable */
+interface CloseWatcher extends EventTarget {
+  new(options?: CloseWatcherOptions): CloseWatcher;
+  requestClose(): void;
+  close(): void;
+  destroy(): void;
+
+  oncancel: (event: Event) => void | null;
+  onclose: (event: Event) => void | null;
+}
+
+declare const CloseWatcher: CloseWatcher;
+
+interface CloseWatcherOptions {
+  signal: AbortSignal;
+}
+
+declare interface Window {
+  CloseWatcher?: CloseWatcher;
+}
+
+/* eslint-enable */

package/src/events/events.ts

@@ -0,0 +1,7 @@
+export type { ZnAfterHideEvent } from './zn-after-hide';
+export type { ZnAfterShowEvent } from './zn-after-show';
+export type { ZnHideEvent } from './zn-hide';
+export type { ZnBlurEvent } from './zn-blur';
+export type { ZnFocusEvent } from './zn-focus';
+export type { ZnInputEvent } from './zn-input';
+export type { ZnShowEvent } from './zn-show';

package/src/events/zn-after-collapse.ts

@@ -0,0 +1,7 @@
+export type ZnAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-after-expand': ZnAfterExpandEvent;
+  }
+}