{% for icon, svg in icons %}
{% for i in range(repetitions) %}
diff --git a/package-lock.json b/package-lock.json
index 2186be59d..290eee806 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
"@shoelace-style/localize": "^3.2.1",
"composed-offset-position": "^0.0.6",
"lit": "^3.2.1",
- "qr-creator": "^1.0.0"
+ "qr-creator": "^1.0.0",
+ "style-observer": "^0.0.7"
},
"devDependencies": {
"@11ty/eleventy": "3.0.0",
@@ -13085,6 +13086,12 @@
"node": ">=0.8.0"
}
},
+ "node_modules/style-observer": {
+ "version": "0.0.7",
+ "resolved": "https://registry.npmjs.org/style-observer/-/style-observer-0.0.7.tgz",
+ "integrity": "sha512-t75H3CRy+vd5q3yqyrf/De4tkz33hPQTiCcfh0NTesI5G7kJnZ227LEYTwqjKTtaFOCJvqZcYFHpJlF8bsk3bQ==",
+ "license": "MIT"
+ },
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index 2831f73c5..6264073d8 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,8 @@
"@shoelace-style/localize": "^3.2.1",
"composed-offset-position": "^0.0.6",
"lit": "^3.2.1",
- "qr-creator": "^1.0.0"
+ "qr-creator": "^1.0.0",
+ "style-observer": "^0.0.7"
},
"devDependencies": {
"@11ty/eleventy": "3.0.0",
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 2fee60f9d..d55f1f769 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -48,21 +48,21 @@ export default class WaIcon extends WebAwesomeElement {
@state() private svg: SVGElement | HTMLTemplateResult | null = null;
/** The name of the icon to draw. Available names depend on the icon library being used. */
- @property({ cssProperty: true }) name?: string;
+ @property({ cssProperty: '--wa-icon-name' }) name?: string;
/**
* The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
* For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
* libraries may or may not use this property.
*/
- @property({ cssProperty: true }) family: string;
+ @property({ cssProperty: '--wa-icon-family' }) family: string;
/**
* The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
* the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
* may or may not use this property.
*/
- @property({ cssProperty: true }) variant: string;
+ @property({ cssProperty: '--wa-icon-variant' }) variant: string;
/** Draws the icon in a fixed-width both. */
@property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,7 +80,7 @@ export default class WaIcon extends WebAwesomeElement {
@property() label = '';
/** The name of a registered custom icon library. */
- @property({ cssProperty: true }) library = 'default';
+ @property({ cssProperty: '--wa-icon-library', default: 'default' }) library = 'default';
connectedCallback() {
super.connectedCallback();
@@ -88,7 +88,8 @@ export default class WaIcon extends WebAwesomeElement {
watchIcon(this);
}
- firstUpdated() {
+ firstUpdated(changedProperties: PropertyValues
) {
+ super.firstUpdated(changedProperties);
this.initialRender = true;
this.setIcon();
}
diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts
index 01426e268..669d8dc4b 100644
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -1,7 +1,10 @@
import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
import { property } from 'lit/decorators.js';
+// @ts-ignore
+import { ElementStyleObserver } from 'style-observer';
import componentStyles from '../styles/shadow/component.css';
+import { getComputedStyle } from './computedStyle.js';
// Augment Lit's module
declare module 'lit' {
@@ -11,6 +14,11 @@ declare module 'lit' {
*/
default?: any;
initial?: any;
+
+ /**
+ * Indicates whether the property should reflect to a CSS custom property.
+ */
+ cssProperty?: string;
}
}
@@ -72,6 +80,100 @@ export default class WebAwesomeElement extends LitElement {
internals: ElementInternals;
+ /** Metadata about CSS-settable props on this element */
+ private cssProps: Record = {};
+ private computedStyle: CSSStyleDeclaration | null = null;
+ private styleObserver: ElementStyleObserver | null = null;
+
+ connectedCallback(): void {
+ super.connectedCallback();
+
+ // Set the initial computed styles
+ const Self = this.constructor as typeof WebAwesomeElement;
+ let cssProps = Object.keys(Self.cssProps);
+
+ if (cssProps.length > 0) {
+ let properties: string[] = [];
+
+ if (Object.keys(this.cssProps).length === 0) {
+ // First time connected, initialize
+ // @ts-ignore
+ this.cssProps = Object.fromEntries(
+ cssProps.map(property => {
+ let setVia = this.getSetVia(property);
+ return [property, { setVia }];
+ }),
+ );
+ }
+
+ for (let property in this.cssProps) {
+ let setVia = this.cssProps[property].setVia;
+ if (!setVia || setVia === 'css') {
+ // No attribute set, observe CSS property
+ properties.push(property);
+ }
+ }
+
+ this.handleCSSPropertyChange(properties);
+
+ this.styleObserver ??= new ElementStyleObserver(this, (records: object[]) => {
+ let cssProperties = new Set(records.map((record: { property: string }) => record.property));
+
+ // Map CSS properties to prop names
+ let properties = cssProps.filter(property => {
+ let cssProperty = Self.cssProps[property].cssProperty as string;
+ return cssProperties.has(cssProperty);
+ });
+
+ this.handleCSSPropertyChange(properties);
+ });
+ this.styleObserver.unobserve();
+ this.styleObserver.observe(properties.map(property => Self.cssProps[property].cssProperty as string));
+ }
+ }
+
+ /**
+ * Respond to CSS property changes for CSS properties reflecting props
+ * @param [properties] - Prop names. Defaults to all CSS-reflected props.
+ * @void
+ */
+ handleCSSPropertyChange(properties?: PropertyKey | PropertyKey[]) {
+ const Self = this.constructor as typeof WebAwesomeElement;
+
+ properties ??= Object.keys(Self.cssProps);
+ properties = Array.isArray(properties) ? properties : [properties];
+
+ if (properties.length === 0) {
+ return;
+ }
+
+ this.computedStyle ??= getComputedStyle(this);
+
+ for (let property of properties) {
+ let propOptions = Self.cssProps[property];
+ let cssProperty = propOptions?.cssProperty;
+ let meta = this.cssProps[property];
+
+ if (!cssProperty || (meta.setVia && meta.setVia !== 'css')) {
+ continue;
+ }
+
+ const value = this.computedStyle?.getPropertyValue(cssProperty);
+ // if (property === 'variant' && !value) debugger;
+
+ if (value) {
+ meta.setVia = 'css';
+ meta.updating = true;
+ // @ts-ignore
+ this[property] = value.trim();
+
+ this.updateComplete.then(() => {
+ meta.updating = false;
+ });
+ }
+ }
+ }
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
if (!this.#hasRecordedInitialProperties) {
(this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -115,6 +217,46 @@ export default class WebAwesomeElement extends LitElement {
}
}
+ private getSetVia(property: PropertyKey): 'css' | 'js' | 'attribute' | undefined {
+ let Self = this.constructor as typeof WebAwesomeElement;
+ let setVia;
+ let propOptions = Self.cssProps[property];
+ let attribute = typeof propOptions.attribute === 'string' ? propOptions.attribute : (property as string);
+
+ if (propOptions.attribute !== false && this.hasAttribute(attribute)) {
+ setVia = 'attribute';
+ } else {
+ // @ts-ignore
+ let value = this[property as PropertyKey];
+ if (value !== undefined && value !== propOptions.default) {
+ setVia = 'js';
+ }
+ }
+
+ return setVia as 'attribute' | 'js' | 'css' | undefined;
+ }
+
+ protected updated(changedProperties: PropertyValues) {
+ super.updated(changedProperties);
+
+ let Self = this.constructor as typeof WebAwesomeElement;
+ let cssProps = Object.keys(Self.cssProps);
+
+ if (cssProps.length === 0) {
+ return;
+ }
+
+ for (let [property] of changedProperties) {
+ let meta = this.cssProps[property];
+
+ if (meta && typeof property === 'string' && !(meta.setVia === 'css' && meta.updating)) {
+ // A prop is being set via JS or an attribute that was previously set via CSS
+ // and it's not because we're in the middle of an update
+ meta.setVia = this.getSetVia(property);
+ }
+ }
+ }
+
protected update(changedProperties: PropertyValues): void {
try {
super.update(changedProperties);
@@ -230,6 +372,11 @@ export default class WebAwesomeElement extends LitElement {
*/
static rectProxy: undefined | string;
+ /**
+ * Props that can be set via CSS custom properties
+ */
+ static cssProps: Record = {};
+
static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
if (options) {
if (options.initial !== undefined && options.default === undefined) {
@@ -256,8 +403,18 @@ export default class WebAwesomeElement extends LitElement {
super.createProperty(name, options);
- // Wrap the default accessor with logic to return the default value if the value is null
if (options) {
+ if (options.cssProperty) {
+ // Add to the set of CSS-settable props
+ if (this.cssProps === WebAwesomeElement.cssProps) {
+ // Each class needs its own, otherwise they'd share the same object
+ this.cssProps = {};
+ }
+
+ this.cssProps[name] = options;
+ }
+
+ // Wrap the default accessor with logic to return the default value if the value is null
if (options.default !== undefined) {
const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);