@aquera/nile-elements 0.0.84 → 0.0.85

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -77,7 +77,8 @@
     "./nile-format-date": "./dist/src/nile-format-date/index.js",
     "./nile-split-panel": "./dist/src/nile-split-panel/index.js",
     "./nile-list": "./dist/src/nile-list/index.js",
-    "./nile-list-item": "./dist/src/nile-list-item/index.js"
+    "./nile-list-item": "./dist/src/nile-list-item/index.js",
+    "./nile-detail": "./dist/src/nile-detail/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -69,4 +69,5 @@ export { NileTree } from './nile-tree';
 export { NileTreeItem } from './nile-tree-item';
 export { NileListItem } from './nile-list-item';
 export { NileList } from './nile-list';
-export { NileDivider } from './nile-divider';
+export { NileDetail } from './nile-detail';
+export { NileDivider } from './nile-divider';

package/src/nile-detail/index.ts

@@ -0,0 +1 @@
+export { NileDetail } from './nile-detail';

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

@@ -0,0 +1,107 @@
+/**
+* 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';
+
+/**
+ * Detail CSS
+ */
+export const styles = css`
+
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  .details {
+    border: solid 1px hsl(240 5.9% 90%);
+    border-radius: 0.25rem;
+    background-color: #FFFFFF;
+    overflow-anchor: none;
+  }
+
+  .details--disabled {
+    opacity: 0.5;
+  }
+
+  .details__header {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: 1rem;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .details__header:focus {
+    outline: none;
+  }
+
+  .details__header:focus-visible {
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
+    outline-offset: calc(1px + 1px);
+  }
+
+  .details--disabled .details__header {
+    cursor: not-allowed;
+  }
+
+  .details--disabled .details__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .details__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .details__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: 250ms rotate ease;
+  }
+
+  .details--open .details__summary-icon {
+    rotate: 90deg;
+  }
+
+  .details--open.details--rtl .details__summary-icon {
+    rotate: -90deg;
+  }
+
+  .details--open slot[name='expand-icon'],
+  .details:not(.details--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .details__body {
+    overflow: hidden;
+  }
+
+  .details__content {
+    display: block;
+    padding: 1rem;
+  }
+`;
+
+export default [styles];

package/src/nile-detail/nile-detail.ts

@@ -0,0 +1,236 @@
+/**
+ * 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 {styles} from './nile-detail.css';
+import NileElement from '../internal/nile-element';
+import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * Nile detail component.
+ *
+ * @tag nile-accordion
+ *
+ */
+@customElement('nile-accordion')
+export class NileDetail extends NileElement {
+
+/**
+ * @summary Details show a brief summary and expand to show additional content.
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The details' main content.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
+ * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
+ *
+ * @event nile-show - Emitted when the details opens.
+ * @event nile-after-show - Emitted after the details opens and all animations are complete.
+ * @event nile-hide - Emitted when the details closes.
+ * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart summary - The container that wraps the summary.
+ * @csspart summary-icon - The container that wraps the expand/collapse icons.
+ * @csspart content - The details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ */
+
+static styles: CSSResultGroup = styles;
+
+
+@query('.details') details: HTMLElement;
+@query('.details__header') header: HTMLElement;
+@query('.details__body') body: HTMLElement;
+@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
+
+/**
+ * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+ * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+ */
+@property({ type: Boolean, reflect: true }) open = false;
+
+/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+@property() summary: string;
+
+/** Disables the details so it can't be toggled. */
+@property({ type: Boolean, reflect: true }) disabled = false;
+
+firstUpdated() {
+  this.body.hidden = !this.open;
+  this.body.style.height = this.open ? 'auto' : '0';
+}
+
+private handleSummaryClick() {
+  if (!this.disabled) {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+
+    this.header.focus();
+  }
+}
+
+private handleSummaryKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+    event.preventDefault();
+    this.hide();
+  }
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+    event.preventDefault();
+    this.show();
+  }
+}
+
+@watch('open', { waitUntilFirstUpdate: true })
+async handleOpenChange() {
+  if (this.open) {
+    // Show
+    const nileShow = this.emit('nile-show', { cancelable: true });
+    if (nileShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+
+    await stopAnimations(this.body);
+    this.body.hidden = false;
+
+    const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });
+    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+    this.body.style.height = 'auto';
+
+    this.emit('nile-after-show');
+  } else {
+    // Hide
+    const nileHide = this.emit('nile-hide', { cancelable: true });
+    if (nileHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+
+    await stopAnimations(this.body);
+
+    const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });
+    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+    this.body.hidden = true;
+    this.body.style.height = 'auto';
+
+    this.emit('nile-after-hide');
+  }
+}
+
+/** Shows the details. */
+async show() {
+  if (this.open || this.disabled) {
+    return undefined;
+  }
+
+  this.open = true;
+  return waitForEvent(this, 'nile-after-show');
+}
+
+/** Hides the details */
+async hide() {
+  if (!this.open || this.disabled) {
+    return undefined;
+  }
+
+  this.open = false;
+  return waitForEvent(this, 'nile-after-hide');
+}
+
+render() {
+  const isRtl = false;
+
+  return html`
+    <div
+      part="base"
+      class=${classMap({
+        details: true,
+        'details--open': this.open,
+        'details--disabled': this.disabled,
+        'details--rtl': isRtl
+      })}
+    >
+      <div
+        part="header"
+        id="header"
+        class="details__header"
+        role="button"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls="content"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.handleSummaryClick}
+        @keydown=${this.handleSummaryKeyDown}
+      >
+        <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+        <span part="summary-icon" class="details__summary-icon">
+          <slot name="expand-icon">
+            <nile-icon name="arrowright"></nile-icon>
+          </slot>
+          <slot name="collapse-icon">
+            <nile-icon name="arrowright"></nile-icon>
+          </slot>
+        </span>
+      </div>
+
+      <div class="details__body" role="region" aria-labelledby="header">
+        <slot part="content" id="content" class="details__content"></slot>
+      </div>
+    </div>
+  `;
+}
+}
+
+setDefaultAnimation('details.show', {
+keyframes: [
+  { height: '0', opacity: '0' },
+  { height: 'auto', opacity: '1' }
+],
+options: { duration: 250, easing: 'linear' }
+});
+
+setDefaultAnimation('details.hide', {
+keyframes: [
+  { height: 'auto', opacity: '1' },
+  { height: '0', opacity: '0' }
+],
+options: { duration: 250, easing: 'linear' }
+});
+
+export default NileDetail;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-accordion': NileDetail;
+  }
+}