@aquera/nile-elements 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/README.md +19 -0
  2. package/demo/nxtgen-classes.css +2 -2
  3. package/demo/nxtgen-properties.css +2 -2
  4. package/demo/nxtgen-utilities.css +4 -4
  5. package/demo/nxtgen.css +2 -2
  6. package/dist/index.cjs.js +1 -1
  7. package/dist/index.esm.js +1 -1
  8. package/dist/index.js +1120 -674
  9. package/dist/nile-empty-state/nile-empty-state.cjs.js +1 -1
  10. package/dist/nile-empty-state/nile-empty-state.cjs.js.map +1 -1
  11. package/dist/nile-empty-state/nile-empty-state.css.cjs.js +1 -1
  12. package/dist/nile-empty-state/nile-empty-state.css.cjs.js.map +1 -1
  13. package/dist/nile-empty-state/nile-empty-state.css.esm.js +129 -6
  14. package/dist/nile-empty-state/nile-empty-state.esm.js +45 -31
  15. package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
  16. package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
  17. package/dist/nile-pagination/nile-pagination.esm.js +25 -25
  18. package/dist/nile-segmented-progress-bar/index.cjs.js +2 -0
  19. package/dist/nile-segmented-progress-bar/index.cjs.js.map +1 -0
  20. package/dist/nile-segmented-progress-bar/index.esm.js +1 -0
  21. package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.cjs.js +2 -0
  22. package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.cjs.js.map +1 -0
  23. package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.css.cjs.js +2 -0
  24. package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.css.cjs.js.map +1 -0
  25. package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.css.esm.js +243 -0
  26. package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.esm.js +69 -0
  27. package/dist/nile-wysiwyg-editor/engine/commands.cjs.js +1 -1
  28. package/dist/nile-wysiwyg-editor/engine/commands.cjs.js.map +1 -1
  29. package/dist/nile-wysiwyg-editor/engine/commands.esm.js +1 -1
  30. package/dist/nile-wysiwyg-editor/engine/create-state.cjs.js +1 -1
  31. package/dist/nile-wysiwyg-editor/engine/create-state.esm.js +1 -1
  32. package/dist/nile-wysiwyg-editor/engine/index.cjs.js +1 -1
  33. package/dist/nile-wysiwyg-editor/engine/index.esm.js +1 -1
  34. package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.cjs.js +1 -1
  35. package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.cjs.js.map +1 -1
  36. package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.esm.js +1 -1
  37. package/dist/nile-wysiwyg-editor/index.cjs.js +1 -1
  38. package/dist/nile-wysiwyg-editor/index.esm.js +1 -1
  39. package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.cjs.js +1 -1
  40. package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.esm.js +1 -1
  41. package/dist/nile-wysiwyg-editor/ui/code-block-menu.cjs.js +1 -1
  42. package/dist/nile-wysiwyg-editor/ui/code-block-menu.esm.js +1 -1
  43. package/dist/nile-wysiwyg-editor/ui/source-view.cjs.js +1 -1
  44. package/dist/nile-wysiwyg-editor/ui/source-view.esm.js +1 -1
  45. package/dist/src/index.d.ts +2 -0
  46. package/dist/src/index.js +1 -0
  47. package/dist/src/index.js.map +1 -1
  48. package/dist/src/nile-empty-state/nile-empty-state.css.js +127 -4
  49. package/dist/src/nile-empty-state/nile-empty-state.css.js.map +1 -1
  50. package/dist/src/nile-empty-state/nile-empty-state.d.ts +35 -5
  51. package/dist/src/nile-empty-state/nile-empty-state.js +159 -42
  52. package/dist/src/nile-empty-state/nile-empty-state.js.map +1 -1
  53. package/dist/src/nile-empty-state/nile-empty-state.test.d.ts +1 -0
  54. package/dist/src/nile-empty-state/nile-empty-state.test.js +186 -15
  55. package/dist/src/nile-empty-state/nile-empty-state.test.js.map +1 -1
  56. package/dist/src/nile-pagination/nile-pagination.js +5 -5
  57. package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
  58. package/dist/src/nile-segmented-progress-bar/index.d.ts +2 -0
  59. package/dist/src/nile-segmented-progress-bar/index.js +2 -0
  60. package/dist/src/nile-segmented-progress-bar/index.js.map +1 -0
  61. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.d.ts +9 -0
  62. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.js +252 -0
  63. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.js.map +1 -0
  64. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.d.ts +135 -0
  65. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.js +373 -0
  66. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.js.map +1 -0
  67. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.d.ts +1 -0
  68. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.js +961 -0
  69. package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.js.map +1 -0
  70. package/dist/src/version.js +1 -1
  71. package/dist/src/version.js.map +1 -1
  72. package/dist/tsconfig.tsbuildinfo +1 -1
  73. package/dist/xml-09119317.cjs.js +2 -0
  74. package/dist/xml-09119317.cjs.js.map +1 -0
  75. package/dist/{xml-25c4108a.esm.js → xml-9bf771b3.esm.js} +1 -1
  76. package/package.json +2 -1
  77. package/src/index.ts +5 -0
  78. package/src/nile-empty-state/nile-empty-state.css.ts +127 -4
  79. package/src/nile-empty-state/nile-empty-state.test.ts +192 -15
  80. package/src/nile-empty-state/nile-empty-state.ts +195 -34
  81. package/src/nile-pagination/nile-pagination.ts +5 -5
  82. package/src/nile-segmented-progress-bar/index.ts +5 -0
  83. package/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.ts +254 -0
  84. package/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.ts +1298 -0
  85. package/src/nile-segmented-progress-bar/nile-segmented-progress-bar.ts +437 -0
  86. package/vscode-html-custom-data.json +192 -16
  87. package/dist/xml-90fd974e.cjs.js +0 -2
  88. package/dist/xml-90fd974e.cjs.js.map +0 -1
@@ -1,2 +1,2 @@
1
- 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);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","./nile-empty-state.css.cjs.js","../internal/nile-element.cjs.js","lit/directives/if-defined.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,i,s,e,o,a,n,l,r,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,c;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}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 _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.html;s=_lit.nothing;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;},function(_nileEmptyStateCssCjsJs){n=_nileEmptyStateCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_litDirectivesIfDefinedJs){r=_litDirectivesIfDefinedJs.ifDefined;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_l){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.size="md",_this.variant="tonal",_this.icon="var(--nile-icon-error, var(--ng-icon-x-circle))",_this.grayscale=!1,_this.text="Empty State",_this.subText="No Data",_this.svgIconSize=40;return _this;}_inherits(c,_l);return _createClass(c,[{key:"render",value:function render(){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div part=\"container\" class=\"","\">\n <div part=\"body\" class=\"","\">\n\n ","\n\n ","\n\n ","\n\n <div part=\"text-section\" class=\"empty__state__text-section\">\n <div part=\"text\" class=\"empty-state__text\">","</div>\n <div part=\"subtitle\" class=\"empty-state__subtext\">","</div>\n </div>\n </div>\n\n <div part=\"actions\" class=\"empty-state-actions\">\n <slot></slot>\n </div>\n </div>\n "])),a({"empty-state":!0,"empty-state--sm":"sm"==this.size,"empty-state--md":"md"==this.size,"empty-state--lg":"lg"==this.size}),a({"empty-state__body":!0}),"content"==this.variant?i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <div part=\"content-image\" class=\"empty-state__body--content\">\n ","\n </div>"])),this.icon||this.svgIconUrl?i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div part=\"icon-wrapper\" class=\"empty-state__img__icon\">\n ","\n </div>"])),this.svgIconUrl?i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <nile-icon customSvgPath=\"","\" size=\"","\" color=\"","\" noFill></nile-icon>\n <!-- <nile-icon customSvgPath=\"","\" size=\"","\" color=\"","\"></nile-icon> -->\n "])),this.svgIconUrl,this.svgIconSize,r(this.svgIconColor),this.svgIconUrl,this.svgIconSize,this.svgIconColor?this.svgIconColor:"#ddd"):i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-icon name=\"","\" color=\"white\" size=\"","\"></nile-icon>\n "])),this.icon,"sm"==this.size||"md"==this.size?24:28)):s):s,"tonal"==this.variant?i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n ","\n </div>"])),this.svgIconUrl?i(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <nile-icon customSvgPath=\"","\" size=\"","\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" color=\"","\" noFill></nile-icon>\n "])),this.svgIconUrl,this.svgIconSize,r(this.svgIconColor)):i(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <nile-icon name=\"","\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"40\"></nile-icon>\n "])),this.icon)):s,"flat"==this.variant?i(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</span>\n </div>"])),this.svgIconUrl?i(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <nile-icon customSvgPath=\"","\" size=\"","\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" variant=\"secondary\" color=\"","\" noFill></nile-icon>\n "])),this.svgIconUrl,this.svgIconSize,r(this.svgIconColor)):i(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <nile-icon name=\"","\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"","\" variant=\"secondary\"></nile-icon>\n "])),this.icon,"sm"==this.size||"md"==this.size?24:28)):s,this.text,this.subText);}}],[{key:"styles",get:function get(){return[n];}}]);}(l));t([e()],c.prototype,"size",void 0),t([e()],c.prototype,"variant",void 0),t([e()],c.prototype,"icon",void 0),t([e({type:Boolean})],c.prototype,"grayscale",void 0),t([e()],c.prototype,"text",void 0),t([e({attribute:"sub-text"})],c.prototype,"subText",void 0),t([e()],c.prototype,"svgIconUrl",void 0),t([e({type:Number})],c.prototype,"svgIconSize",void 0),t([e({type:String})],c.prototype,"svgIconColor",void 0),_export("N",c=t([o("nile-empty-state")],c));}};});
1
+ 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);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","./nile-empty-state.css.cjs.js","../internal/nile-element.cjs.js","lit/directives/if-defined.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,r,o,n,a,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,c,p,h;function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}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 _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;i=_lit.nothing;},function(_litDecoratorsJs){s=_litDecoratorsJs.property;r=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){o=_litDirectivesClassMapJs.classMap;},function(_nileEmptyStateCssCjsJs){n=_nileEmptyStateCssCjsJs.s;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;},function(_litDirectivesIfDefinedJs){l=_litDirectivesIfDefinedJs.ifDefined;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){c={empty:{icon:"ng-database",tone:"neutral",role:"status",live:"polite",text:"No data yet",subText:"Rows appear here once there's something to show."},"no-results":{icon:"ng-search-lg",tone:"neutral",role:"status",live:"polite",text:"No matches",subText:"Try removing a filter or broadening your search."},"not-found":{icon:"ng-file-06",tone:"warning",role:"status",live:"polite",text:"We couldn't find that",subText:"It may have been moved or deleted."},"no-access":{icon:"ng-lock",tone:"warning",role:"status",live:"polite",text:"You don't have access",subText:"Ask an admin to grant you access to this resource."},error:{icon:"ng-alert-circle",tone:"error",role:"alert",live:"assertive",text:"Something went wrong",subText:"We couldn't load this. Try again."},offline:{icon:"ng-cloud-off",tone:"error",role:"alert",live:"assertive",text:"Connection lost",subText:"Check your connection and try again."}},p={neutral:void 0,info:"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))",warning:"var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))",error:"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"};_export("N",h=/*#__PURE__*/function(_a){function h(){var _this;_classCallCheck(this,h);_this=_callSuper(this,h,arguments),_this.size="md",_this.variant="tonal",_this.layout="stack",_this.bordered=!1;return _this;}_inherits(h,_a);return _createClass(h,[{key:"icon",get:function get(){var _ref,_this$_icon,_this$preset;return(_ref=(_this$_icon=this._icon)!==null&&_this$_icon!==void 0?_this$_icon:(_this$preset=this.preset)===null||_this$preset===void 0?void 0:_this$preset.icon)!==null&&_ref!==void 0?_ref:"ng-x-circle";},set:function set(t){var e=this.icon;this._icon=t!==null&&t!==void 0?t:void 0,this.requestUpdate("icon",e);}},{key:"text",get:function get(){var _ref2,_this$_text,_this$preset2;return(_ref2=(_this$_text=this._text)!==null&&_this$_text!==void 0?_this$_text:(_this$preset2=this.preset)===null||_this$preset2===void 0?void 0:_this$preset2.text)!==null&&_ref2!==void 0?_ref2:"Empty State";},set:function set(t){var e=this.text;this._text=t!==null&&t!==void 0?t:void 0,this.requestUpdate("text",e);}},{key:"subText",get:function get(){var _ref3,_this$_subText,_this$preset3;return(_ref3=(_this$_subText=this._subText)!==null&&_this$_subText!==void 0?_this$_subText:(_this$preset3=this.preset)===null||_this$preset3===void 0?void 0:_this$preset3.subText)!==null&&_ref3!==void 0?_ref3:"No Data";},set:function set(t){var e=this.subText;this._subText=t!==null&&t!==void 0?t:void 0,this.requestUpdate("subText",e);}},{key:"tone",get:function get(){var _ref4,_this$_tone,_this$preset4;return(_ref4=(_this$_tone=this._tone)!==null&&_this$_tone!==void 0?_this$_tone:(_this$preset4=this.preset)===null||_this$preset4===void 0?void 0:_this$preset4.tone)!==null&&_ref4!==void 0?_ref4:"neutral";},set:function set(t){var e=this.tone;this._tone=t!==null&&t!==void 0?t:void 0,this.requestUpdate("tone",e);}},{key:"preset",get:function get(){return this.status?c[this.status]:void 0;}},{key:"glyphColor",get:function get(){var _this$svgIconColor;return(_this$svgIconColor=this.svgIconColor)!==null&&_this$svgIconColor!==void 0?_this$svgIconColor:p[this.tone];}},{key:"liveRegion",get:function get(){var t=this.preset;if(t)return{role:t.role,live:t.live};}},{key:"renderGlyph",value:function renderGlyph(t){var _this$svgIconSize;var i=this.glyphColor;return this.svgIconUrl?e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <nile-glyph\n customSvgPath=\"","\"\n size=\"","\"\n method=\"stroke\"\n color=\"","\"\n noFill\n ></nile-glyph>\n "])),this.svgIconUrl,(_this$svgIconSize=this.svgIconSize)!==null&&_this$svgIconSize!==void 0?_this$svgIconSize:t,l(i)):e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <nile-glyph\n name=\"","\"\n method=\"stroke\"\n size=\"","\"\n color=\"","\"\n ></nile-glyph>\n "])),this.icon,t,l(i));}},{key:"render",value:function render(){var t=this.liveRegion,s="inline"===this.layout;return e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div part=\"container\" class=\"","\"\n role=\"","\"\n aria-live=\"","\"\n >\n <div part=\"body\" class=\"","\">\n\n ","\n\n ","\n\n ","\n\n ","\n\n <div part=\"text-section\" class=\"empty__state__text-section\">\n ","\n <div part=\"text\" class=\"empty-state__text\">","</div>\n <div part=\"subtitle\" class=\"empty-state__subtext\">","</div>\n </div>\n </div>\n\n <div part=\"actions\" class=\"empty-state-actions\">\n <slot></slot>\n </div>\n\n </div>\n "])),o(_defineProperty({"empty-state":!0,"empty-state--sm":"sm"==this.size,"empty-state--md":"md"==this.size,"empty-state--lg":"lg"==this.size,"empty-state--stack":"stack"===this.layout,"empty-state--inline":s,"empty-state--page":"page"===this.layout,"empty-state--bordered":this.bordered},"empty-state--tone-".concat(this.tone),!0)),l(t===null||t===void 0?void 0:t.role),l(t===null||t===void 0?void 0:t.live),o({"empty-state__body":!0}),s?e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <span part=\"inline-icon icon-chrome\" class=\"empty-state__body--inline\">\n ","\n </span>"])),this.renderGlyph(20)):i,s||"content"!=this.variant?i:e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <div part=\"content-image\" class=\"empty-state__body--content\">\n ","\n </div>"])),this.icon||this.svgIconUrl?e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <div part=\"icon-wrapper icon-chrome\" class=\"empty-state__img__icon\">\n ","\n </div>"])),this.renderGlyph("lg"==this.size?28:24)):i),s||"tonal"!=this.variant?i:e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <div part=\"tonal-body icon-chrome\" class=\"empty-state__body--tonal\">\n ","\n </div>"])),this.renderGlyph(40)),s||"flat"!=this.variant?i:e(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span part=\"icon-chrome\" class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</span>\n </div>"])),this.renderGlyph("lg"==this.size?28:24)),this.code?e(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <div part=\"code\" class=\"empty-state__code\">","</div>\n "])),this.code):i,this.text,this.subText);}}],[{key:"styles",get:function get(){return[n];}}]);}(a));t([s({type:String,attribute:!0})],h.prototype,"size",void 0),t([s({type:String,attribute:!0})],h.prototype,"variant",void 0),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"status",void 0),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"layout",void 0),t([s({type:String,attribute:!0})],h.prototype,"code",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],h.prototype,"bordered",void 0),t([s({type:String,attribute:!0})],h.prototype,"svgIconUrl",void 0),t([s({type:Number,attribute:!0})],h.prototype,"svgIconSize",void 0),t([s({type:String,attribute:!0})],h.prototype,"svgIconColor",void 0),t([s({type:String,attribute:!0})],h.prototype,"icon",null),t([s({type:String,attribute:!0})],h.prototype,"text",null),t([s({type:String,attribute:"sub-text"})],h.prototype,"subText",null),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"tone",null),_export("N",h=t([r("nile-empty-state")],h));}};});
2
2
  //# sourceMappingURL=nile-empty-state.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-empty-state.cjs.js","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n /**\n * The styles for nile-empty-state\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property() size: 'sm' | 'md' | 'lg' = 'md';\n\n @property() variant:\n | 'flat'\n | 'content'\n | 'tonal' = 'tonal';\n\n @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';\n @property({type:Boolean}) grayscale: boolean = false;\n\n @property() text: String = 'Empty State';\n @property({attribute:'sub-text'}) subText: String = 'No Data';\n @property() svgIconUrl: string;\n @property({type: Number}) svgIconSize: number = 40;\n @property({type: String}) svgIconColor: string;\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n return html`\n <div part=\"container\" class=\"${classMap({\n 'empty-state': true,\n 'empty-state--sm': this.size == 'sm',\n 'empty-state--md': this.size == 'md',\n 'empty-state--lg': this.size == 'lg'\n })}\">\n <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n ${this.variant == 'content' ? html`\n <div part=\"content-image\" class=\"empty-state__body--content\">\n ${!this.icon && !this.svgIconUrl ? nothing : html`\n <div part=\"icon-wrapper\" class=\"empty-state__img__icon\">\n ${this.svgIconUrl ? html`\n <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n <!-- <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${this.svgIconColor ? this.svgIconColor : '#ddd'}\"></nile-icon> -->\n ` : html`\n <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n `}\n </div>`\n }\n </div>`: nothing\n }\n\n ${this.variant == 'tonal' ? html`\n <div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n ${this.svgIconUrl ? html`\n <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n ` : html`\n <nile-icon name=\"${this.icon}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"40\"></nile-icon>\n `}\n </div>`: nothing\n }\n\n ${this.variant == 'flat' ? html`\n <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.svgIconUrl ? html`\n <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" variant=\"secondary\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n ` : html`\n <nile-icon name=\"${this.icon}\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n `}\n\t\t\t\t\t</span>\n </div>`: nothing\n }\n\n <div part=\"text-section\" class=\"empty__state__text-section\">\n <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n </div>\n </div>\n\n <div part=\"actions\" class=\"empty-state-actions\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-empty-state': NileEmptyState;\n }\n}\n"],"names":["NileEmptyState","c","constructor","this","size","variant","icon","grayscale","text","subText","svgIconSize","_this","_inherits","_l","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","classMap","_templateObject2","svgIconUrl","_templateObject3","_templateObject4","ifDefined","svgIconColor","_templateObject5","nothing","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","get","styles","NileElement","__decorate","property","prototype","type","Boolean","attribute","Number","String","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"nile-empty-state.cjs.js","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/** What happened. Selects an icon, tone, default copy and ARIA role. */\nexport type NileEmptyStateStatus =\n | 'empty'\n | 'no-results'\n | 'not-found'\n | 'no-access'\n | 'error'\n | 'offline';\n\n/** How loud the state looks. Defaults from `status`, always overridable. */\nexport type NileEmptyStateTone = 'neutral' | 'info' | 'warning' | 'error';\n\n/** What shape the state occupies. */\nexport type NileEmptyStateLayout = 'stack' | 'inline' | 'page';\n\ninterface StatusPreset {\n icon: string;\n tone: NileEmptyStateTone;\n text: string;\n subText: string;\n role: 'status' | 'alert';\n live: 'polite' | 'assertive';\n}\n\nconst STATUS_PRESETS: Record<NileEmptyStateStatus, StatusPreset> = {\n 'empty': {\n icon: 'ng-database', tone: 'neutral', role: 'status', live: 'polite',\n text: 'No data yet', subText: `Rows appear here once there's something to show.`,\n },\n 'no-results': {\n icon: 'ng-search-lg', tone: 'neutral', role: 'status', live: 'polite',\n text: 'No matches', subText: 'Try removing a filter or broadening your search.',\n },\n 'not-found': {\n icon: 'ng-file-06', tone: 'warning', role: 'status', live: 'polite',\n text: `We couldn't find that`, subText: 'It may have been moved or deleted.',\n },\n 'no-access': {\n icon: 'ng-lock', tone: 'warning', role: 'status', live: 'polite',\n text: `You don't have access`, subText: 'Ask an admin to grant you access to this resource.',\n },\n 'error': {\n icon: 'ng-alert-circle', tone: 'error', role: 'alert', live: 'assertive',\n text: 'Something went wrong', subText: `We couldn't load this. Try again.`,\n },\n 'offline': {\n icon: 'ng-cloud-off', tone: 'error', role: 'alert', live: 'assertive',\n text: 'Connection lost', subText: 'Check your connection and try again.',\n },\n};\n\nconst TONE_GLYPH_COLOR: Record<NileEmptyStateTone, string | undefined> = {\n neutral: undefined,\n info: 'var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))',\n warning: 'var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))',\n error: 'var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))',\n};\n\nconst DEFAULT_ICON = 'ng-x-circle';\nconst DEFAULT_TEXT = 'Empty State';\nconst DEFAULT_SUB_TEXT = 'No Data';\n\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n /**\n * The styles for nile-empty-state\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String, attribute: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n @property({ type: String, attribute: true }) variant:\n | 'flat'\n | 'content'\n | 'tonal' = 'tonal';\n\n @property({ type: String, attribute: true, reflect: true }) status?: NileEmptyStateStatus;\n @property({ type: String, attribute: true, reflect: true }) layout: NileEmptyStateLayout = 'stack';\n @property({ type: String, attribute: true }) code?: string;\n @property({ type: Boolean, attribute: true, reflect: true }) bordered: boolean = false;\n @property({ type: String, attribute: true }) svgIconUrl: string;\n /**\n * Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\n * the SVG matches whatever size the current variant/layout draws at.\n */\n @property({ type: Number, attribute: true }) svgIconSize?: number;\n @property({ type: String, attribute: true }) svgIconColor: string;\n\n private _icon?: string;\n private _text?: string;\n private _subText?: string;\n private _tone?: NileEmptyStateTone;\n @property({ type: String, attribute: true })\n get icon(): string {\n return this._icon ?? this.preset?.icon ?? DEFAULT_ICON;\n }\n\n set icon(value: string | null) {\n const old = this.icon;\n this._icon = value ?? undefined;\n this.requestUpdate('icon', old);\n }\n\n /** Headline. Resolves through the `status` preset to `DEFAULT_TEXT`. */\n @property({ type: String, attribute: true })\n get text(): string {\n return this._text ?? this.preset?.text ?? DEFAULT_TEXT;\n }\n\n set text(value: string | null) {\n const old = this.text;\n this._text = value ?? undefined;\n this.requestUpdate('text', old);\n }\n\n /** Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`. */\n @property({ type: String, attribute: 'sub-text' })\n get subText(): string {\n return this._subText ?? this.preset?.subText ?? DEFAULT_SUB_TEXT;\n }\n\n set subText(value: string | null) {\n const old = this.subText;\n this._subText = value ?? undefined;\n this.requestUpdate('subText', old);\n }\n\n @property({ type: String, attribute: true, reflect: true })\n get tone(): NileEmptyStateTone {\n return this._tone ?? this.preset?.tone ?? 'neutral';\n }\n\n set tone(value: NileEmptyStateTone | null) {\n const old = this.tone;\n this._tone = value ?? undefined;\n this.requestUpdate('tone', old);\n }\n\n /* #endregion */\n\n /* #region Methods */\n\n /** The preset backing the current `status`, or undefined when none is set. */\n private get preset(): StatusPreset | undefined {\n return this.status ? STATUS_PRESETS[this.status] : undefined;\n }\n\n private get glyphColor(): string | undefined {\n return this.svgIconColor ?? TONE_GLYPH_COLOR[this.tone];\n }\n\n /** ARIA wiring */\n private get liveRegion(): { role: string; live: string } | undefined {\n const preset = this.preset;\n if (!preset) return undefined;\n return { role: preset.role, live: preset.live };\n }\n\n private renderGlyph(size: number | string): TemplateResult {\n const color = this.glyphColor;\n return this.svgIconUrl ? html`\n <nile-glyph\n customSvgPath=\"${this.svgIconUrl}\"\n size=\"${this.svgIconSize ?? size}\"\n method=\"stroke\"\n color=\"${ifDefined(color)}\"\n noFill\n ></nile-glyph>\n ` : html`\n <nile-glyph\n name=\"${this.icon}\"\n method=\"stroke\"\n size=\"${size}\"\n color=\"${ifDefined(color)}\"\n ></nile-glyph>\n `;\n }\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n const live = this.liveRegion;\n const inline = this.layout === 'inline';\n\n return html`\n <div part=\"container\" class=\"${classMap({\n 'empty-state': true,\n 'empty-state--sm': this.size == 'sm',\n 'empty-state--md': this.size == 'md',\n 'empty-state--lg': this.size == 'lg',\n 'empty-state--stack': this.layout === 'stack',\n 'empty-state--inline': inline,\n 'empty-state--page': this.layout === 'page',\n 'empty-state--bordered': this.bordered,\n [`empty-state--tone-${this.tone}`]: true,\n })}\"\n role=\"${ifDefined(live?.role)}\"\n aria-live=\"${ifDefined(live?.live)}\"\n >\n <div part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n ${inline ? html`\n <span part=\"inline-icon icon-chrome\" class=\"empty-state__body--inline\">\n ${this.renderGlyph(20)}\n </span>` : nothing\n }\n\n ${!inline && this.variant == 'content' ? html`\n <div part=\"content-image\" class=\"empty-state__body--content\">\n ${!this.icon && !this.svgIconUrl ? nothing : html`\n <div part=\"icon-wrapper icon-chrome\" class=\"empty-state__img__icon\">\n ${\n this.renderGlyph(this.size == 'lg' ? 28 : 24)}\n </div>`\n }\n </div>`: nothing\n }\n\n ${!inline && this.variant == 'tonal' ? html`\n <div part=\"tonal-body icon-chrome\" class=\"empty-state__body--tonal\">\n ${this.renderGlyph(40)}\n </div>`: nothing\n }\n\n ${!inline && this.variant == 'flat' ? html`\n <div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span part=\"icon-chrome\" class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.renderGlyph(this.size == 'lg' ? 28 : 24)}\n\t\t\t\t\t</span>\n </div>`: nothing\n }\n\n <div part=\"text-section\" class=\"empty__state__text-section\">\n ${this.code ? html`\n <div part=\"code\" class=\"empty-state__code\">${this.code}</div>\n ` : nothing}\n <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n </div>\n </div>\n\n <div part=\"actions\" class=\"empty-state-actions\">\n <slot></slot>\n </div>\n\n </div>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-empty-state': NileEmptyState;\n }\n}\n"],"names":["STATUS_PRESETS","empty","icon","tone","role","live","text","subText","error","offline","TONE_GLYPH_COLOR","neutral","undefined","info","warning","_export","NileEmptyState","_a","h","this","size","variant","layout","bordered","_this","_inherits","_createClass","key","get","_ref","_this$_icon","_icon","preset","set","value","old","requestUpdate","_ref2","_this$_text","_text","_ref3","_this$_subText","_subText","_ref4","_this$_tone","_tone","status","_this$svgIconColor","svgIconColor","renderGlyph","_this$svgIconSize","color","glyphColor","svgIconUrl","html","_templateObject","_taggedTemplateLiteral","svgIconSize","ifDefined","_templateObject2","render","liveRegion","inline","_templateObject3","classMap","_templateObject4","nothing","_templateObject5","_templateObject6","_templateObject7","_templateObject8","code","_templateObject9","styles","NileElement","__decorate","property","type","String","attribute","prototype","reflect","Boolean","Number","customElement"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",i=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--ng-display-flex);\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n\n background-color: white;\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",n=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n margin-inline: auto;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n .empty-state--tone-info .empty-state__body--tonal {\n background: linear-gradient(\n 180deg,\n var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,\n var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%\n );\n }\n\n .empty-state--tone-warning .empty-state__body--tonal {\n background: linear-gradient(\n 180deg,\n var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,\n var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%\n );\n }\n\n .empty-state--tone-error .empty-state__body--tonal {\n background: linear-gradient(\n 180deg,\n var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,\n var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%\n );\n }\n\n .empty-state--tone-info .nile-flat-type-icon {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n }\n\n .empty-state--tone-warning .nile-flat-type-icon {\n background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .empty-state--tone-error .nile-flat-type-icon {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n }\n\n .empty-state--inline {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n min-width: 0;\n max-width: none;\n column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n }\n\n .empty-state--inline .empty-state__body {\n flex-direction: row;\n align-items: center;\n column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--inline .empty__state__text-section {\n flex-direction: row;\n align-items: baseline;\n gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n max-width: none;\n }\n\n .empty-state--inline .empty-state__text,\n .empty-state--inline .empty-state__subtext {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n text-align: left;\n }\n .empty-state__body--inline {\n display: grid;\n place-items: center;\n }\n\n\n .empty-state--page .empty-state__text {\n font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));\n line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));\n letter-spacing: -0.02em;\n }\n\n .empty-state--page .empty-state__subtext {\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n }\n\n .empty-state--page .empty-state__code {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n letter-spacing: 0.2em;\n }\n /* stack and page carry no padding of their own, so the dashed edge would sit\n flush against the content \u2014 hence the roomy padding here. */\n .empty-state--bordered {\n border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: var(--nile-border-size-10, var(--ng-radius-xl));\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))\n var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n /* A strip stays tight when it is bordered too. Spelled out as its own\n two-class rule so specificity decides, not declaration order. */\n .empty-state--inline.empty-state--bordered {\n padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--nile-display-flex, var(--ng-display-flex));\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n min-width: 0;\n overflow-wrap: anywhere;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .empty-state__code {\n font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n letter-spacing: 0.14em;\n text-transform: uppercase;\n text-align: center;\n color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));\n }\n\n"]))));}};});
2
2
  //# sourceMappingURL=nile-empty-state.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-empty-state.css.cjs.js","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/**\n * EmptyState CSS\n */\nexport const styles = css`\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--ng-display-flex);\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n\n background-color: white;\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-empty-state.css.cjs.js","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/**\n * EmptyState CSS\n */\nexport const styles = css`\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n margin-inline: auto;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n .empty-state--tone-info .empty-state__body--tonal {\n background: linear-gradient(\n 180deg,\n var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,\n var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%\n );\n }\n\n .empty-state--tone-warning .empty-state__body--tonal {\n background: linear-gradient(\n 180deg,\n var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,\n var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%\n );\n }\n\n .empty-state--tone-error .empty-state__body--tonal {\n background: linear-gradient(\n 180deg,\n var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,\n var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%\n );\n }\n\n .empty-state--tone-info .nile-flat-type-icon {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n }\n\n .empty-state--tone-warning .nile-flat-type-icon {\n background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .empty-state--tone-error .nile-flat-type-icon {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n }\n\n .empty-state--inline {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n min-width: 0;\n max-width: none;\n column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n }\n\n .empty-state--inline .empty-state__body {\n flex-direction: row;\n align-items: center;\n column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--inline .empty__state__text-section {\n flex-direction: row;\n align-items: baseline;\n gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n max-width: none;\n }\n\n .empty-state--inline .empty-state__text,\n .empty-state--inline .empty-state__subtext {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n text-align: left;\n }\n .empty-state__body--inline {\n display: grid;\n place-items: center;\n }\n\n\n .empty-state--page .empty-state__text {\n font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));\n line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));\n letter-spacing: -0.02em;\n }\n\n .empty-state--page .empty-state__subtext {\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n }\n\n .empty-state--page .empty-state__code {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n letter-spacing: 0.2em;\n }\n /* stack and page carry no padding of their own, so the dashed edge would sit\n flush against the content — hence the roomy padding here. */\n .empty-state--bordered {\n border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: var(--nile-border-size-10, var(--ng-radius-xl));\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))\n var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n /* A strip stays tight when it is bordered too. Spelled out as its own\n two-class rule so specificity decides, not declaration order. */\n .empty-state--inline.empty-state--bordered {\n padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--nile-display-flex, var(--ng-display-flex));\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n min-width: 0;\n overflow-wrap: anywhere;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .empty-state__code {\n font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n letter-spacing: 0.14em;\n text-transform: uppercase;\n text-align: center;\n color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));\n }\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -1,4 +1,4 @@
1
- import{css as e}from"lit";const i=e`
1
+ import{css as e}from"lit";const n=e`
2
2
  :host {
3
3
  display:inline-flex;
4
4
  width:100%;
@@ -59,11 +59,120 @@ import{css as e}from"lit";const i=e`
59
59
  min-width:300px;
60
60
  max-width:512px;
61
61
  width:100%;
62
+ margin-inline: auto;
62
63
  height:max-content;
63
64
  display:flex;
64
65
  flex-direction:column;
65
66
  row-gap:var(--nile-es-gap);
66
67
  }
68
+ .empty-state--tone-info .empty-state__body--tonal {
69
+ background: linear-gradient(
70
+ 180deg,
71
+ var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,
72
+ var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%
73
+ );
74
+ }
75
+
76
+ .empty-state--tone-warning .empty-state__body--tonal {
77
+ background: linear-gradient(
78
+ 180deg,
79
+ var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,
80
+ var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%
81
+ );
82
+ }
83
+
84
+ .empty-state--tone-error .empty-state__body--tonal {
85
+ background: linear-gradient(
86
+ 180deg,
87
+ var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,
88
+ var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%
89
+ );
90
+ }
91
+
92
+ .empty-state--tone-info .nile-flat-type-icon {
93
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
94
+ border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));
95
+ }
96
+
97
+ .empty-state--tone-warning .nile-flat-type-icon {
98
+ background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));
99
+ border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
100
+ }
101
+
102
+ .empty-state--tone-error .nile-flat-type-icon {
103
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
104
+ border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
105
+ }
106
+
107
+ .empty-state--inline {
108
+ flex-direction: row;
109
+ align-items: center;
110
+ justify-content: center;
111
+ flex-wrap: wrap;
112
+ min-width: 0;
113
+ max-width: none;
114
+ column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
115
+ row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
116
+ padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
117
+ var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
118
+ }
119
+
120
+ .empty-state--inline .empty-state__body {
121
+ flex-direction: row;
122
+ align-items: center;
123
+ column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
124
+ }
125
+
126
+ .empty-state--inline .empty__state__text-section {
127
+ flex-direction: row;
128
+ align-items: baseline;
129
+ gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));
130
+ max-width: none;
131
+ }
132
+
133
+ .empty-state--inline .empty-state__text,
134
+ .empty-state--inline .empty-state__subtext {
135
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
136
+ line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
137
+ text-align: left;
138
+ }
139
+ .empty-state__body--inline {
140
+ display: grid;
141
+ place-items: center;
142
+ }
143
+
144
+
145
+ .empty-state--page .empty-state__text {
146
+ font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));
147
+ line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));
148
+ letter-spacing: -0.02em;
149
+ }
150
+
151
+ .empty-state--page .empty-state__subtext {
152
+ font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
153
+ line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
154
+ }
155
+
156
+ .empty-state--page .empty-state__code {
157
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
158
+ letter-spacing: 0.2em;
159
+ }
160
+ /* stack and page carry no padding of their own, so the dashed edge would sit
161
+ flush against the content — hence the roomy padding here. */
162
+ .empty-state--bordered {
163
+ border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
164
+ border-radius: var(--nile-border-size-10, var(--ng-radius-xl));
165
+ background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
166
+ padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))
167
+ var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
168
+ }
169
+
170
+ /* A strip stays tight when it is bordered too. Spelled out as its own
171
+ two-class rule so specificity decides, not declaration order. */
172
+ .empty-state--inline.empty-state--bordered {
173
+ padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
174
+ var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
175
+ }
67
176
 
68
177
  .empty-state__body {
69
178
  display:flex;
@@ -78,13 +187,13 @@ import{css as e}from"lit";const i=e`
78
187
  }
79
188
 
80
189
  .empty-state__img__icon {
81
- display: var(--ng-display-flex);
190
+ display: var(--nile-display-flex, var(--ng-display-flex));
82
191
  justify-content: center;
83
192
  align-items: center;
84
193
  }
85
194
 
86
195
  .empty-state__body--tonal {
87
- background: var(--nile-gradient-1, var(--ng-white-gradient-6));
196
+ background: var(--nile-gradient-1, var(--ng-white-gradient-6));
88
197
  width: 104px;
89
198
  height: 104px;
90
199
  border-radius: var(--nile-radius-full, var(--ng-radius-full));
@@ -97,8 +206,7 @@ import{css as e}from"lit";const i=e`
97
206
  height:var(--nile-es-icon-size);
98
207
  aspect-ratio:1 / 1;
99
208
  border-radius: var(--nile-es-flat-option-border-radius);
100
-
101
- background-color: white;
209
+ background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));
102
210
  display: grid;
103
211
  place-items: center;
104
212
  border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
@@ -109,6 +217,8 @@ import{css as e}from"lit";const i=e`
109
217
  flex-direction:column;
110
218
  gap:var(--nile-es-text-gap);
111
219
  max-width:80%;
220
+ min-width: 0;
221
+ overflow-wrap: anywhere;
112
222
  }
113
223
 
114
224
  .empty-state__text {
@@ -133,5 +243,18 @@ import{css as e}from"lit";const i=e`
133
243
  .empty-state-actions {
134
244
  display:flex;
135
245
  justify-content:center;
246
+ gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
247
+ flex-wrap: wrap;
136
248
  }
137
- `;export{i as s};
249
+
250
+ .empty-state__code {
251
+ font-family: var(--nile-font-family-body, var(--ng-font-family-body));
252
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
253
+ font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
254
+ letter-spacing: 0.14em;
255
+ text-transform: uppercase;
256
+ text-align: center;
257
+ color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));
258
+ }
259
+
260
+ `;export{n as s};
@@ -1,41 +1,54 @@
1
- import{__decorate as t}from"tslib";import{html as i,nothing as s}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{s as n}from"./nile-empty-state.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let m=class extends l{constructor(){super(...arguments),this.size="md",this.variant="tonal",this.icon="var(--nile-icon-error, var(--ng-icon-x-circle))",this.grayscale=!1,this.text="Empty State",this.subText="No Data",this.svgIconSize=40}static get styles(){return[n]}render(){return i`
2
- <div part="container" class="${a({"empty-state":!0,"empty-state--sm":"sm"==this.size,"empty-state--md":"md"==this.size,"empty-state--lg":"lg"==this.size})}">
3
- <div part="body" class="${a({"empty-state__body":!0})}">
1
+ import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,customElement as r}from"lit/decorators.js";import{classMap as o}from"lit/directives/class-map.js";import{s as n}from"./nile-empty-state.css.esm.js";import{N as a}from"../internal/nile-element.esm.js";import{ifDefined as l}from"lit/directives/if-defined.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";const c={empty:{icon:"ng-database",tone:"neutral",role:"status",live:"polite",text:"No data yet",subText:"Rows appear here once there's something to show."},"no-results":{icon:"ng-search-lg",tone:"neutral",role:"status",live:"polite",text:"No matches",subText:"Try removing a filter or broadening your search."},"not-found":{icon:"ng-file-06",tone:"warning",role:"status",live:"polite",text:"We couldn't find that",subText:"It may have been moved or deleted."},"no-access":{icon:"ng-lock",tone:"warning",role:"status",live:"polite",text:"You don't have access",subText:"Ask an admin to grant you access to this resource."},error:{icon:"ng-alert-circle",tone:"error",role:"alert",live:"assertive",text:"Something went wrong",subText:"We couldn't load this. Try again."},offline:{icon:"ng-cloud-off",tone:"error",role:"alert",live:"assertive",text:"Connection lost",subText:"Check your connection and try again."}},p={neutral:void 0,info:"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))",warning:"var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))",error:"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"};let h=class extends a{constructor(){super(...arguments),this.size="md",this.variant="tonal",this.layout="stack",this.bordered=!1}static get styles(){return[n]}get icon(){return this._icon??this.preset?.icon??"ng-x-circle"}set icon(t){const e=this.icon;this._icon=t??void 0,this.requestUpdate("icon",e)}get text(){return this._text??this.preset?.text??"Empty State"}set text(t){const e=this.text;this._text=t??void 0,this.requestUpdate("text",e)}get subText(){return this._subText??this.preset?.subText??"No Data"}set subText(t){const e=this.subText;this._subText=t??void 0,this.requestUpdate("subText",e)}get tone(){return this._tone??this.preset?.tone??"neutral"}set tone(t){const e=this.tone;this._tone=t??void 0,this.requestUpdate("tone",e)}get preset(){return this.status?c[this.status]:void 0}get glyphColor(){return this.svgIconColor??p[this.tone]}get liveRegion(){const t=this.preset;if(t)return{role:t.role,live:t.live}}renderGlyph(t){const i=this.glyphColor;return this.svgIconUrl?e`
2
+ <nile-glyph
3
+ customSvgPath="${this.svgIconUrl}"
4
+ size="${this.svgIconSize??t}"
5
+ method="stroke"
6
+ color="${l(i)}"
7
+ noFill
8
+ ></nile-glyph>
9
+ `:e`
10
+ <nile-glyph
11
+ name="${this.icon}"
12
+ method="stroke"
13
+ size="${t}"
14
+ color="${l(i)}"
15
+ ></nile-glyph>
16
+ `}render(){const t=this.liveRegion,s="inline"===this.layout;return e`
17
+ <div part="container" class="${o({"empty-state":!0,"empty-state--sm":"sm"==this.size,"empty-state--md":"md"==this.size,"empty-state--lg":"lg"==this.size,"empty-state--stack":"stack"===this.layout,"empty-state--inline":s,"empty-state--page":"page"===this.layout,"empty-state--bordered":this.bordered,[`empty-state--tone-${this.tone}`]:!0})}"
18
+ role="${l(t?.role)}"
19
+ aria-live="${l(t?.live)}"
20
+ >
21
+ <div part="body" class="${o({"empty-state__body":!0})}">
4
22
 
5
- ${"content"==this.variant?i`
23
+ ${s?e`
24
+ <span part="inline-icon icon-chrome" class="empty-state__body--inline">
25
+ ${this.renderGlyph(20)}
26
+ </span>`:i}
27
+
28
+ ${s||"content"!=this.variant?i:e`
6
29
  <div part="content-image" class="empty-state__body--content">
7
- ${this.icon||this.svgIconUrl?i`
8
- <div part="icon-wrapper" class="empty-state__img__icon">
9
- ${this.svgIconUrl?i`
10
- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${r(this.svgIconColor)}" noFill></nile-icon>
11
- <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor?this.svgIconColor:"#ddd"}"></nile-icon> -->
12
- `:i`
13
- <nile-icon name="${this.icon}" color="white" size="${"sm"==this.size||"md"==this.size?24:28}"></nile-icon>
14
- `}
15
- </div>`:s}
16
- </div>`:s}
30
+ ${this.icon||this.svgIconUrl?e`
31
+ <div part="icon-wrapper icon-chrome" class="empty-state__img__icon">
32
+ ${this.renderGlyph("lg"==this.size?28:24)}
33
+ </div>`:i}
34
+ </div>`}
17
35
 
18
- ${"tonal"==this.variant?i`
19
- <div part="tonal-body" class="empty-state__body--tonal">
20
- ${this.svgIconUrl?i`
21
- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${r(this.svgIconColor)}" noFill></nile-icon>
22
- `:i`
23
- <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
24
- `}
25
- </div>`:s}
36
+ ${s||"tonal"!=this.variant?i:e`
37
+ <div part="tonal-body icon-chrome" class="empty-state__body--tonal">
38
+ ${this.renderGlyph(40)}
39
+ </div>`}
26
40
 
27
- ${"flat"==this.variant?i`
41
+ ${s||"flat"!=this.variant?i:e`
28
42
  <div part="flat-body" class="empty-state__body--flat">
29
- <span class="nile-flat-type-icon">
30
- ${this.svgIconUrl?i`
31
- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${r(this.svgIconColor)}" noFill></nile-icon>
32
- `:i`
33
- <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${"sm"==this.size||"md"==this.size?24:28}" variant="secondary"></nile-icon>
34
- `}
43
+ <span part="icon-chrome" class="nile-flat-type-icon">
44
+ ${this.renderGlyph("lg"==this.size?28:24)}
35
45
  </span>
36
- </div>`:s}
46
+ </div>`}
37
47
 
38
48
  <div part="text-section" class="empty__state__text-section">
49
+ ${this.code?e`
50
+ <div part="code" class="empty-state__code">${this.code}</div>
51
+ `:i}
39
52
  <div part="text" class="empty-state__text">${this.text}</div>
40
53
  <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
41
54
  </div>
@@ -44,5 +57,6 @@ import{__decorate as t}from"tslib";import{html as i,nothing as s}from"lit";impor
44
57
  <div part="actions" class="empty-state-actions">
45
58
  <slot></slot>
46
59
  </div>
60
+
47
61
  </div>
48
- `}};t([e()],m.prototype,"size",void 0),t([e()],m.prototype,"variant",void 0),t([e()],m.prototype,"icon",void 0),t([e({type:Boolean})],m.prototype,"grayscale",void 0),t([e()],m.prototype,"text",void 0),t([e({attribute:"sub-text"})],m.prototype,"subText",void 0),t([e()],m.prototype,"svgIconUrl",void 0),t([e({type:Number})],m.prototype,"svgIconSize",void 0),t([e({type:String})],m.prototype,"svgIconColor",void 0),m=t([o("nile-empty-state")],m);export{m as N};
62
+ `}};t([s({type:String,attribute:!0})],h.prototype,"size",void 0),t([s({type:String,attribute:!0})],h.prototype,"variant",void 0),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"status",void 0),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"layout",void 0),t([s({type:String,attribute:!0})],h.prototype,"code",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],h.prototype,"bordered",void 0),t([s({type:String,attribute:!0})],h.prototype,"svgIconUrl",void 0),t([s({type:Number,attribute:!0})],h.prototype,"svgIconSize",void 0),t([s({type:String,attribute:!0})],h.prototype,"svgIconColor",void 0),t([s({type:String,attribute:!0})],h.prototype,"icon",null),t([s({type:String,attribute:!0})],h.prototype,"text",null),t([s({type:String,attribute:"sub-text"})],h.prototype,"subText",null),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"tone",null),h=t([r("nile-empty-state")],h);export{h as N};
@@ -1,2 +1,2 @@
1
- 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);}System.register(["tslib","lit","lit/decorators.js","./nile-pagination.css.cjs.js","../internal/nile-element.cjs.js","./nile-pagination-utils.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var i,e,t,n,s,r,a,l,o,h,c,d,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,_templateObject17,_templateObject18,_templateObject19,_templateObject20,p;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}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 _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;n=_litDecoratorsJs.state;s=_litDecoratorsJs.query;r=_litDecoratorsJs.customElement;},function(_nilePaginationCssCjsJs){a=_nilePaginationCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_nilePaginationUtilsCjsJs){o=_nilePaginationUtilsCjsJs.c;h=_nilePaginationUtilsCjsJs.g;c=_nilePaginationUtilsCjsJs.a;d=_nilePaginationUtilsCjsJs.b;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_l){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.totalItems=0,_this.currentPage=1,_this.pageSize=50,_this.pageSizeOptions=[10,25,50,100],_this.variant="fluid",_this.disabled=!1,_this.showTitle=!0,_this.portal=!1,_this._pageSizeOpen=!1,_this._pageOpen=!1,_this._miniPageOpen=!1;return _this;}_inherits(p,_l);return _createClass(p,[{key:"firstUpdated",value:function firstUpdated(){var _this2=this;this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",function(){_this2._pageSizeOpen=!0;}),this._pageSizeDropdown.addEventListener("nile-after-hide",function(){_this2._pageSizeOpen=!1;}));}},{key:"totalPages",get:function get(){return Math.max(1,o(this.totalItems,this.pageSize));}},{key:"goToPage",value:function goToPage(i){if(this.disabled)return;var e=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:e,pageSize:this.pageSize});}},{key:"onPageSizeSelect",value:function onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;var e=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:e,pageSize:i});}},{key:"renderCompactRangeText",value:function renderCompactRangeText(){var i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["<div class=\"range-text\">","</div>"])),i);}},{key:"renderRangeText",value:function renderRangeText(){return 0===this.totalItems?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"range-text\">Showing 0 of 0</div>"]))):e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div part=\"range-text\" class=\"range-text\">\n ","\n </div>\n "])),h(this.totalItems,this.pageSize,this.currentPage));}},{key:"renderPageSizeSelect",value:function renderPageSizeSelect(){var _this3=this;return"fluid"!==this.variant?null:e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?portal="," ?disabled=",">\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n "])),this.portal,this.disabled,this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this3.disabled,function(){return _this3.onPageSizeSelect(i);},i);}));}},{key:"renderCompactPageSize",value:function renderCompactPageSize(){var _this4=this;return e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <nile-dropdown\n class=\"compact-dropdown\"\n ?portal=","\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n "])),this.portal,this.disabled,function(){return _this4._pageSizeOpen=!0;},function(){return _this4._pageSizeOpen=!1;},this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this4.disabled,function(){return _this4.onPageSizeSelect(i);},i);}));}},{key:"renderPrevButton",value:function renderPrevButton(){var _this5=this;return e(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"prev-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),1===this.currentPage||this.disabled,function(){return _this5.goToPage(_this5.currentPage-1);});}},{key:"renderNextButton",value:function renderNextButton(){var _this6=this;return e(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"next-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),this.currentPage===this.totalPages||this.disabled,function(){return _this6.goToPage(_this6.currentPage+1);});}},{key:"renderPageItem",value:function renderPageItem(i,t,n){var _this7=this;return"…"===i?e(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?portal="," ?disabled=",">\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=",">\n \u2026\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n "])),this.portal,this.disabled,this.disabled,c(this.totalPages,n,this.currentPage,t<n.indexOf(this.currentPage)?"left":"right").map(function(i){return e(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this7.disabled,function(){return _this7.goToPage(i);},i);})):e(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=","\n ?disabled=","\n @click=","\n >\n ","\n </nile-button>\n </li>\n "])),i===this.currentPage?"primary":"ghost",this.disabled,function(){return _this7.goToPage(i);},i);}},{key:"renderMiniPrevButton",value:function renderMiniPrevButton(){var _this8=this;return e(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"mini-prev-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n </nile-button>\n </li>\n "])),1===this.currentPage||this.disabled,function(){return _this8.goToPage(_this8.currentPage-1);});}},{key:"renderMiniNextButton",value:function renderMiniNextButton(){var _this9=this;return e(_templateObject14||(_templateObject14=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"mini-next-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n </nile-button>\n </li>\n "])),this.currentPage===this.totalPages||this.disabled,function(){return _this9.goToPage(_this9.currentPage+1);});}},{key:"renderMini",value:function renderMini(){var _this10=this;return e(_templateObject15||(_templateObject15=_taggedTemplateLiteral(["\n <div part=\"wrapper\" class=\"pagination-wrapper mini\">\n <span part=\"mini-showing-label\" class=\"mini-showing-label\">Showing</span>\n <nile-dropdown\n part=\"mini-page-dropdown\"\n class=\"mini-page-dropdown\"\n ?portal=","\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"mini-page-btn ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"12\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"mini-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"mini-of-label\" class=\"mini-of-label\">of ","</span>\n <nav aria-label=\"Pagination\" part=\"mini-nav\" class=\"mini-nav\">\n <ul part=\"mini-page-list\" class=\"pagination mini-pagination\">\n ","\n ","\n </ul>\n </nav>\n </div>\n "])),this.portal,this.disabled,function(){return _this10._miniPageOpen=!0;},function(){return _this10._miniPageOpen=!1;},this._miniPageOpen?"open":"",this.disabled,this.currentPage,Array.from({length:this.totalPages},function(i,e){return e+1;}).map(function(i){return e(_templateObject16||(_templateObject16=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this10.disabled,function(){return _this10.goToPage(i);},i);}),this.totalPages,this.renderMiniPrevButton(),this.renderMiniNextButton());}},{key:"renderPageList",value:function renderPageList(){var _this11=this;if("compact"===this.variant)return e(_templateObject17||(_templateObject17=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ","\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?portal=","\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),this.portal,this.disabled,function(){return _this11._pageOpen=!0;},function(){return _this11._pageOpen=!1;},this._pageOpen?"open":"",this.disabled,this.currentPage,Array.from({length:this.totalPages},function(i,e){return e+1;}).map(function(i){return e(_templateObject18||(_templateObject18=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this11.disabled,function(){return _this11.goToPage(i);},i);}),this.renderNextButton());var i=d(this.totalPages,this.currentPage);return e(_templateObject19||(_templateObject19=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ","\n ","\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),i.map(function(e,t){return _this11.renderPageItem(e,t,i);}),this.renderNextButton());}},{key:"render",value:function render(){return"mini"===this.variant?this.renderMini():e(_templateObject20||(_templateObject20=_taggedTemplateLiteral(["\n <div part=\"wrapper\" class=\"pagination-wrapper ","\">\n <div part=\"pager-container\" class=\"pager-container\">\n ","\n ","\n </div>\n ","\n </div>\n "])),this.variant,"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null,"fluid"===this.variant?this.renderPageSizeSelect():this.renderCompactPageSize(),this.renderPageList());}}],[{key:"styles",get:function get(){return[a];}}]);}(l));i([t({attribute:"totalitems",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=0?Math.floor(e):0;}}})],p.prototype,"totalItems",void 0),i([t({attribute:"currentpage",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):1;}}})],p.prototype,"currentPage",void 0),i([t({attribute:"pagesize",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):50;}}})],p.prototype,"pageSize",void 0),i([t({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:function fromAttribute(i){try{var _e=JSON.parse(i);if(Array.isArray(_e)&&_e.every(function(i){return"number"==typeof i;}))return _e;}catch(_unused){}return[10,25,50,100];}}})],p.prototype,"pageSizeOptions",void 0),i([t({type:String})],p.prototype,"variant",void 0),i([t({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),i([t({type:Boolean})],p.prototype,"showTitle",void 0),i([t({type:Boolean,reflect:!0})],p.prototype,"portal",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([n()],p.prototype,"_miniPageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),_export("N",p=i([r("nile-pagination")],p));}};});
1
+ 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);}System.register(["tslib","lit","lit/decorators.js","./nile-pagination.css.cjs.js","../internal/nile-element.cjs.js","./nile-pagination-utils.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var i,t,e,n,s,r,a,o,l,h,d,c,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,_templateObject17,_templateObject18,_templateObject19,_templateObject20,p;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}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 _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;n=_litDecoratorsJs.state;s=_litDecoratorsJs.query;r=_litDecoratorsJs.customElement;},function(_nilePaginationCssCjsJs){a=_nilePaginationCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_nilePaginationUtilsCjsJs){l=_nilePaginationUtilsCjsJs.c;h=_nilePaginationUtilsCjsJs.g;d=_nilePaginationUtilsCjsJs.a;c=_nilePaginationUtilsCjsJs.b;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_o){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.totalItems=0,_this.currentPage=1,_this.pageSize=50,_this.pageSizeOptions=[10,25,50,100],_this.variant="fluid",_this.disabled=!1,_this.showTitle=!0,_this.portal=!1,_this._pageSizeOpen=!1,_this._pageOpen=!1,_this._miniPageOpen=!1;return _this;}_inherits(p,_o);return _createClass(p,[{key:"firstUpdated",value:function firstUpdated(){var _this2=this;this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",function(){_this2._pageSizeOpen=!0;}),this._pageSizeDropdown.addEventListener("nile-after-hide",function(){_this2._pageSizeOpen=!1;}));}},{key:"totalPages",get:function get(){return Math.max(1,l(this.totalItems,this.pageSize));}},{key:"goToPage",value:function goToPage(i){if(this.disabled)return;var t=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:t,pageSize:this.pageSize});}},{key:"onPageSizeSelect",value:function onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;var t=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:t,pageSize:i});}},{key:"renderCompactRangeText",value:function renderCompactRangeText(){var i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["<div class=\"range-text\">","</div>"])),i);}},{key:"renderRangeText",value:function renderRangeText(){return 0===this.totalItems?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"range-text\">Showing 0 of 0</div>"]))):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div part=\"range-text\" class=\"range-text\">\n ","\n </div>\n "])),h(this.totalItems,this.pageSize,this.currentPage));}},{key:"renderPageSizeSelect",value:function renderPageSizeSelect(){var _this3=this;return"fluid"!==this.variant?null:t(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?portal="," ?disabled=",">\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div part=\"dropdown-list\" class=\"down-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n "])),this.portal,this.disabled,this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this3.disabled,function(){return _this3.onPageSizeSelect(i);},i);}));}},{key:"renderCompactPageSize",value:function renderCompactPageSize(){var _this4=this;return t(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <nile-dropdown\n class=\"compact-dropdown\"\n ?portal=","\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div part=\"dropdown-list\" class=\"compact-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n "])),this.portal,this.disabled,function(){return _this4._pageSizeOpen=!0;},function(){return _this4._pageSizeOpen=!1;},this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return t(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this4.disabled,function(){return _this4.onPageSizeSelect(i);},i);}));}},{key:"renderPrevButton",value:function renderPrevButton(){var _this5=this;return t(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"prev-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),1===this.currentPage||this.disabled,function(){return _this5.goToPage(_this5.currentPage-1);});}},{key:"renderNextButton",value:function renderNextButton(){var _this6=this;return t(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"next-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),this.currentPage===this.totalPages||this.disabled,function(){return _this6.goToPage(_this6.currentPage+1);});}},{key:"renderPageItem",value:function renderPageItem(i,e,n){var _this7=this;return"…"===i?t(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?portal="," ?disabled=",">\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=",">\n \u2026\n </nile-button>\n <nile-menu>\n <div part=\"dropdown-list\" class=\"ellipsis-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n "])),this.portal,this.disabled,this.disabled,d(this.totalPages,n,this.currentPage,e<n.indexOf(this.currentPage)?"left":"right").map(function(i){return t(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this7.disabled,function(){return _this7.goToPage(i);},i);})):t(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=","\n ?disabled=","\n @click=","\n >\n ","\n </nile-button>\n </li>\n "])),i===this.currentPage?"primary":"ghost",this.disabled,function(){return _this7.goToPage(i);},i);}},{key:"renderMiniPrevButton",value:function renderMiniPrevButton(){var _this8=this;return t(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"mini-prev-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n </nile-button>\n </li>\n "])),1===this.currentPage||this.disabled,function(){return _this8.goToPage(_this8.currentPage-1);});}},{key:"renderMiniNextButton",value:function renderMiniNextButton(){var _this9=this;return t(_templateObject14||(_templateObject14=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"mini-next-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n </nile-button>\n </li>\n "])),this.currentPage===this.totalPages||this.disabled,function(){return _this9.goToPage(_this9.currentPage+1);});}},{key:"renderMini",value:function renderMini(){var _this10=this;return t(_templateObject15||(_templateObject15=_taggedTemplateLiteral(["\n <div part=\"wrapper\" class=\"pagination-wrapper mini\">\n <span part=\"mini-showing-label\" class=\"mini-showing-label\">Showing</span>\n <nile-dropdown\n part=\"mini-page-dropdown\"\n class=\"mini-page-dropdown\"\n ?portal=","\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"mini-page-btn ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"12\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div part=\"dropdown-list\" class=\"mini-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"mini-of-label\" class=\"mini-of-label\">of ","</span>\n <nav aria-label=\"Pagination\" part=\"mini-nav\" class=\"mini-nav\">\n <ul part=\"mini-page-list\" class=\"pagination mini-pagination\">\n ","\n ","\n </ul>\n </nav>\n </div>\n "])),this.portal,this.disabled,function(){return _this10._miniPageOpen=!0;},function(){return _this10._miniPageOpen=!1;},this._miniPageOpen?"open":"",this.disabled,this.currentPage,Array.from({length:this.totalPages},function(i,t){return t+1;}).map(function(i){return t(_templateObject16||(_templateObject16=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this10.disabled,function(){return _this10.goToPage(i);},i);}),this.totalPages,this.renderMiniPrevButton(),this.renderMiniNextButton());}},{key:"renderPageList",value:function renderPageList(){var _this11=this;if("compact"===this.variant)return t(_templateObject17||(_templateObject17=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ","\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?portal=","\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div part=\"dropdown-list\" class=\"compact-scroll-wrapper1\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),this.portal,this.disabled,function(){return _this11._pageOpen=!0;},function(){return _this11._pageOpen=!1;},this._pageOpen?"open":"",this.disabled,this.currentPage,Array.from({length:this.totalPages},function(i,t){return t+1;}).map(function(i){return t(_templateObject18||(_templateObject18=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this11.disabled,function(){return _this11.goToPage(i);},i);}),this.renderNextButton());var i=c(this.totalPages,this.currentPage);return t(_templateObject19||(_templateObject19=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ","\n ","\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),i.map(function(t,e){return _this11.renderPageItem(t,e,i);}),this.renderNextButton());}},{key:"render",value:function render(){return"mini"===this.variant?this.renderMini():t(_templateObject20||(_templateObject20=_taggedTemplateLiteral(["\n <div part=\"wrapper\" class=\"pagination-wrapper ","\">\n <div part=\"pager-container\" class=\"pager-container\">\n ","\n ","\n </div>\n ","\n </div>\n "])),this.variant,"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null,"fluid"===this.variant?this.renderPageSizeSelect():this.renderCompactPageSize(),this.renderPageList());}}],[{key:"styles",get:function get(){return[a];}}]);}(o));i([e({attribute:"totalitems",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var t=Number(i);return Number.isFinite(t)&&t>=0?Math.floor(t):0;}}})],p.prototype,"totalItems",void 0),i([e({attribute:"currentpage",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var t=Number(i);return Number.isFinite(t)&&t>=1?Math.floor(t):1;}}})],p.prototype,"currentPage",void 0),i([e({attribute:"pagesize",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var t=Number(i);return Number.isFinite(t)&&t>=1?Math.floor(t):50;}}})],p.prototype,"pageSize",void 0),i([e({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:function fromAttribute(i){try{var _t=JSON.parse(i);if(Array.isArray(_t)&&_t.every(function(i){return"number"==typeof i;}))return _t;}catch(_unused){}return[10,25,50,100];}}})],p.prototype,"pageSizeOptions",void 0),i([e({type:String})],p.prototype,"variant",void 0),i([e({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),i([e({type:Boolean})],p.prototype,"showTitle",void 0),i([e({type:Boolean,reflect:!0})],p.prototype,"portal",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([n()],p.prototype,"_miniPageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),_export("N",p=i([r("nile-pagination")],p));}};});
2
2
  //# sourceMappingURL=nile-pagination.cjs.js.map