@kubex/zinc 0.0.2 → 1.0.0

package/src/components/select/select.scss

@@ -0,0 +1,325 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+}
+
+/** The popup */
+.select {
+  flex: 1 1 auto;
+  display: inline-flex;
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
+}
+
+.select::part(popup) {
+  z-index: var(--zn-z-index-dropdown);
+}
+
+.select[data-current-placement^='top']::part(popup) {
+  transform-origin: bottom;
+}
+
+.select[data-current-placement^='bottom']::part(popup) {
+  transform-origin: top;
+}
+
+/* Combobox */
+.select__combobox {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  position: relative;
+  align-items: center;
+  justify-content: start;
+  font-family: var(--zn-input-font-family);
+  font-weight: var(--zn-input-font-weight);
+  letter-spacing: var(--zn-input-letter-spacing);
+  box-shadow: var(--zn-shadow-small);
+  vertical-align: middle;
+  overflow: hidden;
+  cursor: pointer;
+  transition: var(--zn-transition-fast) color,
+  var(--zn-transition-fast) border,
+  var(--zn-transition-fast) box-shadow,
+  var(--zn-transition-fast) background-color;
+}
+
+.select__display-input {
+  position: relative;
+  width: 100%;
+  font: inherit;
+  border: none;
+  background: none;
+  color: var(--zn-input-color);
+  cursor: inherit;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.select__display-input::placeholder {
+  color: var(--zn-input-placeholder-color);
+}
+
+.select:not(.select--disabled):hover .select__display-input {
+  color: var(--zn-input-color-hover);
+}
+
+.select__display-input:focus {
+  outline: none;
+}
+
+/* Visually hide the display input when multiple is enabled */
+.select--multiple:not(.select--placeholder-visible) .select__display-input {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.select__value-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  z-index: -1;
+}
+
+.select__tags {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-inline-start: var(--zn-spacing-2x-small);
+}
+
+.select__tags::slotted(zn-chip) {
+  cursor: pointer !important;
+}
+
+.select--disabled .select__tags,
+.select--disabled .select__tags::slotted(zn-chip) {
+  cursor: not-allowed !important;
+}
+
+/* Standard selects */
+.select--standard .select__combobox {
+  background-color: var(--zn-input-background-color);
+  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+}
+
+.select--standard.select--disabled .select__combobox {
+  background-color: var(--zn-input-background-color-disabled);
+  border-color: var(--zn-input-border-color-disabled);
+  color: var(--zn-input-color-disabled);
+  opacity: 0.5;
+  cursor: not-allowed;
+  outline: none;
+}
+
+.select--standard:not(.select--disabled).select--open .select__combobox,
+.select--standard:not(.select--disabled).select--focused .select__combobox {
+  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);
+}
+
+.select--standard:hover:not(.select--disabled) .select__combobox {
+  background-color: var(--zn-input-background-color-hover);
+  border-color: var(--zn-input-border-color-hover);
+}
+
+/* Sizes */
+.select--small .select__combobox {
+  border-radius: var(--zn-input-border-radius-small);
+  font-size: var(--zn-input-font-size-small);
+  min-height: var(--zn-input-height-small);
+  padding-block: 0;
+  padding-inline: var(--zn-input-spacing-small);
+}
+
+.select--small .select__clear {
+  margin-inline-start: var(--zn-input-spacing-small);
+}
+
+.select--small .select__prefix::slotted(*) {
+  margin-inline-end: var(--zn-input-spacing-small);
+}
+
+.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
+  padding-block: 2px;
+  padding-inline-start: 0;
+}
+
+.select--small .select__tags {
+  gap: 2px;
+}
+
+.select--medium .select__combobox {
+  border-radius: var(--zn-input-border-radius-medium);
+  font-size: var(--zn-input-font-size-medium);
+  min-height: var(--zn-input-height-medium);
+  padding-block: 0;
+  padding-inline: var(--zn-input-spacing-medium);
+}
+
+.select--medium .select__clear {
+  margin-inline-start: var(--zn-input-spacing-medium);
+}
+
+.select--medium .select__prefix::slotted(*) {
+  margin-inline-end: var(--zn-input-spacing-medium);
+}
+
+.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
+  padding-inline-start: 0;
+  padding-block: 3px;
+}
+
+.select--medium .select__tags {
+  gap: 3px;
+}
+
+.select--large .select__combobox {
+  border-radius: var(--zn-input-border-radius-large);
+  font-size: var(--zn-input-font-size-large);
+  min-height: var(--zn-input-height-large);
+  padding-block: 0;
+  padding-inline: var(--zn-input-spacing-large);
+}
+
+.select--large .select__clear {
+  margin-inline-start: var(--zn-input-spacing-large);
+}
+
+.select--large .select__prefix::slotted(*) {
+  margin-inline-end: var(--zn-input-spacing-large);
+}
+
+.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
+  padding-inline-start: 0;
+  padding-block: 4px;
+}
+
+.select--large .select__tags {
+  gap: 4px;
+}
+
+/* Pills */
+.select--pill.select--small .select__combobox {
+  border-radius: var(--zn-input-height-small);
+  padding: 0 var(--zn-spacing-large);
+}
+
+.select--pill.select--medium .select__combobox {
+  border-radius: var(--zn-input-height-medium);
+  padding: 0 var(--zn-spacing-large);
+}
+
+.select--pill.select--large .select__combobox {
+  border-radius: var(--zn-input-height-large);
+  padding: 0 var(--zn-spacing-large);
+}
+
+/* Prefix */
+.select__prefix {
+  flex: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--zn-input-icon-color);
+}
+
+/* Clear button */
+.select__clear {
+  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);
+    --icon-color: var(--zn-input-icon-color);
+  }
+}
+
+.select__clear:hover {
+  color: var(--zn-input-icon-color-hover);
+}
+
+.select__clear:focus {
+  outline: none;
+}
+
+/* Expand icon */
+.select__expand-icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  transition: var(--zn-transition-medium) rotate ease;
+  rotate: 0;
+  margin-inline-start: var(--zn-spacing-small);
+
+  zn-icon {
+    --icon-size: var(--zn-font-size-large);
+    --icon-color: var(--zn-input-icon-color);
+  }
+}
+
+.select--open .select__expand-icon {
+  rotate: -180deg;
+}
+
+/* Listbox */
+.select__listbox {
+  display: block;
+  position: relative;
+  font-family: var(--zn-font-sans);
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-normal);
+  box-shadow: var(--zn-shadow-medium);
+  background: var(--zn-panel-background-color);
+  border: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
+  border-radius: var(--zn-border-radius-medium);
+  margin: var(--zn-spacing-x-small) 0;
+  padding-block: var(--zn-spacing-x-small);
+  padding-inline: 0;
+  overflow: auto;
+  overscroll-behavior: none;
+
+  /* Make sure it adheres to the popup's auto size */
+  max-width: var(--auto-size-available-width);
+  max-height: min(500px, var(--auto-size-available-height));
+}
+
+.select__listbox ::slotted(zn-divider) {
+  --spacing: var(--zn-spacing-x-small);
+}
+
+.select__listbox ::slotted(small) {
+  font-size: var(--zn-font-size-x-small);
+  font-weight: var(--zn-font-weight-semibold);
+  line-height: var(--zn-line-height-normal);
+  letter-spacing: var(--zn-letter-spacing-normal);
+  padding-block: var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-2x-large);
+  user-select: none;
+  -webkit-user-select: none;
+}

package/src/components/select/select.test.ts

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

package/src/components/sidebar/index.ts

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

package/src/components/sidebar/sidebar.component.ts

@@ -0,0 +1,98 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './sidebar.scss';
+import {classMap} from "lit/directives/class-map.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/sidebar
+ * @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 ZnSidebar extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({attribute: 'caption', reflect: true}) caption: string;
+  @property({attribute: 'open', type: Boolean, reflect: true}) open: boolean = false;
+  @property({attribute: 'start-scrolled', type: Boolean, reflect: true}) startScrolled: boolean = false;
+  @property({type: Boolean}) wide: boolean = false;
+
+  constructor() {
+    super();
+    this.addEventListener('scroll-to-bottom', () => {
+      setTimeout(this.scrollBottom.bind(this), 200);
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.startScrolled) {
+      this.observerDom();
+      this.scrollBottom();
+    }
+  }
+
+  observerDom() {
+    // observe the DOM for changes
+    const observer = new MutationObserver((_) => {
+      setTimeout(this.scrollBottom.bind(this), 10);
+    });
+
+    observer.observe(this, {childList: true, subtree: true});
+  }
+
+  scrollBottom() {
+    const container = this.shadowRoot?.getElementById('primary-content');
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+    } else {
+      setTimeout(this.scrollBottom.bind(this), 10);
+    }
+  }
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="relative">
+          <div id="primary-content">
+            <slot></slot>
+          </div>
+        </div>
+        <div id="sidebar" class="${classMap({'sidebar': true, 'sidebar--wide': this.wide})}">
+          ${this._expander()}
+          <div id="content">
+            <slot name="side"></slot>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  _expander() {
+    const smpCap = this.caption ?? "Close";
+    return html`
+      <div id="expander" @click="${(e: MouseEvent) => this.handleClick(e)}">
+        <zn-icon src="arrow_downward" library="material"></zn-icon>
+        <span class="close"> Close ${this.caption}</span>
+        <span class="close-sm">${smpCap}</span>
+        <span class="open"> Show ${this.caption}</span>
+      </div>`;
+  }
+
+  handleClick(e: any) {
+    this.open = !this.open;
+    e.stopPropagation();
+  }
+}