@aquera/nile-elements 1.0.4-beta-1.2 → 1.0.4-beta-1.3
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 +2 -0
- package/dist/index.js +7 -7
- package/dist/nile-stepper-item/nile-stepper-item.cjs.js +1 -1
- package/dist/nile-stepper-item/nile-stepper-item.cjs.js.map +1 -1
- package/dist/nile-stepper-item/nile-stepper-item.esm.js +6 -6
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.cjs.js +1 -1
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.cjs.js.map +1 -1
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.esm.js +8 -8
- package/dist/src/nile-stepper-item/nile-stepper-item.js +5 -5
- package/dist/src/nile-stepper-item/nile-stepper-item.js.map +1 -1
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js +4 -4
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-stepper-item/nile-stepper-item.ts +5 -5
- package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts +4 -4
package/README.md
CHANGED
|
@@ -78,6 +78,8 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
78
78
|
## Release Notes
|
|
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
|
+
#### Version 1.0.4-beta-1.3
|
|
82
|
+
- Nile Stepper: Added Parts and Made Properties Reflective
|
|
81
83
|
|
|
82
84
|
#### Version 1.0.4-beta-1.2
|
|
83
85
|
- Nile Stepper: Added Parts and Made Properties Reflective
|
package/dist/index.js
CHANGED
|
@@ -10194,14 +10194,14 @@ class $i{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
10194
10194
|
</div>
|
|
10195
10195
|
|
|
10196
10196
|
<div part="bulletin" class=${Le({stepper__item__bulletin:!0,"stepper__item__bulletin--inline":!this.contentBelow})}>
|
|
10197
|
-
${M?R`<div class="${Le({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":e})}">${this.getSvg()}</div>`:R`<div class="${Le({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":e})}"></div>`}
|
|
10197
|
+
${M?R`<div part="bulletin-icon" class="${Le({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":e})}">${this.getSvg()}</div>`:R`<div part="bulletin-dot" class="${Le({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":e})}"></div>`}
|
|
10198
10198
|
</div>
|
|
10199
10199
|
|
|
10200
10200
|
<div part="line-container" class="${Le({stepper__line__container:!0,"stepper__line--hastitle":!this.contentBelow})}">
|
|
10201
10201
|
${this.contentBelow||!this.title?B:R`
|
|
10202
10202
|
|
|
10203
10203
|
<div part="content-above" class="stepper__item__content--above">
|
|
10204
|
-
<div class="${Le({stepper__content__title:!0,"stepper__content__title--active":e})}">
|
|
10204
|
+
<div part="title_above" class="${Le({stepper__content__title:!0,"stepper__content__title--active":e})}">
|
|
10205
10205
|
${this.title}
|
|
10206
10206
|
</div>
|
|
10207
10207
|
<div class="${Le({stepper__content__subtitle:!0,"stepper__content__subtitle--active":e})}">${this.subtitle}</div>
|
|
@@ -10214,10 +10214,10 @@ class $i{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
10214
10214
|
</div>
|
|
10215
10215
|
${this.contentBelow?R`
|
|
10216
10216
|
<div part="content-below" class="stepper__item__content--below">
|
|
10217
|
-
<div part="
|
|
10217
|
+
<div part="title_below" class="${Le({stepper__content__title:!0,"stepper__content__title--active":e})}">
|
|
10218
10218
|
${this.title}
|
|
10219
10219
|
</div>
|
|
10220
|
-
<div part="
|
|
10220
|
+
<div part="subtitle_below" class="${Le({stepper__content__subtitle:!0,"stepper__content__subtitle--active":e})}">${this.subtitle}</div>
|
|
10221
10221
|
</div>
|
|
10222
10222
|
`:B}
|
|
10223
10223
|
</div>
|
|
@@ -10444,10 +10444,10 @@ class $i{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
10444
10444
|
class="${Le({stepper__item:!0,"stepper__item--selected":e,"stepper__item--default":!e,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size})}">
|
|
10445
10445
|
<div part="connector" class="stepper-item__connector-content">
|
|
10446
10446
|
<div part="bulletin" class="stepper__item__bulletin">
|
|
10447
|
-
${M?R`<div class="${Le({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":e})}">${this.getSvg()}</div>`:R`<div class="${Le({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":e})}"></div>`}
|
|
10447
|
+
${M?R`<div part="bulletin-icon" class="${Le({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":e})}">${this.getSvg()}</div>`:R`<div part="bulletin-dot" class="${Le({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":e})}"></div>`}
|
|
10448
10448
|
</div>
|
|
10449
|
-
<div class="stepper__item__line__container">
|
|
10450
|
-
${this.isLast?B:R`<div class="${Le({stepper__item__line:!0,"stepper__item__line--active":i})}"></div>`}
|
|
10449
|
+
<div part="line-container" class="stepper__item__line__container">
|
|
10450
|
+
${this.isLast?B:R`<div part="line" class="${Le({stepper__item__line:!0,"stepper__item__line--active":i})}"></div>`}
|
|
10451
10451
|
</div>
|
|
10452
10452
|
</div>
|
|
10453
10453
|
<div part="content" class="stepper__item__content">
|
|
@@ -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-stepper-item.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,l,_,p,r,n,o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,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){e=_lit.html;i=_lit.nothing;},function(_litDecoratorsJs){s=_litDecoratorsJs.query;l=_litDecoratorsJs.property;_=_litDecoratorsJs.state;p=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){r=_litDirectivesClassMapJs.classMap;},function(_nileStepperItemCssCjsJs){n=_nileStepperItemCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_o){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.title="",_this.subtitle="",_this.contentBelow=!1,_this.size="lg",_this.icon="tick",_this.isFirst=!1,_this.isLast=!1,_this.isComplete=!1,_this.isCurrent=!1,_this.haveFlex=!0;return _this;}_inherits(c,_o);return _createClass(c,[{key:"updated",value:function updated(t){if(t.has("subtitle")&&this.isLast&&!this.contentBelow&&this.subtitle){var _this$absoluteSubtitl,_this$absoluteSubtitl2;var _t=(_this$absoluteSubtitl=(_this$absoluteSubtitl2=this.absoluteSubtitle)===null||_this$absoluteSubtitl2===void 0?void 0:_this$absoluteSubtitl2.scrollWidth)!==null&&_this$absoluteSubtitl!==void 0?_this$absoluteSubtitl:"0";this.absoluteTitle.style.minWidth=_t+"px";}}},{key:"render",value:function render(){this.haveFlex||this.style.setProperty("--stepper-flex-val","0");var t=this.isCurrent,s=this.isComplete;var l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);var _=!1;return s&&(_=!0,this.calculatedCompletedStepValue==this.value&&(_=!1)),e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t\t<div part=\"item\" class=\"","\">\n\t\t\t\t<div part=\"line-content\" class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div part=\"bulletin\" class=",">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div part=\"line-container\" class=\"","\">\n\t\t\t\t\t\t","\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t","\n\t\t\t</div>\n\t\t"])),r({stepper__item:!0,"stepper__item--selected":t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size}),this.isFirst?i:e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n\t\t\t\t\t\t\t<hr class=\"","\"/>\n\t\t\t\t\t\t"])),r({stepper__line:!0,"stepper__line--active":s||t})),r({stepper__item__bulletin:!0,"stepper__item__bulletin--inline":!this.contentBelow}),l?e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div class=\"","\">","</div>"])),r({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t}),this.getSvg()):e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<div class=\"","\"></div>"])),r({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})),r({stepper__line__container:!0,"stepper__line--hastitle":!this.contentBelow}),this.contentBelow||!this.title?i:e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n\n\t\t\t\t\t\t\t<div part=\"content-above\" class=\"stepper__item__content--above\">\n\t\t\t\t\t\t\t\t<div class=\"","\">\n\t\t\t\t\t\t\t\t\t","\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"","\">","</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t"])),r({stepper__content__title:!0,"stepper__content__title--active":t}),this.title,r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t}),this.subtitle),this.isLast?i:e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n\t\t\t\t\t\t\t<hr part=\"line\" class=\"","\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t"])),r({stepper__line:!0,"stepper__line--active":_})),this.contentBelow?e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n\t\t\t\t\t<div part=\"content-below\" class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div part=\"
|
|
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-stepper-item.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,l,_,p,r,n,o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,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){e=_lit.html;i=_lit.nothing;},function(_litDecoratorsJs){s=_litDecoratorsJs.query;l=_litDecoratorsJs.property;_=_litDecoratorsJs.state;p=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){r=_litDirectivesClassMapJs.classMap;},function(_nileStepperItemCssCjsJs){n=_nileStepperItemCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_o){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.title="",_this.subtitle="",_this.contentBelow=!1,_this.size="lg",_this.icon="tick",_this.isFirst=!1,_this.isLast=!1,_this.isComplete=!1,_this.isCurrent=!1,_this.haveFlex=!0;return _this;}_inherits(c,_o);return _createClass(c,[{key:"updated",value:function updated(t){if(t.has("subtitle")&&this.isLast&&!this.contentBelow&&this.subtitle){var _this$absoluteSubtitl,_this$absoluteSubtitl2;var _t=(_this$absoluteSubtitl=(_this$absoluteSubtitl2=this.absoluteSubtitle)===null||_this$absoluteSubtitl2===void 0?void 0:_this$absoluteSubtitl2.scrollWidth)!==null&&_this$absoluteSubtitl!==void 0?_this$absoluteSubtitl:"0";this.absoluteTitle.style.minWidth=_t+"px";}}},{key:"render",value:function render(){this.haveFlex||this.style.setProperty("--stepper-flex-val","0");var t=this.isCurrent,s=this.isComplete;var l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);var _=!1;return s&&(_=!0,this.calculatedCompletedStepValue==this.value&&(_=!1)),e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t\t<div part=\"item\" class=\"","\">\n\t\t\t\t<div part=\"line-content\" class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div part=\"bulletin\" class=",">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div part=\"line-container\" class=\"","\">\n\t\t\t\t\t\t","\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t","\n\t\t\t</div>\n\t\t"])),r({stepper__item:!0,"stepper__item--selected":t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size}),this.isFirst?i:e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n\t\t\t\t\t\t\t<hr class=\"","\"/>\n\t\t\t\t\t\t"])),r({stepper__line:!0,"stepper__line--active":s||t})),r({stepper__item__bulletin:!0,"stepper__item__bulletin--inline":!this.contentBelow}),l?e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div part=\"bulletin-icon\" class=\"","\">","</div>"])),r({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t}),this.getSvg()):e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<div part=\"bulletin-dot\" class=\"","\"></div>"])),r({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})),r({stepper__line__container:!0,"stepper__line--hastitle":!this.contentBelow}),this.contentBelow||!this.title?i:e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n\n\t\t\t\t\t\t\t<div part=\"content-above\" class=\"stepper__item__content--above\">\n\t\t\t\t\t\t\t\t<div part=\"title_above\" class=\"","\">\n\t\t\t\t\t\t\t\t\t","\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"","\">","</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t"])),r({stepper__content__title:!0,"stepper__content__title--active":t}),this.title,r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t}),this.subtitle),this.isLast?i:e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n\t\t\t\t\t\t\t<hr part=\"line\" class=\"","\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t"])),r({stepper__line:!0,"stepper__line--active":_})),this.contentBelow?e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n\t\t\t\t\t<div part=\"content-below\" class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div part=\"title_below\" class=\"","\">\n\t\t\t\t\t\t\t","\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div part=\"subtitle_below\" class=\"","\">","</div>\n\t\t\t\t\t</div>\n\t\t\t\t"])),r({stepper__content__title:!0,"stepper__content__title--active":t}),this.title,r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t}),this.subtitle):i);}},{key:"getSvg",value:function getSvg(){var t="sm"==this.size?20:"lg"==this.size?24:28;return e(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n\t\t<svg width=\"","\" height=\"","\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t"])),t,t);}}],[{key:"styles",get:function get(){return[n];}}]);}(o));t([s(".stepper__item__content--above .stepper__content__title")],c.prototype,"absoluteTitle",void 0),t([s(".stepper__item__content--above .stepper__content__subtitle")],c.prototype,"absoluteSubtitle",void 0),t([l({attribute:!0,reflect:!0})],c.prototype,"title",void 0),t([l({attribute:!0,reflect:!0})],c.prototype,"subtitle",void 0),t([_()],c.prototype,"contentBelow",void 0),t([_()],c.prototype,"size",void 0),t([_()],c.prototype,"icon",void 0),t([_()],c.prototype,"isFirst",void 0),t([_()],c.prototype,"isLast",void 0),t([_()],c.prototype,"isComplete",void 0),t([_()],c.prototype,"isCurrent",void 0),t([_()],c.prototype,"currentStepValue",void 0),t([_()],c.prototype,"completedStepValue",void 0),t([_()],c.prototype,"calculatedCompletedStepValue",void 0),t([_()],c.prototype,"value",void 0),t([_()],c.prototype,"haveFlex",void 0),_export("N",c=t([p("nile-stepper-item")],c));}};});
|
|
2
2
|
//# sourceMappingURL=nile-stepper-item.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-stepper-item.cjs.js","sources":["../../../src/nile-stepper-item/nile-stepper-item.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 { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-stepper-item.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile stepper-item component.\n *\n * @tag nile-stepper-item\n *\n */\n@customElement('nile-stepper-item')\nexport class NileStepperItem extends NileElement {\n\n\t@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;\n\t@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;\n\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\tprotected updated(_changedProperties: PropertyValues): void {\n\t\tif(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){\n\t\t\tconst subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';\n\t\t\tthis.absoluteTitle.style.minWidth=subtitleWidth+\"px\"\n\t\t}\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\n\t\tif (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon = false;\n\t\tif (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\t\treturn html`\n\t\t\t<div part=\"item\" class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"line-content\" class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t${this.isFirst ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':isComplete || isCurrent\n\t\t\t\t\t\t\t})}\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div part=\"bulletin\" class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div part=\"line-container\" class=\"${classMap({\n\t\t\t\t\t\t'stepper__line__container':true,\n\t\t\t\t\t\t'stepper__line--hastitle':!this.contentBelow\n\t\t\t\t\t})}\">\n\t\t\t\t\t\t${this.contentBelow || !this.title ? nothing:html`\n\n\t\t\t\t\t\t\t<div part=\"content-above\" class=\"stepper__item__content--above\">\n\t\t\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t\t\t\t${this.isLast ? nothing : html`\n\t\t\t\t\t\t\t<hr part=\"line\" class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':suffixStepperLineActive\n\t\t\t\t\t\t\t})}\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${this.contentBelow?\n\t\t\t\t\thtml`\n\t\t\t\t\t<div part=\"content-below\" class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`:nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepperItem;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper-item': NileStepperItem;\n\t}\n}"],"names":["NileStepperItem","_o","c","this","title","subtitle","contentBelow","size","icon","isFirst","isLast","isComplete","isCurrent","haveFlex","_this","_inherits","_createClass","key","value","updated","_changedProperties","has","_this$absoluteSubtitl","_this$absoluteSubtitl2","subtitleWidth","absoluteSubtitle","scrollWidth","absoluteTitle","style","minWidth","render","setProperty","showCompletedIcon","completedStepValue","suffixStepperLineActive","calculatedCompletedStepValue","html","_templateObject","_taggedTemplateLiteral","classMap","stepper__item","nothing","_templateObject2","stepper__line","stepper__item__bulletin","_templateObject3","getSvg","_templateObject4","stepper__line__container","_templateObject5","stepper__content__title","stepper__content__subtitle","_templateObject6","_templateObject7","iconSize","_templateObject8","get","styles","NileElement","__decorate","query","prototype","property","attribute","reflect","state","_export","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nile-stepper-item.cjs.js","sources":["../../../src/nile-stepper-item/nile-stepper-item.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 { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-stepper-item.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile stepper-item component.\n *\n * @tag nile-stepper-item\n *\n */\n@customElement('nile-stepper-item')\nexport class NileStepperItem extends NileElement {\n\n\t@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;\n\t@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;\n\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\tprotected updated(_changedProperties: PropertyValues): void {\n\t\tif(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){\n\t\t\tconst subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';\n\t\t\tthis.absoluteTitle.style.minWidth=subtitleWidth+\"px\"\n\t\t}\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\n\t\tif (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon = false;\n\t\tif (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\t\treturn html`\n\t\t\t<div part=\"item\" class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"line-content\" class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t${this.isFirst ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':isComplete || isCurrent\n\t\t\t\t\t\t\t})}\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div part=\"bulletin\" class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div part=\"bulletin-icon\" class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div part=\"bulletin-dot\" class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div part=\"line-container\" class=\"${classMap({\n\t\t\t\t\t\t'stepper__line__container':true,\n\t\t\t\t\t\t'stepper__line--hastitle':!this.contentBelow\n\t\t\t\t\t})}\">\n\t\t\t\t\t\t${this.contentBelow || !this.title ? nothing:html`\n\n\t\t\t\t\t\t\t<div part=\"content-above\" class=\"stepper__item__content--above\">\n\t\t\t\t\t\t\t\t<div part=\"title_above\" class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t\t\t\t${this.isLast ? nothing : html`\n\t\t\t\t\t\t\t<hr part=\"line\" class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':suffixStepperLineActive\n\t\t\t\t\t\t\t})}\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${this.contentBelow?\n\t\t\t\t\thtml`\n\t\t\t\t\t<div part=\"content-below\" class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div part=\"title_below\" class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div part=\"subtitle_below\" class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`:nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepperItem;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper-item': NileStepperItem;\n\t}\n}"],"names":["NileStepperItem","_o","c","this","title","subtitle","contentBelow","size","icon","isFirst","isLast","isComplete","isCurrent","haveFlex","_this","_inherits","_createClass","key","value","updated","_changedProperties","has","_this$absoluteSubtitl","_this$absoluteSubtitl2","subtitleWidth","absoluteSubtitle","scrollWidth","absoluteTitle","style","minWidth","render","setProperty","showCompletedIcon","completedStepValue","suffixStepperLineActive","calculatedCompletedStepValue","html","_templateObject","_taggedTemplateLiteral","classMap","stepper__item","nothing","_templateObject2","stepper__line","stepper__item__bulletin","_templateObject3","getSvg","_templateObject4","stepper__line__container","_templateObject5","stepper__content__title","stepper__content__subtitle","_templateObject6","_templateObject7","iconSize","_templateObject8","get","styles","NileElement","__decorate","query","prototype","property","attribute","reflect","state","_export","customElement"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{query as s,property as l,state as _,customElement as p}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{s as n}from"./nile-stepper-item.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let
|
|
1
|
+
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{query as s,property as l,state as _,customElement as p}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{s as n}from"./nile-stepper-item.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let a=class extends o{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="lg",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[n]}updated(t){if(t.has("subtitle")&&this.isLast&&!this.contentBelow&&this.subtitle){const t=this.absoluteSubtitle?.scrollWidth??"0";this.absoluteTitle.style.minWidth=t+"px"}}render(){this.haveFlex||this.style.setProperty("--stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let _=!1;return s&&(_=!0,this.calculatedCompletedStepValue==this.value&&(_=!1)),e`
|
|
2
2
|
<div part="item" class="${r({stepper__item:!0,"stepper__item--selected":t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size})}">
|
|
3
3
|
<div part="line-content" class="stepper__line__content">
|
|
4
4
|
<div class="stepper__line__container">
|
|
@@ -8,14 +8,14 @@ import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";impor
|
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
10
|
<div part="bulletin" class=${r({stepper__item__bulletin:!0,"stepper__item__bulletin--inline":!this.contentBelow})}>
|
|
11
|
-
${l?e`<div class="${r({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t})}">${this.getSvg()}</div>`:e`<div class="${r({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
|
11
|
+
${l?e`<div part="bulletin-icon" class="${r({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t})}">${this.getSvg()}</div>`:e`<div part="bulletin-dot" class="${r({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
|
12
12
|
</div>
|
|
13
13
|
|
|
14
14
|
<div part="line-container" class="${r({stepper__line__container:!0,"stepper__line--hastitle":!this.contentBelow})}">
|
|
15
15
|
${this.contentBelow||!this.title?i:e`
|
|
16
16
|
|
|
17
17
|
<div part="content-above" class="stepper__item__content--above">
|
|
18
|
-
<div class="${r({stepper__content__title:!0,"stepper__content__title--active":t})}">
|
|
18
|
+
<div part="title_above" class="${r({stepper__content__title:!0,"stepper__content__title--active":t})}">
|
|
19
19
|
${this.title}
|
|
20
20
|
</div>
|
|
21
21
|
<div class="${r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
|
|
@@ -28,10 +28,10 @@ import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";impor
|
|
|
28
28
|
</div>
|
|
29
29
|
${this.contentBelow?e`
|
|
30
30
|
<div part="content-below" class="stepper__item__content--below">
|
|
31
|
-
<div part="
|
|
31
|
+
<div part="title_below" class="${r({stepper__content__title:!0,"stepper__content__title--active":t})}">
|
|
32
32
|
${this.title}
|
|
33
33
|
</div>
|
|
34
|
-
<div part="
|
|
34
|
+
<div part="subtitle_below" class="${r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
|
|
35
35
|
</div>
|
|
36
36
|
`:i}
|
|
37
37
|
</div>
|
|
@@ -39,4 +39,4 @@ import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";impor
|
|
|
39
39
|
<svg width="${t}" height="${t}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
40
40
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
|
|
41
41
|
</svg>
|
|
42
|
-
`}};t([s(".stepper__item__content--above .stepper__content__title")],
|
|
42
|
+
`}};t([s(".stepper__item__content--above .stepper__content__title")],a.prototype,"absoluteTitle",void 0),t([s(".stepper__item__content--above .stepper__content__subtitle")],a.prototype,"absoluteSubtitle",void 0),t([l({attribute:!0,reflect:!0})],a.prototype,"title",void 0),t([l({attribute:!0,reflect:!0})],a.prototype,"subtitle",void 0),t([_()],a.prototype,"contentBelow",void 0),t([_()],a.prototype,"size",void 0),t([_()],a.prototype,"icon",void 0),t([_()],a.prototype,"isFirst",void 0),t([_()],a.prototype,"isLast",void 0),t([_()],a.prototype,"isComplete",void 0),t([_()],a.prototype,"isCurrent",void 0),t([_()],a.prototype,"currentStepValue",void 0),t([_()],a.prototype,"completedStepValue",void 0),t([_()],a.prototype,"calculatedCompletedStepValue",void 0),t([_()],a.prototype,"value",void 0),t([_()],a.prototype,"haveFlex",void 0),a=t([p("nile-stepper-item")],a);export{a 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-vertical-stepper-item.css.cjs.js","../internal/nile-element.cjs.js","lit/directives/class-map.js"],function(_export,_context){"use strict";var t,e,i,s,l,r,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-vertical-stepper-item.css.cjs.js","../internal/nile-element.cjs.js","lit/directives/class-map.js"],function(_export,_context){"use strict";var t,e,i,s,l,r,p,_,n,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,o;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;l=_litDecoratorsJs.state;r=_litDecoratorsJs.customElement;},function(_nileVerticalStepperItemCssCjsJs){p=_nileVerticalStepperItemCssCjsJs.s;},function(_internalNileElementCjsJs){_=_internalNileElementCjsJs.N;},function(_litDirectivesClassMapJs){n=_litDirectivesClassMapJs.classMap;}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_ref){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.title="",_this.subtitle="",_this.contentBelow=!1,_this.size="lg",_this.icon="tick",_this.isFirst=!1,_this.isLast=!1,_this.isComplete=!1,_this.isCurrent=!1,_this.haveFlex=!0;return _this;}_inherits(o,_ref);return _createClass(o,[{key:"render",value:function render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");var t=this.isCurrent,s=this.isComplete;var l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);var r=!1;return s&&(r=!0,this.calculatedCompletedStepValue==this.value&&(r=!1)),"sm"==this.size||this.size,e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t\t<div \n\t\t\tpart=\"item\"\n\t\t\tclass=\"","\">\n\t\t\t\t<div part=\"connector\" class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div part=\"bulletin\" class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t\t<div part=\"line-container\" class=\"stepper__item__line__container\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class=\"stepper__item__content\">\n\t\t\t\t\t<div part=\"title\" class=\"","\">","</div>\n\t\t\t\t\t<div part=\"subtitle\" class=\"","\">","</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t"])),n({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size}),l?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div part=\"bulletin-icon\" class=\"","\">","</div>"])),n({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t}),this.getSvg()):e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div part=\"bulletin-dot\" class=\"","\"></div>"])),n({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})),this.isLast?i:e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<div part=\"line\" class=\"","\"></div>"])),n({stepper__item__line:!0,"stepper__item__line--active":r})),n({stepper__content__title:!0,"stepper__content__title--alone":!this.subtitle,"stepper__content__title--active":t}),this.title,n({stepper__content__subtitle:!0,"stepper__content__subtitle--alone":!this.title,"stepper__content__subtitle--active":t}),this.subtitle);}},{key:"getSvg",value:function getSvg(){var t="sm"==this.size?20:"lg"==this.size?24:28;return e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n\t\t<svg width=\"","\" height=\"","\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t"])),t,t);}}],[{key:"styles",get:function get(){return[p];}}]);}(_));t([s({attribute:!0,reflect:!0})],o.prototype,"title",void 0),t([s({attribute:!0,reflect:!0})],o.prototype,"subtitle",void 0),t([l()],o.prototype,"contentBelow",void 0),t([l()],o.prototype,"size",void 0),t([l()],o.prototype,"icon",void 0),t([l()],o.prototype,"isFirst",void 0),t([l()],o.prototype,"isLast",void 0),t([l()],o.prototype,"isComplete",void 0),t([l()],o.prototype,"isCurrent",void 0),t([l()],o.prototype,"currentStepValue",void 0),t([l()],o.prototype,"completedStepValue",void 0),t([l()],o.prototype,"calculatedCompletedStepValue",void 0),t([l()],o.prototype,"value",void 0),t([l()],o.prototype,"haveFlex",void 0),_export("N",o=t([r("nile-vertical-stepper-item")],o));}};});
|
|
2
2
|
//# sourceMappingURL=nile-vertical-stepper-item.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-vertical-stepper-item.cjs.js","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.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 {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'lg'?16:20;\n\t\treturn html`\n\t\t\t<div \n\t\t\tpart=\"item\"\n\t\t\tclass=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"connector\" class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div part=\"bulletin\" class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class=\"stepper__item__content\">\n\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, \"stepper__content__title--alone\": !this.subtitle, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, \"stepper__content__subtitle--alone\": !this.title, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-vertical-stepper-item': NileVerticalStepperItem;\n }\n}"],"names":["NileVerticalStepperItem","
|
|
1
|
+
{"version":3,"file":"nile-vertical-stepper-item.cjs.js","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.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 {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'lg'?16:20;\n\t\treturn html`\n\t\t\t<div \n\t\t\tpart=\"item\"\n\t\t\tclass=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"connector\" class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div part=\"bulletin\" class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div part=\"bulletin-icon\" class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div part=\"bulletin-dot\" class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div part=\"line-container\" class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div part=\"line\" class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class=\"stepper__item__content\">\n\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, \"stepper__content__title--alone\": !this.subtitle, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, \"stepper__content__subtitle--alone\": !this.title, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-vertical-stepper-item': NileVerticalStepperItem;\n }\n}"],"names":["NileVerticalStepperItem","o","this","title","subtitle","contentBelow","size","icon","isFirst","isLast","isComplete","isCurrent","haveFlex","_this","_inherits","_ref","_createClass","key","value","render","style","setProperty","showCompletedIcon","completedStepValue","suffixStepperLineActive","calculatedCompletedStepValue","html","_templateObject","_taggedTemplateLiteral","classMap","stepper__item","_templateObject2","getSvg","_templateObject3","nothing","_templateObject4","stepper__item__line","stepper__content__title","stepper__content__subtitle","iconSize","_templateObject5","__decorate","get","styles","NileElement","property","attribute","reflect","prototype","state","customElement"],"mappings":"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"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as r}from"lit/decorators.js";import{s as p}from"./nile-vertical-stepper-item.css.esm.js";import{N as _}from"../internal/nile-element.esm.js";import{classMap as
|
|
1
|
+
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as r}from"lit/decorators.js";import{s as p}from"./nile-vertical-stepper-item.css.esm.js";import{N as _}from"../internal/nile-element.esm.js";import{classMap as n}from"lit/directives/class-map.js";let o=class extends _{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="lg",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[p]}render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let r=!1;return s&&(r=!0,this.calculatedCompletedStepValue==this.value&&(r=!1)),"sm"==this.size||this.size,e`
|
|
2
2
|
<div
|
|
3
3
|
part="item"
|
|
4
|
-
class="${
|
|
4
|
+
class="${n({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size})}">
|
|
5
5
|
<div part="connector" class="stepper-item__connector-content">
|
|
6
6
|
<div part="bulletin" class="stepper__item__bulletin">
|
|
7
|
-
${l?e`<div class="${
|
|
7
|
+
${l?e`<div part="bulletin-icon" class="${n({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t})}">${this.getSvg()}</div>`:e`<div part="bulletin-dot" class="${n({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
|
8
8
|
</div>
|
|
9
|
-
<div class="stepper__item__line__container">
|
|
10
|
-
${this.isLast?i:e`<div class="${
|
|
9
|
+
<div part="line-container" class="stepper__item__line__container">
|
|
10
|
+
${this.isLast?i:e`<div part="line" class="${n({stepper__item__line:!0,"stepper__item__line--active":r})}"></div>`}
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
13
|
<div part="content" class="stepper__item__content">
|
|
14
|
-
<div part="title" class="${
|
|
15
|
-
<div part="subtitle" class="${
|
|
14
|
+
<div part="title" class="${n({stepper__content__title:!0,"stepper__content__title--alone":!this.subtitle,"stepper__content__title--active":t})}">${this.title}</div>
|
|
15
|
+
<div part="subtitle" class="${n({stepper__content__subtitle:!0,"stepper__content__subtitle--alone":!this.title,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
18
|
`}getSvg(){let t="sm"==this.size?20:"lg"==this.size?24:28;return e`
|
|
19
19
|
<svg width="${t}" height="${t}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
20
20
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
|
|
21
21
|
</svg>
|
|
22
|
-
`}};t([s({attribute:!0,reflect:!0})],
|
|
22
|
+
`}};t([s({attribute:!0,reflect:!0})],o.prototype,"title",void 0),t([s({attribute:!0,reflect:!0})],o.prototype,"subtitle",void 0),t([l()],o.prototype,"contentBelow",void 0),t([l()],o.prototype,"size",void 0),t([l()],o.prototype,"icon",void 0),t([l()],o.prototype,"isFirst",void 0),t([l()],o.prototype,"isLast",void 0),t([l()],o.prototype,"isComplete",void 0),t([l()],o.prototype,"isCurrent",void 0),t([l()],o.prototype,"currentStepValue",void 0),t([l()],o.prototype,"completedStepValue",void 0),t([l()],o.prototype,"calculatedCompletedStepValue",void 0),t([l()],o.prototype,"value",void 0),t([l()],o.prototype,"haveFlex",void 0),o=t([r("nile-vertical-stepper-item")],o);export{o as N};
|
|
@@ -86,8 +86,8 @@ let NileStepperItem = class NileStepperItem extends NileElement {
|
|
|
86
86
|
|
|
87
87
|
<div part="bulletin" class=${classMap({ 'stepper__item__bulletin': true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
|
|
88
88
|
${showCompletedIcon ?
|
|
89
|
-
html `<div class="${classMap({ 'stepper__bulletin--icon': true, 'stepper__bulletin__icon--active': isCurrent })}">${this.getSvg()}</div>`
|
|
90
|
-
: html `<div class="${classMap({ 'stepper__bulletin--dot': true, 'stepper__bulletin__dot--active': isCurrent })}"></div>`}
|
|
89
|
+
html `<div part="bulletin-icon" class="${classMap({ 'stepper__bulletin--icon': true, 'stepper__bulletin__icon--active': isCurrent })}">${this.getSvg()}</div>`
|
|
90
|
+
: html `<div part="bulletin-dot" class="${classMap({ 'stepper__bulletin--dot': true, 'stepper__bulletin__dot--active': isCurrent })}"></div>`}
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
93
|
<div part="line-container" class="${classMap({
|
|
@@ -97,7 +97,7 @@ let NileStepperItem = class NileStepperItem extends NileElement {
|
|
|
97
97
|
${this.contentBelow || !this.title ? nothing : html `
|
|
98
98
|
|
|
99
99
|
<div part="content-above" class="stepper__item__content--above">
|
|
100
|
-
<div class="${classMap({ 'stepper__content__title': true, 'stepper__content__title--active': isCurrent })}">
|
|
100
|
+
<div part="title_above" class="${classMap({ 'stepper__content__title': true, 'stepper__content__title--active': isCurrent })}">
|
|
101
101
|
${this.title}
|
|
102
102
|
</div>
|
|
103
103
|
<div class="${classMap({ 'stepper__content__subtitle': true, 'stepper__content__subtitle--active': isCurrent })}">${this.subtitle}</div>
|
|
@@ -114,10 +114,10 @@ let NileStepperItem = class NileStepperItem extends NileElement {
|
|
|
114
114
|
${this.contentBelow ?
|
|
115
115
|
html `
|
|
116
116
|
<div part="content-below" class="stepper__item__content--below">
|
|
117
|
-
<div part="
|
|
117
|
+
<div part="title_below" class="${classMap({ 'stepper__content__title': true, 'stepper__content__title--active': isCurrent })}">
|
|
118
118
|
${this.title}
|
|
119
119
|
</div>
|
|
120
|
-
<div part="
|
|
120
|
+
<div part="subtitle_below" class="${classMap({ 'stepper__content__subtitle': true, 'stepper__content__subtitle--active': isCurrent })}">${this.subtitle}</div>
|
|
121
121
|
</div>
|
|
122
122
|
` : nothing}
|
|
123
123
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.ts"],"names":[],"mappings":"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","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 { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-stepper-item.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile stepper-item component.\n *\n * @tag nile-stepper-item\n *\n */\n@customElement('nile-stepper-item')\nexport class NileStepperItem extends NileElement {\n\n\t@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;\n\t@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;\n\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\tprotected updated(_changedProperties: PropertyValues): void {\n\t\tif(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){\n\t\t\tconst subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';\n\t\t\tthis.absoluteTitle.style.minWidth=subtitleWidth+\"px\"\n\t\t}\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\n\t\tif (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon = false;\n\t\tif (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\t\treturn html`\n\t\t\t<div part=\"item\" class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"line-content\" class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t${this.isFirst ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':isComplete || isCurrent\n\t\t\t\t\t\t\t})}\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div part=\"bulletin\" class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div part=\"line-container\" class=\"${classMap({\n\t\t\t\t\t\t'stepper__line__container':true,\n\t\t\t\t\t\t'stepper__line--hastitle':!this.contentBelow\n\t\t\t\t\t})}\">\n\t\t\t\t\t\t${this.contentBelow || !this.title ? nothing:html`\n\n\t\t\t\t\t\t\t<div part=\"content-above\" class=\"stepper__item__content--above\">\n\t\t\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t\t\t\t${this.isLast ? nothing : html`\n\t\t\t\t\t\t\t<hr part=\"line\" class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':suffixStepperLineActive\n\t\t\t\t\t\t\t})}\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${this.contentBelow?\n\t\t\t\t\thtml`\n\t\t\t\t\t<div part=\"content-below\" class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`:nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepperItem;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper-item': NileStepperItem;\n\t}\n}"]}
|
|
1
|
+
{"version":3,"file":"nile-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.ts"],"names":[],"mappings":"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","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 { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-stepper-item.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile stepper-item component.\n *\n * @tag nile-stepper-item\n *\n */\n@customElement('nile-stepper-item')\nexport class NileStepperItem extends NileElement {\n\n\t@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;\n\t@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;\n\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\tprotected updated(_changedProperties: PropertyValues): void {\n\t\tif(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){\n\t\t\tconst subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';\n\t\t\tthis.absoluteTitle.style.minWidth=subtitleWidth+\"px\"\n\t\t}\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\n\t\tif (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon = false;\n\t\tif (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\t\treturn html`\n\t\t\t<div part=\"item\" class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"line-content\" class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t${this.isFirst ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':isComplete || isCurrent\n\t\t\t\t\t\t\t})}\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div part=\"bulletin\" class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div part=\"bulletin-icon\" class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div part=\"bulletin-dot\" class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div part=\"line-container\" class=\"${classMap({\n\t\t\t\t\t\t'stepper__line__container':true,\n\t\t\t\t\t\t'stepper__line--hastitle':!this.contentBelow\n\t\t\t\t\t})}\">\n\t\t\t\t\t\t${this.contentBelow || !this.title ? nothing:html`\n\n\t\t\t\t\t\t\t<div part=\"content-above\" class=\"stepper__item__content--above\">\n\t\t\t\t\t\t\t\t<div part=\"title_above\" class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t\t\t\t${this.isLast ? nothing : html`\n\t\t\t\t\t\t\t<hr part=\"line\" class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':suffixStepperLineActive\n\t\t\t\t\t\t\t})}\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${this.contentBelow?\n\t\t\t\t\thtml`\n\t\t\t\t\t<div part=\"content-below\" class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div part=\"title_below\" class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div part=\"subtitle_below\" class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`:nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepperItem;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper-item': NileStepperItem;\n\t}\n}"]}
|
|
@@ -75,11 +75,11 @@ let NileVerticalStepperItem = class NileVerticalStepperItem extends NileElement
|
|
|
75
75
|
<div part="connector" class="stepper-item__connector-content">
|
|
76
76
|
<div part="bulletin" class="stepper__item__bulletin">
|
|
77
77
|
${showCompletedIcon ?
|
|
78
|
-
html `<div class="${classMap({ 'stepper__bulletin--icon': true, 'stepper__bulletin__icon--active': isCurrent })}">${this.getSvg()}</div>`
|
|
79
|
-
: html `<div class="${classMap({ 'stepper__bulletin--dot': true, 'stepper__bulletin__dot--active': isCurrent })}"></div>`}
|
|
78
|
+
html `<div part="bulletin-icon" class="${classMap({ 'stepper__bulletin--icon': true, 'stepper__bulletin__icon--active': isCurrent })}">${this.getSvg()}</div>`
|
|
79
|
+
: html `<div part="bulletin-dot" class="${classMap({ 'stepper__bulletin--dot': true, 'stepper__bulletin__dot--active': isCurrent })}"></div>`}
|
|
80
80
|
</div>
|
|
81
|
-
<div class="stepper__item__line__container">
|
|
82
|
-
${this.isLast ? nothing : html `<div class="${classMap({ 'stepper__item__line': true, 'stepper__item__line--active': suffixStepperLineActive })}"></div>`}
|
|
81
|
+
<div part="line-container" class="stepper__item__line__container">
|
|
82
|
+
${this.isLast ? nothing : html `<div part="line" class="${classMap({ 'stepper__item__line': true, 'stepper__item__line--active': suffixStepperLineActive })}"></div>`}
|
|
83
83
|
</div>
|
|
84
84
|
</div>
|
|
85
85
|
<div part="content" class="stepper__item__content">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-vertical-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,OAAO,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD;;;;;GAKG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,WAAW;IAAjD;;QACN,gCAAgC;QACY,UAAK,GAAW,EAAE,CAAC;QACnB,aAAQ,GAAW,EAAE,CAAC;QAGlE,wDAAwD;QACvC,iBAAY,GAAG,KAAK,CAAC;QACrB,SAAI,GAAiB,IAAI,CAAC;QAC1B,SAAI,GAAG,MAAM,CAAC;QAG/B,+DAA+D;QAC9C,YAAO,GAAG,KAAK,CAAC;QAChB,WAAM,GAAG,KAAK,CAAC;QAEf,eAAU,GAAG,KAAK,CAAC;QACnB,cAAS,GAAG,KAAK,CAAC;QAMlB,aAAQ,GAAU,IAAI,CAAC;QAwExC,gBAAgB;IACjB,CAAC;IAvEA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,CAAC,CAAC;QAC5E,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAEnC,IAAI,iBAAiB,GAAC,KAAK,CAAC;QAC5B,IAAG,UAAU,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK;YAAE,iBAAiB,GAAC,IAAI,CAAC;QAE3F,IAAI,uBAAuB,GAAG,KAAK,CAAC;QACpC,IAAI,UAAU,EAAE,CAAC;YAChB,uBAAuB,GAAG,IAAI,CAAC;YAC/B,IAAI,IAAI,CAAC,4BAA4B,IAAI,IAAI,CAAC,KAAK;gBAAE,uBAAuB,GAAG,KAAK,CAAC;QACtF,CAAC;QAED,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAA,CAAC,CAAA,EAAE,CAAA,CAAC,CAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAA,CAAC,CAAA,EAAE,CAAA,CAAC,CAAA,EAAE,CAAC;QAC5D,OAAO,IAAI,CAAA;;;YAGD,QAAQ,CAAC;YACjB,eAAe,EAAC,IAAI;YACpB,yBAAyB,EAAC,SAAS;YACnC,wBAAwB,EAAC,CAAC,SAAS;YACnC,mBAAmB,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YACnC,mBAAmB,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;SACnC,CAAC;;;QAGG,iBAAiB,CAAC,CAAC;YACpB,IAAI,CAAA,
|
|
1
|
+
{"version":3,"file":"nile-vertical-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"names":[],"mappings":"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","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 {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'lg'?16:20;\n\t\treturn html`\n\t\t\t<div \n\t\t\tpart=\"item\"\n\t\t\tclass=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"connector\" class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div part=\"bulletin\" class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div part=\"bulletin-icon\" class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div part=\"bulletin-dot\" class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div part=\"line-container\" class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div part=\"line\" class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class=\"stepper__item__content\">\n\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, \"stepper__content__title--alone\": !this.subtitle, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, \"stepper__content__subtitle--alone\": !this.title, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-vertical-stepper-item': NileVerticalStepperItem;\n }\n}"]}
|