Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@forter/avatar
Advanced tools
@forter/avatar - npm Package Compare versions
Comparing version 4.0.11 to 4.0.12
@@ -1,434 +0,17 @@ | ||
| function _toArray(arr) { | ||
| return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArray(iter) { | ||
| if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| function _toPrimitive(input, hint) { | ||
| if (typeof input !== "object" || input === null) return input; | ||
| var prim = input[Symbol.toPrimitive]; | ||
| if (prim !== undefined) { | ||
| var res = prim.call(input, hint || "default"); | ||
| if (typeof res !== "object") return res; | ||
| throw new TypeError("@@toPrimitive must return a primitive value."); | ||
| } | ||
| return (hint === "string" ? String : Number)(input); | ||
| } | ||
| function _toPropertyKey(arg) { | ||
| var key = _toPrimitive(arg, "string"); | ||
| return typeof key === "symbol" ? key : String(key); | ||
| } | ||
| function _decorate(decorators, factory, superClass, mixins) { | ||
| var api = _getDecoratorsApi(); | ||
| if (mixins) { | ||
| for (var i = 0; i < mixins.length; i++) { | ||
| api = mixins[i](api); | ||
| } | ||
| } | ||
| var r = factory(function initialize(O) { | ||
| api.initializeInstanceElements(O, decorated.elements); | ||
| }, superClass); | ||
| var decorated = api.decorateClass(_coalesceClassElements(r.d.map(_createElementDescriptor)), decorators); | ||
| api.initializeClassElements(r.F, decorated.elements); | ||
| return api.runClassFinishers(r.F, decorated.finishers); | ||
| } | ||
| function _getDecoratorsApi() { | ||
| _getDecoratorsApi = function () { | ||
| return api; | ||
| }; | ||
| var api = { | ||
| elementsDefinitionOrder: [["method"], ["field"]], | ||
| initializeInstanceElements: function (O, elements) { | ||
| ["method", "field"].forEach(function (kind) { | ||
| elements.forEach(function (element) { | ||
| if (element.kind === kind && element.placement === "own") { | ||
| this.defineClassElement(O, element); | ||
| } | ||
| }, this); | ||
| }, this); | ||
| }, | ||
| initializeClassElements: function (F, elements) { | ||
| var proto = F.prototype; | ||
| ["method", "field"].forEach(function (kind) { | ||
| elements.forEach(function (element) { | ||
| var placement = element.placement; | ||
| if (element.kind === kind && (placement === "static" || placement === "prototype")) { | ||
| var receiver = placement === "static" ? F : proto; | ||
| this.defineClassElement(receiver, element); | ||
| } | ||
| }, this); | ||
| }, this); | ||
| }, | ||
| defineClassElement: function (receiver, element) { | ||
| var descriptor = element.descriptor; | ||
| if (element.kind === "field") { | ||
| var initializer = element.initializer; | ||
| descriptor = { | ||
| enumerable: descriptor.enumerable, | ||
| writable: descriptor.writable, | ||
| configurable: descriptor.configurable, | ||
| value: initializer === void 0 ? void 0 : initializer.call(receiver) | ||
| }; | ||
| } | ||
| Object.defineProperty(receiver, element.key, descriptor); | ||
| }, | ||
| decorateClass: function (elements, decorators) { | ||
| var newElements = []; | ||
| var finishers = []; | ||
| var placements = { | ||
| static: [], | ||
| prototype: [], | ||
| own: [] | ||
| }; | ||
| elements.forEach(function (element) { | ||
| this.addElementPlacement(element, placements); | ||
| }, this); | ||
| elements.forEach(function (element) { | ||
| if (!_hasDecorators(element)) return newElements.push(element); | ||
| var elementFinishersExtras = this.decorateElement(element, placements); | ||
| newElements.push(elementFinishersExtras.element); | ||
| newElements.push.apply(newElements, elementFinishersExtras.extras); | ||
| finishers.push.apply(finishers, elementFinishersExtras.finishers); | ||
| }, this); | ||
| if (!decorators) { | ||
| return { | ||
| elements: newElements, | ||
| finishers: finishers | ||
| }; | ||
| } | ||
| var result = this.decorateConstructor(newElements, decorators); | ||
| finishers.push.apply(finishers, result.finishers); | ||
| result.finishers = finishers; | ||
| return result; | ||
| }, | ||
| addElementPlacement: function (element, placements, silent) { | ||
| var keys = placements[element.placement]; | ||
| if (!silent && keys.indexOf(element.key) !== -1) { | ||
| throw new TypeError("Duplicated element (" + element.key + ")"); | ||
| } | ||
| keys.push(element.key); | ||
| }, | ||
| decorateElement: function (element, placements) { | ||
| var extras = []; | ||
| var finishers = []; | ||
| for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { | ||
| var keys = placements[element.placement]; | ||
| keys.splice(keys.indexOf(element.key), 1); | ||
| var elementObject = this.fromElementDescriptor(element); | ||
| var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); | ||
| element = elementFinisherExtras.element; | ||
| this.addElementPlacement(element, placements); | ||
| if (elementFinisherExtras.finisher) { | ||
| finishers.push(elementFinisherExtras.finisher); | ||
| } | ||
| var newExtras = elementFinisherExtras.extras; | ||
| if (newExtras) { | ||
| for (var j = 0; j < newExtras.length; j++) { | ||
| this.addElementPlacement(newExtras[j], placements); | ||
| } | ||
| extras.push.apply(extras, newExtras); | ||
| } | ||
| } | ||
| return { | ||
| element: element, | ||
| finishers: finishers, | ||
| extras: extras | ||
| }; | ||
| }, | ||
| decorateConstructor: function (elements, decorators) { | ||
| var finishers = []; | ||
| for (var i = decorators.length - 1; i >= 0; i--) { | ||
| var obj = this.fromClassDescriptor(elements); | ||
| var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); | ||
| if (elementsAndFinisher.finisher !== undefined) { | ||
| finishers.push(elementsAndFinisher.finisher); | ||
| } | ||
| if (elementsAndFinisher.elements !== undefined) { | ||
| elements = elementsAndFinisher.elements; | ||
| for (var j = 0; j < elements.length - 1; j++) { | ||
| for (var k = j + 1; k < elements.length; k++) { | ||
| if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { | ||
| throw new TypeError("Duplicated element (" + elements[j].key + ")"); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return { | ||
| elements: elements, | ||
| finishers: finishers | ||
| }; | ||
| }, | ||
| fromElementDescriptor: function (element) { | ||
| var obj = { | ||
| kind: element.kind, | ||
| key: element.key, | ||
| placement: element.placement, | ||
| descriptor: element.descriptor | ||
| }; | ||
| var desc = { | ||
| value: "Descriptor", | ||
| configurable: true | ||
| }; | ||
| Object.defineProperty(obj, Symbol.toStringTag, desc); | ||
| if (element.kind === "field") obj.initializer = element.initializer; | ||
| return obj; | ||
| }, | ||
| toElementDescriptors: function (elementObjects) { | ||
| if (elementObjects === undefined) return; | ||
| return _toArray(elementObjects).map(function (elementObject) { | ||
| var element = this.toElementDescriptor(elementObject); | ||
| this.disallowProperty(elementObject, "finisher", "An element descriptor"); | ||
| this.disallowProperty(elementObject, "extras", "An element descriptor"); | ||
| return element; | ||
| }, this); | ||
| }, | ||
| toElementDescriptor: function (elementObject) { | ||
| var kind = String(elementObject.kind); | ||
| if (kind !== "method" && kind !== "field") { | ||
| throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); | ||
| } | ||
| var key = _toPropertyKey(elementObject.key); | ||
| var placement = String(elementObject.placement); | ||
| if (placement !== "static" && placement !== "prototype" && placement !== "own") { | ||
| throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); | ||
| } | ||
| var descriptor = elementObject.descriptor; | ||
| this.disallowProperty(elementObject, "elements", "An element descriptor"); | ||
| var element = { | ||
| kind: kind, | ||
| key: key, | ||
| placement: placement, | ||
| descriptor: Object.assign({}, descriptor) | ||
| }; | ||
| if (kind !== "field") { | ||
| this.disallowProperty(elementObject, "initializer", "A method descriptor"); | ||
| } else { | ||
| this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); | ||
| this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); | ||
| this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); | ||
| element.initializer = elementObject.initializer; | ||
| } | ||
| return element; | ||
| }, | ||
| toElementFinisherExtras: function (elementObject) { | ||
| var element = this.toElementDescriptor(elementObject); | ||
| var finisher = _optionalCallableProperty(elementObject, "finisher"); | ||
| var extras = this.toElementDescriptors(elementObject.extras); | ||
| return { | ||
| element: element, | ||
| finisher: finisher, | ||
| extras: extras | ||
| }; | ||
| }, | ||
| fromClassDescriptor: function (elements) { | ||
| var obj = { | ||
| kind: "class", | ||
| elements: elements.map(this.fromElementDescriptor, this) | ||
| }; | ||
| var desc = { | ||
| value: "Descriptor", | ||
| configurable: true | ||
| }; | ||
| Object.defineProperty(obj, Symbol.toStringTag, desc); | ||
| return obj; | ||
| }, | ||
| toClassDescriptor: function (obj) { | ||
| var kind = String(obj.kind); | ||
| if (kind !== "class") { | ||
| throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); | ||
| } | ||
| this.disallowProperty(obj, "key", "A class descriptor"); | ||
| this.disallowProperty(obj, "placement", "A class descriptor"); | ||
| this.disallowProperty(obj, "descriptor", "A class descriptor"); | ||
| this.disallowProperty(obj, "initializer", "A class descriptor"); | ||
| this.disallowProperty(obj, "extras", "A class descriptor"); | ||
| var finisher = _optionalCallableProperty(obj, "finisher"); | ||
| var elements = this.toElementDescriptors(obj.elements); | ||
| return { | ||
| elements: elements, | ||
| finisher: finisher | ||
| }; | ||
| }, | ||
| runClassFinishers: function (constructor, finishers) { | ||
| for (var i = 0; i < finishers.length; i++) { | ||
| var newConstructor = (0, finishers[i])(constructor); | ||
| if (newConstructor !== undefined) { | ||
| if (typeof newConstructor !== "function") { | ||
| throw new TypeError("Finishers must return a constructor."); | ||
| } | ||
| constructor = newConstructor; | ||
| } | ||
| } | ||
| return constructor; | ||
| }, | ||
| disallowProperty: function (obj, name, objectType) { | ||
| if (obj[name] !== undefined) { | ||
| throw new TypeError(objectType + " can't have a ." + name + " property."); | ||
| } | ||
| } | ||
| }; | ||
| return api; | ||
| } | ||
| function _createElementDescriptor(def) { | ||
| var key = _toPropertyKey(def.key); | ||
| var descriptor; | ||
| if (def.kind === "method") { | ||
| descriptor = { | ||
| value: def.value, | ||
| writable: true, | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| enumerable: false | ||
| }; | ||
| } else if (def.kind === "get") { | ||
| descriptor = { | ||
| get: def.value, | ||
| configurable: true, | ||
| enumerable: false | ||
| }; | ||
| } else if (def.kind === "set") { | ||
| descriptor = { | ||
| set: def.value, | ||
| configurable: true, | ||
| enumerable: false | ||
| }; | ||
| } else if (def.kind === "field") { | ||
| descriptor = { | ||
| configurable: true, | ||
| writable: true, | ||
| enumerable: true | ||
| }; | ||
| } | ||
| var element = { | ||
| kind: def.kind === "field" ? "field" : "method", | ||
| key: key, | ||
| placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", | ||
| descriptor: descriptor | ||
| }; | ||
| if (def.decorators) element.decorators = def.decorators; | ||
| if (def.kind === "field") element.initializer = def.value; | ||
| return element; | ||
| } | ||
| function _coalesceGetterSetter(element, other) { | ||
| if (element.descriptor.get !== undefined) { | ||
| other.descriptor.get = element.descriptor.get; | ||
| writable: true | ||
| }); | ||
| } else { | ||
| other.descriptor.set = element.descriptor.set; | ||
| obj[key] = value; | ||
| } | ||
| } | ||
| function _coalesceClassElements(elements) { | ||
| var newElements = []; | ||
| var isSameElement = function (other) { | ||
| return other.kind === "method" && other.key === element.key && other.placement === element.placement; | ||
| }; | ||
| for (var i = 0; i < elements.length; i++) { | ||
| var element = elements[i]; | ||
| var other; | ||
| if (element.kind === "method" && (other = newElements.find(isSameElement))) { | ||
| if (_isDataDescriptor(element.descriptor) || _isDataDescriptor(other.descriptor)) { | ||
| if (_hasDecorators(element) || _hasDecorators(other)) { | ||
| throw new ReferenceError("Duplicated methods (" + element.key + ") can't be decorated."); | ||
| } | ||
| other.descriptor = element.descriptor; | ||
| } else { | ||
| if (_hasDecorators(element)) { | ||
| if (_hasDecorators(other)) { | ||
| throw new ReferenceError("Decorators can't be placed on different accessors with for " + "the same property (" + element.key + ")."); | ||
| } | ||
| other.decorators = element.decorators; | ||
| } | ||
| _coalesceGetterSetter(element, other); | ||
| } | ||
| } else { | ||
| newElements.push(element); | ||
| } | ||
| } | ||
| return newElements; | ||
| return obj; | ||
| } | ||
| function _hasDecorators(element) { | ||
| return element.decorators && element.decorators.length; | ||
| } | ||
| function _isDataDescriptor(desc) { | ||
| return desc !== undefined && !(desc.value === undefined && desc.writable === undefined); | ||
| } | ||
| function _optionalCallableProperty(obj, name) { | ||
| var value = obj[name]; | ||
| if (value !== undefined && typeof value !== "function") { | ||
| throw new TypeError("Expected '" + name + "' to be a function"); | ||
| } | ||
| return value; | ||
| } | ||
| export { _arrayWithHoles as arrayWithHoles, _decorate as decorate, _iterableToArray as iterableToArray, _nonIterableRest as nonIterableRest, _toArray as toArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey }; | ||
| export { _defineProperty as defineProperty }; | ||
| //# sourceMappingURL=_rollupPluginBabelHelpers.js.map |
@@ -6,2 +6,10 @@ # Change Log | ||
| ## [4.0.12](https://github.com/forter/web-components/compare/@forter/avatar@4.0.11...@forter/avatar@4.0.12) (2022-09-28) | ||
| **Note:** Version bump only for package @forter/avatar | ||
| ## [4.0.11](https://github.com/forter/web-components/compare/@forter/avatar@4.0.10...@forter/avatar@4.0.11) (2021-12-27) | ||
@@ -8,0 +16,0 @@ |
@@ -63,2 +63,15 @@ import { css } from 'lit-element'; | ||
| } | ||
| #avatar-badge { | ||
| opacity: 0; | ||
| position: absolute; | ||
| left: 75%; | ||
| top: -15%; | ||
| } | ||
| #avatar-badge:hover, | ||
| button:hover ~ #avatar-badge { | ||
| opacity: 1; | ||
| transition: all 0.3s ease; | ||
| } | ||
| `; | ||
@@ -65,0 +78,0 @@ |
157
FcAvatar.js
@@ -1,3 +0,3 @@ | ||
| import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
| import { LitElement, property, html } from 'lit-element'; | ||
| import { defineProperty as _defineProperty } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
| import { LitElement, html } from 'lit-element'; | ||
| import style from './fc-avatar.css'; | ||
@@ -32,5 +32,13 @@ | ||
| * | ||
| * ## Examples | ||
| * | ||
| * ```html | ||
| * <!-- Avatar Badge --> | ||
| * <fc-avatar> | ||
| * <fc-button icon="close" style="--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;" slot="badge"></fc-button> | ||
| * </fc-avatar> | ||
| * ``` | ||
| * | ||
| * @element fc-avatar | ||
| * @slot - avatar badge element. | ||
| * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px` | ||
@@ -43,67 +51,14 @@ * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px` | ||
| let FcAvatar = _decorate(null, function (_initialize, _LitElement) { | ||
| class FcAvatar extends _LitElement { | ||
| constructor(...args) { | ||
| super(...args); | ||
| _initialize(this); | ||
| } | ||
| } | ||
| return { | ||
| F: FcAvatar, | ||
| d: [{ | ||
| kind: "field", | ||
| decorators: [property({ | ||
| type: String, | ||
| reflect: true | ||
| })], | ||
| key: "src", | ||
| value: void 0 | ||
| }, { | ||
| kind: "field", | ||
| decorators: [property({ | ||
| type: String | ||
| })], | ||
| key: "alt", | ||
| value() { | ||
| return 'User Avatar'; | ||
| } | ||
| }, { | ||
| kind: "field", | ||
| decorators: [property({ | ||
| type: String, | ||
| reflect: true | ||
| })], | ||
| key: "abbr", | ||
| value: void 0 | ||
| }, { | ||
| kind: "field", | ||
| static: true, | ||
| key: "is", | ||
| value() { | ||
| return 'fc-avatar'; | ||
| } | ||
| }, { | ||
| kind: "field", | ||
| static: true, | ||
| key: "styles", | ||
| value() { | ||
| return [style]; | ||
| } | ||
| }, { | ||
| kind: "method", | ||
| key: "render", | ||
| value: | ||
| class FcAvatar extends LitElement { | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| src: { | ||
| type: String, | ||
| reflect: true | ||
| }, | ||
@@ -113,3 +68,8 @@ /** | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| alt: { | ||
| type: String, | ||
| value: 'User Avatar' | ||
| }, | ||
@@ -119,34 +79,63 @@ /** | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| abbr: { | ||
| type: String, | ||
| reflect: true | ||
| }, | ||
| /** @inheritdoc */ | ||
| /** | ||
| * if this property is true, the entire abbr text is shown and not initials | ||
| * @type { Boolean} | ||
| * @attr | ||
| */ | ||
| showRawText: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflect: true | ||
| } | ||
| }; | ||
| } | ||
| /** @inheritdoc */ | ||
| /** @inheritdoc */ | ||
| /** @inheritdoc */ | ||
| function render() { | ||
| const { | ||
| abbr, | ||
| alt, | ||
| src | ||
| } = this; | ||
| renderAvatarContent() { | ||
| const { | ||
| abbr, | ||
| alt, | ||
| src, | ||
| showRawText | ||
| } = this; | ||
| if (src) { | ||
| return html`<button aria-label="${alt}"> | ||
| <img alt="${alt}" src="${src}"></img> | ||
| </button> | ||
| `; | ||
| } | ||
| if (src) { | ||
| return html`<img alt="${alt}" src="${src}">`; | ||
| } | ||
| return html` | ||
| const text = showRawText ? abbr : initial(abbr); | ||
| return html`<div id="abbr">${text}</div>`; | ||
| } | ||
| /** @inheritdoc */ | ||
| render() { | ||
| const { | ||
| alt | ||
| } = this; | ||
| return html` | ||
| <button aria-label="${alt}"> | ||
| <div id="abbr">${initial(abbr)}</div> | ||
| ${this.renderAvatarContent()} | ||
| </button> | ||
| <div id="avatar-badge"> | ||
| <slot name="badge"></slot> | ||
| </div> | ||
| `; | ||
| } | ||
| }] | ||
| }; | ||
| }, LitElement); | ||
| } | ||
| } | ||
| _defineProperty(FcAvatar, "is", 'fc-avatar'); | ||
| _defineProperty(FcAvatar, "styles", [style]); | ||
| export { FcAvatar }; | ||
| //# sourceMappingURL=FcAvatar.js.map |
| { | ||
| "name": "@forter/avatar", | ||
| "version": "4.0.11", | ||
| "version": "4.0.12", | ||
| "description": "Avatar from Forter Components", | ||
@@ -54,3 +54,3 @@ "main": "index.js", | ||
| }, | ||
| "gitHead": "8a243294c111aadaad241459904e33bbf990d555" | ||
| "gitHead": "75ccc51d9a80ceb8f419bb19d759ddd23f4ea5c5" | ||
| } |
@@ -17,10 +17,26 @@ # fc-avatar | ||
| ## Examples | ||
| ```html | ||
| <!-- Avatar Badge --> | ||
| <fc-avatar> | ||
| <fc-button icon="close" style="--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;" slot="badge"></fc-button> | ||
| </fc-avatar> | ||
| ``` | ||
| ## Properties | ||
| | Property | Attribute | Type | Default | Description | | ||
| |----------|-----------|----------|---------------|--------------------------------------------------| | ||
| | `abbr` | `abbr` | `string` | | two chars in the generated avatar. | | ||
| | `alt` | `alt` | `string` | "User Avatar" | alternative text for accessibility. example: `with` | | ||
| | `src` | `src` | `string` | | URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` | | ||
| | Property | Attribute | Type | Default | Description | | ||
| |---------------|---------------|-----------|---------------|--------------------------------------------------| | ||
| | `abbr` | `abbr` | `string` | | two chars in the generated avatar. | | ||
| | `alt` | `alt` | `string` | "User Avatar" | alternative text for accessibility. example: `with` | | ||
| | `showRawText` | `showRawText` | `boolean` | | | | ||
| | `src` | `src` | `string` | | URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` | | ||
| ## Slots | ||
| | Name | Description | | ||
| |------|-----------------------| | ||
| | | avatar badge element. | | ||
| ## CSS Custom Properties | ||
@@ -27,0 +43,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import { LitElement, html, property } from 'lit-element'; | ||
| import { LitElement, html } from 'lit-element'; | ||
@@ -35,5 +35,13 @@ import style from './fc-avatar.css'; | ||
| * | ||
| * ## Examples | ||
| * | ||
| * ```html | ||
| * <!-- Avatar Badge --> | ||
| * <fc-avatar> | ||
| * <fc-button icon="close" style="--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;" slot="badge"></fc-button> | ||
| * </fc-avatar> | ||
| * ``` | ||
| * | ||
| * @element fc-avatar | ||
| * @slot - avatar badge element. | ||
| * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px` | ||
@@ -45,21 +53,31 @@ * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px` | ||
| export class FcAvatar extends LitElement { | ||
| /** | ||
| * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` | ||
| * @type {String} | ||
| */ | ||
| @property({ type: String, reflect: true }) src; | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| src: { type: String, reflect: true }, | ||
| /** | ||
| * alternative text for accessibility. example: `with` | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| alt: { type: String, value: 'User Avatar' }, | ||
| /** | ||
| * two chars in the generated avatar. | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| abbr: { type: String, reflect: true }, | ||
| /** | ||
| * if this property is true, the entire abbr text is shown and not initials | ||
| * @type { Boolean} | ||
| * @attr | ||
| */ | ||
| showRawText: { type: Boolean, value: false, reflect: true } | ||
| }; | ||
| } | ||
| /** | ||
| * alternative text for accessibility. example: `with` | ||
| * @type {String} | ||
| */ | ||
| @property({ type: String }) alt = 'User Avatar'; | ||
| /** | ||
| * two chars in the generated avatar. | ||
| * @type {String} | ||
| */ | ||
| @property({ type: String, reflect: true }) abbr; | ||
| /** @inheritdoc */ | ||
@@ -71,19 +89,23 @@ static is = 'fc-avatar'; | ||
| /** @inheritdoc */ | ||
| render() { | ||
| const { abbr, alt, src } = this; | ||
| renderAvatarContent() { | ||
| const { abbr, alt, src, showRawText } = this; | ||
| if (src) { | ||
| return html`<button aria-label="${alt}"> | ||
| <img alt="${alt}" src="${src}"></img> | ||
| </button> | ||
| `; | ||
| return html`<img alt="${alt}" src="${src}">`; | ||
| } | ||
| const text = showRawText ? abbr : initial(abbr); | ||
| return html`<div id="abbr">${text}</div>`; | ||
| } | ||
| /** @inheritdoc */ | ||
| render() { | ||
| const { alt } = this; | ||
| return html` | ||
| <button aria-label="${alt}"> | ||
| <div id="abbr">${initial(abbr)}</div> | ||
| ${this.renderAvatarContent()} | ||
| </button> | ||
| <div id="avatar-badge"> | ||
| <slot name="badge"></slot> | ||
| </div> | ||
| `; | ||
| } | ||
| } |
@@ -6,4 +6,4 @@ { | ||
| "name": "fc-avatar", | ||
| "description": "Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->\n\n## Usage\n\n```html\n<script>\n import '@forter/avatar';\n</script>\n\n<fc-avatar>\n</fc-avatar>\n```", | ||
| "jsDoc": "/**\n * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n * <!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n * import '@forter/avatar';\n * </script>\n *\n * <fc-avatar>\n * </fc-avatar>\n * ```\n *\n *\n *\n * @element fc-avatar\n * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px`\n * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`\n * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`\n * @cssprop --fc-avatar-hover-background-color - the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)`\n */", | ||
| "description": "Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->\n\n## Usage\n\n```html\n<script>\n import '@forter/avatar';\n</script>\n\n<fc-avatar>\n</fc-avatar>\n```\n\n## Examples\n\n```html\n<!-- Avatar Badge -->\n<fc-avatar>\n <fc-button icon=\"close\" style=\"--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;\" slot=\"badge\"></fc-button>\n</fc-avatar>\n```", | ||
| "jsDoc": "/**\n * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n * <!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n * import '@forter/avatar';\n * </script>\n *\n * <fc-avatar>\n * </fc-avatar>\n * ```\n *\n * ## Examples\n *\n * ```html\n * <!-- Avatar Badge -->\n * <fc-avatar>\n * <fc-button icon=\"close\" style=\"--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;\" slot=\"badge\"></fc-button>\n * </fc-avatar>\n * ```\n *\n * @element fc-avatar\n * @slot - avatar badge element.\n * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px`\n * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`\n * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`\n * @cssprop --fc-avatar-hover-background-color - the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)`\n */", | ||
| "attributes": [ | ||
@@ -13,3 +13,3 @@ { | ||
| "description": "URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`", | ||
| "jsDoc": "/**\n * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`\n * @type {String}\n */", | ||
| "jsDoc": "/**\n * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
@@ -20,3 +20,3 @@ }, | ||
| "description": "alternative text for accessibility. example: `with`", | ||
| "jsDoc": "/**\n * alternative text for accessibility. example: `with`\n * @type {String}\n */", | ||
| "jsDoc": "/**\n * alternative text for accessibility. example: `with`\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
@@ -27,4 +27,8 @@ }, | ||
| "description": "two chars in the generated avatar.", | ||
| "jsDoc": "/**\n * two chars in the generated avatar.\n * @type {String}\n */", | ||
| "jsDoc": "/**\n * two chars in the generated avatar.\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "showRawText", | ||
| "type": "boolean" | ||
| } | ||
@@ -36,3 +40,3 @@ ], | ||
| "description": "URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`", | ||
| "jsDoc": "/**\n * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`\n * @type {String}\n */", | ||
| "jsDoc": "/**\n * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
@@ -43,3 +47,3 @@ }, | ||
| "description": "alternative text for accessibility. example: `with`", | ||
| "jsDoc": "/**\n * alternative text for accessibility. example: `with`\n * @type {String}\n */", | ||
| "jsDoc": "/**\n * alternative text for accessibility. example: `with`\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
@@ -50,6 +54,16 @@ }, | ||
| "description": "two chars in the generated avatar.", | ||
| "jsDoc": "/**\n * two chars in the generated avatar.\n * @type {String}\n */", | ||
| "jsDoc": "/**\n * two chars in the generated avatar.\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "showRawText", | ||
| "type": "boolean" | ||
| } | ||
| ], | ||
| "slots": [ | ||
| { | ||
| "name": "", | ||
| "description": "avatar badge element." | ||
| } | ||
| ], | ||
| "cssProperties": [ | ||
@@ -56,0 +70,0 @@ { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by13.33%
34
- Number of lines in readme file
- increased by48.48%
49
Worsened metrics
- Total package byte prevSize
- decreased by-18.51%
42542
- Lines of code
- decreased by-37.93%
486
No dependency changes