@kubex/zinc 0.0.2 → 1.0.0

package/src/components/absolute-container/index.ts

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

package/src/components/action-bar/action-bar.component.ts

@@ -0,0 +1,41 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {LocalizeController} from '../../utilities/localize';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './action-bar.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/action-bar
+ * @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 ZnActionBar extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  // @ts-expect-error unused property
+  private readonly localize = new LocalizeController(this);
+
+  render() {
+    return html`
+      <div class="action-bar">
+        <div class="action-bar__left">
+          <slot name="menu"></slot>
+        </div>
+        <div class="action-bar__right">
+          <slot name="actions"></slot>
+        </div>
+      </div>`;
+  }
+}

package/src/components/action-bar/action-bar.scss

@@ -0,0 +1,33 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  position: relative;
+}
+
+.action-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  padding: 0;
+  background-color: rgb(var(--zn-panel));
+  justify-content: space-between;
+
+  &__left, &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__right {
+    ::slotted(*) {
+      padding: 0 5px;
+      aspect-ratio: 1 / 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-left: solid 1px rgb(var(--zn-border-color));
+    }
+  }
+}

package/src/components/action-bar/action-bar.test.ts

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

package/src/components/action-bar/index.ts

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

package/src/components/alert/alert.component.ts

@@ -0,0 +1,71 @@
+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 './alert.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/alert
+ * @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 ZnAlert extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: String}) icon: string = '';
+  @property({type: String}) caption: string = '';
+  @property({type: Boolean}) collapse: boolean = false;
+  @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' = 'info';
+  @property({type: String}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  render() {
+    let icon;
+
+    if (this.icon) {
+      if (this.collapse) {
+        icon = this.icon ? html`
+          <zn-icon class="alert-icon" src="${this.icon}" id="xy2" @click="${this.hideAlert}"
+                   style="cursor: pointer"></zn-icon>` : "";
+      } else {
+        icon = this.icon ? html`
+          <zn-icon class="alert-icon" src="${this.icon}" id="xy2"></zn-icon>` : '';
+      }
+    }
+
+    const caption = this.caption ? html`<h6>${this.caption}</h6>` : '';
+
+    return html`
+      <div class=${classMap({
+        wrapper: true,
+        "alert--small": this.size === 'small',
+        "alert--medium": this.size === 'medium',
+        "alert--large": this.size === 'large',
+      })}>
+        ${icon}
+        <div class="content">
+          ${caption}
+          <slot></slot>
+        </div>
+        <div class="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>`;
+  }
+
+  public hideAlert() {
+    this.style.display = "none";
+  }
+}

package/src/components/alert/alert.scss

@@ -0,0 +1,170 @@
+@use "../../wc";
+
+
+:host, .wrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 10px;
+}
+
+:host {
+  background-color: rgba(var(--zn-panel), 0.8);
+}
+
+.alert-icon {
+  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small) 0;
+}
+
+p {
+  margin: 0;
+}
+
+.wrapper {
+  position: relative;
+  border: 1px solid rgb(var(--zn-border-color)) !important;
+  width: 100%;
+  height: 100%;
+
+  &:before {
+    border-radius: 10px;
+    position: absolute;
+    content: '';
+    inset: 0;
+    z-index: -1;
+    backdrop-filter: blur(3px);
+  }
+}
+
+:host([caption]) zn-icon {
+  align-self: flex-start;
+  margin-top: 6px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  text-align: left;
+  padding: 8px;
+
+  > h6 {
+    font-size: inherit;
+    font-weight: 600;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+}
+
+:host .wrapper {
+  h6 {
+    color: rgb(var(--zn-text));
+  }
+
+  border-color: rgb(var(--zn-border-color)) !important;
+  background: rgba(var(--zn-panel), .05);
+}
+
+:host([level="primary"]) .wrapper {
+  h6 {
+    color: rgb(var(--zn-primary));
+  }
+
+  border-color: rgb(var(--zn-primary)) !important;
+  background: rgba(var(--zn-primary), .05);
+
+  zn-icon {
+    --icon-color: rgb(var(--zn-primary));
+  }
+}
+
+:host([level="error"]) .wrapper {
+  h6 {
+    color: rgb(var(--zn-color-error));
+  }
+
+  border-color: rgb(var(--zn-color-error)) !important;
+  background: rgba(var(--zn-color-error), .05);
+
+  zn-icon {
+    --icon-color: rgb(var(--zn-color-error));
+  }
+}
+
+:host([level="info"]) .wrapper {
+  h6 {
+    color: rgb(var(--zn-color-info));
+  }
+
+  border-color: rgb(var(--zn-color-info)) !important;
+  background: rgba(var(--zn-color-info), .05);
+
+  zn-icon {
+    --icon-color: rgb(var(--zn-color-info));
+  }
+}
+
+:host([level="warning"]) .wrapper {
+  h6 {
+    color: rgb(var(--zn-color-warning));
+  }
+
+  border-color: rgb(var(--zn-color-warning)) !important;
+  background: rgba(var(--zn-color-warning), .05);
+
+  zn-icon {
+    --icon-color: rgb(var(--zn-color-warning));
+  }
+}
+
+:host([level="success"]) .wrapper {
+  h6 {
+    color: rgb(var(--zn-color-success));
+  }
+
+  border-color: rgb(var(--zn-color-success)) !important;
+  background: rgba(var(--zn-color-success), .05);
+
+  zn-icon {
+    --icon-color: rgb(var(--zn-color-success));
+  }
+}
+
+
+
+:host([level="note"]) .wrapper {
+  h6 {
+    color: var(--zn-color-gray-800);
+  }
+
+  border-color:  var(--zn-color-gray-500) !important;
+  background:  var(--zn-color-gray-100);
+
+  zn-icon {
+    --icon-color: var(--zn-color-gray-800) ;
+  }
+}
+
+.alert {
+  &--small {
+    padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+    font-size: 90%;
+  }
+
+  &--medium {
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+    font-size: 100%;
+  }
+
+  &--large {
+    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+    font-size: 110%;
+  }
+}

package/src/components/alert/alert.test.ts

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

package/src/components/alert/index.ts

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

package/src/components/bulk-actions/bulk-actions.component.ts

@@ -0,0 +1,229 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {FormControlController} from "../../internal/form";
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './bulk-actions.scss';
+
+export interface CreatedRule {
+  id: string;
+  name: string;
+  value: string;
+}
+
+export type BulkActionData = BulkActionItem[];
+
+export interface BulkActionItem {
+  id: string;
+  name: string;
+  type?: 'bool' | 'boolean' | 'date' | 'number';
+  options?: {
+    [key: string]: string;
+  };
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/bulk-actions
+ * @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 ZnBulkActions extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @query('.bulk-actions') container: HTMLDivElement;
+  @query('.add-rule') addRule: HTMLSelectElement;
+  @query('input#main-input') input: HTMLInputElement;
+
+  @property() name: string;
+  @property() value: PropertyKey;
+  @property({type: Array}) actions: BulkActionData = [];
+
+  private _selectedRules: Map<string, CreatedRule> = new Map<string, CreatedRule>();
+  private _formController: FormControlController = new FormControlController(this, {});
+
+
+  get validationMessage(): string {
+    return '';
+  }
+
+  get validity(): ValidityState {
+    return this.input?.validity;
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this._formController.updateValidity();
+  }
+
+  render() {
+    return html`
+      <div class="${classMap({
+        'bulk-actions': true
+      })}">
+        <select class="add-rule" @change="${this._addRule}">
+          <option value="">Select Filter</option>
+          ${this.actions.map((item: BulkActionItem) => html`
+            <option value="${item.id}">${item.name.charAt(0).toUpperCase() + item.name.slice(1)}</option>`)}
+        </select>
+        <input id="main-input" name="${this.name}" value="${this.value}" type="hidden">
+      </div>
+    `;
+  }
+
+  private _handleChange() {
+    const data: { key: string; value: string }[] = [];
+    [...this._selectedRules].forEach(([, value]) => {
+      data.push({
+        key: value.id,
+        value: value.value
+      });
+    });
+
+    this.value = btoa(JSON.stringify(data));
+  }
+
+  private _addRule(event: Event | null, value: string = "") {
+    const id = value ? value : event ? (event.target as HTMLSelectElement).value : '';
+    if (id === '') return;
+
+    const filter = this.actions.find(item => item.id === id);
+    if (!filter) return;
+
+    const uniqueId = Math.random().toString(36).substring(7);
+    this._selectedRules.set(uniqueId, {
+      id: filter.id,
+      name: filter.name,
+      value: ''
+    });
+
+    const row = document.createElement('div');
+    row.classList.add('query-builder__row');
+    row.id = uniqueId;
+
+    const select = document.createElement('select');
+    this.actions.forEach(item => {
+      const option = document.createElement('option');
+      option.value = item.id;
+      option.text = item.name.charAt(0).toUpperCase() + item.name.slice(1);
+      option.selected = item.id === filter.id;
+      select.appendChild(option);
+    });
+    select.addEventListener('change', (e: Event) => this._changeRule(uniqueId, e));
+    select.classList.add('query-builder__key');
+
+    row.appendChild(select);
+
+    let input: HTMLSelectElement | HTMLInputElement | HTMLDivElement;
+    if (filter.options) {
+      input = document.createElement('select');
+      const options = Object.keys(filter.options);
+      options.forEach((item: string) => {
+        const option = document.createElement('option');
+        option.value = item;
+        option.text = filter.options ? (filter.options[item]) : '';
+        input.appendChild(option);
+      });
+      this._updateValue(uniqueId, {target: input});
+      input.addEventListener('change', (e: Event) => this._updateValue(uniqueId, e));
+    } else if (filter.type === 'bool' || filter.type === 'boolean') {
+      input = document.createElement('select');
+      const option1 = document.createElement('option');
+      option1.value = '1';
+      option1.text = 'True';
+      input.appendChild(option1);
+      const option2 = document.createElement('option');
+      option2.value = '0';
+      option2.text = 'False';
+      input.appendChild(option2);
+      input.addEventListener('change', (e: Event) => this._updateValue(uniqueId, e));
+    } else if (filter.type === 'number') {
+      input = document.createElement('input');
+      input.setAttribute('type', 'number');
+      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+    } else if (filter.type === 'date') {
+      input = document.createElement('input');
+      input.setAttribute('type', 'date');
+      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+    } else {
+      input = document.createElement('input');
+      input.setAttribute('type', 'text');
+      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+    }
+
+    input.classList.add('query-builder__value');
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('query-builder__wrapper');
+    wrapper.appendChild(input);
+    row.appendChild(wrapper);
+
+    const remove = document.createElement('zn-button');
+    remove.setAttribute('icon', 'delete');
+    remove.setAttribute('icon-size', '24');
+    remove.setAttribute('color', 'transparent');
+    remove.setAttribute('size', 'square');
+    remove.addEventListener('click', (e: Event) => this._removeRule(uniqueId, e));
+    remove.classList.add('query-builder__remove');
+    row.appendChild(remove);
+
+    this.container.insertBefore(row, this.addRule);
+    this.addRule.value = '';
+    this._handleChange();
+  }
+
+  private _updateValue(id: string, event: Event | { target: HTMLSelectElement | HTMLInputElement | HTMLDivElement }) {
+    const filter = this._selectedRules.get(id);
+    if (!filter) return;
+
+    const input = event.target as HTMLSelectElement | HTMLInputElement;
+    filter.value = input.value;
+
+    this._selectedRules.set(id, filter);
+    this._handleChange();
+  }
+
+  private _changeRule(id: string, event: Event) {
+    // remove the element from the dom
+    const button = event.target as HTMLSelectElement;
+    button.parentElement?.remove();
+    // recreate the element based on the selected value;
+    this._removeRule(id, event);
+    this._addRule(event);
+  }
+
+  private _removeRule(id: string, event: Event) {
+    this._selectedRules.delete(id);
+    const button = event.target as HTMLButtonElement;
+    button.parentElement?.remove();
+    this._handleChange();
+  }
+
+  checkValidity(): boolean {
+    return this.input.checkValidity();
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this._formController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return this.input.reportValidity();
+  }
+
+  setCustomValidity(message: string): void {
+    this.input.setCustomValidity(message);
+    this._formController.updateValidity();
+  }
+}

package/src/components/bulk-actions/bulk-actions.scss

@@ -0,0 +1,56 @@
+@use "../../wc";
+@use "../../../scss/shared/form-elements";
+
+:host {
+  display: contents;
+
+  --zn-input-bg: var(--zn-panel)
+}
+
+.add-rule {
+  max-width: 200px;
+  margin-bottom: 10px;
+}
+
+.query-builder {
+  display: flex;
+  flex-direction: column;
+
+  zn-button {
+    align-self: flex-end;
+  }
+
+  &__row {
+    display: flex;
+    width: 100%;
+    gap: 10px;
+    padding-bottom: 10px;
+  }
+
+  &__key {
+    max-width: 200px;
+  }
+
+  &__comparator {
+    max-width: 150px;
+  }
+
+  &__value {
+    flex-grow: 1;
+  }
+
+  &__wrapper {
+    width: 100%;
+  }
+
+  &__date {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  input, select {
+    height: 40px;
+  }
+
+}

package/src/components/bulk-actions/bulk-actions.test.ts

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

package/src/components/bulk-actions/index.ts

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