@kubex/zinc 0.0.2 → 1.0.0

package/src/components/datepicker/datepicker.component.ts

@@ -0,0 +1,315 @@
+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 {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {live} from "lit/directives/live.js";
+import {property, query, state} from 'lit/decorators.js';
+import {watch} from "../../internal/watch";
+import AirDatepicker, {type AirDatepickerLocale} from "air-datepicker";
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+import ZnTooltip from "../tooltip";
+import type {ZincFormControl} from '../../internal/zinc-element';
+
+import styles from './datepicker.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/datepicker
+ * @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 ZnDatepicker extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  static dependencies = {
+    'zn-icon': ZnIcon,
+    'zn-tooltip': ZnTooltip
+  }
+
+  private readonly formControlController = new FormControlController(this, {
+    assumeInteractionOn: ['zn-blur', 'zn-input']
+  });
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label', 'label-tooltip');
+
+  @query('.input__control') input: HTMLInputElement;
+
+  @state() private hasFocus = false;
+
+  @property() title = "" // make reactive pass through
+
+  /** The name of the input, submitted as a name/value pair with form data. */
+  @property() name: string = "";
+
+  /** The current value of the input, submitted as a name/value pair with form data. */
+  @property() value: any = '';
+
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue() defaultValue: string = '';
+
+  /** The inputs size **/
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** The inputs label. If you need to display HTML, use the `label` slot. **/
+  @property() label: string = '';
+
+  /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the
+   * `label-tooltip` slot.
+   * **/
+  @property({attribute: 'label-tooltip'}) labelTooltip: string = '';
+
+  /**
+   * Text that appears above the input, on the right, to add additional context. If you need to display HTML
+   * in this text, use the `context-note` slot instead
+   */
+  @property({attribute: 'context-note'}) contextNote: string = '';
+
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
+  @property({attribute: 'help-text'}) helpText: string = '';
+
+  /** Disables the input **/
+  @property({type: Boolean, reflect: true}) disabled: boolean = false;
+
+  /** Placeholder text to show as a hint when the input is empty. */
+  @property() placeholder: string = '';
+
+  /** Makes the input read-only **/
+  @property({type: Boolean, reflect: true}) readonly: boolean = 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: string;
+
+  /** Makes the input a required field. */
+  @property({type: Boolean, reflect: true}) required = false;
+
+  /** Makes the input a range picker. **/
+  @property({type: Boolean}) range = false;
+
+  private _instance: AirDatepicker<HTMLInputElement>;
+
+
+  /** Gets the validity state object */
+  get validity() {
+    return this.input?.validity;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+
+  @watch('disabled', {waitUntilFirstUpdate: true})
+  handleDisabledChange() {
+    // Disabled form controls are always valid
+    this.formControlController.setValidity(this.disabled);
+  }
+
+  @watch('value', {waitUntilFirstUpdate: true})
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+
+  /** Sets focus on the input. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the input. */
+  blur() {
+    this.input.blur();
+  }
+
+  /** Selects all the text in the input. */
+  select() {
+    this.input.select();
+  }
+
+  /** Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity(): boolean {
+    return this.input.checkValidity();
+  }
+
+  /** 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 this.input.reportValidity();
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  init() {
+    if (this._instance) {
+      if (Object.prototype.hasOwnProperty.call(this._instance, 'destroy')) {
+        this._instance.destroy();
+      }
+    }
+
+    const inputElement = this.shadowRoot?.querySelector('input') as HTMLInputElement;
+    if (inputElement) {
+      this._instance = new AirDatepicker(inputElement, {
+        locale: enLocale,
+        range: this.range,
+        onSelect: () => {
+          this.handleChange();
+        }
+      });
+    }
+  }
+
+  private handleInput() {
+    this.value = this.input.value;
+    this.formControlController.updateValidity();
+    this.emit('zn-input');
+  }
+
+  private handleChange() {
+    this.value = this.input.value;
+    this.emit('zn-change');
+  }
+
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  protected updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    this.init();
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
+    const hasContextNoteSlot = this.hasSlotController.test('context-note');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabel = this.label ? true : hasLabelSlot;
+    const hasLabelTooltip = this.labelTooltip ? true : hasLabelTooltipSlot;
+    const hasContextNote = this.contextNote ? true : hasContextNoteSlot;
+    const hasHelpText = this.helpText ? true : hasHelpTextSlot;
+
+    return html`
+      <div 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--has-label': hasLabel,
+             'form-control--has-label-tooltip': hasLabelTooltip,
+             'form-control--has-context-note': hasContextNote,
+             'form-control--has-help-text': hasHelpText,
+           })}">
+
+        <label part="form-control-label" class="form-control__label" for="input"
+               aria-hidden=${hasLabel ? 'false' : 'true'}>
+          <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>
+
+        ${hasContextNote
+          ? html`
+            <span class="form-control__label-context-note"><slot name="context-note">${this.contextNote}</slot></span>`
+          : ''}
+
+        <div part="form-control-input" class="form-control-input">
+          <div part="base"
+               class=${classMap({
+                 'input': true,
+                 'input--standard': true,
+                 'input--small': this.size === 'small',
+                 'input--medium': this.size === 'medium',
+                 'input--large': this.size === 'large',
+                 'input--disabled': this.disabled,
+                 'input--focused': this.hasFocus,
+                 'input--empty': !this.value,
+               })}>
+
+            <span part="prefix" class="input__prefix">
+              <span class="input__prefix-default">
+                <zn-icon src="calendar_month" size="18"></zn-icon>
+              </span>
+              <slot name="prefix"></slot>
+            </span>
+
+            <input id="date-picker"
+                   class="input__control"
+                   type="text"
+                   title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+                   name=${ifDefined(this.name)}
+                   autocomplete="off"
+                   ?disabled=${this.disabled}
+                   ?readonly=${this.readonly}
+                   ?required=${this.required}
+                   placeholder=${ifDefined(this.placeholder)}
+                   .value=${live(this.value)}
+                   ?autofocus=${this.autofocus}
+                   spellcheck=${this.spellcheck}
+                   aria-describedby="help-text"
+                   @change=${this.handleChange}
+                   @input=${this.handleInput}
+                   @invalid=${this.handleInvalid}>
+
+            <span part="suffix" class="input__suffix">
+              <slot name="suffix"></slot>
+            </span>
+          </div>
+        </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>
+      </div>`
+  }
+}
+
+const enLocale: Partial<AirDatepickerLocale> = {
+  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+  daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  today: 'Today',
+  clear: 'Clear',
+  dateFormat: 'MM/dd/yyyy',
+  timeFormat: 'hh:ii aa',
+  firstDay: 0
+};

package/src/components/datepicker/datepicker.scss

@@ -0,0 +1,237 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+}
+
+.input {
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: start;
+  position: relative;
+  width: 100%;
+  box-shadow: var(--zn-shadow-medium);
+  font-family: var(--zn-input-font-family), sans-serif;
+  font-weight: var(--zn-input-font-weight);
+  letter-spacing: var(--zn-input-letter-spacing);
+  vertical-align: middle;
+  overflow: hidden;
+  cursor: text;
+  transition: var(--zn-transition-fast) color,
+  var(--zn-transition-fast) border,
+  var(--zn-transition-fast) background-color;
+}
+
+/* Standard inputs */
+.input--standard {
+  background-color: var(--zn-input-background-color);
+  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+}
+
+.input--standard:hover:not(.input--disabled) {
+  background-color: var(--zn-input-background-color-hover);
+  border-color: var(--zn-input-border-color-hover);
+}
+
+.input--standard.input--focused:not(.input--disabled) {
+  background-color: var(--zn-input-background-color-focus);
+  border-color: var(--zn-input-border-color-focus);
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+}
+
+.input--standard.input--focused:not(.input--disabled) .input__control {
+  color: var(--zn-input-color-focus);
+}
+
+.input--standard.input--disabled {
+  background-color: var(--zn-input-background-color-disabled);
+  border-color: var(--zn-input-border-color-disabled);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input--standard.input--disabled .input__control {
+  color: var(--zn-input-color-disabled);
+}
+
+.input--standard.input--disabled .input__control::placeholder {
+  color: var(--zn-input-placeholder-color-disabled);
+}
+
+.input__control {
+  flex: 1 1 auto;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  min-width: 0;
+  height: 100%;
+  color: var(--zn-input-color);
+  border: none;
+  background: inherit;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  cursor: inherit;
+  -webkit-appearance: none;
+}
+
+.input__control::-webkit-search-decoration,
+.input__control::-webkit-search-cancel-button,
+.input__control::-webkit-search-results-button,
+.input__control::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.input__control:-webkit-autofill,
+.input__control:-webkit-autofill:hover,
+.input__control:-webkit-autofill:focus,
+.input__control:-webkit-autofill:active {
+  box-shadow: 0 0 0 var(--zn-input-height-large) var(--zn-input-background-color) inset !important;
+  -webkit-text-fill-color: var(--zn-input-color);
+  caret-color: var(--zn-input-color);
+}
+
+.input__control::placeholder {
+  color: var(--zn-input-placeholder-color);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.input:hover:not(.input--disabled) .input__control {
+  color: var(--zn-input-color-hover);
+}
+
+.input__control:focus {
+  outline: none;
+}
+
+.input__prefix,
+.input__suffix {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  cursor: default;
+  color: var(--zn-input-icon-color);
+  font-size: var(--zn-font-size-small);
+
+  zn-icon {
+    --icon-size: var(--zn-font-size-x-large);
+    color: var(--zn-input-icon-color);
+    font-size: var(--zn-font-size-small);
+  }
+}
+
+.input__prefix ::slotted(zn-icon),
+.input__suffix ::slotted(zn-icon) {
+  --icon-size: var(--zn-font-size-medium);
+  font-size: var(--zn-font-size-medium);
+  color: var(--zn-input-icon-color);
+}
+
+
+.input__prefix-default zn-icon {
+  display: contents;
+}
+
+/*
+ * Size modifiers
+ */
+
+.input--small {
+  border-radius: var(--zn-input-border-radius-small);
+  font-size: var(--zn-input-font-size-small);
+  height: var(--zn-input-height-small);
+}
+
+.input--small .input__control {
+  height: calc(var(--zn-input-height-small) - var(--zn-input-border-width) * 2);
+  padding: 0 var(--zn-input-spacing-small);
+}
+
+.input--small .input__clear,
+.input--small .input__password-toggle {
+  width: calc(1em + var(--zn-input-spacing-small) * 2);
+}
+
+.input--small .input__prefix ::slotted(*),
+.input__prefix-default {
+  margin-inline-start: var(--zn-input-spacing-small);
+}
+
+.input--small .input__suffix ::slotted(*),
+.input__suffix-default {
+  margin-inline-end: var(--zn-input-spacing-small);
+}
+
+.input--small .input__suffix ::slotted(zn-button),
+.input--small .input__prefix ::slotted(zn-button) {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.input--medium {
+  border-radius: var(--zn-input-border-radius-medium);
+  font-size: var(--zn-input-font-size-medium);
+  height: var(--zn-input-height-medium);
+}
+
+.input--medium .input__control {
+  height: calc(var(--zn-input-height-medium) - var(--zn-input-border-width) * 2);
+  padding: 0 var(--zn-input-spacing-medium);
+}
+
+.input--medium .input__clear,
+.input--medium .input__password-toggle {
+  width: calc(1em + var(--zn-input-spacing-medium) * 2);
+}
+
+.input--medium .input__prefix ::slotted(*),
+.input__prefix-default {
+  margin-inline-start: var(--zn-input-spacing-medium);
+}
+
+.input--medium .input__suffix ::slotted(*),
+.input__suffix-default {
+  margin-inline-end: var(--zn-input-spacing-medium);
+}
+
+.input--medium .input__suffix ::slotted(zn-button),
+.input--medium .input__prefix ::slotted(zn-button) {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.input--large {
+  border-radius: var(--zn-input-border-radius-large);
+  font-size: var(--zn-input-font-size-large);
+  height: var(--zn-input-height-large);
+}
+
+.input--large .input__control {
+  height: calc(var(--zn-input-height-large) - var(--zn-input-border-width) * 2);
+  padding: 0 var(--zn-input-spacing-medium);
+}
+
+.input--large .input__clear,
+.input--large .input__password-toggle {
+  width: calc(1em + var(--zn-input-spacing-large) * 2);
+}
+
+.input--large .input__prefix ::slotted(*),
+.input__prefix-default {
+  margin-inline-start: var(--zn-input-spacing-large);
+}
+
+.input--large .input__suffix ::slotted(*),
+.input__suffix-default {
+  margin-inline-end: var(--zn-input-spacing-large);
+}
+
+.input--large .input__suffix ::slotted(zn-button),
+.input--large .input__prefix ::slotted(zn-button),
+{
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}

package/src/components/datepicker/datepicker.test.ts

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

package/src/components/datepicker/index.ts

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