@aquera/nile-elements 0.0.63 → 0.0.64

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

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";var n,t;function o(n,t){return"rtl"===t.toLowerCase()?{keyframes:n.rtlKeyframes||n.keyframes,options:n.options}:n;}function r(t,o){n.set(t,function(n){return n!==null&&n!==void 0?n:{keyframes:[],options:{duration:0}};}(o));}function e(r,e,s){var a=t.get(r);if(a!==null&&a!==void 0&&a[e])return o(a[e],s.dir);var i=n.get(e);return i?o(i,s.dir):{keyframes:[],options:{duration:0}};}_export({g:e,s:r});return{setters:[],execute:function(){n=new Map();t=new WeakMap();}};});
+System.register([],function(_export,_context){"use strict";var n,t;function o(n,t){return"rtl"===t.toLowerCase()?{keyframes:n.rtlKeyframes||n.keyframes,options:n.options}:n;}function r(t,o){n.set(t,function(n){return n!==null&&n!==void 0?n:{keyframes:[],options:{duration:0}};}(o));}function e(r,e,s){var a=t.get(r);if(a!==null&&a!==void 0&&a[e])return o(a[e],s.dir);var i=n.get(e);return i?o(i,s.dir):{keyframes:[],options:{duration:0}};}_export({g:e,s:r});return{setters:[],execute:function execute(){n=new Map();t=new WeakMap();}};});
 //# sourceMappingURL=animation-registry.cjs.js.map

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,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"}
+{"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,kEAvDMF,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(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(){}};});
+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(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}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 execute(){}};});
 //# 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","_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"}
+{"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":"4/CA6BgB,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.63",
+  "version": "0.0.64",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -56,3 +56,4 @@ export { NileTableRow } from './nile-table-row';
 export { NileTableBody } from './nile-table-body';
 export { NileTableHeaderItem } from './nile-table-header-item';
 export { NileAvatar } from './nile-avatar';
+export { NilePageHeader } from './nile-page-header';

package/src/internal/string.ts

@@ -0,0 +1,4 @@
+/** Converts the first letter of a string to uppercase */
+export function uppercaseFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}

package/src/nile-drawer/index.ts

@@ -1,221 +1 @@
-/**
- * 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, PropertyValues } from 'lit';
-import {
-  LitElement,
-  html,
-  property,
-  CSSResultArray,
-  TemplateResult,
-} from 'lit-element';
-import { customElement, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './nile-drawer.css';
-
-/**
- * Nile icon component.
- *
- * @tag nile-drawer
- *
- */
-@customElement('nile-drawer')
-export class NileDrawer extends LitElement {
-  static override styles = css`
-    @keyframes slide-from-right {
-      0% {
-        transform: translateX(100%);
-      }
-
-      100% {
-        transform: translateX(0);
-      }
-    }
-    :not(:defined) {
-      visibility: hidden;
-    }
-    :host {
-      box-sizing: border-box;
-      position: fixed;
-      display: none;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 424px;
-      padding: var(--bl-size-xl);
-      padding-top: max(env(safe-area-inset-top), var(--bl-size-xl));
-      padding-right: max(env(safe-area-inset-right), var(--bl-size-xl));
-      padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl));
-      background: var(--bl-color-primary-background);
-      box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
-      transform: translateX(0); //translateX(100%);
-      transition: transform var(--bl-drawer-animation-duration, 0.25s);
-      z-index: 999;
-      background-color: #fff;
-      border-left: 1px solid #e5e5e5;
-    }
-
-    :host([open]) .drawer {
-      transform: translateX(0);
-      animation: slide-from-right var(--bl-drawer-animation-duration, 0.25s);
-      position: fixed;
-      box-shadow: 0px 14px 28px rgb(119 125 130 / 15%);
-    }
-
-    .nds-drawer {
-      box-sizing: border-box;
-      position: fixed;
-      display: flex;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 424px;
-      padding: var(--bl-size-xl);
-      padding-top: max(env(safe-area-inset-top), var(--bl-size-xl));
-      padding-right: max(env(safe-area-inset-right), var(--bl-size-xl));
-      padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl));
-      background: var(--bl-color-primary-background);
-      box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
-      transform: translateX(100%);
-      transition: transform var(--bl-drawer-animation-duration, 0.25s);
-      z-index: 999;
-    }
-
-    iframe {
-      height: 100%;
-      width: 100%;
-      border: none;
-    }
-
-    .container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--bl-size-xl);
-      flex: 1;
-    }
-
-    header {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      gap: var(--bl-size-2xs);
-      background-color: white;
-    }
-
-    header .header-buttons {
-      display: flex;
-      gap: 24px;
-      margin-left: auto;
-    }
-
-    header h2 {
-      font: var(--bl-font-title-1-medium);
-      color: var(--bl-color-secondary);
-      overflow: hidden;
-      margin: 0;
-      padding: 0;
-    }
-
-    .content {
-      flex: 1;
-      overflow-y: scroll;
-    }
-
-    .iframe-content {
-      flex: 1;
-    }
-
-    @media only screen and (max-width: 424px) {
-      :host([open]) .drawer {
-        width: calc(100vw - 24px);
-      }
-    }
-
-    .header-section {
-      width: 100%;
-      background-color: #e5e5e5;
-    }
-    .nds-drawer--closed {
-      display: none;
-    }
-  `;
-
-  /**
-   * Sets drawer open-close status
-   */
-  @property({ type: Boolean, reflect: true })
-  open = false;
-
-  //   private domExistenceSchedule: number;
-
-  private toggleDialogHandler() {
-    if (this.open) {
-      this.domExistence = true;
-      // FIXME: Allow events without payload
-      //   this.onOpen('');
-    } else {
-      // Give some time for exit animation
-      //   this.domExistenceSchedule = window.setTimeout(() => {
-      //     this.domExistence = false;
-      //   }, 1000);
-    }
-  }
-
-  @state() private domExistence = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    window?.addEventListener('nile-drawer-open', event => {
-      if (event.target !== this) this.closeDrawer();
-    });
-  }
-
-  private closeDrawer() {
-    this.open = false;
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('open')) {
-      this.toggleDialogHandler();
-    }
-  }
-
-  get buttonClassMap() {
-    return {
-      'nds-drawer--open': this.open,
-      'nds-drawer--closed': !this.open,
-    };
-  }
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  public render(): TemplateResult {
-    return html`
-      <div class="btn ${classMap(this.buttonClassMap)}">
-        <slot name="header">
-          <div class="header-section">
-            <nile-heading name="Edit Config"></nile-heading>
-          </div>
-        </slot>
-        <slot name="content"></slot>
-        <slot name="footer"></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-drawer': NileDrawer;
-  }
-}
+export { NileDrawer } from './nile-drawer';

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

@@ -1,31 +1,182 @@
 /**
- * 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.
- */
+* 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';
+import {css} from 'lit-element';
 
 /**
  * Drawer CSS
  */
 export const styles = css`
   :host {
-	background-color: var(--nile-alert-color-background-base);
-    padding: var(----nile-spacing-1-x);
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --size: 25rem;
+    --header-spacing: 1.25rem;
+    --body-spacing: 1.25rem;
+    --footer-spacing: 1.25rem;
+
+    display: contents;
+  }
+
+  .drawer {
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .drawer--contained {
+    position: absolute;
+    z-index: initial;
+  }
+
+  .drawer--fixed {
     position: fixed;
-    top: 0px;
-    right: 0px;
-    width: 424px;
-    height: 100vh;
-    background: #ffff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1);
-    transform: translateX(100%);
-    z-index: 999;
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 35%;
+    z-index: 700;
+  }
+
+  .drawer__panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: hsl(0, 0%, 100%);
+    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+    overflow: auto;
+    pointer-events: all;
+  }
+
+  .drawer__panel:focus {
+    outline: none;
+  }
+
+  .drawer--top .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--end .drawer__panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer--bottom .drawer__panel {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--start .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer__header {
+    display: flex;
+  }
+
+  .drawer__title {
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: 1.25rem;
+    line-height: 1.4;
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .drawer__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: 0.25rem;
+    padding: 0 var(--header-spacing);
+  }
+
+  .drawer__header-actions nile-icon-button,
+  .drawer__header-actions ::slotted(nile-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__footer {
+    text-align: right;
+    padding: var(--footer-spacing);
+  }
+
+  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .drawer:not(.drawer--has-footer) .drawer__footer {
+    display: none;
+  }
+
+  .drawer__overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: hsl(240 3.8% 46.1% / 33%);
+    pointer-events: all;
+  }
+
+  .drawer--contained .drawer__overlay {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px hsl(0, 0%, 100%);
+    }
   }
 `;
+
+export default [styles];