@aquera/nile-elements 0.0.1-beta.1

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/index.d.ts

@@ -0,0 +1,17 @@
+export { NileButton } from './nile-button';
+export { NileHeading } from './nile-heading';
+export { NileIcon } from './nile-icon';
+export { NileInput } from './nile-input';
+export { NileSidebar } from './nile-sidebar';
+export { NileMenu } from './nile-menu';
+export { NileBadge } from './nile-badge';
+export { NileDrawer } from './nile-drawer';
+export { NileCheckbox } from './nile-checkbox';
+export { NileRadio } from './nile-radio';
+export { NileRadioGroup } from './nile-radio-group';
+export { NilePopup } from './nile-popup';
+export { NileTooltip } from './nile-tooltip';
+export { NileSlideToggle } from './nile-slide-toggle';
+export { NileLoader } from './nile-loader';
+export { NileProgressBar } from './nile-progress-bar';
+export { NileSpinner } from './nile-spinner';

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/index.js

@@ -0,0 +1,18 @@
+export { NileButton } from './nile-button';
+export { NileHeading } from './nile-heading';
+export { NileIcon } from './nile-icon';
+export { NileInput } from './nile-input';
+export { NileSidebar } from './nile-sidebar';
+export { NileMenu } from './nile-menu';
+export { NileBadge } from './nile-badge';
+export { NileDrawer } from './nile-drawer';
+export { NileCheckbox } from './nile-checkbox';
+export { NileRadio } from './nile-radio';
+export { NileRadioGroup } from './nile-radio-group';
+export { NilePopup } from './nile-popup';
+export { NileTooltip } from './nile-tooltip';
+export { NileSlideToggle } from './nile-slide-toggle';
+export { NileLoader } from './nile-loader';
+export { NileProgressBar } from './nile-progress-bar';
+export { NileSpinner } from './nile-spinner';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\n"]}

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/animate.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+/** Parses a CSS duration and returns the number of milliseconds. */
+export declare function parseDuration(delay: number | string): number;
+/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+ */
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+/**
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+ * element's scrollHeight before the animation.
+ */
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number | null | undefined;
+    composite?: CompositeOperationOrAuto | undefined;
+    easing?: string | undefined;
+    offset?: number | null | undefined;
+}[];

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/animate.js

@@ -0,0 +1,56 @@
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export function animateTo(el, keyframes, options) {
+    return new Promise(resolve => {
+        if (options?.duration === Infinity) {
+            throw new Error('Promise-based animations must be finite.');
+        }
+        const animation = el.animate(keyframes, {
+            ...options,
+            duration: prefersReducedMotion() ? 0 : options.duration
+        });
+        animation.addEventListener('cancel', resolve, { once: true });
+        animation.addEventListener('finish', resolve, { once: true });
+    });
+}
+/** Parses a CSS duration and returns the number of milliseconds. */
+export function parseDuration(delay) {
+    delay = delay.toString().toLowerCase();
+    if (delay.indexOf('ms') > -1) {
+        return parseFloat(delay);
+    }
+    if (delay.indexOf('s') > -1) {
+        return parseFloat(delay) * 1000;
+    }
+    return parseFloat(delay);
+}
+/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+export function prefersReducedMotion() {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    return query.matches;
+}
+/**
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+ */
+export function stopAnimations(el) {
+    return Promise.all(el.getAnimations().map(animation => {
+        return new Promise(resolve => {
+            const handleAnimationEvent = requestAnimationFrame(resolve);
+            animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
+            animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
+            animation.cancel();
+        });
+    }));
+}
+/**
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+ * element's scrollHeight before the animation.
+ */
+export function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
+    return keyframes.map(keyframe => ({
+        ...keyframe,
+        height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height
+    }));
+}
+//# sourceMappingURL=animate.js.map

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sourceRoot":"","sources":["../../../src/internal/animate.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EAAe,EAAE,SAAqB,EAAE,OAAkC;IAClG,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,OAAO,EAAE,QAAQ,KAAK,QAAQ,EAAE;YAClC,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;SAC7D;QAED,MAAM,SAAS,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE;YACtC,GAAG,OAAO;YACV,QAAQ,EAAE,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAQ,CAAC,QAAQ;SACzD,CAAC,CAAC;QAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;AACL,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,aAAa,CAAC,KAAsB;IAClD,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC;IAEvC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;QAC5B,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;KAC1B;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;QAC3B,OAAO,UAAU,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;KACjC;IAED,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;AAC3B,CAAC;AAED,yFAAyF;AACzF,MAAM,UAAU,oBAAoB;IAClC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;IACpE,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAAe;IAC5C,OAAO,OAAO,CAAC,GAAG,CAChB,EAAE,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;QACjC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAE5D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YACjF,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YACjF,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CACH,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,SAAqB,EAAE,gBAAwB;IACrF,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAChC,GAAG,QAAQ;QACX,MAAM,EAAE,QAAQ,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM;KAC/E,CAAC,CAAC,CAAC;AACN,CAAC","sourcesContent":["/**\n * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.\n */\nexport function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {\n  return new Promise(resolve => {\n    if (options?.duration === Infinity) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    const animation = el.animate(keyframes, {\n      ...options,\n      duration: prefersReducedMotion() ? 0 : options!.duration\n    });\n\n    animation.addEventListener('cancel', resolve, { once: true });\n    animation.addEventListener('finish', resolve, { once: true });\n  });\n}\n\n/** Parses a CSS duration and returns the number of milliseconds. */\nexport function parseDuration(delay: number | string) {\n  delay = delay.toString().toLowerCase();\n\n  if (delay.indexOf('ms') > -1) {\n    return parseFloat(delay);\n  }\n\n  if (delay.indexOf('s') > -1) {\n    return parseFloat(delay) * 1000;\n  }\n\n  return parseFloat(delay);\n}\n\n/** Tells if the user has enabled the \"reduced motion\" setting in their browser or OS. */\nexport function prefersReducedMotion() {\n  const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n  return query.matches;\n}\n\n/**\n * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.\n */\nexport function stopAnimations(el: HTMLElement) {\n  return Promise.all(\n    el.getAnimations().map(animation => {\n      return new Promise(resolve => {\n        const handleAnimationEvent = requestAnimationFrame(resolve);\n\n        animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });\n        animation.addEventListener('finish', () => handleAnimationEvent, { once: true });\n        animation.cancel();\n      });\n    })\n  );\n}\n\n/**\n * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the\n * element's scrollHeight before the animation.\n */\nexport function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {\n  return keyframes.map(keyframe => ({\n    ...keyframe,\n    height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height\n  }));\n}\n"]}

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/default-value.d.ts

@@ -0,0 +1,2 @@
+import type { ReactiveElement } from 'lit';
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/default-value.js

@@ -0,0 +1,34 @@
+// @defaultValue decorator
+//
+// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating
+// the observed property.
+//
+// The decorator checks whether the value of the attribute is different from the value of the property and in that case
+// it saves the new value.
+//
+//
+// Usage:
+//
+//  @property({ type: Boolean, reflect: true }) checked = false;
+//
+//  @defaultValue('checked') defaultChecked = false;
+//
+import { defaultConverter } from 'lit';
+export const defaultValue = (propertyName = 'value') => (proto, key) => {
+    const ctor = proto.constructor;
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function (name, old, value) {
+        const options = ctor.getPropertyOptions(propertyName);
+        const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;
+        if (name === attributeName) {
+            const converter = options.converter || defaultConverter;
+            const fromAttribute = typeof converter === 'function' ? converter : converter?.fromAttribute ?? defaultConverter.fromAttribute;
+            const newValue = fromAttribute(value, options.type);
+            if (this[propertyName] !== newValue) {
+                this[key] = newValue;
+            }
+        }
+        attributeChangedCallback.call(this, name, old, value);
+    };
+};
+//# sourceMappingURL=default-value.js.map

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/default-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-value.js","sourceRoot":"","sources":["../../../src/internal/default-value.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,EAAE;AACF,oIAAoI;AACpI,yBAAyB;AACzB,EAAE;AACF,uHAAuH;AACvH,0BAA0B;AAC1B,EAAE;AACF,EAAE;AACF,SAAS;AACT,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,oDAAoD;AACpD,EAAE;AAEF,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAGvC,MAAM,CAAC,MAAM,YAAY,GACvB,CAAC,YAAY,GAAG,OAAO,EAAE,EAAE,CAC3B,CAAC,KAAsB,EAAE,GAAW,EAAE,EAAE;IACtC,MAAM,IAAI,GAAG,KAAK,CAAC,WAAqC,CAAC;IAEzD,MAAM,wBAAwB,GAAG,IAAI,CAAC,SAAS,CAAC,wBAAwB,CAAC;IACzE,IAAI,CAAC,SAAS,CAAC,wBAAwB,GAAG,UAExC,IAAI,EACJ,GAAG,EACH,KAAK;QAEL,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;QACtD,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;QAE/F,IAAI,IAAI,KAAK,aAAa,EAAE;YAC1B,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,gBAAgB,CAAC;YACxD,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,IAAI,gBAAgB,CAAC,aAAa,CAAC;YAE3G,MAAM,QAAQ,GAAY,aAAc,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAE9D,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,QAAQ,EAAE;gBACnC,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;aACtB;SACF;QAED,wBAAwB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// @defaultValue decorator\n//\n// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating\n// the observed property.\n//\n// The decorator checks whether the value of the attribute is different from the value of the property and in that case\n// it saves the new value.\n//\n//\n// Usage:\n//\n//  @property({ type: Boolean, reflect: true }) checked = false;\n//\n//  @defaultValue('checked') defaultChecked = false;\n//\n\nimport { defaultConverter } from 'lit';\nimport type { ReactiveElement } from 'lit';\n\nexport const defaultValue =\n  (propertyName = 'value') =>\n  (proto: ReactiveElement, key: string) => {\n    const ctor = proto.constructor as typeof ReactiveElement;\n\n    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;\n    ctor.prototype.attributeChangedCallback = function (\n      this: ReactiveElement & { [name: string]: unknown },\n      name,\n      old,\n      value\n    ) {\n      const options = ctor.getPropertyOptions(propertyName);\n      const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;\n\n      if (name === attributeName) {\n        const converter = options.converter || defaultConverter;\n        const fromAttribute =\n          typeof converter === 'function' ? converter : converter?.fromAttribute ?? defaultConverter.fromAttribute;\n\n        const newValue: unknown = fromAttribute!(value, options.type);\n\n        if (this[propertyName] !== newValue) {\n          this[key] = newValue;\n        }\n      }\n\n      attributeChangedCallback.call(this, name, old, value);\n    };\n  };\n"]}

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/event.d.ts

@@ -0,0 +1,2 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/event.js

@@ -0,0 +1,13 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export function waitForEvent(el, eventName) {
+    return new Promise(resolve => {
+        function done(event) {
+            if (event.target === el) {
+                el.removeEventListener(eventName, done);
+                resolve();
+            }
+        }
+        el.addEventListener(eventName, done);
+    });
+}
+//# sourceMappingURL=event.js.map

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event.js","sourceRoot":"","sources":["../../../src/internal/event.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,MAAM,UAAU,YAAY,CAAC,EAAe,EAAE,SAAiB;IAC7D,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QACjC,SAAS,IAAI,CAAC,KAAY;YACxB,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;gBACvB,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;gBACxC,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QAED,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */\nexport function waitForEvent(el: HTMLElement, eventName: string) {\n  return new Promise<void>(resolve => {\n    function done(event: Event) {\n      if (event.target === el) {\n        el.removeEventListener(eventName, done);\n        resolve();\n      }\n    }\n\n    el.addEventListener(eventName, done);\n  });\n}\n"]}

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/form.d.ts

@@ -0,0 +1,73 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import type { NileButton } from '../nile-button';
+export declare const formCollections: WeakMap<HTMLFormElement, Set<NileFormControl>>;
+export interface FormControlControllerOptions {
+    /** A function that returns the form containing the form control. */
+    form: (input: NileFormControl) => HTMLFormElement | null;
+    /** A function that returns the form control's name, which will be submitted with the form data. */
+    name: (input: NileFormControl) => string;
+    /** A function that returns the form control's current value. */
+    value: (input: NileFormControl) => unknown | unknown[];
+    /** A function that returns the form control's default value. */
+    defaultValue: (input: NileFormControl) => unknown | unknown[];
+    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+    disabled: (input: NileFormControl) => boolean;
+    /**
+     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+     * prevent submission and trigger the browser's constraint violation warning.
+     */
+    reportValidity: (input: NileFormControl) => boolean;
+    /** A function that sets the form control's value */
+    setValue: (input: NileFormControl, value: unknown) => void;
+    /**
+     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
+     * states such as user-valid and user-invalid.user interacted validity states. */
+    assumeInteractionOn: string[];
+}
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+export declare class FormControlController implements ReactiveController {
+    host: NileFormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: ReactiveControllerHost & NileFormControl, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter?: HTMLInputElement | NileButton): void;
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter?: HTMLInputElement | NileButton): void;
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid: boolean): void;
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity(): void;
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
+     * If the `sl-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `sl-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/internal/form.js

@@ -0,0 +1,326 @@
+//
+// We store a WeakMap of forms + controls so we can keep references to all Nile controls within a given form. As
+// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is
+// added and removed from the form's set, respectively.
+//
+export const formCollections = new WeakMap();
+//
+// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
+// restore the original behavior when they disconnect.
+//
+const reportValidityOverloads = new WeakMap();
+//
+// We store a Set of controls that users have interacted with. This allows us to determine the interaction state
+// without littering the DOM with additional data attributes.
+//
+const userInteractedControls = new WeakSet();
+//
+// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.
+//
+const interactions = new WeakMap();
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+export class FormControlController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this.options = {
+            form: input => {
+                // If there's a form attribute, use it to find the target form by id
+                if (input.hasAttribute('form') && input.getAttribute('form') !== '') {
+                    const root = input.getRootNode();
+                    const formId = input.getAttribute('form');
+                    if (formId) {
+                        return root.getElementById(formId);
+                    }
+                }
+                return input.closest('form');
+            },
+            name: input => input.name,
+            value: input => input.value,
+            defaultValue: input => input.defaultValue,
+            disabled: input => input.disabled ?? false,
+            reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
+            setValue: (input, value) => (input.value = value),
+            assumeInteractionOn: ['sl-input'],
+            ...options
+        };
+        this.handleFormData = this.handleFormData.bind(this);
+        this.handleFormSubmit = this.handleFormSubmit.bind(this);
+        this.handleFormReset = this.handleFormReset.bind(this);
+        this.reportFormValidity = this.reportFormValidity.bind(this);
+        this.handleInteraction = this.handleInteraction.bind(this);
+    }
+    hostConnected() {
+        const form = this.options.form(this.host);
+        if (form) {
+            this.attachForm(form);
+        }
+        // Listen for interactions
+        interactions.set(this.host, []);
+        this.options.assumeInteractionOn.forEach(event => {
+            this.host.addEventListener(event, this.handleInteraction);
+        });
+    }
+    hostDisconnected() {
+        this.detachForm();
+        // Clean up interactions
+        interactions.delete(this.host);
+        this.options.assumeInteractionOn.forEach(event => {
+            this.host.removeEventListener(event, this.handleInteraction);
+        });
+    }
+    hostUpdated() {
+        const form = this.options.form(this.host);
+        // Detach if the form no longer exists
+        if (!form) {
+            this.detachForm();
+        }
+        // If the form has changed, reattach it
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+        if (this.host.hasUpdated) {
+            this.setValidity(this.host.validity.valid);
+        }
+    }
+    attachForm(form) {
+        if (form) {
+            this.form = form;
+            // Add this element to the form's collection
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form).add(this.host);
+            }
+            else {
+                formCollections.set(this.form, new Set([this.host]));
+            }
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+            this.form.addEventListener('reset', this.handleFormReset);
+            // Overload the form's reportValidity() method so it looks at nile form controls
+            if (!reportValidityOverloads.has(this.form)) {
+                reportValidityOverloads.set(this.form, this.form.reportValidity);
+                this.form.reportValidity = () => this.reportFormValidity();
+            }
+        }
+        else {
+            this.form = undefined;
+        }
+    }
+    detachForm() {
+        if (this.form) {
+            // Remove this element from the form's collection
+            formCollections.get(this.form)?.delete(this.host);
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form.removeEventListener('reset', this.handleFormReset);
+            // Remove the overload and restore the original method
+            if (reportValidityOverloads.has(this.form)) {
+                this.form.reportValidity = reportValidityOverloads.get(this.form);
+                reportValidityOverloads.delete(this.form);
+            }
+        }
+        this.form = undefined;
+    }
+    handleFormData(event) {
+        const disabled = this.options.disabled(this.host);
+        const name = this.options.name(this.host);
+        const value = this.options.value(this.host);
+        // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
+        // injecting the name/value on a temporary button, so we can just skip them here.
+        const isButton = this.host.tagName.toLowerCase() === 'sl-button';
+        if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
+            if (Array.isArray(value)) {
+                value.forEach(val => {
+                    event.formData.append(name, val.toString());
+                });
+            }
+            else {
+                event.formData.append(name, value.toString());
+            }
+        }
+    }
+    handleFormSubmit(event) {
+        const disabled = this.options.disabled(this.host);
+        const reportValidity = this.options.reportValidity;
+        // Update the interacted state for all controls when the form is submitted
+        if (this.form && !this.form.noValidate) {
+            formCollections.get(this.form)?.forEach(control => {
+                this.setUserInteracted(control, true);
+            });
+        }
+        if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    handleFormReset() {
+        this.options.setValue(this.host, this.options.defaultValue(this.host));
+        this.setUserInteracted(this.host, false);
+        interactions.set(this.host, []);
+    }
+    handleInteraction(event) {
+        const emittedEvents = interactions.get(this.host);
+        if (!emittedEvents.includes(event.type)) {
+            emittedEvents.push(event.type);
+        }
+        // Mark it as user-interacted as soon as all associated events have been emitted
+        if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+            this.setUserInteracted(this.host, true);
+        }
+    }
+    reportFormValidity() {
+        //
+        // Nile form controls work hard to act like regular form controls. They support the Constraint Validation API
+        // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
+        // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
+        // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
+        //
+        // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
+        // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
+        // be necessary once we can use ElementInternals.
+        //
+        // Note that we're also honoring the form's novalidate attribute.
+        //
+        if (this.form && !this.form.noValidate) {
+            // This seems sloppy, but checking all elements will cover native inputs, Nile inputs, and other custom
+            // elements that support the constraint validation API.
+            const elements = this.form.querySelectorAll('*');
+            for (const element of elements) {
+                if (typeof element.reportValidity === 'function') {
+                    if (!element.reportValidity()) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    setUserInteracted(el, hasInteracted) {
+        if (hasInteracted) {
+            userInteractedControls.add(el);
+        }
+        else {
+            userInteractedControls.delete(el);
+        }
+        el.requestUpdate();
+    }
+    doAction(type, submitter) {
+        if (this.form) {
+            const button = document.createElement('button');
+            button.type = type;
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            // Pass name, value, and form attributes through to the temporary button
+            if (submitter) {
+                button.name = submitter.name;
+                button.value = submitter.value;
+                ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {
+                    if (submitter.hasAttribute(attr)) {
+                        button.setAttribute(attr, submitter.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm() {
+        return this.form ?? null;
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter) {
+        this.doAction('reset', submitter);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction('submit', submitter);
+    }
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid) {
+        const host = this.host;
+        const hasInteracted = Boolean(userInteractedControls.has(host));
+        const required = Boolean(host.required);
+        //
+        // We're mapping the following "states" to data attributes. In the future, we can use ElementInternals.states to
+        // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.
+        //
+        //
+        host.toggleAttribute('data-required', required);
+        host.toggleAttribute('data-optional', !required);
+        host.toggleAttribute('data-invalid', !isValid);
+        host.toggleAttribute('data-valid', isValid);
+        host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
+        host.toggleAttribute('data-user-valid', isValid && hasInteracted);
+    }
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity() {
+        const host = this.host;
+        this.setValidity(host.validity.valid);
+    }
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
+     * If the `sl-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `sl-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent) {
+        const slInvalidEvent = new CustomEvent('sl-invalid', {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail: {}
+        });
+        if (!originalInvalidEvent) {
+            slInvalidEvent.preventDefault();
+        }
+        if (!this.host.dispatchEvent(slInvalidEvent)) {
+            originalInvalidEvent?.preventDefault();
+        }
+    }
+}
+/*
+ * Predefined common validity states.
+ * All of them are read-only.
+ */
+// A validity state object that represents `valid`
+export const validValidityState = Object.freeze({
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valid: true,
+    valueMissing: false
+});
+// A validity state object that represents `value missing`
+export const valueMissingValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    valueMissing: true
+});
+// A validity state object that represents a custom error
+export const customErrorValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    customError: true
+});
+//# sourceMappingURL=form.js.map