@aquera/nile-elements 0.0.20 → 0.0.21

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -36,3 +36,6 @@ export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';
 export { NileDialog } from './nile-dialog';
 export { NileErrorNotification } from './nile-error-notification';
+export { NileTabGroup } from './nile-tab-group';
+export { NileTab } from './nile-tab';
+export { NileTabPanel } from './nile-tab-panel';

package/src/nile-calendar/nile-calendar.css.ts

@@ -214,11 +214,8 @@ export const styles = css`
   }
 
   .calendar-switcher {
-    display: flex;
-    align-items: flex-start;
-    gap: 24px;
-    justify-content: space-between;
-    border-bottom: 1px solid #e5e9eb;
+    width: 100%;
+    margin-right: 24px;
   }
 
   .calendar-switch {

package/src/nile-calendar/nile-calendar.ts

@@ -620,6 +620,11 @@ export class NileCalendar extends NileElement {
     this.requestUpdate();
   }
 
+  onTypeChange(event: any) {
+    console.log(event);
+    this.type = event.detail.value;
+  }
+
   /**
    * Render method
    */
@@ -641,22 +646,10 @@ export class NileCalendar extends NileElement {
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
-            <div
-              class="calendar-switch${this.type === 'absolute'
-                ? '__active'
-                : ''}"
-              @click="${() => this.setType('absolute')}"
-            >
-              Absolute
-            </div>
-            <div
-              class="calendar-switch${this.type === 'relative'
-                ? '__active'
-                : ''}"
-              @click="${() => this.setType('relative')}"
-            >
-              Relative
-            </div>
+            <nile-tab-group @nile-tab-show="${this.onTypeChange}">
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
+            </nile-tab-group>
           </div>
 
           <div class="calendar-timezone">

package/src/nile-tab/index.ts

@@ -0,0 +1 @@
+export { NileTab } from './nile-tab';

package/src/nile-tab/nile-tab.css.ts

@@ -0,0 +1,82 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Tab CSS
+ */
+export const styles = css`
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: inline-block;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 8px;
+    color: var(--nile-colors-dark-500);
+    padding: 4px 4px 12px 4px;
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+    transition: 0.2s box-shadow, 0.2s color;
+    font-family: Colfax-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+  }
+
+  .tab:hover:not(.tab--disabled) {
+    color: var(--nile-colors-dark-500);
+  }
+
+  .tab:focus {
+    outline: none;
+  }
+
+  .tab:focus-visible:not(.tab--disabled) {
+    color: var(--nile-colors-primary-600);
+  }
+
+  .tab.tab--active:not(.tab--disabled) {
+    color: var(--nile-colors-primary-600);
+  }
+
+  .tab.tab--closable {
+    padding-inline-end: 4px;
+  }
+
+  .tab.tab--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab__close-button {
+    font-size: 14px;
+    margin-inline-start: 4px;
+  }
+
+  .tab__close-button::part(base) {
+    padding: 3px;
+  }
+
+  @media (forced-colors: active) {
+    .tab.tab--active:not(.tab--disabled) {
+      outline: solid 1px transparent;
+      outline-offset: -3px;
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-tab/nile-tab.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-tab.css';
+
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { query } from 'lit/decorators.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+let id = 0;
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tab
+ *
+ *
+ * @dependency nile-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event nile-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<nile-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+@customElement('nile-tab')
+export class NileTab extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly attrId = ++id;
+  private readonly componentId = `nile-tab-${this.attrId}`;
+
+  @query('.tab') tab: HTMLElement;
+
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  @property({ reflect: true }) panel = '';
+
+  /** Draws the tab in an active state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** Makes the tab closable and shows a close button. */
+  @property({ type: Boolean }) closable = false;
+
+  /** Disables the tab and prevents selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'tab');
+  }
+
+  private handleCloseClick(event: Event) {
+    event.stopPropagation();
+    this.emit('nile-close');
+  }
+
+  @watch('active')
+  handleActiveChange() {
+    this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  /** Sets focus to the tab. */
+  focus(options?: FocusOptions) {
+    this.tab.focus(options);
+  }
+
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+
+  render() {
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          tab: true,
+          'tab--active': this.active,
+          'tab--closable': this.closable,
+          'tab--disabled': this.disabled
+        })}
+        tabindex=${this.disabled ? '-1' : '0'}
+      >
+        <slot></slot>
+        ${this.closable
+          ? html`
+              <nile-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                name="x-lg"
+                library="system"
+                label="close"
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                tabindex="-1"
+              ></nile-icon-button>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+export default NileTab;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-tab': NileTab;
+  }
+}

package/src/nile-tab-group/index.ts

@@ -0,0 +1 @@
+export { NileTabGroup } from './nile-tab-group';

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -0,0 +1,247 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * TabGroup CSS
+ */
+export const styles = css`
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --indicator-color: var(--nile-colors-primary-600);
+    --track-color: #e5e9eb;
+    --track-width: 1px;
+
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+    gap: 24px;
+  }
+
+  .tab-group__indicator {
+    position: absolute;
+    transition: 0.3s translate ease, 0.3s width ease;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    position: relative;
+    padding: 0 10px;
+  }
+
+  .tab-group__body {
+    display: block;
+    overflow: auto;
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+  }
+
+  .tab-group__scroll-button--start {
+    left: 0;
+  }
+
+  .tab-group__scroll-button--end {
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--start {
+    left: auto;
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--end {
+    left: 0;
+    right: auto;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--top .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid 3px var(--indicator-color);
+  }
+
+  .tab-group--top .tab-group__body {
+    order: 2;
+  }
+
+  .tab-group--top ::slotted(nile-tab-panel) {
+    --padding: 10px 0;
+  }
+
+  /*
+   * Bottom
+   */
+
+  .tab-group--bottom {
+    flex-direction: column;
+  }
+
+  .tab-group--bottom .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--bottom .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--bottom .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__indicator {
+    top: calc(-1 * var(--track-width));
+    border-top: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--bottom .tab-group__body {
+    order: 1;
+  }
+
+  .tab-group--bottom ::slotted(nile-tab-panel) {
+    --padding: 10px 0;
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    border-right: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    right: auto;
+    left: calc(-1 * var(--track-width));
+  }
+
+  .tab-group--start .tab-group__body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(nile-tab-panel) {
+    --padding: 0 10px;
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: calc(-1 * var(--track-width));
+    border-inline-start: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    left: auto;
+  }
+
+  .tab-group--end .tab-group__body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(nile-tab-panel) {
+    --padding: 0 10px;
+  }
+`;
+
+export default [styles];