@patternfly/pfe-core 2.0.0-next.4 → 2.0.0-next.7
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/controllers/color-context.d.ts +6 -0
- package/controllers/color-context.js +1 -1
- package/controllers/color-context.js.map +2 -2
- package/controllers/floating-dom-controller.d.ts +28 -0
- package/controllers/floating-dom-controller.js +2 -0
- package/controllers/floating-dom-controller.js.map +7 -0
- package/controllers/slot-controller.js +1 -1
- package/controllers/slot-controller.js.map +2 -2
- package/decorators/deprecation.d.ts +2 -2
- package/decorators/deprecation.js.map +2 -2
- package/decorators/observed.d.ts +1 -1
- package/decorators/observed.js.map +2 -2
- package/package.json +3 -1
|
@@ -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
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ReactiveController, ReactiveElement } from 'lit';
|
|
2
|
+
declare type Direction = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
+
declare type Alignment = 'start' | 'end';
|
|
4
|
+
/**
|
|
5
|
+
* Represents the placement of floating DOM
|
|
6
|
+
*/
|
|
7
|
+
export declare type Placement = Direction | `${Direction}-${Alignment}`;
|
|
8
|
+
/**
|
|
9
|
+
* Controls floating DOM within a web component, e.g. tooltips and popovers
|
|
10
|
+
*/
|
|
11
|
+
export declare class FloatingDOMController implements ReactiveController {
|
|
12
|
+
#private;
|
|
13
|
+
private host;
|
|
14
|
+
/**
|
|
15
|
+
* When true, the floating DOM is visible
|
|
16
|
+
*/
|
|
17
|
+
get open(): boolean;
|
|
18
|
+
set open(value: boolean);
|
|
19
|
+
constructor(host: ReactiveElement);
|
|
20
|
+
hostConnected?(): void;
|
|
21
|
+
/** Show the floating DOM */
|
|
22
|
+
show(): void;
|
|
23
|
+
/** Hide the floating DOM */
|
|
24
|
+
hide(): void;
|
|
25
|
+
/** Initialize the floating DOM */
|
|
26
|
+
create(invoker: Element, content: HTMLElement, placement: Placement, offset?: number[]): void;
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var a=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var r=(t,e,o)=>(a(t,e,"read from private field"),o?o.call(t):e.get(t)),s=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)},l=(t,e,o,p)=>(a(t,e,"write to private field"),p?p.call(t,o):e.set(t,o),o);import{applyStyles as f,arrow as d,computeStyles as h,eventListeners as v,flip as u,hide as y,offset as b,popperGenerator as g,popperOffsets as E,preventOverflow as P}from"@popperjs/core";var R=g({defaultModifiers:[v,E,h,f,b,u,P,d,y]}),i,n,m=class{constructor(e){this.host=e;s(this,i,!1);s(this,n,void 0);e.addController(this)}get open(){return r(this,i)}set open(e){l(this,i,e),e&&r(this,n)?.update(),this.host.requestUpdate()}show(){this.open=!0}hide(){this.open=!1}create(e,o,p,c){l(this,n,R(e,o,{placement:p,modifiers:[{name:"offset",options:{offset:c}},{name:"flip",options:{fallbackPlacements:["top","right","left","bottom"]}}]}))}};i=new WeakMap,n=new WeakMap;export{m as FloatingDOMController};
|
|
2
|
+
//# sourceMappingURL=floating-dom-controller.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["floating-dom-controller.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Instance } from '@popperjs/core';\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\nimport {\n applyStyles,\n arrow,\n computeStyles,\n eventListeners,\n flip,\n hide,\n offset,\n popperGenerator,\n popperOffsets,\n preventOverflow,\n} from '@popperjs/core';\n\ntype Direction =\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n\ntype Alignment =\n | 'start'\n | 'end'\n\n/**\n * Represents the placement of floating DOM\n */\nexport type Placement = Direction | `${Direction}-${Alignment}`;\n\nconst createPopper = popperGenerator({\n defaultModifiers: [\n eventListeners,\n popperOffsets,\n computeStyles,\n applyStyles,\n offset,\n flip,\n preventOverflow,\n arrow,\n hide\n ],\n});\n\n/**\n * Controls floating DOM within a web component, e.g. tooltips and popovers\n */\nexport class FloatingDOMController implements ReactiveController {\n #open = false;\n\n /**\n * When true, the floating DOM is visible\n */\n get open() {\n return this.#open;\n }\n\n set open(value: boolean) {\n this.#open = value;\n if (value) {\n this.#popper?.update();\n }\n this.host.requestUpdate();\n }\n\n #popper: Instance | undefined;\n\n constructor(private host: ReactiveElement) {\n host.addController(this);\n }\n\n hostConnected?(): void;\n\n /** Show the floating DOM */\n show(): void {\n this.open = true;\n }\n\n /** Hide the floating DOM */\n hide(): void {\n this.open = false;\n }\n\n /** Initialize the floating DOM */\n create(invoker: Element, content: HTMLElement, placement: Placement, offset?: number[]): void {\n this.#popper = createPopper(invoker, content, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset\n }\n },\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top', 'right', 'left', 'bottom'],\n },\n }\n ]\n });\n }\n}\n"],
|
|
5
|
+
"mappings": "mVAGA,4LA4BA,GAAM,GAAe,EAAgB,CACnC,iBAAkB,CAChB,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,CACF,CACF,CAAC,EA3CD,IAgDO,OAA0D,CAoB/D,YAAoB,EAAuB,CAAvB,YAnBpB,SAAQ,IAiBR,iBAGE,EAAK,cAAc,IAAI,CACzB,IAhBI,OAAO,CACT,MAAO,QAAK,EACd,IAEI,MAAK,EAAgB,CACvB,OAAK,EAAQ,GACT,GACF,OAAK,IAAS,OAAO,EAEvB,KAAK,KAAK,cAAc,CAC1B,CAWA,MAAa,CACX,KAAK,KAAO,EACd,CAGA,MAAa,CACX,KAAK,KAAO,EACd,CAGA,OAAO,EAAkB,EAAsB,EAAsB,EAAyB,CAC5F,OAAK,EAAU,EAAa,EAAS,EAAS,CAC5C,YACA,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,QACF,CACF,EACA,CACE,KAAM,OACN,QAAS,CACP,mBAAoB,CAAC,MAAO,QAAS,OAAQ,QAAQ,CACvD,CACF,CACF,CACF,CAAC,EACH,CACF,EAvDE,cAiBA",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,t,e,
|
|
1
|
+
var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,t,e,o)=>{for(var s=o>1?void 0:o?m(t,e):t,n=i.length-1,r;n>=0;n--)(r=i[n])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&c(t,e,s),s};import{bound as h}from"../decorators/bound.js";import{Logger as g}from"./logger.js";function u(i){return i.length===1&&typeof i[0]=="object"&&i[0]!==null}var p=i=>t=>i===l.anonymous?!t.hasAttribute("slot"):t.getAttribute("slot")===i,d=class{constructor(t,...e){this.host=t;this.nodes=new Map;this.firstUpdated=!1;this.mo=new MutationObserver(this.onMutation);this.deprecations={};if(this.logger=new g(this.host),u(e)){let[{slots:o,deprecations:s}]=e;this.slotNames=o,this.deprecations=s??{}}else e.length>=1?(this.slotNames=e,this.deprecations={}):this.slotNames=[null];t.addController(this)}hostConnected(){this.host.addEventListener("slotchange",this.onSlotChange),this.firstUpdated=!1,this.mo.observe(this.host,{childList:!0}),this.init()}hostUpdated(){this.firstUpdated||(this.slotNames.forEach(this.initSlot),this.firstUpdated=!0)}hostDisconnected(){this.mo.disconnect()}hasSlotted(...t){return t.length?t.some(e=>this.nodes.get(e)?.hasContent??!1):(this.logger.warn("Please provide at least one slot name for which to search."),!1)}getSlotted(...t){return t.length?t.flatMap(e=>this.nodes.get(e)?.elements??[]):this.nodes.get(d.anonymous)?.elements??[]}onSlotChange(t){let e=t.target.name;this.initSlot(e),this.host.requestUpdate()}async onMutation(t){let e=[];for(let{addedNodes:o,removedNodes:s}of t)for(let n of[...o,...s])n instanceof HTMLElement&&n.slot&&(this.initSlot(n.slot),e.push(n.slot));e.length&&this.host.requestUpdate()}getChildrenForSlot(t){return Array.from(this.host.children).filter(p(t))}initSlot(t){let e=t||d.anonymous,o=this.nodes.get(e)?.slot?.assignedElements?.()??this.getChildrenForSlot(e),s=t?`slot[name="${t}"]`:"slot:not([name])",n=this.host.shadowRoot?.querySelector?.(s)??null,r=!!o.length;this.nodes.set(e,{elements:o,name:t??"",hasContent:r,slot:n}),this.logger.log(t,r)}init(){this.nodes.clear(),this.slotNames.forEach(this.initSlot),Object.values(this.deprecations).forEach(this.initSlot),this.host.requestUpdate()}},l=d;l.anonymous=Symbol("anonymous slot"),a([h],l.prototype,"onSlotChange",1),a([h],l.prototype,"onMutation",1),a([h],l.prototype,"initSlot",1),a([h],l.prototype,"init",1);export{l as SlotController};
|
|
2
2
|
//# sourceMappingURL=slot-controller.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["slot-controller.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { bound } from '../decorators/bound.js';\nimport { Logger } from './logger.js';\n\ninterface AnonymousSlot {\n hasContent: boolean;\n elements: Element[];\n slot: HTMLSlotElement|null;\n}\n\ninterface NamedSlot extends AnonymousSlot {\n name: string;\n initialized: true;\n}\n\nexport type Slot = NamedSlot|AnonymousSlot;\n\nexport interface SlotsConfig {\n slots: (string|null)[];\n /**\n * Object mapping new slot name keys to deprecated slot name values\n * @example `pfe-modal--header` is deprecated in favour of `header`\n * ```js\n * new SlotController(this, {\n * slots: ['header'],\n * deprecations: {\n * 'header': 'pfe-modal--header'\n * }\n * })\n * ```\n */\n deprecations?: Record<string, string>;\n}\n\nfunction isObjectConfigSpread(config: ([SlotsConfig]|(string|null)[])): config is [SlotsConfig] {\n return config.length === 1 && config[0] !== null;\n}\n\n/**\n * If it's a named slot, return its children,\n * for the default slot, look for direct children not assigned to a slot\n */\nconst isSlot =\n <T extends Element = Element>(n: string|typeof SlotController.anonymous) =>\n (child: Element): child is T =>\n n === SlotController.anonymous ? !child.hasAttribute('slot')\n : child.getAttribute('slot') === n;\n\nexport class SlotController implements ReactiveController {\n public static anonymous = Symbol('anonymous slot');\n\n private nodes = new Map<string|typeof SlotController.anonymous, Slot>();\n\n private logger: Logger;\n\n private firstUpdated = false;\n\n private mo = new MutationObserver(this.onMutation);\n\n private slotNames: (string|null)[];\n\n private deprecations: Record<string, string> = {};\n\n constructor(public host: ReactiveElement, ...config: ([SlotsConfig]|(string|null)[])) {\n this.logger = new Logger(this.host);\n\n if (isObjectConfigSpread(config)) {\n const [{ slots, deprecations }] = config;\n this.slotNames = slots;\n this.deprecations = deprecations ?? {};\n } else if (config.length
|
|
5
|
-
"mappings": "wMAEA,+CACA,qCAgCA,WAA8B,EAAkE,CAC9F,MAAO,GAAO,SAAW,GAAK,EAAO,KAAO,
|
|
4
|
+
"sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { bound } from '../decorators/bound.js';\nimport { Logger } from './logger.js';\n\ninterface AnonymousSlot {\n hasContent: boolean;\n elements: Element[];\n slot: HTMLSlotElement|null;\n}\n\ninterface NamedSlot extends AnonymousSlot {\n name: string;\n initialized: true;\n}\n\nexport type Slot = NamedSlot|AnonymousSlot;\n\nexport interface SlotsConfig {\n slots: (string|null)[];\n /**\n * Object mapping new slot name keys to deprecated slot name values\n * @example `pfe-modal--header` is deprecated in favour of `header`\n * ```js\n * new SlotController(this, {\n * slots: ['header'],\n * deprecations: {\n * 'header': 'pfe-modal--header'\n * }\n * })\n * ```\n */\n deprecations?: Record<string, string>;\n}\n\nfunction isObjectConfigSpread(config: ([SlotsConfig]|(string|null)[])): config is [SlotsConfig] {\n return config.length === 1 && typeof config[0] === 'object' && config[0] !== null;\n}\n\n/**\n * If it's a named slot, return its children,\n * for the default slot, look for direct children not assigned to a slot\n */\nconst isSlot =\n <T extends Element = Element>(n: string|typeof SlotController.anonymous) =>\n (child: Element): child is T =>\n n === SlotController.anonymous ? !child.hasAttribute('slot')\n : child.getAttribute('slot') === n;\n\nexport class SlotController implements ReactiveController {\n public static anonymous = Symbol('anonymous slot');\n\n private nodes = new Map<string|typeof SlotController.anonymous, Slot>();\n\n private logger: Logger;\n\n private firstUpdated = false;\n\n private mo = new MutationObserver(this.onMutation);\n\n private slotNames: (string|null)[];\n\n private deprecations: Record<string, string> = {};\n\n constructor(public host: ReactiveElement, ...config: ([SlotsConfig]|(string|null)[])) {\n this.logger = new Logger(this.host);\n\n if (isObjectConfigSpread(config)) {\n const [{ slots, deprecations }] = config;\n this.slotNames = slots;\n this.deprecations = deprecations ?? {};\n } else if (config.length >= 1) {\n this.slotNames = config;\n this.deprecations = {};\n } else {\n this.slotNames = [null];\n }\n\n\n host.addController(this);\n }\n\n hostConnected() {\n this.host.addEventListener('slotchange', this.onSlotChange as EventListener);\n this.firstUpdated = false;\n this.mo.observe(this.host, { childList: true });\n this.init();\n }\n\n hostUpdated() {\n if (!this.firstUpdated) {\n this.slotNames.forEach(this.initSlot);\n this.firstUpdated = true;\n }\n }\n\n hostDisconnected() {\n this.mo.disconnect();\n }\n\n /**\n * Returns a boolean statement of whether or not any of those slots exists in the light DOM.\n *\n * @param {String|Array} name The slot name.\n * @example this.hasSlotted(\"header\");\n */\n hasSlotted(...names: string[]): boolean {\n if (!names.length) {\n this.logger.warn(`Please provide at least one slot name for which to search.`);\n return false;\n } else {\n return names.some(x =>\n this.nodes.get(x)?.hasContent ?? false);\n }\n }\n\n /**\n * Given a slot name or slot names, returns elements assigned to the requested slots as an array.\n * If no value is provided, it returns all children not assigned to a slot (without a slot attribute).\n *\n * @example Get header-slotted elements\n * ```js\n * this.getSlotted('header')\n * ```\n *\n * @example Get header- and footer-slotted elements\n * ```js\n * this.getSlotted('header', 'footer')\n * ```\n *\n * @example Get default-slotted elements\n * ```js\n * this.getSlotted();\n * ```\n */\n getSlotted<T extends Element = Element>(...slotNames: string[]): T[] {\n if (!slotNames.length) {\n return (this.nodes.get(SlotController.anonymous)?.elements ?? []) as T[];\n } else {\n return slotNames.flatMap(slotName =>\n this.nodes.get(slotName)?.elements ?? []) as T[];\n }\n }\n\n @bound private onSlotChange(event: Event & { target: HTMLSlotElement }) {\n const slotName = event.target.name;\n this.initSlot(slotName);\n this.host.requestUpdate();\n }\n\n @bound private async onMutation(records: MutationRecord[]) {\n const changed = [];\n for (const { addedNodes, removedNodes } of records) {\n for (const node of [...addedNodes, ...removedNodes]) {\n if (node instanceof HTMLElement && node.slot) {\n this.initSlot(node.slot);\n changed.push(node.slot);\n }\n }\n }\n if (changed.length) {\n this.host.requestUpdate();\n }\n }\n\n private getChildrenForSlot<T extends Element = Element>(name: string|typeof SlotController.anonymous): T[] {\n const children = Array.from(this.host.children) as T[];\n return children.filter(isSlot(name));\n }\n\n @bound private initSlot(slotName: string|null) {\n const name = slotName || SlotController.anonymous;\n const elements = this.nodes.get(name)?.slot?.assignedElements?.() ?? this.getChildrenForSlot(name);\n const selector = slotName ? `slot[name=\"${slotName}\"]` : 'slot:not([name])';\n const slot = this.host.shadowRoot?.querySelector?.<HTMLSlotElement>(selector) ?? null;\n const hasContent = !!elements.length;\n this.nodes.set(name, { elements, name: slotName ?? '', hasContent, slot });\n this.logger.log(slotName, hasContent);\n }\n\n /**\n * Maps the defined slots into an object that is easier to query\n */\n @bound private init() {\n this.nodes.clear();\n // Loop over the properties provided by the schema\n this.slotNames.forEach(this.initSlot);\n Object.values(this.deprecations).forEach(this.initSlot);\n this.host.requestUpdate();\n }\n}\n"],
|
|
5
|
+
"mappings": "wMAEA,+CACA,qCAgCA,WAA8B,EAAkE,CAC9F,MAAO,GAAO,SAAW,GAAK,MAAO,GAAO,IAAO,UAAY,EAAO,KAAO,IAC/E,CAMA,GAAM,GACJ,AAA8B,GAC5B,AAAC,GACG,IAAM,EAAe,UAAY,CAAC,EAAM,aAAa,MAAM,EAC3D,EAAM,aAAa,MAAM,IAAM,EAEhC,OAAmD,CAexD,YAAmB,KAA0B,EAAyC,CAAnE,YAZX,WAAQ,GAAI,KAIZ,kBAAe,GAEf,QAAK,GAAI,kBAAiB,KAAK,UAAU,EAIzC,kBAAuC,CAAC,EAK9C,GAFA,KAAK,OAAS,GAAI,GAAO,KAAK,IAAI,EAE9B,EAAqB,CAAM,EAAG,CAChC,GAAM,CAAC,CAAE,QAAO,iBAAkB,EAClC,KAAK,UAAY,EACjB,KAAK,aAAe,GAAgB,CAAC,CACvC,KAAO,AAAI,GAAO,QAAU,EAC1B,MAAK,UAAY,EACjB,KAAK,aAAe,CAAC,GAErB,KAAK,UAAY,CAAC,IAAI,EAIxB,EAAK,cAAc,IAAI,CACzB,CAEA,eAAgB,CACd,KAAK,KAAK,iBAAiB,aAAc,KAAK,YAA6B,EAC3E,KAAK,aAAe,GACpB,KAAK,GAAG,QAAQ,KAAK,KAAM,CAAE,UAAW,EAAK,CAAC,EAC9C,KAAK,KAAK,CACZ,CAEA,aAAc,CACZ,AAAK,KAAK,cACR,MAAK,UAAU,QAAQ,KAAK,QAAQ,EACpC,KAAK,aAAe,GAExB,CAEA,kBAAmB,CACjB,KAAK,GAAG,WAAW,CACrB,CAQA,cAAc,EAA0B,CACtC,MAAK,GAAM,OAIF,EAAM,KAAK,GAChB,KAAK,MAAM,IAAI,CAAC,GAAG,YAAc,EAAK,EAJxC,MAAK,OAAO,KAAK,4DAA4D,EACtE,GAKX,CAqBA,cAA2C,EAA0B,CACnE,MAAK,GAAU,OAGN,EAAU,QAAQ,GACvB,KAAK,MAAM,IAAI,CAAQ,GAAG,UAAY,CAAC,CAAC,EAHlC,KAAK,MAAM,IAAI,EAAe,SAAS,GAAG,UAAY,CAAC,CAKnE,CAEe,aAAa,EAA4C,CACtE,GAAM,GAAW,EAAM,OAAO,KAC9B,KAAK,SAAS,CAAQ,EACtB,KAAK,KAAK,cAAc,CAC1B,MAEqB,YAAW,EAA2B,CACzD,GAAM,GAAU,CAAC,EACjB,OAAW,CAAE,aAAY,iBAAkB,GACzC,OAAW,KAAQ,CAAC,GAAG,EAAY,GAAG,CAAY,EAChD,AAAI,YAAgB,cAAe,EAAK,MACtC,MAAK,SAAS,EAAK,IAAI,EACvB,EAAQ,KAAK,EAAK,IAAI,GAI5B,AAAI,EAAQ,QACV,KAAK,KAAK,cAAc,CAE5B,CAEQ,mBAAgD,EAAmD,CAEzG,MAAO,AADU,OAAM,KAAK,KAAK,KAAK,QAAQ,EAC9B,OAAO,EAAO,CAAI,CAAC,CACrC,CAEe,SAAS,EAAuB,CAC7C,GAAM,GAAO,GAAY,EAAe,UAClC,EAAW,KAAK,MAAM,IAAI,CAAI,GAAG,MAAM,mBAAmB,GAAK,KAAK,mBAAmB,CAAI,EAC3F,EAAW,EAAW,cAAc,MAAe,mBACnD,EAAO,KAAK,KAAK,YAAY,gBAAiC,CAAQ,GAAK,KAC3E,EAAa,CAAC,CAAC,EAAS,OAC9B,KAAK,MAAM,IAAI,EAAM,CAAE,WAAU,KAAM,GAAY,GAAI,aAAY,MAAK,CAAC,EACzE,KAAK,OAAO,IAAI,EAAU,CAAU,CACtC,CAKe,MAAO,CACpB,KAAK,MAAM,MAAM,EAEjB,KAAK,UAAU,QAAQ,KAAK,QAAQ,EACpC,OAAO,OAAO,KAAK,YAAY,EAAE,QAAQ,KAAK,QAAQ,EACtD,KAAK,KAAK,cAAc,CAC1B,CACF,EA7IO,IACS,AADT,EACS,UAAY,OAAO,gBAAgB,EA8FlC,GAAf,GAAe,AA/FV,EA+FU,4BAMM,GAArB,GAAqB,AArGhB,EAqGgB,0BAoBN,GAAf,GAAe,AAzHV,EAyHU,wBAaA,GAAf,GAAe,AAtIV,EAsIU",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactiveElement, PropertyDeclaration } from 'lit';
|
|
2
2
|
export declare type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {
|
|
3
|
-
alias: K;
|
|
3
|
+
alias: string & K;
|
|
4
4
|
attribute: string;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
@@ -13,4 +13,4 @@ export declare type DeprecationDeclaration<K extends PropertyKey> = PropertyDecl
|
|
|
13
13
|
* @deprecation('colorPalette') color?: ColorPalette;
|
|
14
14
|
* ```
|
|
15
15
|
*/
|
|
16
|
-
export declare function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>): <T extends ReactiveElement, L extends PropertyKey>(proto: Partial<Record<K | L, T>>, key: keyof T) => void;
|
|
16
|
+
export declare function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>): <T extends ReactiveElement, L extends PropertyKey>(proto: Partial<Record<K | L, T>>, key: string & keyof T) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["deprecation.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveElement, PropertyDeclaration, ReactiveController } from 'lit';\n\nimport { Logger } from '../controllers/logger.js';\n\nexport type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {\n alias: K;\n attribute: string;\n}\n\n/**\n * Aliases the decorated field to an existing property, and logs a warning if it is used\n * @example deprecating an attribute\n * ```ts\n * @property({ reflect: true, attribute: 'color-palette'})\n * colorPalette: ColorPalette = 'base';\n *\n * @deprecation('colorPalette') color?: ColorPalette;\n * ```\n */\nexport function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>) {\n return function<T extends ReactiveElement, L extends PropertyKey>(proto: Partial<Record<K | L, T
|
|
5
|
-
"mappings": "AAEA,kDAiBO,WAA4C,EAAoC,CACrF,MAAO,
|
|
4
|
+
"sourcesContent": ["import type { ReactiveElement, PropertyDeclaration, ReactiveController } from 'lit';\n\nimport { Logger } from '../controllers/logger.js';\n\nexport type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {\n alias: string & K;\n attribute: string;\n}\n\n/**\n * Aliases the decorated field to an existing property, and logs a warning if it is used\n * @example deprecating an attribute\n * ```ts\n * @property({ reflect: true, attribute: 'color-palette'})\n * colorPalette: ColorPalette = 'base';\n *\n * @deprecation('colorPalette') color?: ColorPalette;\n * ```\n */\nexport function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>) {\n return function<T extends ReactiveElement, L extends PropertyKey>(\n proto: Partial<Record<K | L, T>>,\n key: string & keyof T\n ) {\n const { alias, ...deprecationOptions } = options;\n const klass = (proto.constructor as typeof ReactiveElement);\n const declaration = klass.getPropertyOptions(alias);\n klass.createProperty(key, { ...declaration, ...deprecationOptions });\n klass.addInitializer(instance => {\n instance.addController(new Deprecation(instance as T, options, key));\n });\n };\n}\n\nclass Deprecation<T extends ReactiveElement, K extends PropertyKey> implements ReactiveController {\n private logger: Logger;\n\n private logged = false;\n\n constructor(\n private host: T,\n private options: DeprecationDeclaration<K>,\n private deprecatedKey: string & keyof T\n ) {\n this.logger = new Logger(host);\n }\n\n hostUpdate() {\n const { deprecatedKey, options: { alias } } = this;\n if (this.host[deprecatedKey]) {\n if (this.host[alias as keyof T] !== this.host[deprecatedKey]) {\n if (!this.logged) {\n this.logger.warn(`${deprecatedKey} is deprecated, use ${alias} instead`);\n this.logged = true;\n }\n this.host[alias as keyof T] = this.host[deprecatedKey];\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAEA,kDAiBO,WAA4C,EAAoC,CACrF,MAAO,UACL,EACA,EACA,CACA,GAAM,CAAE,WAAU,GAAuB,EACnC,EAAS,EAAM,YACf,EAAc,EAAM,mBAAmB,CAAK,EAClD,EAAM,eAAe,EAAK,IAAK,KAAgB,CAAmB,CAAC,EACnE,EAAM,eAAe,GAAY,CAC/B,EAAS,cAAc,GAAI,GAAY,EAAe,EAAS,CAAG,CAAC,CACrE,CAAC,CACH,CACF,CAEA,WAAkG,CAKhG,YACU,EACA,EACA,EACR,CAHQ,YACA,eACA,qBALF,YAAS,GAOf,KAAK,OAAS,GAAI,GAAO,CAAI,CAC/B,CAEA,YAAa,CACX,GAAM,CAAE,gBAAe,QAAS,CAAE,UAAY,KAC9C,AAAI,KAAK,KAAK,IACR,KAAK,KAAK,KAAsB,KAAK,KAAK,IACvC,MAAK,QACR,MAAK,OAAO,KAAK,GAAG,wBAAoC,WAAe,EACvE,KAAK,OAAS,IAEhB,KAAK,KAAK,GAAoB,KAAK,KAAK,GAG9C,CACF",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/decorators/observed.d.ts
CHANGED
|
@@ -29,5 +29,5 @@ declare type TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void;
|
|
|
29
29
|
export declare function observed<T extends ReactiveElement>(methodName: string): TypedFieldDecorator<T>;
|
|
30
30
|
export declare function observed<T extends ReactiveElement>(cb: ChangeCallback<T>): TypedFieldDecorator<T>;
|
|
31
31
|
export declare function observed<T extends ReactiveElement>(proto: T, key: string): void;
|
|
32
|
-
export declare function observeProperty<T extends ReactiveElement>(proto: T, key: string
|
|
32
|
+
export declare function observeProperty<T extends ReactiveElement>(proto: T, key: string & keyof T, callbackOrMethod?: ChangeCallback<T>): void;
|
|
33
33
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["observed.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveElement } from 'lit';\nimport type {\n ChangeCallback,\n ChangeCallbackName,\n PropertyObserverHost,\n} from '../controllers/property-observer-controller.js';\n\nimport {\n observedController,\n PropertyObserverController,\n} from '../controllers/property-observer-controller.js';\n\ntype TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void ;\n\n/**\n * Calls a _fooChanged method on the instance when the value changes.\n * Works on any class field. When using on lit observed properties,\n * Make sure `@observed` is to the left (i.e. called after) the `@property`\n * or `@state` decorator.\n *\n * @example observing a lit property\n * ```ts\n * @observed @property() foo = 'bar';\n *\n * protected _fooChanged(oldValue?: string, newValue?: string) {}\n * ```\n *\n * @example using a custom callback\n * ```ts\n * @observed('_myCallback') size = 'lg';\n *\n * _myCallback(_, size) {...}\n * ```\n *\n * @example using an arrow function\n * ```ts\n * @observed((oldVal, newVal) => console.log(`Size changed from ${oldVal} to ${newVal}`))\n * ```\n */\nexport function observed<T extends ReactiveElement>(methodName: string): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(cb: ChangeCallback<T>): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(proto: T, key: string): void\nexport function observed<T extends ReactiveElement>(...as: any[]): void|TypedFieldDecorator<T> {\n /** @observed('_myCustomChangeCallback') */\n if (as.length === 1) {\n const [methodNameOrCallback] = as;\n return function(proto, key) {\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key, methodNameOrCallback);\n };\n } else {\n const [proto, key] = as;\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key);\n }\n}\n\nexport function observeProperty<T extends ReactiveElement>(\n proto: T,\n key: string
|
|
5
|
-
"mappings": "AAOA,oHAmCO,cAAgD,EAAwC,CAE7F,GAAI,EAAG,SAAW,EAAG,CACnB,GAAM,CAAC,GAAwB,EAC/B,MAAO,UAAS,EAAO,EAAK,CAC1B,AAAC,EAAM,YACJ,eAAe,GAAK,GAAI,GAA2B,CAAC,CAAC,EACxD,EAAgB,EAAO,
|
|
4
|
+
"sourcesContent": ["import type { ReactiveElement } from 'lit';\nimport type {\n ChangeCallback,\n ChangeCallbackName,\n PropertyObserverHost,\n} from '../controllers/property-observer-controller.js';\n\nimport {\n observedController,\n PropertyObserverController,\n} from '../controllers/property-observer-controller.js';\n\ntype TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void ;\n\n/**\n * Calls a _fooChanged method on the instance when the value changes.\n * Works on any class field. When using on lit observed properties,\n * Make sure `@observed` is to the left (i.e. called after) the `@property`\n * or `@state` decorator.\n *\n * @example observing a lit property\n * ```ts\n * @observed @property() foo = 'bar';\n *\n * protected _fooChanged(oldValue?: string, newValue?: string) {}\n * ```\n *\n * @example using a custom callback\n * ```ts\n * @observed('_myCallback') size = 'lg';\n *\n * _myCallback(_, size) {...}\n * ```\n *\n * @example using an arrow function\n * ```ts\n * @observed((oldVal, newVal) => console.log(`Size changed from ${oldVal} to ${newVal}`))\n * ```\n */\nexport function observed<T extends ReactiveElement>(methodName: string): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(cb: ChangeCallback<T>): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(proto: T, key: string): void\nexport function observed<T extends ReactiveElement>(...as: any[]): void|TypedFieldDecorator<T> {\n /** @observed('_myCustomChangeCallback') */\n if (as.length === 1) {\n const [methodNameOrCallback] = as;\n return function(proto, key) {\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key as string & keyof T, methodNameOrCallback);\n };\n } else {\n const [proto, key] = as;\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key);\n }\n}\n\nexport function observeProperty<T extends ReactiveElement>(\n proto: T,\n key: string & keyof T,\n callbackOrMethod?: ChangeCallback<T>\n) {\n const descriptor = Object.getOwnPropertyDescriptor(proto, key);\n Object.defineProperty(proto, key, {\n ...descriptor,\n configurable: true,\n set(this: PropertyObserverHost<T>, newVal: T[keyof T]) {\n const oldVal = this[key as keyof T];\n // first, call any pre-existing setters, e.g. `@property`\n descriptor?.set?.call(this, newVal);\n\n // if the user passed a callback, call it\n // e.g. `@observed((_, newVal) => console.log(newVal))`\n // safe to call before connectedCallback, because it's impossible to get a `this` ref.\n if (typeof callbackOrMethod === 'function') {\n callbackOrMethod.call(this, oldVal, newVal);\n } else {\n // if the user passed a string method name, call it on `this`\n // e.g. `@observed('_renderOptions')`\n // otherwise, use a default method name e.g. `_fooChanged`\n const actualMethodName = callbackOrMethod || `_${key}Changed`;\n\n // if the component has already connected to the DOM, run the callback\n // otherwise, If the component has not yet connected to the DOM,\n // cache the old and new values. See PropertyObserverController above\n if (this.hasUpdated) {\n this[actualMethodName as ChangeCallbackName]?.(oldVal, newVal);\n } else {\n this[observedController].cache(key as string, actualMethodName, oldVal, newVal);\n }\n }\n },\n });\n}\n"],
|
|
5
|
+
"mappings": "AAOA,oHAmCO,cAAgD,EAAwC,CAE7F,GAAI,EAAG,SAAW,EAAG,CACnB,GAAM,CAAC,GAAwB,EAC/B,MAAO,UAAS,EAAO,EAAK,CAC1B,AAAC,EAAM,YACJ,eAAe,GAAK,GAAI,GAA2B,CAAC,CAAC,EACxD,EAAgB,EAAO,EAAyB,CAAoB,CACtE,CACF,KAAO,CACL,GAAM,CAAC,EAAO,GAAO,EACrB,AAAC,EAAM,YACJ,eAAe,GAAK,GAAI,GAA2B,CAAC,CAAC,EACxD,EAAgB,EAAO,CAAG,CAC5B,CACF,CAEO,WACL,EACA,EACA,EACA,CACA,GAAM,GAAa,OAAO,yBAAyB,EAAO,CAAG,EAC7D,OAAO,eAAe,EAAO,EAAK,IAC7B,EACH,aAAc,GACd,IAAmC,EAAoB,CACrD,GAAM,GAAS,KAAK,GAOpB,GALA,GAAY,KAAK,KAAK,KAAM,CAAM,EAK9B,MAAO,IAAqB,WAC9B,EAAiB,KAAK,KAAM,EAAQ,CAAM,MACrC,CAIL,GAAM,GAAmB,GAAoB,IAAI,WAKjD,AAAI,KAAK,WACP,KAAK,KAA0C,EAAQ,CAAM,EAE7D,KAAK,GAAoB,MAAM,EAAe,EAAkB,EAAQ,CAAM,CAElF,CACF,CACF,CAAC,CACH",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/pfe-core",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "PatternFly Elements Core Library",
|
|
6
6
|
"customElements": "custom-elements.json",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"./controllers/perf-controller.js": "./controllers/perf-controller.js",
|
|
22
22
|
"./controllers/property-observer-controller.js": "./controllers/property-observer-controller.js",
|
|
23
23
|
"./controllers/slot-controller.js": "./controllers/slot-controller.js",
|
|
24
|
+
"./controllers/floating-dom-controller.js": "./controllers/floating-dom-controller.js",
|
|
24
25
|
"./controllers/style-controller.js": "./controllers/style-controller.js",
|
|
25
26
|
"./decorators/bound.js": "./decorators/bound.js",
|
|
26
27
|
"./decorators/cascades.js": "./decorators/cascades.js",
|
|
@@ -59,6 +60,7 @@
|
|
|
59
60
|
"watch:types": "tsc -w"
|
|
60
61
|
},
|
|
61
62
|
"dependencies": {
|
|
63
|
+
"@popperjs/core": "^2.11.5",
|
|
62
64
|
"lit": "^2.1.2"
|
|
63
65
|
},
|
|
64
66
|
"repository": {
|