@aquera/nile-elements 0.0.3-9 → 0.0.4-2

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

@@ -1 +1 @@
-{"version":3,"file":"animation-registry.cjs.js","sources":["../../../src/utilities/animation-registry.ts"],"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"],"names":["getLogicalAnimation","animation","dir","toLowerCase","keyframes","rtlKeyframes","options","setDefaultAnimation","animationName","defaultAnimationRegistry","set","duration","ensureAnimation","getAnimation","el","customAnimation","customAnimationRegistry","get","defaultAnimation","Map","WeakMap"],"mappings":"mEA6BA,QAASA,EAAoBC,CAAAA,CAAAA,CAA6BC,CACxD,CAAA,CAAA,MAA0B,QAAtBA,CAAIC,CAAAA,WAAAA,EAAAA,CACC,CACLC,SAAWH,CAAAA,CAAAA,CAAUI,cAAgBJ,CAAUG,CAAAA,SAAAA,CAC/CE,OAASL,CAAAA,CAAAA,CAAUK,SAIhBL,CACT,EAMgB,QAAAM,EAAoBC,CAAAA,CAAAA,CAAuBP,GACzDQ,CAAyBC,CAAAA,GAAAA,CAAIF,CAxB/B,CAAA,SAAyBP,GACvB,MAAOA,EAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAa,CAAEG,SAAW,CAAA,EAAA,CAAIE,QAAS,CAAEK,QAAAA,CAAU,CAC5D,CAAA,CAAA,EAsB8CC,CAAgBX,CAC9D,CAAA,CAAA,UAQgBY,EAAaC,CAAAA,CAAAA,CAAaN,EAAuBF,CAC/D,CAAA,CAAA,GAAMS,EAAkBC,CAAAA,CAAAA,CAAwBC,IAAIH,CAGpD,CAAA,CAAA,GAAIC,UAAAA,YAAAA,EAAkBP,CACpB,CAAA,CAAA,MAAOR,GAAoBe,CAAgBP,CAAAA,CAAAA,CAAAA,CAAgBF,CAAQJ,CAAAA,GAAAA,CAAAA,CAIrE,GAAMgB,EAAmBT,CAAAA,CAAAA,CAAyBQ,IAAIT,CACtD,CAAA,CAAA,MAAIU,GACKlB,CAAoBkB,CAAAA,CAAAA,CAAkBZ,EAAQJ,GAIhD,CAAA,CAAA,CACLE,UAAW,EACXE,CAAAA,OAAAA,CAAS,CAAEK,QAAU,CAAA,CAAA,CAAA,CAEzB,0DAvDMF,EAA2B,GAAIU,IAAAA,GAC/BH,EAA0B,GAAII,QAAAA"}
+{"version":3,"file":"animation-registry.cjs.js","sources":["../../../src/utilities/animation-registry.ts"],"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"],"names":["getLogicalAnimation","animation","dir","toLowerCase","keyframes","rtlKeyframes","options","setDefaultAnimation","animationName","defaultAnimationRegistry","set","duration","ensureAnimation","getAnimation","el","customAnimation","customAnimationRegistry","get","defaultAnimation","Map","WeakMap"],"mappings":"mEA6BA,QAASA,CAAAA,CAAoBC,CAAAA,CAAAA,CAA6BC,CACxD,CAAA,CAAA,MAA0B,QAAtBA,CAAIC,CAAAA,WAAAA,CAAAA,CAAAA,CACC,CACLC,SAAWH,CAAAA,CAAAA,CAAUI,cAAgBJ,CAAUG,CAAAA,SAAAA,CAC/CE,OAASL,CAAAA,CAAAA,CAAUK,SAIhBL,CACT,EAMgB,QAAAM,CAAAA,CAAoBC,CAAAA,CAAAA,CAAuBP,GACzDQ,CAAyBC,CAAAA,GAAAA,CAAIF,CAxB/B,CAAA,SAAyBP,GACvB,MAAOA,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAa,CAAEG,SAAW,CAAA,EAAA,CAAIE,QAAS,CAAEK,QAAAA,CAAU,CAC5D,CAAA,CAAA,EAsB8CC,CAAgBX,CAC9D,CAAA,CAAA,UAQgBY,CAAAA,CAAaC,CAAAA,CAAAA,CAAaN,EAAuBF,CAC/D,CAAA,CAAA,GAAMS,CAAAA,CAAkBC,CAAAA,CAAAA,CAAwBC,IAAIH,CAGpD,CAAA,CAAA,GAAIC,UAAAA,YAAAA,EAAkBP,CACpB,CAAA,CAAA,MAAOR,CAAAA,EAAoBe,CAAgBP,CAAAA,CAAAA,CAAAA,CAAgBF,CAAQJ,CAAAA,GAAAA,CAAAA,CAIrE,GAAMgB,CAAAA,CAAmBT,CAAAA,CAAAA,CAAyBQ,IAAIT,CACtD,CAAA,CAAA,MAAIU,CAAAA,EACKlB,CAAoBkB,CAAAA,CAAAA,CAAkBZ,EAAQJ,GAIhD,CAAA,CAAA,CACLE,UAAW,EACXE,CAAAA,OAAAA,CAAS,CAAEK,QAAU,CAAA,CAAA,CAAA,CAEzB,0DAvDMF,EAA2B,GAAIU,CAAAA,GAAAA,CAAAA,CAAAA,CAC/BH,EAA0B,GAAII,CAAAA,OAAAA,CAAAA,CAAAA"}

package/dist/watch.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(_typeof(input)!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(_typeof(res)!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function t(t,i){var n=_objectSpread({waitUntilFirstUpdate:!1},i);return function(i,s){var o=i.update,c=Array.isArray(t)?t:[t];i.update=function(t){var _this=this;c.forEach(function(i){var o=i;if(t.has(o)){var _i=t.get(o),_c=_this[o];_i!==_c&&(n.waitUntilFirstUpdate&&!_this.hasUpdated||_this[s](_i,_c));}}),o.call(this,t);};};}_export("w",t);return{setters:[],execute:function(){}};});
+System.register([],function(_export,_context){"use strict";function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable;})),t.push.apply(t,o);}return t;}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r));});}return e;}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(_typeof(input)!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(_typeof(res)!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function t(t,i){var n=_objectSpread({waitUntilFirstUpdate:!1},i);return function(i,s){var o=i.update,c=Array.isArray(t)?t:[t];i.update=function(t){var _this=this;c.forEach(function(i){var o=i;if(t.has(o)){var _i=t.get(o),_c=_this[o];_i!==_c&&(n.waitUntilFirstUpdate&&!_this.hasUpdated||_this[s](_i,_c));}}),o.call(this,t);};};}_export("w",t);return{setters:[],execute:function(){}};});
 //# sourceMappingURL=watch.cjs.js.map

package/dist/watch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"watch.cjs.js","sources":["../../src/watch.ts"],"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"],"names":["watch","propertyName","options","resolvedOptions","waitUntilFirstUpdate","proto","decoratedFnName","update","watchedProperties","Array","isArray","changedProps","forEach","property","key","has","oldValue","get","newValue","this","hasUpdated","call"],"mappings":"uvDA6BgB,QAAAA,EAAMC,CAAAA,CAAAA,CAAiCC,CACrD,CAAA,CAAA,GAAMC,EAA0C,gBAC9CC,oBAAsB,CAAA,CAAA,CAAA,EACnBF,CAEL,CAAA,CAAA,MAAO,UAA+BG,CAAAA,CAAkBC,GAEhDC,GAAEA,EAAWF,CAAAA,CAAAA,CAAbE,MAAAA,CACAC,CAAoBC,CAAAA,KAAAA,CAAMC,OAAQT,CAAAA,CAAAA,CAAAA,CAAgBA,CAAe,CAAA,CAACA,CAGxEI,CAAAA,CAAAA,CAAAA,CAAME,MAAS,CAAA,SAA2BI,CACxCH,CAAAA,gBAAAA,CAAAA,CAAkBI,QAAQC,SAAAA,CACxB,CAAA,CAAA,GAAMC,EAAMD,CAAAA,CAAAA,CACZ,GAAIF,CAAAA,CAAaI,GAAID,CAAAA,CAAAA,CAAAA,CAAM,CACzB,GAAME,GAAWL,CAAAA,CAAAA,CAAaM,GAAIH,CAAAA,CAAAA,CAAAA,CAC5BI,EAAWC,CAAAA,KAAAA,CAAKL,GAElBE,EAAaE,GAAAA,EAAAA,GACVf,CAAgBC,CAAAA,oBAAAA,EAAAA,CAAwBe,KAAKC,CAAAA,UAAAA,EAC/CD,KAAKb,CAAAA,CAAAA,CAAAA,CAA8CU,EAAUE,CAAAA,EAAAA,CAAAA,CAGnE,EAGHX,CAAAA,CAAAA,CAAAA,CAAAA,CAAOc,IAAKF,CAAAA,IAAAA,CAAMR,CACpB,CAAA,EAAC,EAEL"}
+{"version":3,"file":"watch.cjs.js","sources":["../../src/watch.ts"],"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"],"names":["watch","propertyName","options","resolvedOptions","_objectSpread","waitUntilFirstUpdate","proto","decoratedFnName","update","watchedProperties","Array","isArray","changedProps","forEach","property","key","has","oldValue","get","newValue","this","hasUpdated","call"],"mappings":"4kDA6BgB,QAAAA,CAAAA,CAAMC,CAAAA,CAAAA,CAAiCC,CACrD,CAAA,CAAA,GAAMC,CAAAA,CAA0C,CAAAC,aAAA,EAC9CC,oBAAsB,CAAA,CAAA,CAAA,EACnBH,CAEL,CAAA,CAAA,MAAO,UAA+BI,CAAAA,CAAkBC,GAEhDC,GAAEA,CAAAA,CAAWF,CAAAA,CAAAA,CAAbE,MAAAA,CACAC,CAAoBC,CAAAA,KAAAA,CAAMC,OAAQV,CAAAA,CAAAA,CAAAA,CAAgBA,CAAe,CAAA,CAACA,CAGxEK,CAAAA,CAAAA,CAAAA,CAAME,MAAS,CAAA,SAA2BI,CACxCH,CAAAA,KAAAA,KAAAA,MAAAA,CAAAA,CAAkBI,QAAQC,SAAAA,CACxB,CAAA,CAAA,GAAMC,CAAAA,CAAMD,CAAAA,CAAAA,CACZ,GAAIF,CAAAA,CAAaI,GAAID,CAAAA,CAAAA,CAAAA,CAAM,CACzB,GAAME,CAAAA,EAAWL,CAAAA,CAAAA,CAAaM,GAAIH,CAAAA,CAAAA,CAAAA,CAC5BI,EAAWC,CAAAA,KAAAA,CAAKL,GAElBE,EAAaE,GAAAA,EAAAA,GACVhB,CAAgBE,CAAAA,oBAAAA,EAAAA,CAAwBe,KAAKC,CAAAA,UAAAA,EAC/CD,KAAKb,CAAAA,CAAAA,CAAAA,CAA8CU,EAAUE,CAAAA,EAAAA,CAAAA,CAGnE,EAGHX,CAAAA,CAAAA,CAAAA,CAAAA,CAAOc,IAAKF,CAAAA,IAAAA,CAAMR,CACpB,CAAA,EAAC,EAEL"}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.3-9",
+  "version": "0.0.4-2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -28,3 +28,4 @@ export { NileDatePicker } from './nile-date-picker';
 export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
+export { NileCalendar } from './nile-calendar';

package/src/nile-calendar/index.ts

@@ -0,0 +1 @@
+export { NileCalendar } from './nile-calendar';

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

@@ -0,0 +1,188 @@
+/**
+ * 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';
+
+/**
+ * DatePicker CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .calendar-container {
+    font-family: Colfax-regular;
+    width: 365px;
+    height: auto;
+    text-align: center;
+    background: white;
+  }
+
+  .calendar-container.with-margin {
+    margin-right: 20px;
+  }
+
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    padding: 22px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .calendar-header__month-navigation {
+    cursor: pointer;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background: #c7ced4;
+  }
+
+  .day-names {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    height: 50px;
+    margin-top: 10px;
+  }
+
+  .day-names,
+  .days {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    height: auto;
+    align-items: center;
+  }
+
+  .days {
+    height: auto;
+  }
+
+  .day {
+    flex-basis: calc(100% / 7);
+    box-sizing: border-box;
+    width: 48px;
+    align-items: center;
+    padding: 10px;
+    height: 32px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .filler {
+    color: grey;
+  }
+
+  .selected-date {
+    color: white;
+    border-radius: 4px;
+    background: #a5d3f3;
+  }
+
+  .calendar-wrapper {
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    width: auto;
+  }
+
+  .selected-date,
+  .range-start,
+  .range-end {
+    border-radius: 4px;
+    background: #a5d3f3;
+    color: white;
+  }
+
+  .range-start {
+    background: #a5d3f3;
+    border-radius: 4px 0 0 4px;
+    color: white;
+  }
+
+  .range-end {
+    background: #a5d3f3;
+    border-radius: 0 4px 4px 0;
+    color: white;
+  }
+
+  .range-middle {
+    background: #a5d3f3;
+    color: white;
+    border-radius: 0;
+  }
+
+  .day.selected {
+    background: #a5d3f3;
+    color: white;
+    border-radius: 4px;
+  }
+
+  .day.in-range {
+    background: #a5d3f3;
+    color: white;
+  }
+
+  .selected-date {
+    color: white;
+    border-radius: 4px;
+    background: #a5d3f3;
+  }
+
+  .base {
+    background-color: white;
+    border-radius: 4px;
+    padding-bottom: 20px;
+    width: 365px;
+  }
+
+  .base__range {
+    width: 730px;
+  }
+
+  .calender-input {
+    padding: 20px;
+    padding-bottom: 0px;
+    background: white;
+  }
+
+  .from {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
+
+  .manual-input {
+    width: 100%;
+  }
+
+  .manual-input-label {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .button-contaner {
+    width: 100%;
+    text-align: right;
+    padding: 10px 0;
+  }
+`;
+
+export default [styles];