@kubex/zinc 0.0.2 → 1.0.0

package/src/components/input/input.scss

@@ -0,0 +1,355 @@
+@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, .input--filled) {
+  background-color: var(--zn-input-background-color-hover);
+  border-color: var(--zn-input-border-color-hover);
+}
+
+.input--filled:hover:not(.input--disabled) {
+  background-color: var(--zn-color-neutral-50);
+  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);
+
+  &:not(.input--x-small) {
+    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+  }
+
+  &.input--x-small {
+    box-shadow: 0 0 0 var(--zn-focus-ring-width-x-small) 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--filled {
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+}
+
+.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);
+}
+
+/*
+ * Size modifiers
+ */
+
+.input--x-small {
+  border-radius: var(--zn-input-border-radius-x-small);
+  font-size: var(--zn-input-font-size-small);
+  height: var(--zn-input-height-x-small);
+}
+
+.input--x-small .input__control {
+  height: calc(var(--zn-input-height-x-small) - var(--zn-input-border-width) * 2);
+  padding: 0 var(--zn-input-spacing-small);
+}
+
+.input--x-small .input__clear,
+.input--x-small .input__password-toggle {
+  width: calc(1em + var(--zn-input-spacing-x-small) * 2);
+}
+
+.input--x-small .input__prefix ::slotted(*),
+.input__prefix-default {
+  margin-inline-start: var(--zn-input-spacing-x-small);
+}
+
+.input--x-small .input__suffix ::slotted(*),
+.input__suffix-default {
+  margin-inline-end: var(--zn-input-spacing-x-small);
+}
+
+.input--x-small .input__suffix ::slotted(zn-button),
+.input--x-small .input__prefix ::slotted(zn-button) {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.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-small);
+}
+
+.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__suffix ::slotted(zn-button),
+.input--large .input__prefix ::slotted(zn-button),
+{
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+/*
+ * Pill modifier
+ */
+
+.input--pill.input--x-small {
+  border-radius: var(--zn-input-height-small);
+  padding: 0 var(--zn-spacing-x-small);
+}
+
+.input--pill.input--small {
+  border-radius: var(--zn-input-height-small);
+  padding: 0 var(--zn-spacing-x-small);
+}
+
+.input--pill.input--medium {
+  border-radius: var(--zn-input-height-medium);
+  padding: 0 var(--zn-spacing-x-small);
+}
+
+.input--pill.input--large {
+  border-radius: var(--zn-input-height-large);
+  padding: 0 var(--zn-spacing-x-small);
+}
+
+/*
+ * Clearable + Password Toggle
+ */
+
+.input__clear:not(.input__clear--visible) {
+  visibility: hidden;
+}
+
+.input__clear,
+.input__password-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--zn-font-size-large);
+  color: var(--zn-input-icon-color);
+  border: none;
+  background: none;
+  padding: 0;
+  transition: var(--zn-transition-fast) color;
+  cursor: pointer;
+
+  zn-icon {
+    --icon-size: var(--zn-font-size-large);
+  }
+}
+
+.input__clear:hover,
+.input__password-toggle:hover {
+  color: var(--zn-input-icon-color-hover);
+}
+
+.input__clear:focus,
+.input__password-toggle:focus {
+  outline: none;
+}
+
+.input--empty .input__clear {
+  visibility: hidden;
+}
+
+/* Don't show the browser's password toggle in Edge */
+::-ms-reveal {
+  display: none;
+}
+
+/* Hide the built-in number spinner */
+.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
+.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+}
+
+.input--no-spin-buttons input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* Replace the -webkit-calendar-picker icon */
+input[type='date']::-webkit-calendar-picker-indicator {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>');
+}

package/src/components/input/input.test.ts

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

package/src/components/item/index.ts

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

package/src/components/item/item.component.ts

@@ -0,0 +1,102 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+
+import styles from './item.scss';
+
+/**
+ * @summary Used for listing items in a description list. Caption on the right, content on the left.
+ * @documentation https://zinc.style/components/item
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - The default slot. Can either be slotted or use the value attribute
+ * @slot actions - Used for adding actions to a zn-item.
+ *
+ * @csspart base - The items base wrapper
+ * @csspart caption - The items caption
+ * @csspart icon - The items icon
+ */
+export default class ZnItem extends ZincElement {
+  static dependencies = {
+    'zn-icon': ZnIcon
+  };
+
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() caption: string;
+
+  @property({type: Boolean}) stacked: boolean;
+
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  @property({attribute: 'edit-on-hover', type: Boolean}) editOnHover: boolean;
+
+  @property() icon: string;
+
+  @property() value: string;
+
+  @property({type: Boolean}) inline: boolean;
+
+  @property({type: Boolean}) grid: boolean;
+
+  @property({type: Boolean, attribute: 'no-padding'}) noPadding: boolean;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'listitem');
+  }
+
+  protected updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+
+    const inlineEdit = this.querySelector('zn-inline-edit');
+    if (inlineEdit) {
+      inlineEdit.setAttribute('size', this.size);
+    }
+  }
+
+  render() {
+    const hasIcon = this.icon && this.icon.length > 0;
+
+    return html`
+      <div
+        class=${classMap({
+          'description-item': true,
+          'description-item--stacked': this.stacked,
+          'description-item--edit-on-hover': this.editOnHover,
+          'description-item--inline': this.inline,
+          'description-item--grid': this.grid,
+          'description-item--small': this.size === 'small',
+          'description-item--medium': this.size === 'medium',
+          'description-item--large': this.size === 'large',
+          'description-item--has-icon': hasIcon,
+          'description-item--no-padding': this.noPadding
+        })}
+        part="base">
+
+        ${this.icon ? html`
+          <div class="description-item__header">
+            <div class="description-item__icon">
+              <zn-icon src="${this.icon}" size="20" part="icon"></zn-icon>
+            </div>
+            <div class="description-item__caption" part="caption">${this.caption}</div>
+          </div>` : html`
+          <div class="description-item__caption" part="caption">${this.caption}</div>`}
+
+        <div class="description-item__content">
+          <div class="description-item__content-inner">
+            <slot>${this.value}</slot>
+          </div>
+          <div class="description-item__action-wrapper">
+            <slot name="actions" class="description-item__actions"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/item/item.scss

@@ -0,0 +1,161 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  container-type: inline-size;
+
+  --zn-item-label-max-width: 300px;
+}
+
+.description-item {
+  display: flex;
+  flex-direction: row;
+  padding: 0 var(--zn-spacing-medium);
+
+  @include wc.container-query(null, md) {
+    --zn-item-label-max-width: 200px;
+  }
+
+  @include wc.container-query(null, smp) {
+    --zn-item-label-max-width: 150px;
+  }
+
+  @include wc.container-query(null, sm) {
+    flex-direction: column;
+    align-items: baseline;
+  }
+
+  &--has-icon {
+    align-items: flex-start !important;
+
+    .description-item__icon {
+      position: relative;
+      line-height: 33px;
+      display: flex;
+      justify-content: center;
+      margin-right: var(--zn-spacing-small);
+      color: rgb(var(--zn-text-heading));
+    }
+  }
+
+  &__header {
+    display: flex;
+    max-width: var(--zn-item-label-max-width);
+    width: 100%;
+
+    .description-item__caption {
+      width: unset;
+      max-width: unset;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    line-height: 30px;
+  }
+
+  &__content-inner {
+    width: 100%;
+  }
+
+  &__caption {
+    font-weight: 500;
+    color: rgb(var(--zn-text-heading));
+    line-height: 33px;
+    max-width: var(--zn-item-label-max-width);
+    width: 100%;
+    flex-shrink: 0;
+
+    @include wc.container-query(null, sm) {
+      line-height: var(--zn-line-height-normal);
+    }
+  }
+
+  &__action-wrapper {
+    display: inline-block;
+  }
+
+  &__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+  }
+
+  // Sizes
+  &--small {
+    &.description-item {
+      padding: var(--zn-spacing-x-small);
+    }
+
+    .description-item__caption, .description-item__content-inner {
+      font-size: var(--zn-font-size-small);
+    }
+
+    @include wc.container-query(null, sm) {
+      gap: var(--zn-spacing-2x-small);
+    }
+  }
+
+  &--stacked {
+    flex-direction: column;
+    align-items: baseline;
+    gap: var(--zn-spacing-2x-small);
+  }
+
+  &--edit-on-hover {
+    ::slotted(zn-inline-edit::part('actions')) {
+      display: none;
+    }
+
+    .description-item__actions {
+      display: none;
+    }
+
+    &:hover {
+      ::slotted(zn-inline-edit::part('actions')) {
+        display: flex;
+      }
+
+      .description-item__actions {
+        display: flex;
+      }
+    }
+  }
+
+  &--inline {
+
+    gap: var(--zn-spacing-small);
+
+    .description-item__header {
+      width: unset;
+      max-width: unset;
+    }
+
+    .description-item__icon {
+      margin-right: 0;
+    }
+
+    .description-item__caption {
+      width: unset;
+      max-width: unset;
+    }
+
+    @include wc.container-query(null, sm) {
+      flex-direction: row;
+      align-items: center;
+      gap: var(--zn-spacing-small);
+    }
+  }
+
+  &--no-padding {
+    padding: 0 !important;
+  }
+
+  &--grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/src/components/item/item.test.ts

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

package/src/components/linked-select/index.ts

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