@aquera/nile-elements 0.0.1-beta.1

package/src/nile-tooltip/nile-tooltip.ts

@@ -0,0 +1,309 @@
+/**
+ * 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, CSSResultArray, TemplateResult} from 'lit-element';
+import {styles} from './nile-tooltip.css';
+import '../nile-popup/nile-popup';
+import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { html } from 'lit';
+// import { LocalizeController } from '../utilities/localize';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type NilePopup from '../nile-popup/nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
+@customElement('nile-tooltip')
+export class NileTooltip extends NileElement {
+
+	/**
+	 * The styles for Tooltip
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+
+  private hoverTimeout: number;
+  // private readonly localize = new LocalizeController(this);
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.tooltip__body') body: HTMLElement;
+  @query('nile-popup') popup: NilePopup;
+
+  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+  @property() content = '';
+
+  /**
+   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+   * inside of the viewport.
+   */
+  @property() placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'top';
+
+  /** Disables the tooltip so it won't show when triggered. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The distance in pixels from which to offset the tooltip away from its target. */
+  @property({ type: Number }) distance = 8;
+
+  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** The distance in pixels from which to offset the tooltip along its target. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+   * programmatically.
+   */
+  @property() trigger = 'hover focus';
+
+  /**
+   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+   * scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+
+    this.updateComplete.then(() => {
+      this.addEventListener('blur', this.handleBlur, true);
+      this.addEventListener('focus', this.handleFocus, true);
+      this.addEventListener('click', this.handleClick);
+      this.addEventListener('keydown', this.handleKeyDown);
+      this.addEventListener('mouseover', this.handleMouseOver);
+      this.addEventListener('mouseout', this.handleMouseOut);
+    });
+  }
+
+  firstUpdated() {
+    this.body.hidden = !this.open;
+
+    // If the tooltip is visible on init, update its position
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('blur', this.handleBlur, true);
+    this.removeEventListener('focus', this.handleFocus, true);
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('mouseover', this.handleMouseOver);
+    this.removeEventListener('mouseout', this.handleMouseOut);
+  }
+
+  private handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  }
+
+  private handleClick() {
+    if (this.hasTrigger('click')) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+  }
+
+  private handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    // Pressing escape when the target element has focus should dismiss the tooltip
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+    }
+  }
+
+  private handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+    }
+  }
+
+  private handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+    }
+  }
+
+  private hasTrigger(triggerType: string) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+
+      // Show
+      this.emit('nile-show');
+
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: '' });
+      await animateTo(this.popup.popup, keyframes, options);
+
+      this.emit('nile-after-show');
+    } else {
+      // Hide
+      this.emit('nile-hide');
+
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: '' });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.active = false;
+      this.body.hidden = true;
+
+      this.emit('nile-after-hide');
+    }
+  }
+
+  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+
+  /** Shows the tooltip. */
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'nile-after-show');
+  }
+
+  /** Hides the tooltip */
+  async hide() {
+    if (!this.open) {
+      return undefined;
+    }
+
+    this.open = false;
+    return waitForEvent(this, 'nile-after-hide');
+  }
+
+  render() {
+    return html`
+      <nile-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${classMap({
+          tooltip: true,
+          'tooltip--open': this.open
+        })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        arrow
+      >
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        <slot
+          name="content"
+          part="body"
+          id="tooltip"
+          class="tooltip__body"
+          role="tooltip"
+          aria-live=${this.open ? 'polite' : 'off'}
+        >
+          ${this.content}
+        </slot>
+      </nile-popup>
+    `;
+  }
+}
+
+setDefaultAnimation('tooltip.show', {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 150, easing: 'ease' }
+});
+
+setDefaultAnimation('tooltip.hide', {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 150, easing: 'ease' }
+});
+
+export default NileTooltip;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-tooltip': NileTooltip;
+  }
+}

package/src/utilities/animation-registry.ts

@@ -0,0 +1,74 @@
+export interface ElementAnimation {
+  keyframes: Keyframe[];
+  rtlKeyframes?: Keyframe[];
+  options?: KeyframeAnimationOptions;
+}
+
+export interface ElementAnimationMap {
+  [animationName: string]: ElementAnimation;
+}
+
+export interface GetAnimationOptions {
+  /**
+   * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+   * available using getAnimation().
+   */
+  dir: string;
+}
+
+const defaultAnimationRegistry = new Map<string, ElementAnimation>();
+const customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();
+
+function ensureAnimation(animation: ElementAnimation | null) {
+  return animation ?? { keyframes: [], options: { duration: 0 } };
+}
+
+//
+// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either
+// keyframes or rtlKeyframes depending on the specified directionality.
+//
+function getLogicalAnimation(animation: ElementAnimation, dir: string) {
+  if (dir.toLowerCase() === 'rtl') {
+    return {
+      keyframes: animation.rtlKeyframes || animation.keyframes,
+      options: animation.options
+    };
+  }
+
+  return animation;
+}
+
+/**
+ * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
+ * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
+ */
+export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {
+  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
+}
+
+/** Sets a custom animation for the specified element. */
+export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {
+  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });
+}
+
+/** Gets an element's animation. Falls back to the default if no animation is found. */
+export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {
+  const customAnimation = customAnimationRegistry.get(el);
+
+  // Check for a custom animation
+  if (customAnimation?.[animationName]) {
+    return getLogicalAnimation(customAnimation[animationName], options.dir);
+  }
+
+  // Check for a default animation
+  const defaultAnimation = defaultAnimationRegistry.get(animationName);
+  if (defaultAnimation) {
+    return getLogicalAnimation(defaultAnimation, options.dir);
+  }
+
+  // Fall back to an empty animation
+  return {
+    keyframes: [],
+    options: { duration: 0 }
+  };
+}

package/stories/icons.stories.ts

@@ -0,0 +1,50 @@
+import { html, TemplateResult } from 'lit';
+import '../src/nile-button';
+
+export default {
+  title: 'Nile Icons',
+  component: 'nile-icon',
+  argTypes: {
+    name: { control: 'text' },
+    textColor: { control: 'color' },
+  },
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {
+  title?: string;
+  name?: string;
+  textColor?: string;
+  slot?: TemplateResult;
+}
+
+const Template: Story<ArgTypes> = ({
+  title = 'Agents',
+  textColor,
+  name,
+  slot,
+}: ArgTypes) => html`
+  <h1>heading 2 ${name}</h1>
+`;
+
+export const Regular = Template.bind({});
+
+export const CustomTitle = Template.bind({});
+
+CustomTitle.args = {
+  title: 'Agent Icon',
+  name: 'agents',
+};
+
+export const SlottedContent = Template.bind({});
+SlottedContent.args = {
+  slot: html`<p>Slotted content</p>`,
+};
+SlottedContent.argTypes = {
+  slot: { table: { disable: true } },
+};

package/stories/index.stories.ts

@@ -0,0 +1,60 @@
+import { html, TemplateResult } from 'lit';
+import '../src/nile-button';
+
+export default {
+  title: 'NileButton',
+  component: 'nile-button',
+  argTypes: {
+    title: { control: 'text' },
+    counter: { control: 'number' },
+    textColor: { control: 'color' },
+  },
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {
+  name?: string;
+  counter?: number;
+  textColor?: string;
+  slot?: TemplateResult;
+}
+
+const Template: Story<ArgTypes> = ({
+  name = 'Primary',
+  counter = 5,
+  textColor,
+  slot,
+}: ArgTypes) => html`
+  <nile-button
+    style="--nile-elements-text-color: ${textColor || 'black'}"
+    .name=${name}
+    .counter=${counter}
+  >
+    ${slot}
+  </nile-button>
+`;
+
+export const Regular = Template.bind({});
+
+export const CustomTitle = Template.bind({});
+CustomTitle.args = {
+  name: 'Primary',
+};
+
+export const CustomCounter = Template.bind({});
+CustomCounter.args = {
+  counter: 123456,
+};
+
+export const SlottedContent = Template.bind({});
+SlottedContent.args = {
+  slot: html`<p>Slotted content</p>`,
+};
+SlottedContent.argTypes = {
+  slot: { table: { disable: true } },
+};

package/test/nile-elements.test.xts

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { NileElements } from '../src/NileElements.js';
+import '../src/nile-elements.js';
+
+describe('NileElements', () => {
+  it('has a default title "Hey there" and counter 5', async () => {
+    const el = await fixture<NileElements>(html`<nile-elements></nile-elements>`);
+
+    expect(el.title).to.equal('Hey there');
+    expect(el.counter).to.equal(5);
+  });
+
+  it('increases the counter on button click', async () => {
+    const el = await fixture<NileElements>(html`<nile-elements></nile-elements>`);
+    el.shadowRoot!.querySelector('button')!.click();
+
+    expect(el.counter).to.equal(6);
+  });
+
+  it('can override the title via attribute', async () => {
+    const el = await fixture<NileElements>(html`<nile-elements title="attribute title"></nile-elements>`);
+
+    expect(el.title).to.equal('attribute title');
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture<NileElements>(html`<nile-elements></nile-elements>`);
+
+    await expect(el).shadowDom.to.be.accessible();
+  });
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom", "dom.iterable"],
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "strictPropertyInitialization": false,
+    "strictFunctionTypes": false,
+  },
+  "include": ["**/*.ts"]
+}