@aquera/nile-elements 0.1.53 → 0.1.54
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 +3 -0
- package/dist/index.js +4 -2
- package/dist/nile-error-notification/nile-error-notification.cjs.js +1 -1
- package/dist/nile-error-notification/nile-error-notification.cjs.js.map +1 -1
- package/dist/nile-error-notification/nile-error-notification.esm.js +4 -2
- package/dist/src/nile-error-notification/nile-error-notification.js +4 -2
- package/dist/src/nile-error-notification/nile-error-notification.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-error-notification/nile-error-notification.ts +4 -3
package/README.md
CHANGED
|
@@ -79,6 +79,9 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
#### Version 0.1.54
|
|
83
|
+
- Nile Error Notification: Added Parts for Styling[UIF-888]
|
|
84
|
+
|
|
82
85
|
#### Version 0.1.53
|
|
83
86
|
- Nile Code Editor: Tab Completion, Custom Icon Support, and Suggestion Styling [UIF-887]
|
|
84
87
|
|
package/dist/index.js
CHANGED
|
@@ -6423,7 +6423,7 @@ class tN{constructor(M){this._element=null;const e=M??window;this._node=e,M&&(th
|
|
|
6423
6423
|
margin-right: 4px;
|
|
6424
6424
|
}
|
|
6425
6425
|
`;let FN=class extends DM{constructor(){super(...arguments),this.errorMessage="",this.color=""}static get styles(){return[_N]}updated(M){M.has("color")&&this.style.setProperty("--indication-color",this.color)}render(){return R`
|
|
6426
|
-
<div class="nile-error-notification">
|
|
6426
|
+
<div class="nile-error-notification" part="container">
|
|
6427
6427
|
<nile-icon
|
|
6428
6428
|
name="info2"
|
|
6429
6429
|
size="14"
|
|
@@ -6431,7 +6431,9 @@ class tN{constructor(M){this._element=null;const e=M??window;this._node=e,M&&(th
|
|
|
6431
6431
|
part="icon"
|
|
6432
6432
|
color="var(--indication-color)"
|
|
6433
6433
|
></nile-icon>
|
|
6434
|
-
|
|
6434
|
+
<span part="message">
|
|
6435
|
+
${this.errorMessage}
|
|
6436
|
+
</span>
|
|
6435
6437
|
</div>
|
|
6436
6438
|
`}};M([gM({type:String,reflect:!0})],FN.prototype,"errorMessage",void 0),M([gM({type:String,reflect:!0})],FN.prototype,"color",void 0),FN=M([aM("nile-error-notification")],FN);const JN=s`
|
|
6437
6439
|
[hidden] {
|
|
@@ -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-error-notification.css.cjs.js"],function(_export,_context){"use strict";var i,r,o,t,e,n,_templateObject,s;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){r=_lit.LitElement;o=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileErrorNotificationCssCjsJs){n=_nileErrorNotificationCssCjsJs.s;}],execute:function execute(){_export("N",s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.errorMessage="",_this.color="";return _this;}_inherits(s,_r);return _createClass(s,[{key:"updated",value:function updated(i){i.has("color")&&this.style.setProperty("--indication-color",this.color);}},{key:"render",value:function render(){return o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div class=\"nile-error-notification\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-notification__icon\"\n part=\"icon\"\n color=\"var(--indication-color)\"\n ></nile-icon>\n ","\n </div>\n "])),this.errorMessage);}}],[{key:"styles",get:function get(){return[n];}}]);}(r));i([t({type:String,reflect:!0})],s.prototype,"errorMessage",void 0),i([t({type:String,reflect:!0})],s.prototype,"color",void 0),_export("N",s=i([e("nile-error-notification")],s));}};});
|
|
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-error-notification.css.cjs.js"],function(_export,_context){"use strict";var i,r,o,t,e,n,_templateObject,s;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){r=_lit.LitElement;o=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileErrorNotificationCssCjsJs){n=_nileErrorNotificationCssCjsJs.s;}],execute:function execute(){_export("N",s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.errorMessage="",_this.color="";return _this;}_inherits(s,_r);return _createClass(s,[{key:"updated",value:function updated(i){i.has("color")&&this.style.setProperty("--indication-color",this.color);}},{key:"render",value:function render(){return o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div class=\"nile-error-notification\" part=\"container\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-notification__icon\"\n part=\"icon\"\n color=\"var(--indication-color)\"\n ></nile-icon>\n <span part=\"message\">\n ","\n </span>\n </div>\n "])),this.errorMessage);}}],[{key:"styles",get:function get(){return[n];}}]);}(r));i([t({type:String,reflect:!0})],s.prototype,"errorMessage",void 0),i([t({type:String,reflect:!0})],s.prototype,"color",void 0),_export("N",s=i([e("nile-error-notification")],s));}};});
|
|
2
2
|
//# sourceMappingURL=nile-error-notification.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-error-notification.cjs.js","sources":["../../../src/nile-error-notification/nile-error-notification.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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n /**\n * The styles for ErrorNotification\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 // Represents the error message to be displayed to the user.\n @property({ type: String, reflect: true }) errorMessage: string = '';\n\n @property({ type: String, reflect: true }) color: string = '';\n
|
|
1
|
+
{"version":3,"file":"nile-error-notification.cjs.js","sources":["../../../src/nile-error-notification/nile-error-notification.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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n /**\n * The styles for ErrorNotification\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 // Represents the error message to be displayed to the user.\n @property({ type: String, reflect: true }) errorMessage: string = '';\n\n @property({ type: String, reflect: true }) color: string = '';\n protected updated(_changedProperties: PropertyValues): void {\n if(_changedProperties.has('color')){\n this.style.setProperty('--indication-color',this.color)\n }\n }\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 class=\"nile-error-notification\" part=\"container\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-notification__icon\"\n part=\"icon\"\n color=\"var(--indication-color)\"\n ></nile-icon>\n <span part=\"message\">\n ${this.errorMessage}\n </span>\n </div>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-notification': NileErrorNotification;\n }\n}\n"],"names":["NileErrorNotification","s","this","errorMessage","color","_this","_inherits","_r","_createClass","key","value","updated","_changedProperties","has","style","setProperty","render","html","_templateObject","_taggedTemplateLiteral","get","styles","LitElement","__decorate","property","type","String","reflect","prototype","_export","customElement"],"mappings":"ykGAwBaA,4BAAN,SAAAC,EAAA,uEAUuCC,KAAAA,CAAYC,YAAAA,CAAW,EAEvBD,CAAAA,KAAAA,CAAKE,KAAW,CAAA,EAiC7D,QAAAC,KAAA,EAxCQC,SAAA,CAAAL,CAAA,CAAAM,EAAA,SAAAC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,WAAAC,KAAA,CAQG,SAAAC,OAAAA,CAAQC,GACbA,CAAmBC,CAAAA,GAAAA,CAAI,UACxBX,IAAKY,CAAAA,KAAAA,CAAMC,YAAY,oBAAqBb,CAAAA,IAAAA,CAAKE,MAEpD,EAUM,GAAAK,GAAA,UAAAC,KAAA,UAAAM,MAAAA,CAAAA,CACL,CAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,oXAUHjB,IAAKC,CAAAA,YAAAA,EAId,CAAA,KAAAM,GAAA,UAAAW,GAAA,CArCM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CAACA,CAAAA,CACT,EAMS,MAb+BC,CAAAA,GAUGC,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAmC3B,CAAA4B,CAAAA,SAAAA,CAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAE1BL,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA4B3B,CAAA4B,CAAAA,SAAAA,CAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAAAC,OAAA,KAZpD7B,CAAqBuB,CAAAA,CAAAA,CAAA,CADjCO,CAAAA,CAAc,4BACF9B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__decorate as i}from"tslib";import{LitElement as r,html as o}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s as n}from"./nile-error-notification.css.esm.js";let s=class extends r{constructor(){super(...arguments),this.errorMessage="",this.color=""}static get styles(){return[n]}updated(i){i.has("color")&&this.style.setProperty("--indication-color",this.color)}render(){return o`
|
|
2
|
-
<div class="nile-error-notification">
|
|
2
|
+
<div class="nile-error-notification" part="container">
|
|
3
3
|
<nile-icon
|
|
4
4
|
name="info2"
|
|
5
5
|
size="14"
|
|
@@ -7,6 +7,8 @@ import{__decorate as i}from"tslib";import{LitElement as r,html as o}from"lit";im
|
|
|
7
7
|
part="icon"
|
|
8
8
|
color="var(--indication-color)"
|
|
9
9
|
></nile-icon>
|
|
10
|
-
|
|
10
|
+
<span part="message">
|
|
11
|
+
${this.errorMessage}
|
|
12
|
+
</span>
|
|
11
13
|
</div>
|
|
12
14
|
`}};i([t({type:String,reflect:!0})],s.prototype,"errorMessage",void 0),i([t({type:String,reflect:!0})],s.prototype,"color",void 0),s=i([e("nile-error-notification")],s);export{s as N};
|
|
@@ -42,7 +42,7 @@ let NileErrorNotification = class NileErrorNotification extends LitElement {
|
|
|
42
42
|
*/
|
|
43
43
|
render() {
|
|
44
44
|
return html `
|
|
45
|
-
<div class="nile-error-notification">
|
|
45
|
+
<div class="nile-error-notification" part="container">
|
|
46
46
|
<nile-icon
|
|
47
47
|
name="info2"
|
|
48
48
|
size="14"
|
|
@@ -50,7 +50,9 @@ let NileErrorNotification = class NileErrorNotification extends LitElement {
|
|
|
50
50
|
part="icon"
|
|
51
51
|
color="var(--indication-color)"
|
|
52
52
|
></nile-icon>
|
|
53
|
-
|
|
53
|
+
<span part="message">
|
|
54
|
+
${this.errorMessage}
|
|
55
|
+
</span>
|
|
54
56
|
</div>
|
|
55
57
|
`;
|
|
56
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-error-notification.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QASL,4DAA4D;QAChB,iBAAY,GAAW,EAAE,CAAC;QAE1B,UAAK,GAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-error-notification.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QASL,4DAA4D;QAChB,iBAAY,GAAW,EAAE,CAAC;QAE1B,UAAK,GAAW,EAAE,CAAC;QAgC/D,gBAAgB;IAClB,CAAC;IA5CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMS,OAAO,CAAC,kBAAkC;QAClD,IAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;;YAUH,IAAI,CAAC,YAAY;;;KAGxB,CAAC;IACJ,CAAC;CAGF,CAAA;AAnC6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;2DAA2B;AAE1B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAAoB;AAZpD,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA6CjC;;AAED,eAAe,qBAAqB,CAAC","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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-notification.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-error-notification\n *\n */\n@customElement('nile-error-notification')\nexport class NileErrorNotification extends LitElement {\n /**\n * The styles for ErrorNotification\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 // Represents the error message to be displayed to the user.\n @property({ type: String, reflect: true }) errorMessage: string = '';\n\n @property({ type: String, reflect: true }) color: string = '';\n protected updated(_changedProperties: PropertyValues): void {\n if(_changedProperties.has('color')){\n this.style.setProperty('--indication-color',this.color)\n }\n }\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 class=\"nile-error-notification\" part=\"container\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-notification__icon\"\n part=\"icon\"\n color=\"var(--indication-color)\"\n ></nile-icon>\n <span part=\"message\">\n ${this.errorMessage}\n </span>\n </div>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileErrorNotification;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-notification': NileErrorNotification;\n }\n}\n"]}
|