@aquera/nile-elements 0.1.38-beta-1.0 → 0.1.38-beta-1.4

package/dist/types/src/nile-tree/nile-tree.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+import NileTreeItem from '../nile-tree-item/nile-tree-item';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
+ *
+ * @event {{ selection: NileTreeItem[] }} nile-selection-change - Emitted when a tree item is selected or deselected.
+ *
+ * @slot - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<nile-icon>`.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<nile-icon>`.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty [--indent-size=var(--nile-spacing-medium)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-guide-color=var(--nile-color-neutral-200)] - The color of the indentation line.
+ * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
+ *  indentation line's starting position.
+ * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
+ * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
+ */
+export declare class NileTree extends NileElement {
+    static styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    expandedIconSlot: HTMLSlotElement;
+    collapsedIconSlot: HTMLSlotElement;
+    /**
+     * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+     * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
+     */
+    selection: 'single' | 'multiple' | 'leaf';
+    private lastFocusedItem;
+    private mutationObserver;
+    private clickTarget;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private getExpandButtonIcon;
+    private initTreeItem;
+    private handleTreeChanged;
+    private syncTreeItems;
+    private selectItem;
+    private getAllTreeItems;
+    private focusItem;
+    private handleKeyDown;
+    private handleClick;
+    handleMouseDown(event: MouseEvent): void;
+    private handleFocusOut;
+    private handleFocusIn;
+    private handleSlotChange;
+    handleSelectionChange(): Promise<void>;
+    /** @internal Returns the list of tree items that are selected in the tree. */
+    get selectedItems(): NileTreeItem[];
+    /** @internal Gets focusable tree items in the tree. */
+    getFocusableItems(): NileTreeItem[];
+    render(): TemplateResult<1>;
+}
+export default NileTree;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-tree': NileTree;
+    }
+}

package/dist/types/src/nile-tree-item/index.d.ts

@@ -0,0 +1 @@
+export { NileTreeItem } from './nile-tree-item';

package/dist/types/src/nile-tree-item/nile-tree-item.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* 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.
+*/
+/**
+ * TreeItem CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/types/src/nile-tree-item/nile-tree-item.d.ts

@@ -0,0 +1,96 @@
+/**
+ * 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 { TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import NileElement from '../internal/nile-element';
+import '../nile-checkbox/nile-checkbox';
+import '../nile-icon';
+import '../nile-spinner/nile-spinner';
+/**
+ * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+ *
+ * @dependency nile-checkbox
+ * @dependency nile-icon
+ * @dependency nile-spinner
+ *
+ * @event nile-expand - Emitted when the tree item expands.
+ * @event nile-after-expand - Emitted after the tree item expands and all animations are complete.
+ * @event nile-collapse - Emitted when the tree item collapses.
+ * @event nile-after-collapse - Emitted after the tree item collapses and all animations are complete.
+ * @event nile-lazy-change - Emitted when the tree item's lazy state changes.
+ * @event nile-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
+ *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
+ *  state and update the tree.
+ *
+ * @slot - The default slot.
+ * @slot expand-icon - The icon to show when the tree item is expanded.
+ * @slot collapse-icon - The icon to show when the tree item is collapsed.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
+ * @csspart item--disabled - Applied when the tree item is disabled.
+ * @csspart item--expanded - Applied when the tree item is expanded.
+ * @csspart item--indeterminate - Applied when the selection is indeterminate.
+ * @csspart item--selected - Applied when the tree item is selected.
+ * @csspart indentation - The tree item's indentation container.
+ * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
+ * @csspart label - The tree item's label.
+ * @csspart children - The container that wraps the tree item's nested children.
+ * @csspart checkbox - The checkbox that shows when using multiselect.
+ * @csspart checkbox__base - The checkbox's exported `base` part.
+ * @csspart checkbox__control - The checkbox's exported `control` part.
+ * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
+ * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
+ * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
+ * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
+ * @csspart checkbox__label - The checkbox's exported `label` part.
+ */
+export declare class NileTreeItem extends NileElement {
+    static styles: CSSResultGroup;
+    static isTreeItem(node: Node): boolean;
+    indeterminate: boolean;
+    isLeaf: boolean;
+    loading: boolean;
+    selectable: boolean;
+    /** Expands the tree item. */
+    expanded: boolean;
+    /** Draws the tree item in a selected state. */
+    selected: boolean;
+    /** Disables the tree item. */
+    disabled: boolean;
+    /** Enables lazy loading behavior. */
+    lazy: boolean;
+    defaultSlot: HTMLSlotElement;
+    childrenSlot: HTMLSlotElement;
+    itemElement: HTMLDivElement;
+    childrenContainer: HTMLDivElement;
+    expandButtonSlot: HTMLSlotElement;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private animateCollapse;
+    private isNestedItem;
+    private handleChildrenSlotChange;
+    protected willUpdate(changedProperties: PropertyValueMap<NileTreeItem> | Map<PropertyKey, unknown>): void;
+    private animateExpand;
+    handleLoadingChange(): void;
+    handleDisabledChange(): void;
+    handleSelectedChange(): void;
+    handleExpandedChange(): void;
+    handleExpandAnimation(): void;
+    handleLazyChange(): void;
+    /** Gets all the nested tree items in this node. */
+    getChildrenItems({ includeDisabled }?: {
+        includeDisabled?: boolean;
+    }): NileTreeItem[];
+    render(): TemplateResult<1>;
+}
+export default NileTreeItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-tree-item': NileTreeItem;
+    }
+}

package/dist/types/src/nile-vertical-stepper-item/index.d.ts

@@ -0,0 +1 @@
+export { NileVerticalStepperItem } from './nile-vertical-stepper-item';

package/dist/types/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* 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.
+*/
+/**
+ * VerticalStepperItem CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/types/src/nile-vertical-stepper-item/nile-vertical-stepper-item.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile vertical-stepper-item component.
+ *
+ * @tag nile-vertical-stepper-item
+ *
+ */
+export declare class NileVerticalStepperItem extends NileElement {
+    title: string;
+    subtitle: string;
+    private contentBelow;
+    private size;
+    private icon;
+    private isFirst;
+    private isLast;
+    private isComplete;
+    private isCurrent;
+    private currentStepValue;
+    private completedStepValue;
+    private calculatedCompletedStepValue;
+    private value;
+    private haveFlex;
+    /**
+     * The styles for nile-vertical-stepper-item
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+    getSvg(): TemplateResult;
+}
+export default NileVerticalStepperItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-vertical-stepper-item': NileVerticalStepperItem;
+    }
+}

package/dist/types/src/slot.d.ts

@@ -0,0 +1,23 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** A reactive controller that determines when slots exist. */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist/types/src/utilities/animation-registry.d.ts

@@ -0,0 +1,24 @@
+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;
+}
+/**
+ * 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 declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+/** Sets a custom animation for the specified element. */
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+/** Gets an element's animation. Falls back to the default if no animation is found. */
+export declare function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;

package/dist/types/src/watch.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.38-beta-1.0",
+  "version": "0.1.38-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -37,6 +37,7 @@
     "./nile-textarea": "./dist/src/nile-textarea/index.js",
     "./nile-date-picker": "./dist/src/nile-date-picker/index.js",
     "./nile-error-message": "./dist/src/nile-error-message/index.js",
+    "./nile-filter-chip": "./dist/src/nile-filter-chip/index.js",
     "./nile-form-error-message": "./dist/src/nile-form-error-message/index.js",
     "./nile-form-help-text": "./dist/src/nile-form-help-text/index.js",
     "./nile-calendar": "./dist/src/nile-calendar/index.js",
@@ -84,7 +85,6 @@
     "./nile-section-message": "./dist/src/nile-section-message/index.js",
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
-    "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js"
   },
   "scripts": {

package/rollup.config.js

@@ -15,24 +15,22 @@ const { LERNA_PACKAGE_NAME } = process.env;
 const PACKAGE_ROOT_PATH = process.cwd();
 
 export default [
+  // ------------------------------------------------------------------------
+  // 1) Monorepo build: glob all .ts under /src → per-file ESM + legacy SystemJS
+  // ------------------------------------------------------------------------
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
-        // This removes `src/` as well as the file extension from each file, so e.g.
-        // src/nested/foo.js becomes nested/foo
-        path.relative(
-          'src',
-          file.slice(0, file.length - path.extname(file).length)
-        ),
-        // This expands the relative paths to absolute paths, so e.g.
-        // src/nested/foo becomes /project/src/nested/foo.js
+        path
+          .relative('src', file)
+          .slice(0, -path.extname(file).length),
         fileURLToPath(new URL(file, import.meta.url)),
       ])
     ),
     external: ['tslib', 'lit', /^lit\/.*/],
     output: [
       {
-        // Modern JS bundles (no JS compilation, ES module output)
+        // Modern (ESM) build
         format: 'es',
         chunkFileNames: '[name]-[hash].esm.js',
         entryFileNames: '[name].esm.js',
@@ -40,7 +38,7 @@ export default [
         sourcemap: false,
       },
       {
-        // Legacy JS bundles (ES5 compilation and SystemJS module output)
+        // Legacy (SystemJS) build
         format: 'esm',
         chunkFileNames: '[name]-[hash].cjs.js',
         entryFileNames: '[name].cjs.js',
@@ -61,6 +59,7 @@ export default [
         ],
       },
     ],
+    preserveEntrySignatures: false,
     onwarn(warning) {
       if (warning.code !== 'THIS_IS_UNDEFINED') {
         console.error(`(!) ${warning.message}`);
@@ -74,6 +73,7 @@ export default [
         'process.env.LIT_DEV_MODE': JSON.stringify('false'),
       }),
       resolve(),
+      commonjs(),
       terser({
         ecma: 2017,
         module: true,
@@ -87,35 +87,30 @@ export default [
       styles(),
       summary(),
     ],
-    preserveEntrySignatures: false,
   },
-  // {
-  //   input: 'src/index.ts',
-  //   output: {
-  //     file: 'dist/index.iife.js',
-  //     format: 'iife',
-  //     name: 'NileElement'
-  //   },
-  //   plugins: [
-  //     typescript(),
-  //     replace({
-  //       'Reflect.decorate': 'undefined',
-  //       'process.env.NODE_ENV': JSON.stringify('production'),
-  //     }),
-  //     resolve(),
-  //     terser({
-  //       ecma: 2017,
-  //       module: true,
-  //       warnings: true,
-  //       mangle: {
-  //         properties: {
-  //           regex: /^__/,
-  //         },
-  //       },
-  //     }),
-  //     styles(),
-  //     summary(),
-  //     commonjs()
-  //   ],
-  // },
+
+  // ------------------------------------------------------------------------
+  // 2) Simple single-entry build: src/index.ts → dist/*.js + types
+  // ------------------------------------------------------------------------
+  {
+    input: 'src/index.ts',
+    output: {
+      dir: 'dist',
+      format: 'es',
+      sourcemap: true,
+      chunkFileNames: '[name]-[hash].js',
+      entryFileNames: '[name].js',
+    },
+    external: [], // add any externals here if needed
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: true,
+        declarationDir: 'dist/types',
+      }),
+      terser(),
+    ],
+  },
 ];

package/src/index.ts

@@ -78,4 +78,4 @@ export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip'
 export { NileFileUpload } from './nile-file-upload';
-export { NileFilePreview } from './nile-file-preview'
+export { NileFilePreview } from './nile-file-preview';

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

@@ -31,31 +31,35 @@ export const styles = css`
   }
 
   .accordian {
-    border-top:solid 1px var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-white-base);
+    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
     overflow-anchor: none;
   }
 
   .accordian--lg{
-    --accordian-text-size:var(--sm-tesx, 14px);
-    --accordian-heading-padding: 16px 12px;
-    --accordian-content-padding: 6px 12px 18px;
+    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-4)) var(--nile-spacing-lg , var(--ng-spacing-3));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-xl , var(--ng-spacing-6));
+    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 
   .accordian--md{
-    --accordian-text-size:var(--sm-tesx, 14px);
-    --accordian-heading-padding: 12px 12px;
-    --accordian-content-padding: 6px 12px 18px;
+    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-lg , var(--ng-spacing-3));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-xl , var(--ng-spacing-6));
+    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 
   .accordian--sm{
-    --accordian-text-size:var(--sm-tesx, 12px);
-    --accordian-heading-padding: 6px 12px;
-    --accordian-content-padding: 6px 12px 12px;
+    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-4)) var(--nile-spacing-lg , var(--ng-spacing-3));
+    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
   
   .accordian {
     font-size: var(--accordian-text-size);
+    font-family: var(--accordion-font-family)
   }
 
   .accordian--disabled {
@@ -64,17 +68,17 @@ export const styles = css`
 
   .accordian__header {
     display: flex;
-    gap:12px;
+    gap:var(--nile-spacing-lg , var(--ng-spacing-3));
     align-items: center;
     border-radius: inherit;
-    font-weight:500;
+    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
     padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
   .accordian__header--dark{
-    background-color:var(--nile-colors-dark-200);
+    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));
   }
 
   .accordian__header--arrow-left{
@@ -86,7 +90,8 @@ export const styles = css`
   }
 
   .accordian__header:focus-visible {
-    outline: solid 3px hsl(200.4, 98%, 39.4%);
+    outline: solid 3px var(--nile-colors-blue-500);
+    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));
     outline-offset: calc(1px + 1px);
   }
 
@@ -131,7 +136,7 @@ export const styles = css`
   }
 
   .accordian__content--arrow-left{
-   margin-left:28px;
+   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-7));  
   }
 `;
 

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -36,6 +36,8 @@ export class NileAutoComplete extends NileElement {
   @property({ type: String }) placeholder: string = 'Type here ..';
 
   @property({ type: Boolean }) noBorder: boolean = false;
+  
+  @property({ type: Boolean }) noOutline: boolean = false;
 
   @property({ type: Boolean }) loading: boolean = false;
 
@@ -70,6 +72,7 @@ export class NileAutoComplete extends NileElement {
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
+          ?no-outline=${this.noOutline}
           .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}