@kubex/zinc 0.0.2 → 1.0.0

package/src/components/radio-group/radio-group.component.ts

@@ -0,0 +1,362 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {
+  customErrorValidityState,
+  FormControlController,
+  validValidityState,
+  valueMissingValidityState
+} from "../../internal/form";
+import {HasSlotController} from "../../internal/slot";
+import {property, query, state} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type ZnRadio from "../radio";
+
+import styles from './radio-group.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/radio-group
+ * @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 ZnRadioGroup extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  protected readonly formControlController = new FormControlController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private customValidityMessage = '';
+  private validationTimeout: number;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.radio-group__validation-input') validationInput: HTMLInputElement;
+
+  @state() private errorMessage = '';
+  @state() defaultValue = '';
+
+  /**
+   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+   * instead.
+   */
+  @property() label = '';
+
+  /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
+  @property({attribute: 'label-tooltip'}) labelTooltip = '';
+
+  /** The radio groups' help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({attribute: 'help-text'}) helpText = '';
+
+  /** The name of the radio group, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current value of the radio group, submitted as a name/value pair with form data. */
+  @property({reflect: true}) value = '';
+
+  /** The radio group's size. This size will be applied to all child radios */
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
+  @property({type: Boolean, reflect: true}) horizontal = false;
+
+  /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
+  @property({type: Boolean, reflect: true}) contained = false;
+
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({reflect: true}) form = '';
+
+  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  @property({type: Boolean, reflect: true}) required = false;
+
+  get validity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== '';
+
+    if (hasCustomValidityMessage) {
+      return customErrorValidityState;
+    }
+
+    if (isRequiredAndEmpty) {
+      return valueMissingValidityState;
+    }
+
+    return validValidityState;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== '';
+
+    if (hasCustomValidityMessage) {
+      return this.customValidityMessage;
+    }
+
+    if (isRequiredAndEmpty) {
+      return this.validationInput.validationMessage;
+    }
+
+    return '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this.formControlController.updateValidity();
+  }
+
+  private getAllRadios() {
+    return [...this.querySelectorAll<ZnRadio>('zn-radio')];
+  }
+
+  private handleRadioClick(event: MouseEvent) {
+    const target = (event.target as HTMLElement).closest<ZnRadio>('zn-radio')!;
+    const radios = this.getAllRadios();
+
+    if (!target || target.disabled) {
+      return;
+    }
+
+    this.value = target.value;
+    radios.forEach(radio => (radio.checked = radio === target));
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
+      return;
+    }
+
+    const radios = this.getAllRadios().filter(radio => !radio.disabled);
+    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];
+    const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+    let index = radios.indexOf(checkedRadio) + incr;
+
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+
+    this.getAllRadios().forEach(radio => {
+      radio.checked = false;
+    });
+
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    radios[index].shadowRoot!.querySelector('button')!.focus();
+
+
+    event.preventDefault();
+  }
+
+  private handleLabelClick() {
+    this.focus();
+  }
+
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  private async syncRadioElements() {
+    const radios = this.getAllRadios();
+
+    await Promise.all(
+      // Sync the checked state and size
+      radios.map(async (radio: ZnRadio) => {
+        await radio.updateComplete;
+        radio.checked = radio.value === this.value;
+        radio.size = this.size;
+        radio.horizontal = this.horizontal;
+        radio.contained = this.contained;
+      })
+    );
+
+    if (radios.length > 0 && !radios.some(radio => radio.checked)) {
+      radios[0].setAttribute('tabindex', '0');
+    }
+  }
+
+  private syncRadios() {
+    if (customElements.get('zn-radio')) {
+      this.syncRadioElements();
+      return;
+    }
+
+    if (customElements.get('zn-radio')) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined('zn-radio').then(() => this.syncRadios());
+    }
+  }
+
+  private updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach(radio => (radio.checked = radio.value === this.value));
+    this.formControlController.setValidity(this.validity?.valid);
+  }
+
+  @watch('size', {waitUntilFirstUpdate: true})
+  handleSizeChange() {
+    this.syncRadios();
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedRadio();
+    }
+  }
+
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== '';
+
+    if (isRequiredAndEmpty || hasCustomValidityMessage) {
+      this.formControlController.emitInvalidEvent();
+      return false;
+    }
+
+    return true;
+  }
+
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity(): boolean {
+    const isValid = this.validity?.valid;
+
+    this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(this.validationTimeout);
+
+    if (!isValid) {
+      // Show the browser's constraint validation message
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;
+    }
+
+    return isValid;
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = '') {
+    this.customValidityMessage = message;
+    this.errorMessage = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  public focus(options?: FocusOptions) {
+    const radios = this.getAllRadios();
+    const checked = radios.find(radio => radio.checked);
+    const firstEnabledRadio = radios.find(radio => !radio.disabled);
+    const radioToFocus = checked || firstEnabledRadio;
+
+    // Call focus for the checked radio
+    // If no radio is checked, focus the first one that is not disabled
+    if (radioToFocus) {
+      radioToFocus.focus(options);
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasLabelTooltip = this.labelTooltip ? true : hasLabelTooltipSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const defaultSlot = html`
+      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
+    `;
+
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--small': this.size === 'small',
+          'form-control--medium': this.size === 'medium',
+          'form-control--large': this.size === 'large',
+          'form-control--radio-group': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-label-tooltip': hasLabelTooltip,
+          'form-control--has-help-text': hasHelpText
+        })}
+        role="radiogroup"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message">
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+          @click=${this.handleLabelClick}>
+          <slot name="label">${this.label}</slot>
+          ${hasLabelTooltip
+            ? html`
+              <zn-tooltip class="form-control--label-tooltip">
+                <div slot="content">
+                  <slot name="label-tooltip">${this.labelTooltip}</slot>
+                </div>
+                <zn-icon src="info"></zn-icon>
+              </zn-tooltip>`
+            : ''}
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <div class="visually-hidden">
+            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
+            <label class="radio-group__validation">
+              <input
+                type="text"
+                class="radio-group__validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+                @invalid=${this.handleInvalid}/>
+            </label>
+          </div>
+          ${defaultSlot}
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? 'false' : 'true'}>
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </fieldset>
+    `;
+  }
+}

package/src/components/radio-group/radio-group.scss

@@ -0,0 +1,60 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+  line-height: var(--zn-line-height-dense);
+}
+
+:host([horizontal]) .form-control-input {
+  display: flex;
+  column-gap: var(--zn-spacing-2x-large);
+}
+
+:host([contained]) .form-control-input {
+  margin-top: var(--zn-spacing-medium);
+}
+
+:host([horizontal][contained]) .form-control-input {
+  margin-top: var(--zn-spacing-medium);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
+  gap: var(--zn-spacing-x-small);
+}
+
+::slotted(zn-radio) {
+  margin-top: var(--zn-spacing-medium);
+}
+
+::slotted(zn-radio[horizontal]),
+::slotted(zn-radio[contained]) {
+  margin-top: var(--zn-spacing-small);
+}
+
+::slotted(zn-radio[horizontal][contained]) {
+  margin-top: 0;
+  height: 100%;
+}
+
+.form-control {
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.form-control__label {
+  padding: 0;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/components/radio-group/radio-group.test.ts

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

package/src/components/rating/index.ts

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

package/src/components/rating/rating.component.ts

@@ -0,0 +1,235 @@
+import {clamp} from "lodash";
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {FormControlController, validValidityState} from "../../internal/form";
+import {property, query, state} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import type {ZincFormControl} from '../../internal/zinc-element';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './rating.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/rating
+ * @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 ZnRating extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly formControlController = new FormControlController(this, {
+    assumeInteractionOn: ['zn-blur', 'zn-input']
+  });
+
+  @query('.rating') rating: HTMLElement;
+
+  @state() private hoverValue: number = 0;
+
+  @state() private isHovering: boolean = false;
+
+  @property() label: string;
+
+  @property() name: string;
+
+  @property({type: Number}) value: number = 0;
+
+  @property({type: Number}) max: number = 5;
+
+  @property({type: Number}) precision: number = 1;
+
+  @property({type: Boolean}) readonly: boolean = false;
+
+  @property({type: Boolean}) disabled: boolean = false;
+
+  @property() getSymbol: (value: number) => string = () => '<zn-icon src="warning"></zn-icon>';
+
+  /** Gets the validity state object */
+  get validity() {
+    return validValidityState;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    return "";
+  }
+
+  /** Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity(): boolean {
+    return true;
+  }
+
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return true;
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity() {
+    this.formControlController.updateValidity();
+  }
+
+  private _roundToPrecision(value: number, precision: number): number {
+    const factor = 1 / precision;
+    return Math.ceil(value * factor) / factor;
+  }
+
+  private _getValueFromXCoordinate(coordinate: number): number {
+    const {left, width} = this.rating.getBoundingClientRect();
+    const value = this._roundToPrecision(((coordinate - left) / width) * this.max, this.precision);
+
+    return clamp(value, 0, this.max);
+  }
+
+  private _getValueFromMousePosition(event: MouseEvent): number {
+    return this._getValueFromXCoordinate(event.clientX);
+  }
+
+  private _getValueFromTouchPosition(event: TouchEvent): number {
+    return this._getValueFromXCoordinate(event.touches[0].clientX);
+  }
+
+  private _setValue(value: number) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    this.value = value === this.value ? 0 : value;
+    this.isHovering = false;
+  }
+
+
+  private _handleClick(event: MouseEvent) {
+    if (this.readonly || this.disabled) {
+      return;
+    }
+
+    this._setValue(this._getValueFromMousePosition(event));
+  }
+
+  private _handleMouseEnter(event: MouseEvent) {
+    this.isHovering = true;
+    this.hoverValue = this._getValueFromMousePosition(event);
+  }
+
+  private _handleMouseMove(event: MouseEvent) {
+    this.hoverValue = this._getValueFromMousePosition(event);
+  }
+
+  private _handleMouseLeave() {
+    this.isHovering = false;
+  }
+
+  private _handleTouchStart(event: TouchEvent) {
+    this.isHovering = true;
+    this.hoverValue = this._getValueFromTouchPosition(event);
+  }
+
+  private _handleTouchMove(event: TouchEvent) {
+    this.hoverValue = this._getValueFromTouchPosition(event);
+  }
+
+  private _handleTouchEnd(event: TouchEvent) {
+    this.isHovering = false;
+    this._setValue(this._getValueFromTouchPosition(event));
+
+    event.preventDefault();
+  }
+
+  render() {
+    const counter = Array.from(Array(this.max).keys());
+    let displayValue = 0;
+
+    if (this.disabled || this.readonly) {
+      displayValue = this.value;
+    } else {
+      displayValue = this.isHovering ? this.hoverValue : this.value;
+    }
+
+    return html`
+      <div
+        part="base"
+        class="${classMap({
+          rating: true,
+          'rating--readonly': this.readonly,
+          'rating--disabled': this.disabled,
+        })}"
+        role="slider"
+        aria-label="${this.label}"
+        aria-disabled="${this.disabled ? 'true' : 'false'}"
+        aria-readonly="${this.readonly ? 'true' : 'false'}"
+        aria-valuenow="${this.value}"
+        aria-valuemin="0"
+        aria-valuemax="${this.max}"
+        @click="${this._handleClick}"
+        @mouseenter="${this._handleMouseEnter}"
+        @mousemove="${this._handleMouseMove}"
+        @mouseleave="${this._handleMouseLeave}"
+        @touchstart="${this._handleTouchStart}"
+        @touchmove="${this._handleTouchMove}"
+        @touceend="${this._handleTouchEnd}"
+      >
+        <span class="rating__symbols">
+          ${counter.map(index => {
+            if (displayValue > index && displayValue < index + 1) {
+              return html`
+                <span
+                  class=${classMap({
+                    rating__symbol: true,
+                    'rating__partial-symbol-container': true,
+                    'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
+                  })}
+                  role="presentation"
+                >
+                  <div
+                    style=${styleMap({
+                      clipPath: `inset(0 0 0 ${(displayValue - index) * 100}%)`
+                    })}
+                  >
+                    ${unsafeHTML(this.getSymbol(index + 1))}
+                  </div>
+                  <div
+                    class="rating__partial--filled"
+                    style=${styleMap({
+                      clipPath: `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`
+                    })}
+                  >
+                    ${unsafeHTML(this.getSymbol(index + 1))}
+                  </div>
+                </span>
+              `;
+            }
+            return html`
+              <span
+                class=${classMap({
+                  rating__symbol: true,
+                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+                  'rating__symbol--active': displayValue >= index + 1
+                })}
+                role="presentation"
+              >
+                ${unsafeHTML(this.getSymbol(index + 1))}
+              </span>`;
+          })}
+        </span>
+      </div>
+    `;
+  }
+}