@kubex/zinc 0.0.2 → 1.0.0

package/src/components/tile/tile.scss

@@ -0,0 +1,144 @@
+@use "../../wc";
+
+.tile {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  &--has-image,
+  &--has-text,
+  &--has-caption,
+  &--has-description,
+  &--has-properties,
+  &--has-actions,
+  &--has-image {
+    padding: var(--zn-spacing-large);
+  }
+
+
+  &--has-href {
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--zn-color-neutral-100);
+    }
+  }
+
+  &--flush {
+    padding: 0;
+  }
+
+  &--flush-x {
+    padding-inline: 0;
+  }
+
+  &--flush-y {
+    padding-block: 0;
+  }
+}
+
+::slotted(zn-icon) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tile__left {
+  display: flex;
+  align-items: center;
+  column-gap: var(--zn-spacing-medium);
+  padding-right: var(--zn-spacing-medium);
+  width: 100%;
+  max-width: 400px;
+
+  @include wc.container-query(null, md) {
+    max-width: 320px;
+  }
+}
+
+.tile__right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 50%;
+  flex-grow: 1;
+  column-gap: var(--zn-spacing-large);
+}
+
+.tile__properties {
+  display: flex;
+  flex-direction: row;
+  column-gap: 30px;
+  overflow: auto;
+
+  @include wc.container-query(null, md) {
+    display: none;
+  }
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.tile__content {
+  flex: auto;
+  min-width: 0;
+
+  @extend %property;
+}
+
+.tile--inline .tile__content {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  .tile__description {
+    margin: 0;
+  }
+}
+
+.tile__actions {
+  display: flex;
+  column-gap: var(--zn-spacing-small);
+  margin-left: auto;
+}
+
+.tile__link {
+  width: 100%;
+}
+
+%property {
+  .tile__caption {
+    display: block;
+    font-weight: 500;
+    margin: 0;
+    font-size: 14px;
+    color: rgb(var(--zn-text-heading));
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .tile__description {
+    display: block;
+    font-weight: 400;
+    margin: var(--zn-spacing-2x-small) 0 0;
+    font-size: var(--zn-font-size-medium);
+    color: rgb(var(--zn-text-color));
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+// Tile property
+.tile__property {
+  display: flex;
+  flex-direction: column;
+  max-width: 150px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @extend %property;
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './tile-property.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/tile-property
+ * @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 ZnTileProperty extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({ attribute: 'caption', reflect: true }) caption: string;
+  @property({ attribute: 'description', reflect: true }) description: string;
+  @property({ attribute: 'icon', reflect: true }) icon: string;
+
+  render() {
+    return html`
+      <div class="${classMap({'tile__property': true})}">
+        ${this.icon ? html`
+          <zn-icon part="icon" class="tile__icon" src="${this.icon}"></zn-icon>` : ''}
+        <div class="tile__property_container">
+          <p part="caption" class="tile__caption">${this.caption}</p>
+          <slot part="description" class="tile__description">${this.description}</slot>
+        </div>
+      </div>`;
+  }
+}

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

@@ -0,0 +1,43 @@
+@use "../../wc";
+
+
+.tile__property {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 150px;
+  flex-basis: 150px;
+  max-width: 200px;
+
+  .tile__property_container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .tile__icon {
+    margin-right: 15px;
+  }
+
+  .tile__caption {
+    display: block;
+    font-weight: 500;
+    margin: 0;
+    font-size: 14px;
+    color: rgb(var(--zn-text-heading));
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .tile__description {
+    display: block;
+    font-weight: 400;
+    margin: var(--zn-spacing-2x-small) 0 0;
+    font-size: var(--zn-font-size-medium);
+    color: rgb(var(--zn-text-color));
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}

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

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

package/src/components/timer/index.ts

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

package/src/components/timer/timer.component.ts

@@ -0,0 +1,88 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './timer.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/timer
+ * @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 ZnTimer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Number})
+  private timestamp = '';
+
+  private _getLastMessage() {
+    const time = new Date(parseInt(this.timestamp) * 1000);
+    const diff = (new Date()).getTime() - time.getTime();
+    const times = this._getTimes(diff);
+
+
+    setTimeout(() => {
+      this.requestUpdate();
+    }, 1000);
+
+    return html`
+      <div class="last-message upper-limit-reached">
+        <span class="time">${times}</span>
+        <span class="last-message-indicator" part="indicator"></span>
+      </div>`;
+  }
+
+  render() {
+    return html`
+      ${this._getLastMessage()}
+    `;
+  }
+
+  private _getTimes(diff: number): string {
+    const months = Math.floor(diff / 1000 / 60 / 60 / 24 / 30);
+    const weeks = Math.floor(diff / 1000 / 60 / 60 / 24 / 7);
+    const days = Math.floor(diff / 1000 / 60 / 60 / 24);
+    const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
+    const minutes = Math.floor(diff / 1000 / 60) % 60;
+    const seconds = Math.floor(diff / 1000) % 60;
+
+    if (months > 0) {
+      return `${months} Month` + (months > 1 ? 's' : '');
+    }
+
+    if (weeks > 0) {
+      return `${weeks} Week` + (weeks > 1 ? 's' : '');
+    }
+
+    if (days > 0) {
+      return `${days} Day` + (days > 1 ? 's' : '');
+    }
+
+    if (hours > 0) {
+      if (minutes > 0) {
+        return `${hours}hr ${minutes}m`;
+      }
+      return `${hours} Hour` + (hours > 1 ? 's' : '');
+    }
+
+    if (minutes > 0) {
+      if (seconds > 0) {
+        return `${minutes}m ${seconds}s`;
+      }
+      return `${minutes} Minute` + (minutes > 1 ? 's' : '');
+    }
+    return `${seconds} Second` + (seconds > 1 ? 's' : '');
+  }
+}

package/src/components/timer/timer.scss

@@ -0,0 +1,40 @@
+@use "../../wc";
+
+zn-timer, :host {
+  --timer-color: var(--zn-color-success);
+  pointer-events: none;
+  white-space: nowrap;
+  display: inline-block;
+
+  .last-message {
+    color: rgb(var(--timer-color));
+
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    .time {
+      font-size: 12px;
+      line-height: 15px;
+      flex-grow: 1;
+    }
+
+    &-indicator {
+      display: inline-block;
+      background-color: rgb(var(--timer-color));
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+  }
+}
+
+:host([flip]) {
+  .last-message {
+    flex-direction: row-reverse;
+  }
+}
+
+:host([type="error"]) {
+  --timer-color: var(--zn-color-error);
+}

package/src/components/timer/timer.test.ts

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

package/src/components/toggle/index.ts

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

package/src/components/toggle/toggle.component.ts

@@ -0,0 +1,203 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {defaultValue} from "../../internal/default-value";
+import {FormControlController} from "../../internal/form";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {live} from "lit/directives/live.js";
+import {property, query, state} from 'lit/decorators.js';
+import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+
+import styles from './toggle.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/toggle
+ * @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 ZnToggle extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly formControlController = new FormControlController(this, {
+    value: (control: ZnToggle) => (control.checked ? control.value || 'on' : undefined),
+    defaultValue: (control: ZnToggle) => control.defaultChecked,
+    setValue: (control: ZnToggle, checked: boolean) => (control.checked = checked)
+  });
+
+  @query('input[type="checkbox"]') input: HTMLInputElement;
+
+  @state() hasFocus: boolean = false;
+
+  @property() title: string = "";
+
+  @property() name: string = "";
+
+  @property() value: string;
+
+  @property({attribute: 'fallback'}) fallbackValue: string = '';
+
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  @property({type: Boolean, reflect: true}) disabled: boolean = false;
+
+  @property({type: Boolean, reflect: true}) checked: boolean = false;
+
+  @defaultValue('checked') defaultChecked = false;
+
+  @property({reflect: true}) form = '';
+
+  @property({type: Boolean, reflect: true}) required = false;
+
+  @property({attribute: 'help-text'}) helpText = "";
+
+  @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
+
+  @property({attribute: "on-text"}) onText: string = '';
+
+  @property({attribute: "off-text"}) offText: string = '';
+
+  @property() label: string = '';
+
+  get validity() {
+    return this.input?.validity;
+  }
+
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+
+  firstUpdated(_changedProperties: PropertyValues) {
+    this.formControlController.updateValidity();
+    super.firstUpdated(_changedProperties);
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+  }
+
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  private handleInput() {
+    this.value = this.input.value;
+    this.formControlController.updateValidity();
+    this.emit('zn-input');
+  }
+
+  private handleClick() {
+    this.checked = !this.checked;
+    if (this.triggerSubmit) {
+      this.formControlController.submit();
+    }
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.checked = false;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.checked = true;
+    }
+  }
+
+  // Public API methods
+
+  click() {
+    this.input.click();
+  }
+
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  blur() {
+    this.input.blur();
+  }
+
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  // End Public API methods
+
+  render() {
+    let fallback = html``;
+    if (this.fallbackValue !== '') {
+      fallback = html`
+        <input type="hidden"
+               name=${this.name}
+               value=${this.fallbackValue}
+        />`;
+    }
+
+    return html`
+      <div class="${classMap({
+        'switch__wrapper': true,
+        'switch__wrapper--disabled': this.disabled,
+        'switch__wrapper--has-focus': this.hasFocus,
+        'switch__wrapper--small': this.size === 'small',
+        'switch__wrapper--medium': this.size === 'medium',
+        'switch__wrapper--large': this.size === 'large',
+      })}">
+        <label>
+          ${this.label ? html`<p class="switch-label">${this.label}</p>` : ''}
+          <div class="switch__input-wrapper" part="base">
+            ${fallback}
+            <input
+              class="switch__input"
+              type="checkbox"
+              title=${this.title}
+              name=${this.name}
+              value=${ifDefined(this.value)}
+              .checked=${live(this.checked)}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              role="switch"
+              aria-checked=${this.checked ? 'true' : 'false'}
+              aria-describedby="help-text"
+              @click=${this.handleClick}
+              @input=${this.handleInput}
+              @invalid=${this.handleInvalid}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+              @keydown=${this.handleKeyDown}
+            />
+            <span part="control" class="switch__control"></span>
+          </div>
+        </label>
+      </div>`;
+  }
+}