@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.
- package/README.md +19 -0
- package/demo/nxtgen-classes.css +2 -2
- package/demo/nxtgen-properties.css +2 -2
- package/demo/nxtgen-utilities.css +4 -4
- package/demo/nxtgen.css +2 -2
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1120 -674
- package/dist/nile-empty-state/nile-empty-state.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.cjs.js.map +1 -1
- package/dist/nile-empty-state/nile-empty-state.css.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.css.cjs.js.map +1 -1
- package/dist/nile-empty-state/nile-empty-state.css.esm.js +129 -6
- package/dist/nile-empty-state/nile-empty-state.esm.js +45 -31
- package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.esm.js +25 -25
- package/dist/nile-segmented-progress-bar/index.cjs.js +2 -0
- package/dist/nile-segmented-progress-bar/index.cjs.js.map +1 -0
- package/dist/nile-segmented-progress-bar/index.esm.js +1 -0
- package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.cjs.js +2 -0
- package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.cjs.js.map +1 -0
- package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.css.cjs.js +2 -0
- package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.css.cjs.js.map +1 -0
- package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.css.esm.js +243 -0
- package/dist/nile-segmented-progress-bar/nile-segmented-progress-bar.esm.js +69 -0
- package/dist/nile-wysiwyg-editor/engine/commands.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/commands.cjs.js.map +1 -1
- package/dist/nile-wysiwyg-editor/engine/commands.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/create-state.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/create-state.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/index.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/index.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.cjs.js.map +1 -1
- package/dist/nile-wysiwyg-editor/engine/plugins/code-highlight.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/index.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/index.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/ui/code-block-menu.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/ui/code-block-menu.esm.js +1 -1
- package/dist/nile-wysiwyg-editor/ui/source-view.cjs.js +1 -1
- package/dist/nile-wysiwyg-editor/ui/source-view.esm.js +1 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-empty-state/nile-empty-state.css.js +127 -4
- package/dist/src/nile-empty-state/nile-empty-state.css.js.map +1 -1
- package/dist/src/nile-empty-state/nile-empty-state.d.ts +35 -5
- package/dist/src/nile-empty-state/nile-empty-state.js +159 -42
- package/dist/src/nile-empty-state/nile-empty-state.js.map +1 -1
- package/dist/src/nile-empty-state/nile-empty-state.test.d.ts +1 -0
- package/dist/src/nile-empty-state/nile-empty-state.test.js +186 -15
- package/dist/src/nile-empty-state/nile-empty-state.test.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.js +5 -5
- package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
- package/dist/src/nile-segmented-progress-bar/index.d.ts +2 -0
- package/dist/src/nile-segmented-progress-bar/index.js +2 -0
- package/dist/src/nile-segmented-progress-bar/index.js.map +1 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.d.ts +9 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.js +252 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.js.map +1 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.d.ts +135 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.js +373 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.js.map +1 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.d.ts +1 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.js +961 -0
- package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.js.map +1 -0
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/xml-09119317.cjs.js +2 -0
- package/dist/xml-09119317.cjs.js.map +1 -0
- package/dist/{xml-25c4108a.esm.js → xml-9bf771b3.esm.js} +1 -1
- package/package.json +2 -1
- package/src/index.ts +5 -0
- package/src/nile-empty-state/nile-empty-state.css.ts +127 -4
- package/src/nile-empty-state/nile-empty-state.test.ts +192 -15
- package/src/nile-empty-state/nile-empty-state.ts +195 -34
- package/src/nile-pagination/nile-pagination.ts +5 -5
- package/src/nile-segmented-progress-bar/index.ts +5 -0
- package/src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.ts +254 -0
- package/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.ts +1298 -0
- package/src/nile-segmented-progress-bar/nile-segmented-progress-bar.ts +437 -0
- package/vscode-html-custom-data.json +192 -16
- package/dist/xml-90fd974e.cjs.js +0 -2
- 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
|
|
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:
|
|
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
|
-
|
|
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
|
|
2
|
-
<
|
|
3
|
-
|
|
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
|
-
${
|
|
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?
|
|
8
|
-
<div part="icon-wrapper" class="empty-state__img__icon">
|
|
9
|
-
${this.
|
|
10
|
-
|
|
11
|
-
|
|
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"
|
|
19
|
-
<div part="tonal-body" class="empty-state__body--tonal">
|
|
20
|
-
${this.
|
|
21
|
-
|
|
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"
|
|
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.
|
|
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
|
|
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([
|
|
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
|