@aquera/nile-elements 0.1.6 → 0.1.8
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 +9 -0
- package/demo/variables.css +28 -28
- package/dist/nile-avatar/nile-avatar.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.cjs.js.map +1 -1
- package/dist/nile-avatar/nile-avatar.css.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.css.cjs.js.map +1 -1
- package/dist/nile-avatar/nile-avatar.css.esm.js +2 -0
- package/dist/nile-avatar/nile-avatar.esm.js +25 -19
- package/dist/src/nile-avatar/nile-avatar.css.js +2 -0
- package/dist/src/nile-avatar/nile-avatar.css.js.map +1 -1
- package/dist/src/nile-avatar/nile-avatar.d.ts +10 -9
- package/dist/src/nile-avatar/nile-avatar.js +78 -61
- package/dist/src/nile-avatar/nile-avatar.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-avatar/nile-avatar.css.ts +2 -0
- package/src/nile-avatar/nile-avatar.ts +79 -72
- package/vscode-html-custom-data.json +61 -42
package/README.md
CHANGED
|
@@ -79,6 +79,15 @@ 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.8
|
|
83
|
+
- Nile Avatar - Design, documentation and variants updates,
|
|
84
|
+
- Nile Css Toolbar token update
|
|
85
|
+
- Dependency nile 0.3.53
|
|
86
|
+
|
|
87
|
+
#### Version 0.1.7
|
|
88
|
+
- Nile Css tokens updates
|
|
89
|
+
- Dependency nile 0.3.52
|
|
90
|
+
|
|
82
91
|
#### Version 0.1.6
|
|
83
92
|
- Nile Select - Required indicator color fix
|
|
84
93
|
- Nile Icon - Icons added play_pause, restart_alt, step_over, step_into, step_out
|
package/demo/variables.css
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
--nile-tooltip-font-size-sm: 10.24px;
|
|
42
42
|
--nile-tooltip-font-size-lg: 12px;
|
|
43
43
|
--nile-tooltip-color-background: var(--nile-colors-dark-900);
|
|
44
|
-
--nile-toolbar-text-color:
|
|
44
|
+
--nile-toolbar-text-color: var(--nile-colors-dark-900);
|
|
45
45
|
--nile-toolbar-line-height: 30px;
|
|
46
46
|
--nile-toolbar-font-weight: 500;
|
|
47
47
|
--nile-toolbar-font-size: 20px;
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
--nile-toast-color-icon-color-warning: var(--nile-colors-white-base);
|
|
51
51
|
--nile-toast-color-icon-color-success: var(--nile-colors-white-base);
|
|
52
52
|
--nile-toast-color-icon-color-info: var(--nile-colors-white-base);
|
|
53
|
-
--nile-toast-color-icon-color-gray:
|
|
53
|
+
--nile-toast-color-icon-color-gray: var(--nile-colors-neutral-700);
|
|
54
54
|
--nile-toast-color-icon-color-error: var(--nile-colors-white-base);
|
|
55
55
|
--nile-toast-color-icon-color-black: #344054;
|
|
56
56
|
--nile-toast-color-icon-background-color-warning: var(--nile-colors-yellow-500);
|
|
57
|
-
--nile-toast-color-icon-background-color-success:
|
|
57
|
+
--nile-toast-color-icon-background-color-success: var(--nile-colors-green-700);
|
|
58
58
|
--nile-toast-color-icon-background-color-info: var(--nile-colors-blue-500);
|
|
59
59
|
--nile-toast-color-icon-background-color-gray: var(--nile-colors-white-base);
|
|
60
60
|
--nile-toast-color-icon-background-color-error: var(--nile-colors-red-400);
|
|
@@ -62,13 +62,13 @@
|
|
|
62
62
|
--nile-toast-color-box-shadow: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);
|
|
63
63
|
--nile-toast-color-border-warning: var(--nile-colors-yellow-500);
|
|
64
64
|
--nile-toast-color-border-success: var(--nile-colors-green-500);
|
|
65
|
-
--nile-toast-color-border-info:
|
|
66
|
-
--nile-toast-color-border-gray:
|
|
65
|
+
--nile-toast-color-border-info: var(--nile-colors-blue-500);
|
|
66
|
+
--nile-toast-color-border-gray: var(--nile-colors-neutral-500);
|
|
67
67
|
--nile-toast-color-border-error: var(--nile-colors-red-500);
|
|
68
|
-
--nile-toast-color-border-black:
|
|
68
|
+
--nile-toast-color-border-black: var(--nile-colors-neutral-500);
|
|
69
69
|
--nile-toast-color-background-warning: var(--nile-colors-yellow-100);
|
|
70
70
|
--nile-toast-color-background-success: var(--nile-colors-green-100);
|
|
71
|
-
--nile-toast-color-background-info:
|
|
71
|
+
--nile-toast-color-background-info: var(--nile-colors-blue-400);
|
|
72
72
|
--nile-toast-color-background-gray: var(--nile-colors-white-base);
|
|
73
73
|
--nile-toast-color-background-error: var(--nile-colors-red-100);
|
|
74
74
|
--nile-toast-color-background-black: var(--nile-colors-white-base);
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
--nile-textarea-standard-focused-box-shadow: 0px;
|
|
77
77
|
--nile-textarea-standard-focused-border-color: var(--nile-colors-primary-600);
|
|
78
78
|
--nile-textarea-standard-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
|
79
|
-
--nile-textarea-standard-disabled-border-color:
|
|
79
|
+
--nile-textarea-standard-disabled-border-color: var(--nile-colors-neutral-500);
|
|
80
80
|
--nile-textarea-standard-disabled-background-color: #f9fafb;
|
|
81
81
|
--nile-textarea-standard-box-shadow: 0px;
|
|
82
82
|
--nile-textarea-standard-border-color: var(--nile-colors-neutral-500);
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
--nile-textarea-label-line-height: 14px;
|
|
85
85
|
--nile-textarea-label-font-weight: 400;
|
|
86
86
|
--nile-textarea-label-color: var(--nile-colors-dark-900);
|
|
87
|
-
--nile-tag-gray-x-color:
|
|
88
|
-
--nile-tag-gray-hover-x-color:
|
|
89
|
-
--nile-tag-gray-hover-background-color:
|
|
87
|
+
--nile-tag-gray-x-color: var(--nile-colors-neutral-700);
|
|
88
|
+
--nile-tag-gray-hover-x-color: var(--nile-colors-primary-900);
|
|
89
|
+
--nile-tag-gray-hover-background-color: var(--nile-colors-dark-200);
|
|
90
90
|
--nile-tag-gray-color: #344054;
|
|
91
91
|
--nile-tag-gray-background-color: var(--nile-colors-white-base);
|
|
92
92
|
--nile-table-row-border-color: #eaecf0;
|
|
@@ -99,12 +99,12 @@
|
|
|
99
99
|
--nile-stepper-color-text-default: #475467;
|
|
100
100
|
--nile-stepper-color-subtitle-selected: var(--nile-colors-primary-600);
|
|
101
101
|
--nile-stepper-color-line-selected: var(--nile-colors-primary-700);
|
|
102
|
-
--nile-stepper-color-line-default:
|
|
102
|
+
--nile-stepper-color-line-default: var(--nile-colors-neutral-500);
|
|
103
103
|
--nile-stepper-color-highlight: var(--nile-colors-primary-600);
|
|
104
104
|
--nile-stepper-color-bulletin-outer-selected: var(--nile-colors-primary-600);
|
|
105
105
|
--nile-stepper-color-bulletin-outer-default: #fff0;
|
|
106
106
|
--nile-stepper-color-bulletin-inner-selected: #fff0;
|
|
107
|
-
--nile-stepper-color-bulletin-inner-default:
|
|
107
|
+
--nile-stepper-color-bulletin-inner-default: var(--nile-colors-neutral-500);
|
|
108
108
|
--nile-spacing-spacing-xxs: 2px; /* 0.5 (2px) */
|
|
109
109
|
--nile-spacing-spacing-xs: 4px; /* 1 (4px) */
|
|
110
110
|
--nile-spacing-spacing-xl: 16px; /* 4 (16px) */
|
|
@@ -132,8 +132,8 @@
|
|
|
132
132
|
--nile-slide-toggle-color-indicator: var(--nile-colors-white-base);
|
|
133
133
|
--nile-slide-toggle-color-background-inactive: var(--nile-colors-neutral-500);
|
|
134
134
|
--nile-slide-toggle-color-background-active: var(--nile-colors-primary-600);
|
|
135
|
-
--nile-sidebar-wrapper-overlay-background-color:
|
|
136
|
-
--nile-sidebar-menu-background-color:
|
|
135
|
+
--nile-sidebar-wrapper-overlay-background-color: var(--nile-colors-dark-900);
|
|
136
|
+
--nile-sidebar-menu-background-color: var(--nile-colors-dark-200);
|
|
137
137
|
--nile-section-message-icon-background-color-warning: var(--nile-colors-yellow-700);
|
|
138
138
|
--nile-section-message-icon-background-color-success: var(--nile-colors-green-700);
|
|
139
139
|
--nile-section-message-icon-background-color-primary: var(--nile-colors-primary-600);
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
--nile-radio-inner-width: 9px;
|
|
163
163
|
--nile-radio-inner-height: 9px;
|
|
164
164
|
--nile-radio-hover-border-color: var(--nile-colors-primary-600);
|
|
165
|
-
--nile-radio-hover-background-color:
|
|
165
|
+
--nile-radio-hover-background-color: var(--nile-colors-primary-100);
|
|
166
166
|
--nile-radio-checked-icon-background: var(--nile-colors-primary-600);
|
|
167
167
|
--nile-radio-checked-hover-icon-background-color: var(--nile-colors-primary-900);
|
|
168
168
|
--nile-radio-checked-hover-border-color: var(--nile-colors-primary-900);
|
|
@@ -186,9 +186,9 @@
|
|
|
186
186
|
--nile-line-height-medium: 1.5rem; /* 24px */
|
|
187
187
|
--nile-line-height-large: 1.75rem; /* 28px */
|
|
188
188
|
--nile-line-height-heading-large: 1;
|
|
189
|
-
--nile-input-standard-disabled-placeholder-font-color:
|
|
189
|
+
--nile-input-standard-disabled-placeholder-font-color: var(--nile-colors-neutral-700);
|
|
190
190
|
--nile-input-standard-border-color: var(--nile-colors-neutral-500);
|
|
191
|
-
--nile-input-standard-background-color: var(--nile-colors-
|
|
191
|
+
--nile-input-standard-background-color: var(--nile-colors-white-base);
|
|
192
192
|
--nile-input-shadow-standard-focused-not-disabled: 0px;
|
|
193
193
|
--nile-input-shadow-standard: 0px;
|
|
194
194
|
--nile-input-shadow-destructive-active: 0px;
|
|
@@ -196,18 +196,18 @@
|
|
|
196
196
|
--nile-input-font-size-medium: 1rem;
|
|
197
197
|
--nile-inline-edit-label-font-color: #344054;
|
|
198
198
|
--nile-inline-edit-hover-background-color: #f9fafb;
|
|
199
|
-
--nile-inline-edit-font-color:
|
|
199
|
+
--nile-inline-edit-font-color: var(--nile-colors-neutral-700);
|
|
200
200
|
--nile-hero-text-line-height: 24px;
|
|
201
201
|
--nile-hero-text-font-weight: 600;
|
|
202
202
|
--nile-hero-text-font-size: 16px;
|
|
203
203
|
--nile-hero-text-color: var(--nile-colors-dark-900);
|
|
204
204
|
--nile-hero-height: 200px;
|
|
205
205
|
--nile-hero-first-elements-padding: 16px 45px;
|
|
206
|
-
--nile-hero-color-icon-bg-to-gradient:
|
|
206
|
+
--nile-hero-color-icon-bg-to-gradient: var(--nile-colors-dark-200);
|
|
207
207
|
--nile-hero-color-icon-bg-from-gradient: var(--nile-colors-white-base);
|
|
208
208
|
--nile-hero-color-hero-text: var(--nile-colors-dark-900);
|
|
209
|
-
--nile-hero-color-bg-to-gradient:
|
|
210
|
-
--nile-hero-color-bg-from-gradient:
|
|
209
|
+
--nile-hero-color-bg-to-gradient: var(--nile-colors-dark-100);
|
|
210
|
+
--nile-hero-color-bg-from-gradient: var(--nile-colors-blue-100);
|
|
211
211
|
--nile-form-help-text-line-height: 12px;
|
|
212
212
|
--nile-form-help-text-font-size: 12px;
|
|
213
213
|
--nile-form-help-text-color: var(--nile-colors-dark-500);
|
|
@@ -264,13 +264,13 @@
|
|
|
264
264
|
--nile-colors-blue-400: #A5D3F3;
|
|
265
265
|
--nile-colors-blue-100: #F5FAFE;
|
|
266
266
|
--nile-checkbox-color-outline-standard: transparent;
|
|
267
|
-
--nile-checkbox-color-border-standard:
|
|
268
|
-
--nile-checkbox-color-border-hover:
|
|
269
|
-
--nile-checkbox-color-border-checked-standard:
|
|
267
|
+
--nile-checkbox-color-border-standard: var(--nile-colors-neutral-500);
|
|
268
|
+
--nile-checkbox-color-border-hover: var(--nile-colors-primary-600);
|
|
269
|
+
--nile-checkbox-color-border-checked-standard: var(--nile-colors-primary-600);
|
|
270
270
|
--nile-checkbox-color-border-checked-hover: var(--nile-colors-primary-900);
|
|
271
271
|
--nile-checkbox-color-background-standard: var(--nile-colors-white-base);
|
|
272
|
-
--nile-checkbox-color-background-hover:
|
|
273
|
-
--nile-checkbox-color-background-checked-standard:
|
|
272
|
+
--nile-checkbox-color-background-hover: var(--nile-colors-primary-100);
|
|
273
|
+
--nile-checkbox-color-background-checked-standard: var(--nile-colors-primary-600);
|
|
274
274
|
--nile-checkbox-color-background-checked-hover: var(--nile-colors-primary-900);
|
|
275
275
|
--nile-card-footer-padding: 9px 18px 9px 18px;
|
|
276
276
|
--nile-card-footer-border-width: 1px 1px 1px 1px;
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
--nile-button-toggle-color-background-active-standard: var(--nile-colors-neutral-500);
|
|
288
288
|
--nile-button-toggle-color-background-active-hover: var(--nile-colors-neutral-500);
|
|
289
289
|
--nile-button-toggle-color-background-active-disabled: #F9FAFB;
|
|
290
|
-
--nile-button-toggle-border-color:
|
|
290
|
+
--nile-button-toggle-border-color: var(--nile-colors-neutral-500);
|
|
291
291
|
--nile-breakpoint-xlarge: 85rem; /* 1360px */
|
|
292
292
|
--nile-breakpoint-small: 22.5rem; /* 360px */
|
|
293
293
|
--nile-breakpoint-medium: 48rem; /* 768px */
|
|
@@ -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-avatar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,r,
|
|
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-avatar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,r,e,i,a,s,o,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,n;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){r=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;i=_litDecoratorsJs.state;a=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){s=_litDirectivesClassMapJs.classMap;},function(_nileAvatarCssCjsJs){o=_nileAvatarCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",n=/*#__PURE__*/function(_l){function n(){var _this;_classCallCheck(this,n);_this=_callSuper(this,n,arguments),_this.src="",_this.variant="text",_this.icon="user",_this.name="",_this.bgColor="",_this.textColor="#fff",_this.borderColor="",_this.size="md",_this.isRounded=!0,_this.imageError=!1;return _this;}_inherits(n,_l);return _createClass(n,[{key:"generateInitials",value:function generateInitials(){if(!this.name)return"";var t=this.name.split(" ").filter(function(t){return t.length>0;}).map(function(t){return t.charAt(0).toUpperCase();}).slice(0,2);return t.length>1?t[0]+t[1]:t[0];}},{key:"generateVariantCode",value:function generateVariantCode(t){var r=t.charCodeAt(0),e=1==t.length?r:t.charCodeAt(1);return(r*e+r%23+e%23)%5;}},{key:"getDefaultIconSize",value:function getDefaultIconSize(){switch(this.size){case"sm":return"10";case"md":default:return"16";case"lg":return"20";case"xl":return"24";case"2xl":return"28";}}},{key:"render",value:function render(){if("image"!=this.variant||this.imageError){var _t=this.generateInitials();return"text"==this.variant&&_t?this.getContentWrapped(r(_templateObject||(_templateObject=_taggedTemplateLiteral(["",""])),_t),_t):this.getContentWrapped(this.getIconContent(),_t);}return this.getImageContent();}},{key:"getContentWrapped",value:function getContentWrapped(t,e){var i=this.generateVariantCode(e);return r(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <div\n class=","\n part=\"avatar__content\"\n style=\"\n background-color: ",";\n color:",";\n border: 1px solid ",";\n border-color:","\"\n >\n ","\n </div>"])),s({text__avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded,variant__orange:0===i&&!this.bgColor,variant__pink:1===i&&!this.bgColor,variant__blue:2===i&&!this.bgColor,variant__light_blue:3===i&&!this.bgColor,variant__green:4===i&&!this.bgColor}),this.bgColor,this.textColor,this.borderColor,e?"".concat(this.borderColor):"var(--nile-colors-neutral-500)",t);}},{key:"getIconContent",value:function getIconContent(){return r(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-icon\n name=\"","\"\n color=\"","\"\n size=\"","\"\n ></nile-icon>"])),this.icon,this.textColor&&"#fff"!==this.textColor?this.textColor:"var(--nile-colors-dark-500)",this.getDefaultIconSize());}},{key:"getImageContent",value:function getImageContent(){var _this2=this;return r(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" \n <img\n src=\"","\"\n class=\"avatar\"\n class=","\n part=\"avatar__image\"\n style=\"\tbackground-image: url(","), linear-gradient(lightgray, lightgray);\"\n @error=\"","\"\n @load=\"","\"\n />"])),this.src,s({avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded}),this.src,function(){return _this2.imageError=!0;},function(){return _this2.imageError=!1;});}}],[{key:"styles",get:function get(){return[o];}}]);}(l));t([e({type:String,reflect:!0})],n.prototype,"src",void 0),t([e({type:String,reflect:!0})],n.prototype,"variant",void 0),t([e({type:String,reflect:!0})],n.prototype,"icon",void 0),t([e({type:String,reflect:!0})],n.prototype,"name",void 0),t([e({type:String,reflect:!0,attribute:"bg-color"})],n.prototype,"bgColor",void 0),t([e({type:String,reflect:!0,attribute:"text-color"})],n.prototype,"textColor",void 0),t([e({type:String,reflect:!0,attribute:"border-color"})],n.prototype,"borderColor",void 0),t([e({reflect:!0})],n.prototype,"size",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"isRounded",void 0),t([i()],n.prototype,"imageError",void 0),_export("N",n=t([a("nile-avatar")],n));}};});
|
|
2
2
|
//# sourceMappingURL=nile-avatar.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-avatar.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.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} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /**\n * The styles for Avatar\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 /** Gives the url to the Avatar */\n @property({ type: String, reflect: true }) src = '';\n\n /** Gives the default Image Letters to the Avatar */\n @property({ type: String, reflect: true }) name = '';\n\n /** Gives the default bg color to the Avatar */\n @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor =\n '';\n\n /** Gives the default text color to the Avatar */\n @property({ type: String, reflect: true, attribute: 'text-color' })\n textColor = '#fff';\n\n /** Gives the default border color to the Avatar */\n @property({ type: String, reflect: true, attribute: 'border-color' })\n borderColor = 'rgba(0, 0, 0, 0.08)';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size:\n | 'small'\n | 'medium'\n | 'large'\n | 'extralarge'\n | '2xl' = 'medium';\n\n /** Gives a border radius of 50% to the Avatar */\n @property({ type: Boolean, reflect: true }) isRounded = false;\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n @state() private isDefaultAvatar = true;\n\n @state() private defaultAvatarContent = html``;\n\n private generateInitials(name: String): string {\n if (!name) {\n return '';\n }\n const nameParts = name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private getDefaultIconSize() {\n switch (this.size) {\n case 'small':\n return '10';\n case 'medium':\n return '16';\n case 'large':\n return '20';\n case 'extralarge':\n return '24';\n case '2xl':\n return '28';\n default:\n return '16';\n }\n }\n\n private handleImageError(event: Event): void {\n const defaultInitials = this.generateInitials(this.name);\n const variant__code = this.generateVariantCode(defaultInitials);\n\n this.defaultAvatarContent = html`<div\n class=${classMap({\n text__avatar: true,\n avatar__small: this.size === 'small',\n avatar__medium: this.size === 'medium',\n avatar__large: this.size === 'large',\n avatar__extralarge: this.size === 'extralarge',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n style=\"background-color: ${this.bgColor};color:${this\n .textColor};border: 0.5px solid ${this.borderColor};\n border-color:${defaultInitials ? 'rgba(0, 0, 0, 0.08)' : '#C7CED4'}\"\n >\n ${defaultInitials\n ? defaultInitials\n : html`<nile-icon\n name=\"user\"\n color=\"grey\"\n part=\"error__icon\"\n size=\"${this.getDefaultIconSize()}\"\n ></nile-icon>`}\n </div>`;\n\n this.isDefaultAvatar = false;\n }\n\n public render(): TemplateResult {\n return html`\n ${this.isDefaultAvatar\n ? html` <img\n src=\"${this.src}\"\n class=\"avatar\"\n class=${classMap({\n avatar: true,\n avatar__small: this.size === 'small',\n avatar__medium: this.size === 'medium',\n avatar__large: this.size === 'large',\n avatar__extralarge: this.size === 'extralarge',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n })}\n style=\"\tbackground-image: url(${this\n .src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${this.handleImageError}\"\n />`\n : html`${this.defaultAvatarContent}`}\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"],"names":["NileAvatar","n","this","src","name","bgColor","textColor","borderColor","size","isRounded","isDefaultAvatar","defaultAvatarContent","html","_templateObject","_taggedTemplateLiteral","_this","_inherits","_o","_createClass","key","value","generateInitials","nameParts","split","filter","part","length","map","charAt","toUpperCase","slice","generateVariantCode","initials","char1","charCodeAt","char2","getDefaultIconSize","handleImageError","event","defaultInitials","variant__code","_templateObject2","classMap","text__avatar","avatar__small","avatar__medium","avatar__large","avatar__extralarge","avatar__2xl","avatar__rounded","variant__orange","variant__pink","variant__blue","variant__light_blue","variant__green","_templateObject3","render","_templateObject4","_templateObject5","avatar","_templateObject6","__decorate","get","styles","NileElement","property","type","String","reflect","prototype","attribute","Boolean","state","_export","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nile-avatar.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.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 nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /**\n * The styles for Avatar\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 /** Gives the url to the Avatar */\n @property({ type: String, reflect: true }) src = '';\n\n /** Gives the icon to the Avatar */\n @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';\n\n /** Gives the icon to the Avatar */\n @property({ type: String, reflect: true }) icon = 'user';\n\n /** Gives the default Image Letters to the Avatar */\n @property({ type: String, reflect: true }) name: String = '';\n\n /** Gives the default bg color to the Avatar */\n @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n /** Gives the default text color to the Avatar */\n @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '#fff';\n\n /** Gives the default border color to the Avatar */\n @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n /** Gives a border radius of 50% to the Avatar */\n @property({ type: Boolean, reflect: true }) isRounded = true;\n\n @state() private imageError = false;\n\n /* #endregion */\n\n /* #region Methods */\n\n private generateInitials(): string {\n if (!this.name) {\n return '';\n }\n const nameParts = this.name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private getDefaultIconSize() {\n switch (this.size) {\n case 'sm':\n return '10';\n case 'md':\n return '16';\n case 'lg':\n return '20';\n case 'xl':\n return '24';\n case '2xl':\n return '28';\n default:\n return '16';\n }\n }\n\n public render(): TemplateResult {\n if('image'==this.variant && !this.imageError){\n return this.getImageContent()\n }\n else{\n const defaultInitials = this.generateInitials();\n if('text'==this.variant && defaultInitials){\n return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n }\n else{\n return this.getContentWrapped(this.getIconContent(),defaultInitials)\n }\n }\n }\n\n getContentWrapped(content:TemplateResult,defaultInitials:string){\n const variant__code = this.generateVariantCode(defaultInitials);\n return html`\n <div\n class=${classMap({\n text__avatar: true,\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n part=\"avatar__content\"\n style=\"\n background-color: ${this.bgColor};\n color:${this.textColor};\n border: 1px solid ${this.borderColor};\n border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}\"\n >\n ${content}\n </div>`\n }\n\n getIconContent(){\n return html`\n <nile-icon\n name=\"${this.icon}\"\n color=\"${this.textColor && \"#fff\"!==this.textColor?this.textColor:'var(--nile-colors-dark-500)'}\"\n size=\"${this.getDefaultIconSize()}\"\n ></nile-icon>`\n }\n\n getImageContent(){\n return html` \n <img\n src=\"${this.src}\"\n class=\"avatar\"\n class=${classMap({\n avatar: true,\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n })}\n part=\"avatar__image\"\n style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${()=>this.imageError=true}\"\n @load=\"${()=>this.imageError=false}\"\n />`\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"],"names":["NileAvatar","_l","n","constructor","this","src","variant","icon","name","bgColor","textColor","borderColor","size","isRounded","imageError","_this","_inherits","_createClass","key","value","generateInitials","nameParts","split","filter","part","length","map","charAt","toUpperCase","slice","generateVariantCode","initials","char1","charCodeAt","char2","getDefaultIconSize","render","defaultInitials","getContentWrapped","html","_templateObject","_taggedTemplateLiteral","getIconContent","getImageContent","content","variant__code","_templateObject2","classMap","text__avatar","avatar__small","avatar__medium","avatar__large","avatar__extralarge","avatar__2xl","avatar__rounded","variant__orange","variant__pink","variant__blue","variant__light_blue","variant__green","concat","_templateObject3","_this2","_templateObject4","avatar","get","styles","NileElement","__decorate","property","type","String","reflect","prototype","attribute","Boolean","state","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n border-radius: 4px;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n border-radius: 4px;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-avatar.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-avatar.css.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Avatar CSS\n */\nexport const styles = css`\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-avatar.css.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Avatar CSS\n */\nexport const styles = css`\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n border-radius: 4px;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n border-radius: 4px;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -8,6 +8,7 @@ import{css as a}from"lit";const r=a`
|
|
|
8
8
|
font-style: normal;
|
|
9
9
|
font-weight: 600;
|
|
10
10
|
color: var(--nile-colors-white-base);
|
|
11
|
+
border-radius: 4px;
|
|
11
12
|
text-transform: uppercase;
|
|
12
13
|
display: flex;
|
|
13
14
|
flex-direction: column;
|
|
@@ -19,6 +20,7 @@ import{css as a}from"lit";const r=a`
|
|
|
19
20
|
.avatar {
|
|
20
21
|
box-sizing: border-box;
|
|
21
22
|
border: 0.5px solid var(--nile-colors-neutral-500);
|
|
23
|
+
border-radius: 4px;
|
|
22
24
|
background-position: 50% 50%;
|
|
23
25
|
background-size: cover;
|
|
24
26
|
background-repeat: no-repeat;
|
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as e,state as i,customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{s as o}from"./nile-avatar.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let n=class extends l{constructor(){super(...arguments),this.src="",this.variant="text",this.icon="user",this.name="",this.bgColor="",this.textColor="#fff",this.borderColor="",this.size="md",this.isRounded=!0,this.imageError=!1}static get styles(){return[o]}generateInitials(){if(!this.name)return"";const t=this.name.split(" ").filter((t=>t.length>0)).map((t=>t.charAt(0).toUpperCase())).slice(0,2);return t.length>1?t[0]+t[1]:t[0]}generateVariantCode(t){const r=t.charCodeAt(0),e=1==t.length?r:t.charCodeAt(1);return(r*e+r%23+e%23)%5}getDefaultIconSize(){switch(this.size){case"sm":return"10";case"md":default:return"16";case"lg":return"20";case"xl":return"24";case"2xl":return"28"}}render(){if("image"!=this.variant||this.imageError){const t=this.generateInitials();return"text"==this.variant&&t?this.getContentWrapped(r`${t}`,t):this.getContentWrapped(this.getIconContent(),t)}return this.getImageContent()}getContentWrapped(t,e){const i=this.generateVariantCode(e);return r`
|
|
2
|
+
<div
|
|
3
|
+
class=${s({text__avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded,variant__orange:0===i&&!this.bgColor,variant__pink:1===i&&!this.bgColor,variant__blue:2===i&&!this.bgColor,variant__light_blue:3===i&&!this.bgColor,variant__green:4===i&&!this.bgColor})}
|
|
4
|
+
part="avatar__content"
|
|
5
|
+
style="
|
|
6
|
+
background-color: ${this.bgColor};
|
|
7
|
+
color:${this.textColor};
|
|
8
|
+
border: 1px solid ${this.borderColor};
|
|
9
|
+
border-color:${e?`${this.borderColor}`:"var(--nile-colors-neutral-500)"}"
|
|
5
10
|
>
|
|
6
|
-
${
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
${t}
|
|
12
|
+
</div>`}getIconContent(){return r`
|
|
13
|
+
<nile-icon
|
|
14
|
+
name="${this.icon}"
|
|
15
|
+
color="${this.textColor&&"#fff"!==this.textColor?this.textColor:"var(--nile-colors-dark-500)"}"
|
|
16
|
+
size="${this.getDefaultIconSize()}"
|
|
17
|
+
></nile-icon>`}getImageContent(){return r`
|
|
18
|
+
<img
|
|
19
|
+
src="${this.src}"
|
|
20
|
+
class="avatar"
|
|
21
|
+
class=${s({avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded})}
|
|
22
|
+
part="avatar__image"
|
|
23
|
+
style=" background-image: url(${this.src}), linear-gradient(lightgray, lightgray);"
|
|
24
|
+
@error="${()=>this.imageError=!0}"
|
|
25
|
+
@load="${()=>this.imageError=!1}"
|
|
26
|
+
/>`}};t([e({type:String,reflect:!0})],n.prototype,"src",void 0),t([e({type:String,reflect:!0})],n.prototype,"variant",void 0),t([e({type:String,reflect:!0})],n.prototype,"icon",void 0),t([e({type:String,reflect:!0})],n.prototype,"name",void 0),t([e({type:String,reflect:!0,attribute:"bg-color"})],n.prototype,"bgColor",void 0),t([e({type:String,reflect:!0,attribute:"text-color"})],n.prototype,"textColor",void 0),t([e({type:String,reflect:!0,attribute:"border-color"})],n.prototype,"borderColor",void 0),t([e({reflect:!0})],n.prototype,"size",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"isRounded",void 0),t([i()],n.prototype,"imageError",void 0),n=t([a("nile-avatar")],n);export{n as N};
|
|
@@ -18,6 +18,7 @@ export const styles = css `
|
|
|
18
18
|
font-style: normal;
|
|
19
19
|
font-weight: 600;
|
|
20
20
|
color: var(--nile-colors-white-base);
|
|
21
|
+
border-radius: 4px;
|
|
21
22
|
text-transform: uppercase;
|
|
22
23
|
display: flex;
|
|
23
24
|
flex-direction: column;
|
|
@@ -29,6 +30,7 @@ export const styles = css `
|
|
|
29
30
|
.avatar {
|
|
30
31
|
box-sizing: border-box;
|
|
31
32
|
border: 0.5px solid var(--nile-colors-neutral-500);
|
|
33
|
+
border-radius: 4px;
|
|
32
34
|
background-position: 50% 50%;
|
|
33
35
|
background-size: cover;
|
|
34
36
|
background-repeat: no-repeat;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,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 { css } from 'lit';\n\n/**\n * Avatar CSS\n */\nexport const styles = css`\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n border-radius: 4px;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n border-radius: 4px;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -20,8 +20,12 @@ export declare class NileAvatar extends NileElement {
|
|
|
20
20
|
static get styles(): CSSResultArray;
|
|
21
21
|
/** Gives the url to the Avatar */
|
|
22
22
|
src: string;
|
|
23
|
+
/** Gives the icon to the Avatar */
|
|
24
|
+
variant: 'icon' | 'image' | 'text';
|
|
25
|
+
/** Gives the icon to the Avatar */
|
|
26
|
+
icon: string;
|
|
23
27
|
/** Gives the default Image Letters to the Avatar */
|
|
24
|
-
name:
|
|
28
|
+
name: String;
|
|
25
29
|
/** Gives the default bg color to the Avatar */
|
|
26
30
|
bgColor: string;
|
|
27
31
|
/** Gives the default text color to the Avatar */
|
|
@@ -29,20 +33,17 @@ export declare class NileAvatar extends NileElement {
|
|
|
29
33
|
/** Gives the default border color to the Avatar */
|
|
30
34
|
borderColor: string;
|
|
31
35
|
/** Size of the Avatar */
|
|
32
|
-
size: '
|
|
36
|
+
size: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
33
37
|
/** Gives a border radius of 50% to the Avatar */
|
|
34
38
|
isRounded: boolean;
|
|
35
|
-
|
|
36
|
-
* Render method
|
|
37
|
-
* @slot This is a slot test
|
|
38
|
-
*/
|
|
39
|
-
private isDefaultAvatar;
|
|
40
|
-
private defaultAvatarContent;
|
|
39
|
+
private imageError;
|
|
41
40
|
private generateInitials;
|
|
42
41
|
private generateVariantCode;
|
|
43
42
|
private getDefaultIconSize;
|
|
44
|
-
private handleImageError;
|
|
45
43
|
render(): TemplateResult;
|
|
44
|
+
getContentWrapped(content: TemplateResult, defaultInitials: string): TemplateResult<1>;
|
|
45
|
+
getIconContent(): TemplateResult<1>;
|
|
46
|
+
getImageContent(): TemplateResult<1>;
|
|
46
47
|
}
|
|
47
48
|
export default NileAvatar;
|
|
48
49
|
declare global {
|