@kubex/zinc 0.0.2 → 1.0.0

package/src/components/defined-label/defined-label.component.ts

@@ -0,0 +1,241 @@
+import {type CSSResultGroup, html, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
+import {FormControlController} from '../../internal/form';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {property, query} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type ZnDropdown from '../dropdown';
+import type ZnInput from '../input';
+
+import styles from './defined-label.scss';
+
+/**
+ * @summary This component provides a labeled input with support for predefined and custom labels,
+ * allowing users to select or enter label-value pairs within a dropdown interface.
+ * @documentation https://zinc.style/components/defined-label
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ * @dependency zn-dropdown
+ * @dependency zn-input
+ * @dependency zn-option
+ * @dependency zn-panel
+ * @dependency zn-select
+ * @dependency zn-sp
+ *
+ * @csspart input - The component's main input.
+ * @csspart input-value - The label's value inputs.
+ */
+export default class ZnDefinedLabel extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly formControlController = new FormControlController(this, {
+    value: (control: this) => control.value + (control.inputValue ? `:${control.inputValue}` : ''),
+  });
+
+  @query('.input__control') input: ZnInput;
+  @query('.defined-label__dropdown') dropdown: ZnDropdown;
+
+  @property() value: string = '';
+  @property() inputValue: string = '';
+  @property({attribute: 'input-size', reflect: true}) inputSize: 'x-small' | 'small' | 'medium' | 'large' = 'medium';
+  @property() name: string = 'label';
+  @property() title: string;
+  @property({type: Boolean}) disabled: boolean = false;
+  @property({attribute: 'allow-custom', type: Boolean}) allowCustom: boolean = false;
+  @property({type: Array, attribute: 'predefined-labels'}) predefinedLabels = [];
+
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+
+  get validity() {
+    return this.input?.validity;
+  }
+
+  checkValidity(): boolean {
+    return this.input.checkValidity();
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return this.input.reportValidity();
+  }
+
+  setCustomValidity(message: string): void {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  @watch('value', {waitUntilFirstUpdate: true})
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties)
+    this.formControlController.updateValidity();
+  }
+
+  private handleChange() {
+    if (!this.dropdown.open) {
+      this.dropdown.show().then(r => r);
+    }
+
+    if (this.dropdown.open && this.input.value === '') {
+      this.dropdown.hide().then(r => r);
+    }
+
+    if (typeof this.input.value === 'string') {
+      this.input.value = this.input.value.toLowerCase();
+    }
+
+    this.value = this.input.value as string;
+  }
+
+  private handleInput() {
+    this.handleChange();
+    this.formControlController.updateValidity();
+  }
+
+  private handleClick(e: MouseEvent) {
+    if (this.input.value === '' || (this.dropdown.open && this.input.value !== '')) {
+      e.stopImmediatePropagation();
+    }
+  }
+
+  private handleInputValueChange(e: Event) {
+    const target = e.target as HTMLInputElement | HTMLSelectElement;
+    this.inputValue = target.value.toLowerCase();
+
+    if (target.hasAttribute('data-label')) this.value = target.getAttribute('data-label') ?? "";
+  }
+
+  private handleInputValueInput(e: Event) {
+    const target = e.target as HTMLInputElement | HTMLSelectElement;
+    this.inputValue = target.value.toLowerCase();
+
+    if (target.hasAttribute('data-label')) this.value = target.getAttribute('data-label') ?? "";
+  }
+
+  private handleFormSubmit() {
+    const form = this.formControlController.getForm();
+
+    if (form && form.reportValidity()) {
+      document.dispatchEvent(new CustomEvent('zn-register-element', {
+        detail: {element: form}
+      }))
+      form.requestSubmit();
+    }
+  }
+
+  render() {
+    let predefinedLabels = html``;
+
+    if (this.predefinedLabels.length > 0) {
+      this.predefinedLabels.forEach((label: { [key: string]: any } | string | null) => {
+        // label = ['name' => 'label', 'options'=>['one', 'two', 'three']]
+        let options: string[] | undefined;
+        if (label && typeof label !== 'string') {
+          options = label.options as string[];
+          label = label.name as string;
+        }
+
+        if (this.value && !label?.toLowerCase().includes(this.value.toLowerCase())) {
+          return;
+        }
+
+        let selector: TemplateResult<1>;
+        if (options && options.length > 0) {
+          selector = html`
+            <zn-select
+              part="input-value"
+              id="input-value input-value-${label}"
+              class="input__control-value input__control-value--${label}"
+              data-label="${label}"
+              @zn-change="${this.handleInputValueChange}"
+              @zn-input="${this.handleInputValueInput}"
+              size="small">
+              <zn-option value="">Select ${label}</zn-option>
+              ${options.map((option: string) => html`
+                <zn-option value="${option}">${option}</zn-option>
+              `)}
+            </zn-select>`;
+        } else {
+          selector = html`
+            <zn-input
+              part="input-value"
+              id="input-value input-value-${label}"
+              class="input__control-value input__control-value--${label}"
+              type="text"
+              data-label="${label}"
+              @zn-change="${this.handleInputValueChange}"
+              @zn-input="${this.handleInputValueInput}"
+              size="small"></zn-input>`;
+        }
+
+        predefinedLabels = html`
+          <div class="defined-label__input">
+            <small>${label}</small>
+            <div class="defined-label__input-wrap">
+              ${selector}
+              <zn-button type="submit" icon="add" @click="${this.handleFormSubmit}"></zn-button>
+            </div>
+          </div>`;
+      });
+    }
+
+    return html`
+      <zn-dropdown class="defined-label__dropdown">
+        <zn-input
+          part="input"
+          id="input"
+          class="input__control"
+          type="text"
+          title="${this.title}"
+          value="${this.value}"
+          name="${ifDefined(this.name)}"
+          placeholder="Add a Label"
+          maxlength="60"
+          autocomplete="off"
+          size="${this.inputSize}"
+          @zn-change="${this.handleChange}"
+          @zn-input="${this.handleInput}"
+          @click="${this.handleClick}"
+          slot="trigger"
+        ></zn-input>
+
+        <zn-panel class="defined-label__container">
+          <zn-sp flush divide>
+            ${predefinedLabels.values.length > 0 ? predefinedLabels : html`
+              <div class="defined-label__input">
+                <small>Cannot find any predefined labels</small>
+              </div>`}
+
+            ${this.allowCustom && this.value !== '' ? html`
+              <div class="defined-label__input">
+                <small>${this.value}</small>
+                <div class="defined-label__input-wrap">
+                  <zn-input part="input-value"
+                            placeholder="Label Value"
+                            type="text"
+                            size="small"
+                            maxlength="60"
+                            @zn-change="${this.handleInputValueChange}"
+                            @zn-input="${this.handleInputValueInput}"></zn-input>
+                  <zn-button type="submit" icon="add" @click="${this.handleFormSubmit}"></zn-button>
+                </div>
+              </div>` : ''}
+
+          </zn-sp>
+        </zn-panel>
+      </zn-dropdown>
+    `;
+  }
+}

package/src/components/defined-label/defined-label.scss

@@ -0,0 +1,43 @@
+@use "../../wc";
+
+:host {
+  display: contents;
+}
+
+.defined-label {
+  .input__control, .input__control-value {
+    background-color: rgb(var(--zn-panel));
+  }
+
+  &__dropdown {
+    width: 100%;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--zn-spacing-small);
+    width: 100%;
+
+    zn-sp {
+      max-height: 275px;
+    }
+  }
+
+  &__input {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    zn-input, zn-select {
+      flex-grow: 1;
+    }
+  }
+}

package/src/components/defined-label/defined-label.test.ts

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

package/src/components/defined-label/index.ts

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

package/src/components/dialog/dialog.component.ts

@@ -0,0 +1,237 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {property, query} from 'lit/decorators.js';
+import {unlockBodyScrolling} from "../../internal/scroll";
+import ZincElement from '../../internal/zinc-element';
+import ZnButton from "../button";
+
+import styles from './dialog.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/dialog
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ *
+ * @event zn-show - Emitted when the dialog is opens.
+ * @event zn-close - Emitted when the dialog is closed.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to
+ * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
+ * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+ * destructive behavior such as data loss.
+ *
+ * @slot - The default slot.
+ * @slot label - The dialog's label. Alternatively you can use the `label` attribute.
+ * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied
+ * to the icon depending on the dialog variant.
+ * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
+ * @slot footer - The dialog's footer. This is typically used for buttons representing various options.
+ * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The dialog's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
+ * @csspart title - The dialog's title.
+ * @csspart close-button - The dialog's close button.
+ * @csspart close-button__base - The close buttons exported `base` part.
+ * @csspart body - The dialog's body.
+ * @csspart footer - The dialog's footer.
+ *
+ * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing - The amount of padding to use for the header.
+ * @cssproperty --body-spacing - The amount of padding to use for the body.
+ * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ */
+export default class ZnDialog extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton
+  };
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'footer');
+  private closeWatcher: CloseWatcher | null;
+
+  @query('.dialog') dialog: HTMLDialogElement;
+  @query('.dialog__panel') panel: HTMLElement;
+  @query('.dialog__overlay') overlay: HTMLElement;
+
+  /** The dialog's theme variant. */
+  @property({reflect: true}) variant: 'default' | 'warning' | 'announcement' = 'default';
+
+  /** The dialog's size. */
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /**
+   * Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's state.
+   */
+  @property({type: Boolean, reflect: true}) open = false;
+
+  /**
+   * The dialog's label as displayed in the header. You should always include a relevant label even when using
+   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+   */
+  @property({reflect: true}) label: string;
+
+  /**
+   * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+   * accessible way to close the dialog.
+   */
+  @property({attribute: 'no-header', type: Boolean, reflect: true}) noHeader = false;
+
+  /**
+   * The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you
+   * will need to manually open the dialog using the `show()` method.
+   */
+  @property({type: String, reflect: true}) trigger: string;
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    if (this.open) {
+      this.show();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('click', this.closeClickHandler);
+    this.shadowRoot?.addEventListener('click', this.closeClickHandler);
+
+    if (this.trigger) {
+      const trigger = this.parentNode?.querySelector('#' + this.trigger);
+      if (trigger) {
+        trigger.addEventListener('click', () => this.show());
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dialog.close();
+    unlockBodyScrolling(this)
+    this.closeWatcher?.destroy();
+    this.removeEventListener('click', this.closeClickHandler);
+
+    if (this.trigger) {
+      const trigger = this.parentElement?.querySelector('#' + this.trigger);
+      if (trigger) {
+        trigger.removeEventListener('click', () => this.show());
+      }
+    }
+  }
+
+  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
+    const znRequestClose = this.emit('zn-request-close', {
+      cancelable: true,
+      detail: {source}
+    });
+
+    if (znRequestClose.defaultPrevented) {
+      return;
+    }
+
+    this.hide();
+  }
+
+  private addOpenListeners() {
+    if ('CloseWatcher' in window) {
+      this.closeWatcher?.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => this.requestClose('keyboard');
+    }
+  }
+
+  private removeOpenListeners() {
+    this.closeWatcher?.destroy();
+  }
+
+  /** Shows the dialog. */
+  show() {
+    this.emit('zn-show');
+    this.addOpenListeners();
+    this.open = true;
+    this.dialog.showModal();
+  }
+
+  /** Hides the dialog. */
+  hide() {
+    this.emit('zn-close');
+    this.removeOpenListeners();
+    this.open = false;
+    this.dialog.close();
+  }
+
+  private closeClickHandler = (event: MouseEvent) => {
+    if (event.target instanceof HTMLElement && event.target.hasAttribute('dialog-closer')) {
+      this.hide();
+    }
+  }
+
+  render() {
+    const hasFooter = this.hasSlotController.test('footer');
+
+    return html`
+      <dialog
+        part="base"
+        role="alertdialog"
+        aria-modal="true"
+        aria-hidden=${this.open ? 'false' : 'true'}
+        aria-label=${ifDefined(this.noHeader ? this.label : undefined)}
+        aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}
+        tabindex="-1"
+        class=${classMap({
+          dialog: true,
+          'dialog--open': this.open,
+          'dialog--has-header-icon': this.hasSlotController.test('header-icon'),
+          'dialog--has-footer': hasFooter,
+          'dialog--default': this.variant === 'default',
+          'dialog--warning': this.variant === 'warning',
+          'dialog--announcement': this.variant === 'announcement',
+          'dialog--small': this.size === 'small',
+          'dialog--medium': this.size === 'medium',
+          'dialog--large': this.size === 'large'
+        })}>
+
+        ${!this.noHeader ? html`
+          <header part="header" class="dialog__header">
+            <h2 part="title" class="dialog__title" id="title">
+              <slot name="header-icon"></slot>
+              <slot name="announcement-intro"></slot>
+              <slot name="label"> ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+              </slot>
+            </h2>
+            <div part="header-actions" class="dialog__header-actions">
+              <slot name="header-actions"></slot>
+              <zn-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="dialog__close"
+                icon="close"
+                icon-size="24"
+                type="button"
+                color="transparent"
+                size="content"
+                @click="${() => this.requestClose('close-button')}"
+              ></zn-button>
+            </div>
+          </header>` : ''}
+
+        <div part="body" class="dialog__body" tabindex="-1">
+          <slot></slot>
+        </div>
+
+        <footer part="footer" class="dialog__footer">
+          <slot name="footer"></slot>
+          <slot name="footer-text"></slot>
+        </footer>
+
+      </dialog>
+    `;
+  }
+}