@kubex/zinc 0.0.2 → 1.0.0

package/src/components/slideout/slideout.component.ts

@@ -0,0 +1,223 @@
+import {animateTo} from "../../internal/animate";
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {LocalizeController} from "../../utilities/localize";
+import {property, query} from 'lit/decorators.js';
+import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
+import {unlockBodyScrolling} from "../../internal/scroll";
+import ZincElement from '../../internal/zinc-element';
+import ZnButton from "../button";
+
+import styles from './slideout.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/slideout
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ *
+ * @event zn-show - Emitted when the slideout is opens.
+ * @event zn-close - Emitted when the slideout is closed.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to
+ * close the slideout by clicking the close button, clicking the overlay, or pressing escape. Calling
+ * `event.preventDefault()` will keep the slideout open. Avoid using this unless closing the slideout will result in
+ * destructive behavior such as data loss.
+ *
+ * @slot - The default slot.
+ * @slot label - The slideout's label. Alternatively you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The slideout's header. This element wraps the title and header actions.
+ * @csspart close-button - The slideout's close button.
+ * @csspart close-button__base - The close buttons exported `base` part.
+ * @csspart body - The slideout's body.
+ *
+ * @cssproperty --width - The preferred width of the slideout. Note the slideout 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.
+ */
+export default class ZnSlideout extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton
+  };
+
+  private readonly localize = new LocalizeController(this);
+  private closeWatcher: CloseWatcher | null;
+
+  @query('.slideout') slideout: HTMLDialogElement;
+  @query('.slideout__panel') panel: HTMLElement;
+  @query('.slideout__overlay') overlay: HTMLElement;
+
+  /**
+   * Indicated whether of not the slideout is open. You can toggle this attribute to show and hide the slideout, or you can
+   * use the `show()` and `hide()` methods and this attribute will reflect the slideout's state.
+   */
+  @property({type: Boolean, reflect: true}) open = false;
+
+  /**
+   * The slideout'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;
+
+  /**
+   * The slideout's trigger element. This is used to open the slideout when clicked. If you do not provide a trigger, you
+   * will need to manually open the slideout 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.slideout.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 slideout. */
+  async show() {
+    this.emit('zn-show');
+    this.addOpenListeners();
+    this.open = true;
+    this.slideout.showModal();
+
+    const {keyframes, options} = getAnimation(this, 'slideout.show', {dir: this.localize.dir()});
+    await animateTo(this.slideout, keyframes, options);
+  }
+
+  /** Hides the slideout. */
+  async hide() {
+    this.emit('zn-close');
+    this.removeOpenListeners();
+
+    const {keyframes, options} = getAnimation(this, 'slideout.hide', {dir: this.localize.dir()});
+    await animateTo(this.slideout, keyframes, options);
+
+    this.open = false;
+    this.slideout.close();
+  }
+
+  private closeClickHandler = (event: MouseEvent) => {
+    if (event.target instanceof HTMLElement && event.target.hasAttribute('slideout-closer')) {
+      this.hide();
+    }
+  }
+
+  render() {
+    return html`
+      <dialog
+        part="base"
+        role="alertdialog"
+        aria-modal="true"
+        aria-hidden=${this.open ? 'false' : 'true'}
+        aria-label=${this.label}
+        tabindex="-1"
+        class=${classMap({
+          slideout: true,
+          'slideout--open': this.open,
+          'slideout--default': true
+        })}>
+
+        <header part="header" class="slideout__header">
+          <h2 part="title" class="slideout__title" id="title">
+            <slot name="label"> ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}</slot>
+          </h2>
+          <div part="header-actions" class="slideout__header-actions">
+            <zn-button
+              part="close-button"
+              exportparts="base:close-button__base"
+              class="slideout__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="slideout__body" tabindex="-1">
+          <slot></slot>
+        </div>
+
+        <footer part="footer" class="slideout__footer">
+          <slot name="footer"></slot>
+        </footer>
+
+      </dialog>
+    `;
+  }
+}
+
+setDefaultAnimation('slideout.show', {
+  keyframes: [
+    {transform: 'translateX(100%)', opacity: 0},
+    {transform: 'translateX(0)', opacity: 1}
+  ],
+  options: {duration: 150, easing: 'ease'}
+});
+
+setDefaultAnimation('slideout.hide', {
+  keyframes: [
+    {transform: 'translateX(0)', opacity: 1},
+    {transform: 'translateX(100%)', opacity: 0}
+  ],
+  options: {duration: 150, easing: 'ease'}
+});

package/src/components/slideout/slideout.scss

@@ -0,0 +1,96 @@
+@use "../../wc";
+
+:host {
+  --width: min(100vw, 46rem);
+  --header-spacing: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-medium);
+  --body-spacing: var(--zn-spacing-medium) var(--zn-spacing-large);
+  --footer-spacing: var(--zn-spacing-large);
+  --icon-background-color: var(--zn-color-primary-200);
+  --icon-color: var(--zn-color-primary-600);
+  --caption-color: var(--zn-color-primary-600);
+
+  display: contents;
+}
+
+.slideout {
+  left: unset;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  flex-direction: column;
+  z-index: 2;
+  padding: 0;
+  width: var(--width);
+  background-color: var(--zn-panel-background-color);
+  box-shadow: var(--zn-shadow-x-large);
+
+
+  &__header {
+    flex: 0 0 auto;
+    display: flex;
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+
+  &__title {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    font: inherit;
+    margin: 0;
+    color: rgb(var(--zn-text-panel-title));
+    font-size: var(--zn-font-size-x-large);
+    font-weight: var(--zn-font-weight-semibold);
+    letter-spacing: var(--zn-letter-spacing-normal);
+    line-height: var(--zn-font-size-x-large);
+    padding: var(--header-spacing);
+  }
+
+  &__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    align-items: center;
+    margin-left: auto;
+    gap: var(--zn-spacing-x-small);
+    padding: var(--header-spacing);
+
+    zn-button,
+    &::slotted(zn-button) {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      font-size: var(--zn-font-size-medium);
+    }
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    color: var(--zn-color-text-default);
+    font-size: var(--zn-font-size-medium);
+    font-weight: var(--zn-font-weight-normal);
+    letter-spacing: var(--zn-tracking-normal);
+    line-height: var(--zn-line-height-dense);
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    flex: 0 0 auto;
+    padding: var(--footer-spacing);
+    border-top: 1px solid rgb(var(--zn-border-color));
+
+    ::slotted(zn-button:not(:first-of-type)) {
+      margin-inline-start: var(--zn-spacing-x-small);
+    }
+  }
+}

package/src/components/slideout/slideout.test.ts

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

package/src/components/sp/index.ts

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

package/src/components/sp/sp.component.ts

@@ -0,0 +1,86 @@
+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 './sp.scss';
+
+// TODO Move this somewhere shared
+export const defaultSizes = {
+  px: '1',
+  xxs: '3',
+  xs: '5',
+  sm: '10',
+  md: '15',
+  lg: '20',
+  xl: '25'
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/sp
+ * @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 ZnSp extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({attribute: 'divide', type: Boolean, reflect: true}) divide: boolean = false;
+  @property({attribute: 'gap', reflect: true}) gap: keyof typeof defaultSizes;
+  @property({attribute: 'row', type: Boolean, reflect: true}) row: boolean = false;
+  @property({attribute: 'grow', type: Boolean, reflect: true}) grow: boolean = false;
+  @property({attribute: 'pad-x', type: Boolean, reflect: true}) padX: boolean = false;
+  @property({attribute: 'pad-y', type: Boolean, reflect: true}) padY: boolean = false;
+  @property({attribute: 'no-gap', type: Boolean, reflect: true}) noGap: boolean = false;
+  @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
+  @property({attribute: 'flush-x', type: Boolean, reflect: true}) flushX: boolean = false;
+  @property({attribute: 'flush-y', type: Boolean, reflect: true}) flushY: boolean = false;
+  @property({attribute: 'flush-t', type: Boolean, reflect: true}) flushT: boolean = false;
+  @property({attribute: 'flush-b', type: Boolean, reflect: true}) flushB: boolean = false;
+  @property({attribute: 'flush-l', type: Boolean, reflect: true}) flushL: boolean = false;
+  @property({attribute: 'flush-r', type: Boolean, reflect: true}) flushR: boolean = false;
+  @property({attribute: 'width-container', type: Boolean, reflect: true}) widthContainer: boolean = false;
+
+  connectedCallback() {
+    if (this.gap) {
+      const size = defaultSizes[this.gap];
+      if (size) {
+        const gap = parseInt(size) * 4;
+        this.style.setProperty('--zn-divide-gap', `${gap}px`);
+      }
+    }
+    super.connectedCallback();
+  }
+
+  protected render(): unknown {
+    return html`
+      <div part="base" class="${classMap({
+        'sp': true,
+        'sp--divide': this.divide,
+        'sp--row': this.row,
+        'sp--grow': this.grow,
+        'sp--no-gap': this.noGap,
+        'sp--flush': this.flush,
+        'sp--flush-y': this.flushY,
+        'sp--flush-x': this.flushX,
+        'sp--flush-t': this.flushT,
+        'sp--flush-b': this.flushB,
+        'sp--flush-l': this.flushL,
+        'sp--flush-r': this.flushR,
+        'width-container': this.widthContainer,
+      })}">
+        <slot></slot>
+      </div>`;
+  }
+}

package/src/components/sp/sp.scss

@@ -0,0 +1,88 @@
+@use "sass:map";
+@use "../../wc";
+@use "../../../scss/mixins";
+
+
+:host {
+  display: block;
+  --zn-sp-padding: var(--zn-spacing-medium);
+  --zn-sp-gap: var(--zn-divide-gap, var(--zn-spacing-medium));
+}
+
+.sp {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  padding: var(--zn-sp-padding);
+  gap: var(--zn-sp-gap);
+  width: 100%;
+  //max-width: var(--zn-container-hd); //don't worry about max width just yet
+  margin: 0 auto;
+
+  &--divide.sp--no-gap {
+    ::slotted(*:not(:last-child)) {
+      border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
+    }
+  }
+
+  &--divide:not(.sp--no-gap) {
+    ::slotted(*:not(:last-child)) {
+      position: relative;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        height: 1px;
+        left: 0;
+        width: 100%;
+        max-width: 100%;
+        bottom: calc((var(--zn-sp-gap) / 2) * -1);
+        background-color: rgb(var(--zn-border-color));
+      }
+    }
+  }
+
+  &--row {
+    flex-direction: row;
+  }
+
+  &--no-gap {
+    gap: 0;
+  }
+
+  &--grow {
+    flex-grow: 1;
+  }
+
+  &--flush {
+    padding: 0;
+  }
+
+  &--flush-y {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &--flush-x {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+
+  &--flush-t {
+    padding-top: 0;
+  }
+
+  &--flush-b {
+    padding-bottom: 0;
+  }
+
+  &--flush-l {
+    padding-left: 0;
+  }
+
+  &--flush-r {
+    padding-right: 0;
+  }
+}

package/src/components/sp/sp.test.ts

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

package/src/components/split-button/index.ts

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

package/src/components/split-button/split-button.component.ts

@@ -0,0 +1,154 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {defaultValue} from "../../internal/default-value";
+import {FormControlController, validValidityState} from "../../internal/form";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {property, query} from 'lit/decorators.js';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import ZincElement from '../../internal/zinc-element';
+import type {ZnMenuSelectEvent} from "../../events/zn-menu-select";
+import type ZnButton from "../button";
+import type ZnDropdown from "../dropdown";
+
+import styles from './split-button.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/split-button
+ * @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 ZnSplitButton extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly formControlController = new FormControlController(this);
+
+  @property() caption: string;
+
+  @property() href: string;
+
+  @property() name: string;
+
+  @property() value: string;
+
+  @defaultValue() defaultValue: string;
+
+  @property() type: string;
+
+  @query('zn-dropdown') dropdown: ZnDropdown;
+
+  @query('zn-button#trigger-btn') button: ZnButton;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleClick)
+    this.addEventListener('zn-menu-select', this.handleMenuItemClick);
+    this.defaultValue = this.value;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('zn-menu-select', this.handleMenuItemClick);
+  }
+
+  public handleMenuItemClick(e: ZnMenuSelectEvent) {
+    if (this.dropdown) {
+      this.value = e.detail.value;
+      this.dropdown.hide();
+    }
+
+    if (this.type === 'submit') {
+      this.formControlController.submit();
+    }
+  }
+
+  public handleClick(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+  public handleTriggerClick() {
+    this.value = this.defaultValue;
+
+    if (this.type === 'submit') {
+      this.formControlController.submit();
+    }
+  }
+
+  render() {
+    return html`
+      <zn-dropdown placement="bottom-start">
+        <div slot="trigger">
+          <zn-button-group>
+            <zn-button id="trigger-btn"
+                       href=${ifDefined(this.href)}
+                       @click=${this.handleTriggerClick}>
+              ${this.caption}
+            </zn-button>
+            <zn-button icon="keyboard_arrow_down"></zn-button>
+          </zn-button-group>
+        </div>
+        <div>
+          <slot name="menu"></slot>
+        </div>
+      </zn-dropdown>
+    `;
+  }
+
+  checkValidity(): boolean {
+    if (this._isButton() && this.button) {
+      return this.button.checkValidity();
+    }
+
+    return true;
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity() {
+    if (this._isButton() && this.button) {
+      return this.button.reportValidity();
+    }
+
+    return true;
+  }
+
+  setCustomValidity(message: string) {
+    if (this._isButton()) {
+      this.button.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+
+  get validity() {
+    if (this._isButton() && this.button) {
+      return this.button.validity;
+    }
+
+    return validValidityState;
+  }
+
+  get validationMessage() {
+    if (this._isButton() && this.button) {
+      return this.button.validationMessage;
+    }
+
+    return '';
+  }
+
+  private _isButton() {
+    return this.type === 'submit' || this.type === 'button' || this.type === 'reset';
+  }
+}