@patternfly/pfe-core 2.0.0-next.4 → 2.0.0-next.5
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.
|
@@ -18,6 +18,7 @@ export declare type ColorPalette = ('base' | 'accent' | 'complement' | 'lighter'
|
|
|
18
18
|
export declare type ColorTheme = ('dark' | 'light' | 'saturated');
|
|
19
19
|
export interface ColorContextOptions {
|
|
20
20
|
prefix?: string;
|
|
21
|
+
attribute?: string;
|
|
21
22
|
}
|
|
22
23
|
/**
|
|
23
24
|
* Color context is derived from the `--context` css custom property,
|
|
@@ -31,6 +32,7 @@ export interface ColorContextOptions {
|
|
|
31
32
|
declare abstract class ColorContextController implements ReactiveController {
|
|
32
33
|
protected host: ReactiveElement;
|
|
33
34
|
abstract update(next: ColorTheme | null): void;
|
|
35
|
+
protected abstract attribute: string;
|
|
34
36
|
/** The context object which describes the host's colour context */
|
|
35
37
|
protected context: Context<ColorTheme | null>;
|
|
36
38
|
/** The style controller which provides the necessary CSS. */
|
|
@@ -48,6 +50,7 @@ declare abstract class ColorContextController implements ReactiveController {
|
|
|
48
50
|
* descendents.
|
|
49
51
|
*/
|
|
50
52
|
export declare class ColorContextProvider extends ColorContextController implements ReactiveController {
|
|
53
|
+
protected attribute: string;
|
|
51
54
|
/** Cache of context callbacks. Call each to update consumers */
|
|
52
55
|
private callbacks;
|
|
53
56
|
/** Mutation observer which updates consumers when `on` or `color-palette` attributes change. */
|
|
@@ -87,7 +90,10 @@ export declare class ColorContextProvider extends ColorContextController impleme
|
|
|
87
90
|
* The consumer has no direct access to the context, it must receive it from the provider.
|
|
88
91
|
*/
|
|
89
92
|
export declare class ColorContextConsumer extends ColorContextController implements ReactiveController {
|
|
93
|
+
protected attribute: string;
|
|
90
94
|
private dispose?;
|
|
95
|
+
private override;
|
|
96
|
+
constructor(host: ReactiveElement, options?: ColorContextOptions);
|
|
91
97
|
/**
|
|
92
98
|
* When a color context consumer connects,
|
|
93
99
|
* it requests colour context from the closest context provider,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(a,o,e,t)=>{for(var r=t>1?void 0:t?m(o,e):o,d=a.length-1,p;d>=0;d--)(p=a[d])&&(r=(t?p(o,e,r):p(r))||r);return t&&r&&u(o,e,r),r};import"lit";import{ContextEvent as b,createContext as x}from"../context.js";import{bound as s}from"../decorators/bound.js";import{Logger as C}from"./logger.js";import{StyleController as g}from"./style-controller.js";import{css as v}from"lit";var k=v`:host(:is([on=dark])){--context:dark}:host(:is([on=light])){--context:light}:host(:is([on=saturated])){--context:saturated}:host(:is([color-palette=darker],[color-palette=darkest])){--context:dark;--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])){--context:light;--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])){--context:saturated;--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host(:is([color-palette=lightest])){--pfe-context-background-color:var(--pfe-theme--color--surface--lightest, #fff)}:host(:is([color-palette=lighter])){--pfe-context-background-color:var(--pfe-theme--color--surface--lighter, #ededed)}:host(:is([color-palette=base])){--pfe-context-background-color:var(--pfe-theme--color--surface--base, #ededed)}:host(:is([color-palette=darker])){--pfe-context-background-color:var(--pfe-theme--color--surface--darker, #393f44)}:host(:is([color-palette=darkest])){--pfe-context-background-color:var(--pfe-theme--color--surface--darkest, #292e34)}:host(:is([color-palette=complement])){--pfe-context-background-color:var(--pfe-theme--color--surface--complement, #004368)}:host(:is([color-palette=accent])){--pfe-context-background-color:var(--pfe-theme--color--surface--accent, #00659c)}:host(:is([color-palette])){background-color:var(--pfe-context-background-color,var(--pfe-theme--color--surface--base))}`,f=k;var h=new Map,c=class{constructor(o,e){this.host=o;this.prefix="pfe-";this.last=null;this.prefix=e?.prefix??"pfe-",this.context=x(`${this.prefix}-color-context`),this.logger=new C(o),this.styleController=new g(o,f),o.addController(this)}},n=class extends c{constructor(e,t){super(e,t);this.callbacks=new Set;this.mo=new MutationObserver(()=>this.update(this.contextVariable));this.style=window.getComputedStyle(e),this.attribute=t?.attribute??"color-palette"}get contextVariable(){return this.style.getPropertyValue("--context").trim()||null}hostConnected(){this.host.addEventListener("context-request",this.onChildContextEvent),this.mo.observe(this.host,{attributes:!0,attributeFilter:[this.attribute,"on"]}),this.update(this.contextVariable);for(let[e,t]of h)e.dispatchEvent(t)}hostDisconnected(){this.callbacks.forEach(e=>this.callbacks.delete(e)),this.mo.disconnect()}isColorContextEvent(e){return e.target!==this.host&&e.context.name===`${this.prefix}-color-context`}onChildContextEvent(e){this.isColorContextEvent(e)&&(e.stopPropagation(),e.callback(this.contextVariable),e.multiple&&this.callbacks.add(e.callback))}update(e){for(let t of this.callbacks)t(e)}};i([s],n.prototype,"onChildContextEvent",1),i([s],n.prototype,"update",1);var l=class extends c{constructor(e,t){super(e,t);this.override=null;this.attribute??(this.attribute="on")}hostConnected(){let e=new b(this.context,this.contextCallback,!0);this.override=this.host.getAttribute(this.attribute),this.host.dispatchEvent(e),h.set(this.host,e)}hostDisconnected(){this.dispose?.(),this.dispose=void 0,h.delete(this.host)}contextCallback(e,t){t&&t!==this.dispose&&(this.dispose?.(),this.dispose=t),this.update(e)}update(e){!this.override&&e!==this.last&&(this.last=e,this.logger.log(`setting context from ${this.host.getAttribute(this.attribute)} to ${e}`),e==null?this.host.removeAttribute(this.attribute):this.host.setAttribute(this.attribute,e))}};i([s],l.prototype,"contextCallback",1),i([s],l.prototype,"update",1);export{l as ColorContextConsumer,n as ColorContextProvider};
|
|
2
2
|
//# sourceMappingURL=color-context.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["color-context.ts", "color-context.scss"],
|
|
4
|
-
"sourcesContent": ["import { ReactiveController, ReactiveElement } from 'lit';\nimport type { Context, ContextCallback, UnknownContext } from '../context.js';\n\nimport { ContextEvent, createContext } from '../context.js';\nimport { bound } from '../decorators/bound.js';\nimport { Logger } from './logger.js';\nimport { StyleController } from './style-controller.js';\n\nimport CONTEXT_BASE_STYLES from './color-context.scss';\n\n/**\n * A `ColorPalette` is a collection of specific color values\n * Choosing a palette sets both color properties and, if the component is a context provider,\n * implies a color theme for descendents.\n *\n * `ColorPalette` is associated with the `color-palette` attribute\n */\nexport type ColorPalette = (\n | 'base'\n | 'accent'\n | 'complement'\n | 'lighter'\n | 'lightest'\n | 'darker'\n | 'darkest'\n);\n\n/**\n * A Color theme is a context-specific restriction on the available color palettes\n *\n * `ColorTheme` is associated with the `on` attribute and the `--context` css property\n */\nexport type ColorTheme = (\n | 'dark'\n | 'light'\n | 'saturated'\n);\n\nexport interface ColorContextOptions {\n prefix?: string;\n}\n\n// TODO: CSS\n// 1. move sass that maps from palette to theme from _colors.scss:198+ to color-context.scss (and rename them)\n// 2. except don't because hard, wait for design tokens instead\n\n// TODO: QA\n// 1. verify elements\n// pfe-band - (easy)\n// pfe-card - (easy)\n// pfe-tabs - (easy)\n// pfe-jump-links - (potentially fraught)\n// pfe-autocomplete - (anyways broken)\n// pfe-cta - (anyways broken)\n\n/**\n* Maps from consumer host elements to already-fired request events\n* We hold these in memory in order to re-fire the events every time a new provider connects.\n* This is a hedge against cases where an early-upgrading provider claims an early-upgrading\n* consumer before a late-upgrading provider has a chance to register as the rightful provider\n* @example Monkey-in-the-middle error\n* In this example, we must re-fire the event from eager-consumer when late-provider\n* upgrades, so as to ensure that late-provider claims it for itself\n* ```html\n* <early-provider>\n* <late-provider>\n* <eager-consumer>\n* </late-provider>\n* </early-provider>\n* ```\n*/\nconst contextEvents = new Map<ReactiveElement, ContextEvent<UnknownContext>>();\n\n/**\n * Color context is derived from the `--context` css custom property,\n * which can be set by the `on` attribute, but *must* be set by the `color-palette` attribute\n * This property is set (in most cases) in `color-context.scss`,\n * which is added to components via `StyleController`.\n *\n * In this way, we avoid the need to execute javascript in order to convert from a given\n * `ColorPalette` to a given `ColorTheme`, since those relationships are specified in CSS.\n */\nabstract class ColorContextController implements ReactiveController {\n abstract update(next: ColorTheme | null): void;\n\n /** The context object which describes the host's colour context */\n protected context: Context<ColorTheme|null>;\n\n /** The style controller which provides the necessary CSS. */\n protected styleController: StyleController;\n\n /** Prefix for colour context. Set this in Options to create a separate context */\n protected prefix = 'pfe-';\n\n /** The last-known color context on the host */\n protected last: ColorTheme|null = null;\n\n protected logger: Logger;\n\n hostUpdate?(): void\n\n constructor(protected host: ReactiveElement, options?: ColorContextOptions) {\n this.prefix = options?.prefix ?? 'pfe-';\n this.context = createContext(`${this.prefix}-color-context`);\n this.logger = new Logger(host);\n this.styleController = new StyleController(host, CONTEXT_BASE_STYLES);\n host.addController(this as ReactiveController);\n }\n}\n\n/**\n * `ColorContextProvider` is responsible to derive a context value from CSS and provide it to its\n * descendents.\n */\nexport class ColorContextProvider extends ColorContextController implements ReactiveController {\n /** Cache of context callbacks. Call each to update consumers */\n private callbacks = new Set<ContextCallback<ColorTheme|null>>();\n\n /** Mutation observer which updates consumers when `on` or `color-palette` attributes change. */\n private mo = new MutationObserver(() => this.update(this.contextVariable));\n\n /**\n * Cached (live) computed style declaration\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle\n */\n protected style: CSSStyleDeclaration;\n\n /** Return the current CSS `--context` value, or null */\n protected get contextVariable(): ColorTheme | null {\n return this.style.getPropertyValue('--context').trim() as ColorTheme || null;\n }\n\n constructor(host: ReactiveElement, options?: ColorContextOptions) {\n super(host, options);\n this.style = window.getComputedStyle(host);\n }\n\n /**\n * When a context provider connects, it listens for context-request events\n * it also fires all previously fired context-request events from their hosts,\n * in case this context provider upgraded after and is closer to a given consumer.\n */\n hostConnected() {\n this.host.addEventListener('context-request', this.onChildContextEvent);\n this.mo.observe(this.host, { attributes: true, attributeFilter: ['color-palette', 'on'] });\n this.update(this.contextVariable);\n for (const [host, fired] of contextEvents) {\n host.dispatchEvent(fired);\n }\n }\n\n /**\n * When a context provider disconnects, it disconnects its mutation observer\n */\n hostDisconnected() {\n this.callbacks.forEach(x => this.callbacks.delete(x));\n this.mo.disconnect();\n }\n\n /** Was the context event fired requesting our colour-context context? */\n private isColorContextEvent(\n event: ContextEvent<UnknownContext>\n ): event is ContextEvent<Context<ColorTheme|null>> {\n return (\n event.target !== this.host &&\n event.context.name === `${this.prefix}-color-context`\n );\n }\n\n /**\n * Provider part of context API\n * When a child connects, claim its context-request event\n * and add its callback to the Set of children if it requests multiple updates\n */\n @bound private onChildContextEvent(event: ContextEvent<UnknownContext>) {\n // only handle ContextEvents relevant to colour context\n if (this.isColorContextEvent(event)) {\n // claim the context-request event for ourselves (required by context protocol)\n event.stopPropagation();\n\n // Run the callback to initialize the child's colour-context\n event.callback(this.contextVariable);\n\n // Cache the callback for future updates, if requested\n if (event.multiple) {\n this.callbacks.add(event.callback);\n }\n }\n }\n\n /** Sets the `on` attribute on the host and any children that requested multiple updates */\n @bound public update(next: ColorTheme | null) {\n for (const cb of this.callbacks) {\n cb(next);\n }\n }\n}\n\n/**\n * A color context consumer receives sets it's `on` attribute based on the context provided\n * by the closes color context provider.\n * The consumer has no direct access to the context, it must receive it from the provider.\n */\nexport class ColorContextConsumer extends ColorContextController implements ReactiveController {\n private dispose?: () => void;\n\n /**\n * When a color context consumer connects,\n * it requests colour context from the closest context provider,\n * then updates it's host's `on` attribute\n */\n hostConnected() {\n const event = new ContextEvent(this.context, this.contextCallback, true);\n this.host.dispatchEvent(event);\n contextEvents.set(this.host, event);\n }\n\n /**\n * When a color context consumer disconnects,\n * it removes itself from the collection of components which request color context\n * then updates it's host's `on` attribute\n */\n hostDisconnected() {\n this.dispose?.();\n this.dispose = undefined;\n contextEvents.delete(this.host);\n }\n\n /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */\n @bound private contextCallback(value: ColorTheme|null, dispose?: () => void) {\n // protect against changing providers\n if (dispose && dispose !== this.dispose) {\n this.dispose?.();\n this.dispose = dispose;\n }\n this.update(value);\n }\n\n /** Sets the `on` attribute on the host and any children that requested multiple updates */\n @bound public update(next: ColorTheme|null) {\n if (next !== this.last) {\n this.last = next;\n this.logger.log(`setting context from ${this.host.getAttribute('on')} to ${next}`);\n if (next == null) {\n this.host.removeAttribute('on');\n } else {\n this.host.setAttribute('on', next);\n }\n }\n }\n}\n\n", "import {css} from 'lit';\nexport const styles = css`:host(:is([on=dark])){--context:dark}:host(:is([on=light])){--context:light}:host(:is([on=saturated])){--context:saturated}:host(:is([color-palette=darker],[color-palette=darkest])){--context:dark;--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])){--context:light;--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])){--context:saturated;--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host(:is([color-palette=lightest])){--pfe-context-background-color:var(--pfe-theme--color--surface--lightest, #fff)}:host(:is([color-palette=lighter])){--pfe-context-background-color:var(--pfe-theme--color--surface--lighter, #ededed)}:host(:is([color-palette=base])){--pfe-context-background-color:var(--pfe-theme--color--surface--base, #ededed)}:host(:is([color-palette=darker])){--pfe-context-background-color:var(--pfe-theme--color--surface--darker, #393f44)}:host(:is([color-palette=darkest])){--pfe-context-background-color:var(--pfe-theme--color--surface--darkest, #292e34)}:host(:is([color-palette=complement])){--pfe-context-background-color:var(--pfe-theme--color--surface--complement, #004368)}:host(:is([color-palette=accent])){--pfe-context-background-color:var(--pfe-theme--color--surface--accent, #00659c)}:host(:is([color-palette])){background-color:var(--pfe-context-background-color,var(--pfe-theme--color--surface--base))}`;\nexport default styles;\n"],
|
|
5
|
-
"mappings": "wMAAA,YAGA,gEACA,+CACA,qCACA,wDCNA,0BACO,GAAM,GAAS,s3HACf,EAAQ,
|
|
4
|
+
"sourcesContent": ["import { ReactiveController, ReactiveElement } from 'lit';\nimport type { Context, ContextCallback, UnknownContext } from '../context.js';\n\nimport { ContextEvent, createContext } from '../context.js';\nimport { bound } from '../decorators/bound.js';\nimport { Logger } from './logger.js';\nimport { StyleController } from './style-controller.js';\n\nimport CONTEXT_BASE_STYLES from './color-context.scss';\n\n/**\n * A `ColorPalette` is a collection of specific color values\n * Choosing a palette sets both color properties and, if the component is a context provider,\n * implies a color theme for descendents.\n *\n * `ColorPalette` is associated with the `color-palette` attribute\n */\nexport type ColorPalette = (\n | 'base'\n | 'accent'\n | 'complement'\n | 'lighter'\n | 'lightest'\n | 'darker'\n | 'darkest'\n);\n\n/**\n * A Color theme is a context-specific restriction on the available color palettes\n *\n * `ColorTheme` is associated with the `on` attribute and the `--context` css property\n */\nexport type ColorTheme = (\n | 'dark'\n | 'light'\n | 'saturated'\n);\n\nexport interface ColorContextOptions {\n prefix?: string;\n attribute?: string;\n}\n\n// TODO: CSS\n// 1. move sass that maps from palette to theme from _colors.scss:198+ to color-context.scss (and rename them)\n// 2. except don't because hard, wait for design tokens instead\n\n// TODO: QA\n// 1. verify elements\n// pfe-band - (easy)\n// pfe-card - (easy)\n// pfe-tabs - (easy)\n// pfe-jump-links - (potentially fraught)\n// pfe-autocomplete - (anyways broken)\n// pfe-cta - (anyways broken)\n\n/**\n* Maps from consumer host elements to already-fired request events\n* We hold these in memory in order to re-fire the events every time a new provider connects.\n* This is a hedge against cases where an early-upgrading provider claims an early-upgrading\n* consumer before a late-upgrading provider has a chance to register as the rightful provider\n* @example Monkey-in-the-middle error\n* In this example, we must re-fire the event from eager-consumer when late-provider\n* upgrades, so as to ensure that late-provider claims it for itself\n* ```html\n* <early-provider>\n* <late-provider>\n* <eager-consumer>\n* </late-provider>\n* </early-provider>\n* ```\n*/\nconst contextEvents = new Map<ReactiveElement, ContextEvent<UnknownContext>>();\n\n/**\n * Color context is derived from the `--context` css custom property,\n * which can be set by the `on` attribute, but *must* be set by the `color-palette` attribute\n * This property is set (in most cases) in `color-context.scss`,\n * which is added to components via `StyleController`.\n *\n * In this way, we avoid the need to execute javascript in order to convert from a given\n * `ColorPalette` to a given `ColorTheme`, since those relationships are specified in CSS.\n */\nabstract class ColorContextController implements ReactiveController {\n abstract update(next: ColorTheme | null): void;\n\n protected abstract attribute: string;\n\n /** The context object which describes the host's colour context */\n protected context: Context<ColorTheme|null>;\n\n /** The style controller which provides the necessary CSS. */\n protected styleController: StyleController;\n\n /** Prefix for colour context. Set this in Options to create a separate context */\n protected prefix = 'pfe-';\n\n /** The last-known color context on the host */\n protected last: ColorTheme|null = null;\n\n protected logger: Logger;\n\n hostUpdate?(): void\n\n constructor(protected host: ReactiveElement, options?: ColorContextOptions) {\n this.prefix = options?.prefix ?? 'pfe-';\n this.context = createContext(`${this.prefix}-color-context`);\n this.logger = new Logger(host);\n this.styleController = new StyleController(host, CONTEXT_BASE_STYLES);\n host.addController(this as ReactiveController);\n }\n}\n\n/**\n * `ColorContextProvider` is responsible to derive a context value from CSS and provide it to its\n * descendents.\n */\nexport class ColorContextProvider extends ColorContextController implements ReactiveController {\n protected attribute: string;\n\n /** Cache of context callbacks. Call each to update consumers */\n private callbacks = new Set<ContextCallback<ColorTheme|null>>();\n\n /** Mutation observer which updates consumers when `on` or `color-palette` attributes change. */\n private mo = new MutationObserver(() => this.update(this.contextVariable));\n\n /**\n * Cached (live) computed style declaration\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle\n */\n protected style: CSSStyleDeclaration;\n\n /** Return the current CSS `--context` value, or null */\n protected get contextVariable(): ColorTheme | null {\n return this.style.getPropertyValue('--context').trim() as ColorTheme || null;\n }\n\n constructor(host: ReactiveElement, options?: ColorContextOptions) {\n super(host, options);\n this.style = window.getComputedStyle(host);\n this.attribute = options?.attribute ?? 'color-palette';\n }\n\n /**\n * When a context provider connects, it listens for context-request events\n * it also fires all previously fired context-request events from their hosts,\n * in case this context provider upgraded after and is closer to a given consumer.\n */\n hostConnected() {\n this.host.addEventListener('context-request', this.onChildContextEvent);\n this.mo.observe(this.host, { attributes: true, attributeFilter: [this.attribute, 'on'] });\n this.update(this.contextVariable);\n for (const [host, fired] of contextEvents) {\n host.dispatchEvent(fired);\n }\n }\n\n /**\n * When a context provider disconnects, it disconnects its mutation observer\n */\n hostDisconnected() {\n this.callbacks.forEach(x => this.callbacks.delete(x));\n this.mo.disconnect();\n }\n\n /** Was the context event fired requesting our colour-context context? */\n private isColorContextEvent(\n event: ContextEvent<UnknownContext>\n ): event is ContextEvent<Context<ColorTheme|null>> {\n return (\n event.target !== this.host &&\n event.context.name === `${this.prefix}-color-context`\n );\n }\n\n /**\n * Provider part of context API\n * When a child connects, claim its context-request event\n * and add its callback to the Set of children if it requests multiple updates\n */\n @bound private onChildContextEvent(event: ContextEvent<UnknownContext>) {\n // only handle ContextEvents relevant to colour context\n if (this.isColorContextEvent(event)) {\n // claim the context-request event for ourselves (required by context protocol)\n event.stopPropagation();\n\n // Run the callback to initialize the child's colour-context\n event.callback(this.contextVariable);\n\n // Cache the callback for future updates, if requested\n if (event.multiple) {\n this.callbacks.add(event.callback);\n }\n }\n }\n\n /** Sets the `on` attribute on the host and any children that requested multiple updates */\n @bound public update(next: ColorTheme | null) {\n for (const cb of this.callbacks) {\n cb(next);\n }\n }\n}\n\n/**\n * A color context consumer receives sets it's `on` attribute based on the context provided\n * by the closes color context provider.\n * The consumer has no direct access to the context, it must receive it from the provider.\n */\nexport class ColorContextConsumer extends ColorContextController implements ReactiveController {\n protected attribute: string;\n\n private dispose?: () => void;\n\n private override: ColorTheme | null = null;\n\n constructor(host: ReactiveElement, options?: ColorContextOptions) {\n super(host, options);\n this.attribute ??= 'on';\n }\n\n /**\n * When a color context consumer connects,\n * it requests colour context from the closest context provider,\n * then updates it's host's `on` attribute\n */\n hostConnected() {\n const event = new ContextEvent(this.context, this.contextCallback, true);\n this.override = this.host.getAttribute(this.attribute) as ColorTheme;\n this.host.dispatchEvent(event);\n contextEvents.set(this.host, event);\n }\n\n /**\n * When a color context consumer disconnects,\n * it removes itself from the collection of components which request color context\n * then updates it's host's `on` attribute\n */\n hostDisconnected() {\n this.dispose?.();\n this.dispose = undefined;\n contextEvents.delete(this.host);\n }\n\n /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */\n @bound private contextCallback(value: ColorTheme|null, dispose?: () => void) {\n // protect against changing providers\n if (dispose && dispose !== this.dispose) {\n this.dispose?.();\n this.dispose = dispose;\n }\n this.update(value);\n }\n\n /** Sets the `on` attribute on the host and any children that requested multiple updates */\n @bound public update(next: ColorTheme|null) {\n if (!this.override && next !== this.last) {\n this.last = next;\n this.logger.log(`setting context from ${this.host.getAttribute(this.attribute)} to ${next}`);\n if (next == null) {\n this.host.removeAttribute(this.attribute);\n } else {\n this.host.setAttribute(this.attribute, next);\n }\n }\n }\n}\n\n", "import {css} from 'lit';\nexport const styles = css`:host(:is([on=dark])){--context:dark}:host(:is([on=light])){--context:light}:host(:is([on=saturated])){--context:saturated}:host(:is([color-palette=darker],[color-palette=darkest])){--context:dark;--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])){--context:light;--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])){--context:saturated;--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host(:is([color-palette=lightest])){--pfe-context-background-color:var(--pfe-theme--color--surface--lightest, #fff)}:host(:is([color-palette=lighter])){--pfe-context-background-color:var(--pfe-theme--color--surface--lighter, #ededed)}:host(:is([color-palette=base])){--pfe-context-background-color:var(--pfe-theme--color--surface--base, #ededed)}:host(:is([color-palette=darker])){--pfe-context-background-color:var(--pfe-theme--color--surface--darker, #393f44)}:host(:is([color-palette=darkest])){--pfe-context-background-color:var(--pfe-theme--color--surface--darkest, #292e34)}:host(:is([color-palette=complement])){--pfe-context-background-color:var(--pfe-theme--color--surface--complement, #004368)}:host(:is([color-palette=accent])){--pfe-context-background-color:var(--pfe-theme--color--surface--accent, #00659c)}:host(:is([color-palette])){background-color:var(--pfe-context-background-color,var(--pfe-theme--color--surface--base))}`;\nexport default styles;\n"],
|
|
5
|
+
"mappings": "wMAAA,YAGA,gEACA,+CACA,qCACA,wDCNA,0BACO,GAAM,GAAS,s3HACf,EAAQ,EDsEf,GAAM,GAAgB,GAAI,KAW1B,OAAoE,CAqBlE,YAAsB,EAAuB,EAA+B,CAAtD,YATZ,YAAS,OAGT,UAAwB,KAOhC,KAAK,OAAS,GAAS,QAAU,OACjC,KAAK,QAAU,EAAc,GAAG,KAAK,sBAAsB,EAC3D,KAAK,OAAS,GAAI,GAAO,CAAI,EAC7B,KAAK,gBAAkB,GAAI,GAAgB,EAAM,CAAmB,EACpE,EAAK,cAAc,IAA0B,CAC/C,CACF,EAMO,eAAmC,EAAqD,CAoB7F,YAAY,EAAuB,EAA+B,CAChE,MAAM,EAAM,CAAO,EAjBb,eAAY,GAAI,KAGhB,QAAK,GAAI,kBAAiB,IAAM,KAAK,OAAO,KAAK,eAAe,CAAC,EAevE,KAAK,MAAQ,OAAO,iBAAiB,CAAI,EACzC,KAAK,UAAY,GAAS,WAAa,eACzC,IARc,kBAAqC,CACjD,MAAO,MAAK,MAAM,iBAAiB,WAAW,EAAE,KAAK,GAAmB,IAC1E,CAaA,eAAgB,CACd,KAAK,KAAK,iBAAiB,kBAAmB,KAAK,mBAAmB,EACtE,KAAK,GAAG,QAAQ,KAAK,KAAM,CAAE,WAAY,GAAM,gBAAiB,CAAC,KAAK,UAAW,IAAI,CAAE,CAAC,EACxF,KAAK,OAAO,KAAK,eAAe,EAChC,OAAW,CAAC,EAAM,IAAU,GAC1B,EAAK,cAAc,CAAK,CAE5B,CAKA,kBAAmB,CACjB,KAAK,UAAU,QAAQ,GAAK,KAAK,UAAU,OAAO,CAAC,CAAC,EACpD,KAAK,GAAG,WAAW,CACrB,CAGQ,oBACN,EACiD,CACjD,MACE,GAAM,SAAW,KAAK,MACtB,EAAM,QAAQ,OAAS,GAAG,KAAK,sBAEnC,CAOe,oBAAoB,EAAqC,CAEtE,AAAI,KAAK,oBAAoB,CAAK,GAEhC,GAAM,gBAAgB,EAGtB,EAAM,SAAS,KAAK,eAAe,EAG/B,EAAM,UACR,KAAK,UAAU,IAAI,EAAM,QAAQ,EAGvC,CAGc,OAAO,EAAyB,CAC5C,OAAW,KAAM,MAAK,UACpB,EAAG,CAAI,CAEX,CACF,EAtBiB,GAAf,GAAe,AA/DV,EA+DU,mCAiBD,GAAd,GAAc,AAhFT,EAgFS,sBAYT,mBAAmC,EAAqD,CAO7F,YAAY,EAAuB,EAA+B,CAChE,MAAM,EAAM,CAAO,EAHb,cAA8B,KAIpC,KAAK,WAAL,MAAK,UAAc,KACrB,CAOA,eAAgB,CACd,GAAM,GAAQ,GAAI,GAAa,KAAK,QAAS,KAAK,gBAAiB,EAAI,EACvE,KAAK,SAAW,KAAK,KAAK,aAAa,KAAK,SAAS,EACrD,KAAK,KAAK,cAAc,CAAK,EAC7B,EAAc,IAAI,KAAK,KAAM,CAAK,CACpC,CAOA,kBAAmB,CACjB,KAAK,UAAU,EACf,KAAK,QAAU,OACf,EAAc,OAAO,KAAK,IAAI,CAChC,CAGe,gBAAgB,EAAwB,EAAsB,CAE3E,AAAI,GAAW,IAAY,KAAK,SAC9B,MAAK,UAAU,EACf,KAAK,QAAU,GAEjB,KAAK,OAAO,CAAK,CACnB,CAGc,OAAO,EAAuB,CAC1C,AAAI,CAAC,KAAK,UAAY,IAAS,KAAK,MAClC,MAAK,KAAO,EACZ,KAAK,OAAO,IAAI,wBAAwB,KAAK,KAAK,aAAa,KAAK,SAAS,QAAQ,GAAM,EAC3F,AAAI,GAAQ,KACV,KAAK,KAAK,gBAAgB,KAAK,SAAS,EAExC,KAAK,KAAK,aAAa,KAAK,UAAW,CAAI,EAGjD,CACF,EArBiB,GAAf,GAAe,AApCV,EAoCU,+BAUD,GAAd,GAAc,AA9CT,EA8CS",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|