yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

umb icon element fallback colors and stylemap

Browse Source
This commit is contained in:
Lone Iversen
2024-07-17 10:02:06 +02:00
committed by Jacob Overgaard
parent 96634f3b88
commit 6c9827b7e8
1 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
View File

@@ -1,6 +1,7 @@
import { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { html, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, property, state, ifDefined, css, styleMap } from '@umbraco-cms/backoffice/external/lit';
import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
/**
@@ -10,14 +11,14 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
*/
@customElement('umb-icon')
export class UmbIconElement extends UmbLitElement {
#color?: string;
#fallbackColor?: string;
@state()
private _icon?: string;
@state()
private _color?: string;
@state()
private _fallbackColor?: string;
private _style: StyleInfo = {};
/**
* Color alias or a color code directly.\
@@ -25,25 +26,11 @@ export class UmbIconElement extends UmbLitElement {
* */
@property({ type: String })
public set color(value: string) {
if (value) {
this.#setColorStyle(value, true);
} else {
this._color = undefined;
}
this.#color = value;
this.#updateColorStyle();
}
public get color(): string {
return this._color ?? '';
}
#setColorStyle(value: string, dominant = false) {
const alias = value.replace('color-', '');
const variable = extractUmbColorVariable(alias);
const color = alias ? (variable ? `--uui-icon-color: var(${variable})` : `--uui-icon-color: ${alias}`) : undefined;
if (dominant) {
this._color = color;
} else {
this._fallbackColor = color;
}
public get color(): string | undefined {
return this.#color || this.#fallbackColor;
}
/**
@@ -53,23 +40,31 @@ export class UmbIconElement extends UmbLitElement {
@property({ type: String })
public set name(value: string | undefined) {
const [icon, color] = value ? value.split(' ') : [];
if (color) {
this.#setColorStyle(color);
} else {
this._fallbackColor = undefined;
}
this.#fallbackColor = color;
this._icon = icon;
this.#updateColorStyle();
}
public get name(): string | undefined {
return this._icon;
}
#updateColorStyle() {
const value = this.#color || this.#fallbackColor;
if (!value) {
this._style = { '--uui-icon-color': undefined };
return;
}
const color = value.replace('color-', '');
const variable = extractUmbColorVariable(color);
const styling = variable ? `var(${variable})` : color;
this._style = { '--uui-icon-color': styling };
}
override render() {
return html`<uui-icon
name=${ifDefined(this._icon)}
style=${ifDefined(this._color ?? this._fallbackColor)}></uui-icon>`;
return html`<uui-icon name=${ifDefined(this._icon)} style=${styleMap(this._style)}></uui-icon>`;
}
static override styles = [