@aquera/nile-elements 0.0.1-beta.1

package/dist/src/utilities/animation-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-registry.js","sourceRoot":"","sources":["../../../src/utilities/animation-registry.ts"],"names":[],"mappings":"AAkBA,MAAM,wBAAwB,GAAG,IAAI,GAAG,EAA4B,CAAC;AACrE,MAAM,uBAAuB,GAAG,IAAI,OAAO,EAAgC,CAAC;AAE5E,SAAS,eAAe,CAAC,SAAkC;IACzD,OAAO,SAAS,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;AAClE,CAAC;AAED,EAAE;AACF,uHAAuH;AACvH,uEAAuE;AACvE,EAAE;AACF,SAAS,mBAAmB,CAAC,SAA2B,EAAE,GAAW;IACnE,IAAI,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;QAC/B,OAAO;YACL,SAAS,EAAE,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,SAAS;YACxD,OAAO,EAAE,SAAS,CAAC,OAAO;SAC3B,CAAC;KACH;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,aAAqB,EAAE,SAAkC;IAC3F,wBAAwB,CAAC,GAAG,CAAC,aAAa,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1E,CAAC;AAED,yDAAyD;AACzD,MAAM,UAAU,YAAY,CAAC,EAAW,EAAE,aAAqB,EAAE,SAAkC;IACjG,uBAAuB,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,uBAAuB,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;AACvH,CAAC;AAED,uFAAuF;AACvF,MAAM,UAAU,YAAY,CAAC,EAAW,EAAE,aAAqB,EAAE,OAA4B;IAC3F,MAAM,eAAe,GAAG,uBAAuB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAExD,+BAA+B;IAC/B,IAAI,eAAe,EAAE,CAAC,aAAa,CAAC,EAAE;QACpC,OAAO,mBAAmB,CAAC,eAAe,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;KACzE;IAED,gCAAgC;IAChC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrE,IAAI,gBAAgB,EAAE;QACpB,OAAO,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;KAC3D;IAED,kCAAkC;IAClC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;KACzB,CAAC;AACJ,CAAC","sourcesContent":["export interface ElementAnimation {\n  keyframes: Keyframe[];\n  rtlKeyframes?: Keyframe[];\n  options?: KeyframeAnimationOptions;\n}\n\nexport interface ElementAnimationMap {\n  [animationName: string]: ElementAnimation;\n}\n\nexport interface GetAnimationOptions {\n  /**\n   * The component's directionality. When set to \"rtl\", `rtlKeyframes` will be preferred over `keyframes` where\n   * available using getAnimation().\n   */\n  dir: string;\n}\n\nconst defaultAnimationRegistry = new Map<string, ElementAnimation>();\nconst customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();\n\nfunction ensureAnimation(animation: ElementAnimation | null) {\n  return animation ?? { keyframes: [], options: { duration: 0 } };\n}\n\n//\n// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either\n// keyframes or rtlKeyframes depending on the specified directionality.\n//\nfunction getLogicalAnimation(animation: ElementAnimation, dir: string) {\n  if (dir.toLowerCase() === 'rtl') {\n    return {\n      keyframes: animation.rtlKeyframes || animation.keyframes,\n      options: animation.options\n    };\n  }\n\n  return animation;\n}\n\n/**\n * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`\n * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.\n */\nexport function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {\n  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));\n}\n\n/** Sets a custom animation for the specified element. */\nexport function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {\n  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });\n}\n\n/** Gets an element's animation. Falls back to the default if no animation is found. */\nexport function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {\n  const customAnimation = customAnimationRegistry.get(el);\n\n  // Check for a custom animation\n  if (customAnimation?.[animationName]) {\n    return getLogicalAnimation(customAnimation[animationName], options.dir);\n  }\n\n  // Check for a default animation\n  const defaultAnimation = defaultAnimationRegistry.get(animationName);\n  if (defaultAnimation) {\n    return getLogicalAnimation(defaultAnimation, options.dir);\n  }\n\n  // Fall back to an empty animation\n  return {\n    keyframes: [],\n    options: { duration: 0 }\n  };\n}\n"]}

package/dist/src/watch.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+declare type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+declare type NonUndefined<A> = A extends undefined ? never : A;
+declare 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/dist/src/watch.js

@@ -0,0 +1,40 @@
+/**
+ * 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 function watch(propertyName, options) {
+    const resolvedOptions = {
+        waitUntilFirstUpdate: false,
+        ...options
+    };
+    return (proto, decoratedFnName) => {
+        // @ts-expect-error - update is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+        // @ts-expect-error - update is a protected property
+        proto.update = function (changedProps) {
+            watchedProperties.forEach(property => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}
+//# sourceMappingURL=watch.js.map

package/dist/src/watch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch.js","sourceRoot":"","sources":["../../src/watch.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,KAAK,CAAC,YAA+B,EAAE,OAAsB;IAC3E,MAAM,eAAe,GAA2B;QAC9C,oBAAoB,EAAE,KAAK;QAC3B,GAAG,OAAO;KACX,CAAC;IACF,OAAO,CAA+B,KAAgB,EAAE,eAAqD,EAAE,EAAE;QAC/G,oDAAoD;QACpD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QACzB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QAEtF,oDAAoD;QACpD,KAAK,CAAC,MAAM,GAAG,UAA2B,YAA8D;YACtG,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACnC,MAAM,GAAG,GAAG,QAA2B,CAAC;gBACxC,IAAI,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACzB,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oBACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;oBAE3B,IAAI,QAAQ,KAAK,QAAQ,EAAE;wBACzB,IAAI,CAAC,eAAe,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,EAAE;4BAC3D,IAAI,CAAC,eAAe,CAA8B,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;yBACzE;qBACF;iBACF;YACH,CAAC,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined<A> = A extends undefined ? never : A;\n\ntype UpdateHandlerFunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\n/**\n * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an\n * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the\n * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n *\n * Usage:\n *\n * @watch('propName')\n * handlePropChange(oldValue, newValue) {\n *   ...\n * }\n */\nexport function watch(propertyName: string | string[], options?: WatchOptions) {\n  const resolvedOptions: Required<WatchOptions> = {\n    waitUntilFirstUpdate: false,\n    ...options\n  };\n  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => {\n    // @ts-expect-error - update is a protected property\n    const { update } = proto;\n    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];\n\n    // @ts-expect-error - update is a protected property\n    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {\n      watchedProperties.forEach(property => {\n        const key = property as keyof ElemClass;\n        if (changedProps.has(key)) {\n          const oldValue = changedProps.get(key);\n          const newValue = this[key];\n\n          if (oldValue !== newValue) {\n            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);\n            }\n          }\n        }\n      });\n\n      update.call(this, changedProps);\n    };\n  };\n}\n"]}

package/dist/stories/button.stories.d.ts

@@ -0,0 +1,70 @@
+import { TemplateResult } from 'lit-html';
+import '../src/nile-button/nile-button';
+import '../src/nile-spinner/nile-spinner';
+import '../src/nile-icon';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            action: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+            action: string;
+        };
+        caret: {
+            control: string;
+            action: string;
+        };
+        disabled: {
+            control: string;
+            action: string;
+        };
+        loading: {
+            control: string;
+            action: string;
+        };
+        outline: {
+            control: string;
+            action: string;
+        };
+        pill: {
+            control: string;
+            action: string;
+        };
+        circle: {
+            control: string;
+            action: string;
+        };
+        type: {
+            control: string;
+            options: string[];
+            action: string;
+        };
+    };
+};
+export default _default;
+interface StoryArgs {
+    variant: 'primary' | 'secondary' | 'tertiary' | 'caution';
+    size: 'small' | 'medium' | 'large';
+    caret: boolean;
+    disabled: boolean;
+    loading: boolean;
+    outline: boolean;
+    pill: boolean;
+    circle: boolean;
+    type: 'button' | 'submit' | 'reset';
+}
+interface Story {
+    (args: StoryArgs): TemplateResult;
+    args?: Partial<StoryArgs>;
+}
+export declare const Default: Story;
+export declare const PrimaryLargeButton: Story;
+export declare const SecondarySmallButton: Story;
+export declare const TertiaryDisabledButton: Story;
+export declare const CautionLoadingButton: Story;

package/dist/stories/button.stories.js

@@ -0,0 +1,73 @@
+import { html } from 'lit-html';
+import '../src/nile-button/nile-button';
+import '../src/nile-spinner/nile-spinner';
+import '../src/nile-icon';
+export default {
+    title: 'Components/NileButton',
+    component: 'nile-button',
+    argTypes: {
+        variant: { control: 'select', options: ['primary', 'secondary', 'tertiary', 'caution'], action: 'variantChange' },
+        size: { control: 'select', options: ['small', 'medium', 'large'], action: 'sizeChange' },
+        caret: { control: 'boolean', action: 'caretChange' },
+        disabled: { control: 'boolean', action: 'disabledChange' },
+        loading: { control: 'boolean', action: 'loadingChange' },
+        outline: { control: 'boolean', action: 'outlineChange' },
+        pill: { control: 'boolean', action: 'pillChange' },
+        circle: { control: 'boolean', action: 'circleChange' },
+        type: { control: 'select', options: ['button', 'submit', 'reset'], action: 'typeChange' },
+    },
+};
+const Template = (args) => {
+    return html `
+    <nile-button
+      variant="${args.variant}"
+      size="${args.size}"
+      ?caret="${args.caret}"
+      ?disabled="${args.disabled}"
+      ?loading="${args.loading}"
+      ?outline="${args.outline}"
+      ?pill="${args.pill}"
+      ?circle="${args.circle}"
+      type="${args.type}"
+    >
+      Button
+    </nile-button>
+  `;
+};
+export const Default = Template.bind({});
+Default.args = {
+    variant: 'primary',
+    size: 'medium',
+    caret: false,
+    disabled: false,
+    loading: false,
+    outline: false,
+    pill: false,
+    circle: false,
+    type: 'button',
+};
+export const PrimaryLargeButton = Template.bind({});
+PrimaryLargeButton.args = {
+    ...Default.args,
+    variant: 'primary',
+    size: 'large',
+};
+export const SecondarySmallButton = Template.bind({});
+SecondarySmallButton.args = {
+    ...Default.args,
+    variant: 'secondary',
+    size: 'small',
+};
+export const TertiaryDisabledButton = Template.bind({});
+TertiaryDisabledButton.args = {
+    ...Default.args,
+    variant: 'tertiary',
+    disabled: true,
+};
+export const CautionLoadingButton = Template.bind({});
+CautionLoadingButton.args = {
+    ...Default.args,
+    variant: 'caution',
+    loading: true,
+};
+//# sourceMappingURL=button.stories.js.map

package/dist/stories/button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../stories/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport '../src/nile-button/nile-button';\nimport '../src/nile-spinner/nile-spinner';\nimport '../src/nile-icon';\n\nexport default {\n  title: 'Components/NileButton',\n  component: 'nile-button',\n  argTypes: {\n    variant: { control: 'select', options: ['primary', 'secondary', 'tertiary', 'caution'], action: 'variantChange' },\n    size: { control: 'select', options: ['small', 'medium', 'large'], action: 'sizeChange' },\n    caret: { control: 'boolean', action: 'caretChange' },\n    disabled: { control: 'boolean', action: 'disabledChange' },\n    loading: { control: 'boolean', action: 'loadingChange' },\n    outline: { control: 'boolean', action: 'outlineChange' },\n    pill: { control: 'boolean', action: 'pillChange' },\n    circle: { control: 'boolean', action: 'circleChange' },\n    type: { control: 'select', options: ['button', 'submit', 'reset'], action: 'typeChange' },\n  },\n};\n\ninterface StoryArgs {\n  variant: 'primary' | 'secondary' | 'tertiary' | 'caution';\n  size: 'small' | 'medium' | 'large';\n  caret: boolean;\n  disabled: boolean;\n  loading: boolean;\n  outline: boolean;\n  pill: boolean;\n  circle: boolean;\n  type: 'button' | 'submit' | 'reset';\n}\n\ninterface Story {\n  (args: StoryArgs): TemplateResult;\n  args?: Partial<StoryArgs>;\n}\n\nconst Template: Story = (args: StoryArgs): TemplateResult => {\n  return html`\n    <nile-button\n      variant=\"${args.variant}\"\n      size=\"${args.size}\"\n      ?caret=\"${args.caret}\"\n      ?disabled=\"${args.disabled}\"\n      ?loading=\"${args.loading}\"\n      ?outline=\"${args.outline}\"\n      ?pill=\"${args.pill}\"\n      ?circle=\"${args.circle}\"\n      type=\"${args.type}\"\n    >\n      Button\n    </nile-button>\n  `;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  variant: 'primary',\n  size: 'medium',\n  caret: false,\n  disabled: false,\n  loading: false,\n  outline: false,\n  pill: false,\n  circle: false,\n  type: 'button',\n};\n\nexport const PrimaryLargeButton = Template.bind({});\nPrimaryLargeButton.args = {\n  ...Default.args,\n  variant: 'primary',\n  size: 'large',\n};\n\nexport const SecondarySmallButton = Template.bind({});\nSecondarySmallButton.args = {\n  ...Default.args,\n  variant: 'secondary',\n  size: 'small',\n};\n\nexport const TertiaryDisabledButton = Template.bind({});\nTertiaryDisabledButton.args = {\n  ...Default.args,\n  variant: 'tertiary',\n  disabled: true,\n};\n\nexport const CautionLoadingButton = Template.bind({});\nCautionLoadingButton.args = {\n  ...Default.args,\n  variant: 'caution',\n  loading: true,\n};\n"]}

package/dist/stories/icons.stories.d.ts

@@ -0,0 +1,29 @@
+import { TemplateResult } from 'lit';
+import '../src/nile-button';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+        };
+        textColor: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    title?: string;
+    name?: string;
+    textColor?: string;
+    slot?: TemplateResult;
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const CustomTitle: Story<ArgTypes>;
+export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/icons.stories.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import '../src/nile-button';
+export default {
+    title: 'Nile Icons',
+    component: 'nile-icon',
+    argTypes: {
+        name: { control: 'text' },
+        textColor: { control: 'color' },
+    },
+};
+const Template = ({ title = 'Agents', textColor, name, slot, }) => 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 } },
+};
+//# sourceMappingURL=icons.stories.js.map

package/dist/stories/icons.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../stories/icons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,QAAQ,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;kBACF,IAAI;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/nile-button';\n\nexport default {\n  title: 'Nile Icons',\n  component: 'nile-icon',\n  argTypes: {\n    name: { control: 'text' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  title?: string;\n  name?: string;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = 'Agents',\n  textColor,\n  name,\n  slot,\n}: ArgTypes) => html`\n  <h1>heading 2 ${name}</h1>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\n\nCustomTitle.args = {\n  title: 'Agent Icon',\n  name: 'agents',\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}

package/dist/stories/index.stories.d.ts

@@ -0,0 +1,33 @@
+import { TemplateResult } from 'lit';
+import '../src/nile-button';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+        };
+        counter: {
+            control: string;
+        };
+        textColor: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    counter?: number;
+    textColor?: string;
+    slot?: TemplateResult;
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const CustomTitle: Story<ArgTypes>;
+export declare const CustomCounter: Story<ArgTypes>;
+export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -0,0 +1,37 @@
+import { html } from 'lit';
+import '../src/nile-button';
+export default {
+    title: 'NileButton',
+    component: 'nile-button',
+    argTypes: {
+        title: { control: 'text' },
+        counter: { control: 'number' },
+        textColor: { control: 'color' },
+    },
+};
+const Template = ({ name = 'Primary', counter = 5, textColor, slot, }) => 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 } },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,CAAC,EACX,SAAS,EACT,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;;yCAEqB,SAAS,IAAI,OAAO;YACjD,IAAI;eACD,OAAO;;MAEhB,IAAI;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/nile-button';\n\nexport default {\n  title: 'NileButton',\n  component: 'nile-button',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  name?: string;\n  counter?: number;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'Primary',\n  counter = 5,\n  textColor,\n  slot,\n}: ArgTypes) => html`\n  <nile-button\n    style=\"--nile-elements-text-color: ${textColor || 'black'}\"\n    .name=${name}\n    .counter=${counter}\n  >\n    ${slot}\n  </nile-button>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\nCustomTitle.args = {\n  name: 'Primary',\n};\n\nexport const CustomCounter = Template.bind({});\nCustomCounter.args = {\n  counter: 123456,\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}

package/dist/stories/loader.stories.d.ts

@@ -0,0 +1,49 @@
+import { TemplateResult } from 'lit-html';
+import '../src/nile-loader/nile-loader';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        height: {
+            control: string;
+            action: string;
+        };
+        width: {
+            control: string;
+            action: string;
+        };
+        position: {
+            control: string;
+            action: string;
+        };
+        margin: {
+            control: string;
+            action: string;
+        };
+    };
+};
+export default _default;
+interface StoryArgs {
+    height: string;
+    width: string;
+    position: string;
+    margin: string;
+}
+export declare const Default: {
+    (args: StoryArgs): TemplateResult<1>;
+    args: {
+        height: string;
+        width: string;
+        position: string;
+        margin: string;
+    };
+};
+export declare const Large: {
+    (args: StoryArgs): TemplateResult<1>;
+    args: {
+        height: string;
+        width: string;
+        position: string;
+        margin: string;
+    };
+};

package/dist/stories/loader.stories.js

@@ -0,0 +1,37 @@
+import { html } from 'lit-html';
+import '../src/nile-loader/nile-loader';
+export default {
+    title: 'Components/NileLoader',
+    component: 'nile-loader',
+    argTypes: {
+        height: { control: 'text', action: 'heightChange' },
+        width: { control: 'text', action: 'widthChange' },
+        position: { control: 'text', action: 'positionChange' },
+        margin: { control: 'text', action: 'marginChange' },
+    },
+};
+const Template = ({ height, width, position, margin }) => {
+    return html `
+    <nile-loader
+      .height="${height}"
+      .width="${width}"
+      .position="${position}"
+      .margin="${margin}"
+    ></nile-loader>
+  `;
+};
+export const Default = (args) => Template(args);
+Default.args = {
+    height: '50',
+    width: '50',
+    position: 'absolute',
+    margin: '',
+};
+export const Large = (args) => Template(args);
+Large.args = {
+    height: '100',
+    width: '100',
+    position: 'absolute',
+    margin: '',
+};
+//# sourceMappingURL=loader.stories.js.map

package/dist/stories/loader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.stories.js","sourceRoot":"","sources":["../../stories/loader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,gCAAgC,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE;QACnD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE;QACjD,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE;QACvD,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE;KACpD;CACF,CAAC;AASF,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAa,EAAqB,EAAE;IACrF,OAAO,IAAI,CAAA;;iBAEI,MAAM;gBACP,KAAK;mBACF,QAAQ;iBACV,MAAM;;GAEpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAe,EAAqB,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9E,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,EAAE;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAe,EAAqB,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC5E,KAAK,CAAC,IAAI,GAAG;IACX,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,EAAE;CACX,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport '../src/nile-loader/nile-loader';\n\nexport default {\n  title: 'Components/NileLoader',\n  component: 'nile-loader',\n  argTypes: {\n    height: { control: 'text', action: 'heightChange' },\n    width: { control: 'text', action: 'widthChange' },\n    position: { control: 'text', action: 'positionChange' },\n    margin: { control: 'text', action: 'marginChange' },\n  },\n};\n\ninterface StoryArgs {\n  height: string;\n  width: string;\n  position: string;\n  margin: string;\n}\n\nconst Template = ({ height, width, position, margin }: StoryArgs): TemplateResult<1> => {\n  return html`\n    <nile-loader\n      .height=\"${height}\"\n      .width=\"${width}\"\n      .position=\"${position}\"\n      .margin=\"${margin}\"\n    ></nile-loader>\n  `;\n};\n\nexport const Default = (args: StoryArgs): TemplateResult<1> => Template(args);\nDefault.args = {\n  height: '50',\n  width: '50',\n  position: 'absolute',\n  margin: '',\n};\n\nexport const Large = (args: StoryArgs): TemplateResult<1> => Template(args);\nLarge.args = {\n  height: '100',\n  width: '100',\n  position: 'absolute',\n  margin: '',\n};\n"]}