@kubex/zinc 0.0.2 → 1.0.0

package/src/components/collapsible/collapsible.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 {Store} from "../../internal/storage";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './collapsible.scss';
+
+/**
+ * @summary Toggles between showing and hiding content when clicked
+ * @documentation https://zinc.style/components/collapsible
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon - The icon element
+ *
+ * @slot header - Clicking will toggle the show state of the data
+ *
+ */
+export default class ZnCollapsible extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({reflect: true}) caption = '';
+
+  @property({reflect: true}) description = '';
+
+  @property({reflect: true}) label = '';
+
+  @property({type: Boolean, reflect: true}) expanded: boolean = false;
+
+  @property({attribute: 'default'}) defaultState: 'open' | 'closed';
+
+  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
+
+  @property({attribute: 'store-key', reflect: true}) storeKey: string = "";
+
+  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
+
+  @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
+
+  protected _store: Store;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "zncla:", this.storeTtl);
+    this.expanded = this.defaultState === 'open';
+
+    if (this.storeKey) {
+      const hasPref = this._store.get(this.storeKey);
+      if (hasPref) {
+        this.expanded = hasPref === "true";
+      }
+    }
+  }
+
+  handleCollapse = (e: MouseEvent) => {
+    if (this.expanded) {
+      this.expanded = false;
+      e.stopPropagation();
+    }
+  }
+
+  render() {
+    return html`
+      <div @click="${() => (!this.expanded ? (this.expanded = true) : '')}">
+        <slot name="header" class="header" @click="${this.handleCollapse}">
+          <div class="header__left">
+            <p class="caption">
+              <slot name="caption">${this.caption}</slot>
+            </p>
+            <p class="description">${this.description}</p>
+          </div>
+          <div class="header__right">
+            <slot name="label"><p class="label">${this.label}</p></slot>
+            <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>
+          </div>
+        </slot>
+        <div class="${classMap({
+          'content': true,
+          'content--flush': this.flush,
+        })}">
+          <slot></slot>
+        </div>
+      </div>`;
+  }
+}

package/src/components/collapsible/collapsible.scss

@@ -0,0 +1,100 @@
+@use "../../wc";
+
+:host(:not([expanded])) {
+  cursor: pointer;
+}
+
+:host([expanded]) .expand {
+  transform: rotate(180deg);
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  overflow: hidden;
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  justify-items: center;
+
+  .caption {
+    font-weight: 600;
+    margin: 0;
+    color: rgb(var(--zn-text-heading));
+  }
+
+  .description {
+    text-align: right;
+    padding: 0;
+    margin: 0;
+  }
+
+  .summary {
+    font-weight: 500;
+    font-size: 90%;
+  }
+
+  .label {
+    font-weight: 500;
+    font-size: 90%;
+  }
+
+  &__left {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+:host([error-label]) {
+  .header {
+    .caption {
+      color: rgb(var(--zn-color-error));
+    }
+  }
+}
+
+:host([warning-label]) {
+  .header {
+    .caption {
+      color: rgb(var(--zn-color-warning));
+    }
+  }
+}
+
+:host(:not([flush])).content {
+  @include wc.padding();
+}
+
+.content {
+  transition: .1s all ease-out;
+}
+
+:host([expanded]) .content {
+  margin: 0 var(--zn-spacing-medium);
+  padding-bottom: var(--zn-spacing-medium);
+
+  &--flush {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+:host(:not([expanded])) .content {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.expand {
+  margin-left: var(--zn-spacing-medium);
+}

package/src/components/collapsible/collapsible.test.ts

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

package/src/components/collapsible/index.ts

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

package/src/components/cols/cols.component.ts

@@ -0,0 +1,76 @@
+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 './cols.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/columns
+ * @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 ZnCols extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+
+  @property({reflect: true, attribute: 'layout'}) layout: string = '';
+
+  @property({attribute: 'mc', type: Number, reflect: true}) maxColumns: number = 0;
+
+  @property({attribute: 'no-gap', type: Boolean}) noGap: boolean = false;
+
+  @property({type: Boolean}) border: boolean = false;
+
+  @property({type: Boolean}) pad: boolean;
+  @property({attribute: 'pad-x', type: Boolean}) padX: boolean;
+  @property({attribute: 'pad-y', type: Boolean}) padY: boolean;
+
+  render() {
+    const layout: number[] = this.layout.split(/[\s,]+/).map((a) => parseInt(a)).filter((item) => !!item);
+
+    if (layout.length === 0) {
+      layout.push(1, 1, 1, 1);
+    }
+
+    this.layout = layout.join(',');
+
+    this.maxColumns = Math.min(5, layout.reduce((a, b) => a + b, 0));
+
+    const prefix = 'zn-col-';
+    this.querySelectorAll(':scope > *').forEach((element: HTMLElement, index) => {
+      const classes = element.className.split(' ').filter((c) => !c.startsWith(prefix));
+      element.className = classes.join(' ');
+
+      const col = index % layout.length;
+      element.classList.add(prefix + layout[col]);
+    });
+
+    return html`
+      <div class="${classMap({
+        'cols': true,
+        'cols--no-gap': this.noGap,
+        'cols--border': this.border,
+        'cols--pad': this.pad,
+        'cols--pad-x': this.padX,
+        'cols--pad-y': this.padY,
+        [`cols--layout-${this.layout.replace(',', '')}`]: !!this.layout,
+        [`cols--mc-${this.maxColumns}`]: !!this.maxColumns,
+      })}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/cols/cols.scss

@@ -0,0 +1,99 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  --zn-col-basis: 250px;
+  --col-width: 23%;
+}
+
+.cols {
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+  container-type: inline-size;
+  overflow: hidden;
+  gap: var(--zn-spacing-small);
+
+  max-width: 100%;
+
+  @for $i from 1 through 12 {
+    ::slotted(.zn-col-#{$i}) {
+      flex-basis: calc(var(--zn-col-basis) * #{$i});
+      min-width: calc(var(--col-width) * #{$i});
+      flex-grow: #{$i}
+    }
+  }
+
+  &--mc-2 {
+    --col-width: 40%;
+  }
+
+  &--mc-3 {
+    --col-width: 30%;
+  }
+
+  &--mc-4 {
+    --col-width: 23%;
+  }
+
+  &--mc-5 {
+    --col-width: 18%;
+  }
+
+  &--layout-121 {
+    ::slotted(.zn-col-2) {
+      order: -1;
+      min-width: 100%;
+
+      @include wc.container-query(hd) {
+        order: initial;
+        min-width: 46%;
+      }
+    }
+  }
+
+  &--no-gap {
+    gap: 0;
+  }
+
+  &--border ::slotted(*) {
+    position: relative;
+    padding-bottom: var(--zn-spacing-small); // Add spacing between element and border
+  }
+
+  // Adds full-width lines between bordered cols
+  &--border ::slotted(*:not(:last-child)):before {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: -100vw;
+    right: -5px;
+    z-index: 1111;
+    border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
+  }
+
+  // Stops the last child/row having a border
+  &--border ::slotted(*:last-child):before {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: -100vw;
+    right: -5px;
+    z-index: 1111;
+    border-bottom: 1px solid var(--zn-panel-background-color) !important;
+  }
+
+  &--pad {
+    padding: var(--zn-spacing-2x-small);
+  }
+
+  &--pad-x {
+    padding-inline: var(--zn-spacing-2x-small);
+  }
+
+  &--pad-y {
+    padding-block: var(--zn-spacing-2x-small);
+  }
+}

package/src/components/cols/cols.test.ts

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

package/src/components/cols/index.ts

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

package/src/components/confirm/confirm.component.ts

@@ -0,0 +1,181 @@
+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 ZincElement from "../../internal/zinc-element";
+import ZnDialog from "../dialog";
+
+import styles from './confirm.scss';
+import {deepQuerySelectorAll} from "../../utilities/query";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/confirm-modal
+ * @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 ZnConfirm extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-dialog': ZnDialog
+  };
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'footer');
+
+  /** 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';
+
+  /** The dialogs type, which will determine the icon and color. */
+  @property() type: 'warning' | 'error' | 'success' | 'info' = 'warning';
+
+  /**
+   * 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;
+
+  @property() caption: string = '';
+
+  @property() action: string = '';
+
+  @property() content: string = '';
+
+  @property() confirmText: string = "Confirm";
+
+  @property() cancelText: string = "Cancel";
+
+  @property({type: Boolean, attribute: 'hide-icon'}) hideIcon: boolean = 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({reflect: true}) trigger: string;
+
+  /** The Dialogs announcement text. */
+  @property() announcement: string = '';
+
+  /** The Dialogs footer text. */
+  @property({attribute: 'footer-text'}) footerText: string = '';
+
+  @query('zn-dialog') dialog: ZnDialog;
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    if (this.open) {
+      this.dialog.show();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+
+    if (this.hasSlotController.test('trigger')) {
+      const trigger = this.hasSlotController.getSlot('trigger');
+      trigger?.addEventListener('click', this.show);
+    } else if (this.trigger) {
+      const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+      triggers.forEach((el: HTMLButtonElement) => {
+        el.addEventListener('click', this.show);
+      });
+    }
+  }
+
+  updateTriggers() {
+    const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+    triggers.forEach((el: HTMLButtonElement) => {
+      // if already has a click listener, remove it
+      el.removeEventListener('click', this.show);
+      el.addEventListener('click', this.show);
+    });
+  }
+
+  show = (event: Event | undefined = undefined) => {
+    const trigger = event?.target as HTMLButtonElement
+    if (trigger?.disabled) return;
+    this.dialog.show();
+  }
+
+  hide() {
+    this.dialog.hide();
+  }
+
+
+  render() {
+    const src = {
+      'warning': 'priority_high',
+      'error': 'priority_high',
+      'success': 'check',
+      'info': 'help'
+    };
+
+    return html`
+      <slot name="trigger" slot="trigger"></slot>
+      <zn-dialog size="${this.size}" variant="${this.variant}" label=${ifDefined(this.caption)} trigger=${this.trigger}
+                 class=${classMap({
+                   'confirm-dialog': true,
+                   'confirm-dialog--warning': this.type === 'warning',
+                   'confirm-dialog--error': this.type === 'error',
+                   'confirm-dialog--success': this.type === 'success',
+                   'confirm-dialog--info': this.type === 'info',
+                   'confirm-dialog--has-default-slot': this.hasSlotController.test('[default]'),
+                 })}>
+
+        <slot name="announcement-intro" slot="announcement-intro">${this.announcement}</slot>
+
+        ${!this.hideIcon ? html`
+            <zn-icon slot="header-icon" color="${this.type}" src="${src[this.type]}"></zn-icon>`
+          : ''}
+
+        <div class="confirm-dialog__content">
+          ${this.content ? html`${this.content}` : ''}
+          <slot></slot>
+        </div>
+
+        <zn-button outline color="${this.type}" slot="footer" dialog-closer>${this.cancelText}</zn-button>
+        <zn-button color="${this.type}" slot="footer" @click="${this.submitDialog}"> ${this.confirmText}</zn-button>
+
+        <slot name="footer-text" slot="footer-text">${this.footerText}</slot>
+      </zn-dialog>`;
+  }
+
+  submitDialog() {
+    // get the form from the slot
+    let form = this.querySelector('form');
+    if (!form && this.action) {
+      form = document.createElement('form') as HTMLFormElement;
+      form.action = this.action;
+      form.method = 'POST';
+
+      this.querySelectorAll('input').forEach((el: HTMLInputElement) => {
+        form?.appendChild(el.cloneNode() as Node);
+      })
+
+      this.appendChild(form);
+    }
+
+    if (form && form.reportValidity()) {
+      document.dispatchEvent(new CustomEvent('zn-register-element', {
+        detail: {element: form}
+      }))
+      form.requestSubmit();
+      this.hide();
+    }
+  }
+}

package/src/components/confirm/confirm.scss

@@ -0,0 +1,44 @@
+@use "../../wc";
+
+.confirm-dialog {
+  &__content {
+    margin: 0;
+    text-wrap: auto;
+  }
+
+  &::part(footer) {
+    text-align: right;
+  }
+
+  &::part(body) {
+    text-align: left;
+  }
+
+  &--has-default-slot &__content {
+    margin-bottom: var(--zn-spacing-large);
+  }
+
+  &--error::part(title) {
+    --icon-background-color: rgb(var(--zn-color-error), .3);
+    --icon-color: rgb(var(--zn-color-error), 1);
+    --caption-color: rgb(var(--zn-color-error), 1);
+  }
+
+  &--warning::part(title) {
+    --icon-background-color: rgb(var(--zn-color-warning), .3);
+    --icon-color: rgb(var(--zn-color-warning), 1);
+    --caption-color: rgb(var(--zn-color-warning), 1);
+  }
+
+  &--success::part(title) {
+    --icon-background-color: rgb(var(--zn-color-success), .3);
+    --icon-color: rgb(var(--zn-color-success), 1);
+    --caption-color: rgb(var(--zn-color-success), 1);
+  }
+
+  &--info::part(title) {
+    --icon-background-color: rgb(var(--zn-color-info), .3);
+    --icon-color: rgb(var(--zn-color-info), 1);
+    --caption-color: rgb(var(--zn-color-info), 1);
+  }
+}

package/src/components/confirm/confirm.test.ts

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

package/src/components/confirm/index.ts

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