@patternfly/elements 2.2.2 → 2.3.0

package/pf-icon/BaseIcon.js

@@ -1,5 +1,4 @@
-var _BaseIcon_instances, _a, _BaseIcon_intersecting, _BaseIcon_logger, _BaseIcon_class_get, _BaseIcon_lazyLoad, _BaseIcon_iconChanged;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { state } from 'lit/decorators/state.js';
@@ -28,9 +27,8 @@ class IconLoadError extends ErrorEvent {
 class BaseIcon extends LitElement {
     constructor() {
         super(...arguments);
-        _BaseIcon_instances.add(this);
         /** Icon set */
-        this.set = __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).defaultIconSet;
+        this.set = this.#class.defaultIconSet;
         /** Icon name */
         this.icon = '';
         /**
@@ -40,9 +38,10 @@ class BaseIcon extends LitElement {
          * - `lazy` (default): wait for the element to enter the viewport before loading
          */
         this.loading = 'lazy';
-        _BaseIcon_intersecting.set(this, false);
-        _BaseIcon_logger.set(this, new Logger(this));
+        this.#intersecting = false;
+        this.#logger = new Logger(this);
     }
+    static { this.styles = [style]; }
     static addIconSet(setName, getter) {
         if (typeof getter !== 'function') {
             Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);
@@ -54,18 +53,49 @@ class BaseIcon extends LitElement {
             }
         }
     }
+    static { this.getIconUrl = (set, icon) => new URL(`./icons/${set}/${icon}.js`, import.meta.url); }
+    static { this.onIntersect = records => records.forEach(({ isIntersecting, target }) => {
+        const icon = target;
+        icon.#intersecting = isIntersecting;
+        ric(() => {
+            if (icon.#intersecting) {
+                icon.load();
+            }
+        });
+    }); }
+    static { this.io = new IntersectionObserver(this.onIntersect); }
+    static { this.getters = new Map(); }
+    static { this.instances = new Set(); }
+    #intersecting;
+    #logger;
+    get #class() {
+        return this.constructor;
+    }
+    #lazyLoad() {
+        this.#class.io.observe(this);
+        if (this.#intersecting) {
+            this.load();
+        }
+    }
+    #iconChanged() {
+        switch (this.loading) {
+            case 'idle': return void ric(() => this.load());
+            case 'lazy': return void this.#lazyLoad();
+            case 'eager': return void this.load();
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
-        __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).instances.add(this);
+        this.#class.instances.add(this);
     }
     willUpdate(changed) {
         if (changed.has('icon')) {
-            __classPrivateFieldGet(this, _BaseIcon_instances, "m", _BaseIcon_iconChanged).call(this);
+            this.#iconChanged();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).instances.delete(this);
+        this.#class.instances.delete(this);
     }
     render() {
         const content = this.content ?? ''; /* eslint-disable indent */
@@ -78,7 +108,7 @@ class BaseIcon extends LitElement {
     }
     async load() {
         const { set, icon, } = this;
-        const getter = __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getters.get(set) ?? __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getIconUrl;
+        const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;
         let spec = 'UNKNOWN ICON';
         if (set && icon) {
             try {
@@ -96,40 +126,12 @@ class BaseIcon extends LitElement {
             }
             catch (error) {
                 const event = new IconLoadError(spec, error);
-                __classPrivateFieldGet(this, _BaseIcon_logger, "f").error(error.message);
+                this.#logger.error(error.message);
                 this.dispatchEvent(event);
             }
         }
     }
 }
-_a = BaseIcon, _BaseIcon_intersecting = new WeakMap(), _BaseIcon_logger = new WeakMap(), _BaseIcon_instances = new WeakSet(), _BaseIcon_class_get = function _BaseIcon_class_get() {
-    return this.constructor;
-}, _BaseIcon_lazyLoad = function _BaseIcon_lazyLoad() {
-    __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).io.observe(this);
-    if (__classPrivateFieldGet(this, _BaseIcon_intersecting, "f")) {
-        this.load();
-    }
-}, _BaseIcon_iconChanged = function _BaseIcon_iconChanged() {
-    switch (this.loading) {
-        case 'idle': return void ric(() => this.load());
-        case 'lazy': return void __classPrivateFieldGet(this, _BaseIcon_instances, "m", _BaseIcon_lazyLoad).call(this);
-        case 'eager': return void this.load();
-    }
-};
-BaseIcon.styles = [style];
-BaseIcon.getIconUrl = (set, icon) => new URL(`./icons/${set}/${icon}.js`, import.meta.url);
-BaseIcon.onIntersect = records => records.forEach(({ isIntersecting, target }) => {
-    const icon = target;
-    __classPrivateFieldSet(icon, _BaseIcon_intersecting, isIntersecting, "f");
-    ric(() => {
-        if (__classPrivateFieldGet(icon, _BaseIcon_intersecting, "f")) {
-            icon.load();
-        }
-    });
-});
-BaseIcon.io = new IntersectionObserver(_a.onIntersect);
-BaseIcon.getters = new Map();
-BaseIcon.instances = new Set();
 __decorate([
     property()
 ], BaseIcon.prototype, "set", void 0);

package/pf-icon/BaseIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL | string;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? ''; /* eslint-disable indent */\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n       }<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;/* eslint-enable indent */\n  }\n\n  protected async load() {\n    const { set, icon, } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let spec = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        const gotten = getter(set, icon);\n        if (gotten instanceof URL) {\n          spec = gotten.pathname;\n        } else {\n          spec = gotten;\n        }\n        const mod = await import(spec);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(spec, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL | string;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? ''; /* eslint-disable indent */\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n       }<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;/* eslint-enable indent */\n  }\n\n  protected async load() {\n    const { set, icon, } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let spec = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        const gotten = getter(set, icon);\n        if (gotten instanceof URL) {\n          spec = gotten.pathname;\n        } else {\n          spec = gotten;\n        }\n        const mod = await import(spec);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(spec, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}

package/pf-icon/pf-icon.js

@@ -19,9 +19,9 @@ let PfIcon = class PfIcon extends BaseIcon {
         /** Size of the icon */
         this.size = 'sm';
     }
+    static { this.styles = [...BaseIcon.styles, style]; }
+    static { this.defaultIconSet = 'fas'; }
 };
-PfIcon.styles = [...BaseIcon.styles, style];
-PfIcon.defaultIconSet = 'fas';
 __decorate([
     property({ reflect: true })
 ], PfIcon.prototype, "size", void 0);

package/pf-icon/pf-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAKE,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;IACtE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAE9C,qBAAc,GAAG,KAAK,AAAR,CAAS;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AANzD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB;SAPY,MAAM","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\n\n/**\n * An **icon** component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}
+{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAKE,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;IACtE,CAAC;aANwB,WAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;aAE9C,mBAAc,GAAG,KAAK,AAAR,CAAS;;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AANzD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB;SAPY,MAAM","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\n\n/**\n * An **icon** component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}

package/pf-jump-links/pf-jump-links-item.js

@@ -1,5 +1,4 @@
-var _PfJumpLinksItem_instances, _PfJumpLinksItem_internals, _PfJumpLinksItem_onClick, _PfJumpLinksItem_onFocus;
-import { __classPrivateFieldGet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -19,39 +18,37 @@ import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 let PfJumpLinksItem = class PfJumpLinksItem extends LitElement {
     constructor() {
         super(...arguments);
-        _PfJumpLinksItem_instances.add(this);
         /** Whether this item is active. */
         this.active = false;
-        _PfJumpLinksItem_internals.set(this, new InternalsController(this, {
+        this.#internals = new InternalsController(this, {
             role: 'listitem'
-        }));
+        });
     }
+    static { this.styles = [style]; }
+    static { this.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; }
+    #internals;
     connectedCallback() {
         super.connectedCallback();
         this.activeChanged();
     }
     render() {
         return html `
-      <a href="${ifDefined(this.href)}" @focus="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onFocus)}" @click="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onClick)}">
+      <a href="${ifDefined(this.href)}" @focus="${this.#onFocus}" @click="${this.#onClick}">
         <slot></slot>
       </a>
       <slot name="subsection"></slot>
     `;
     }
     activeChanged() {
-        __classPrivateFieldGet(this, _PfJumpLinksItem_internals, "f").ariaCurrent = this.active ? 'location' : null;
+        this.#internals.ariaCurrent = this.active ? 'location' : null;
+    }
+    #onClick() {
+        this.dispatchEvent(new Event('select', { bubbles: true }));
+    }
+    #onFocus() {
+        this.dispatchEvent(new Event('focus', { bubbles: true }));
     }
 };
-_PfJumpLinksItem_internals = new WeakMap();
-_PfJumpLinksItem_instances = new WeakSet();
-_PfJumpLinksItem_onClick = function _PfJumpLinksItem_onClick() {
-    this.dispatchEvent(new Event('select', { bubbles: true }));
-};
-_PfJumpLinksItem_onFocus = function _PfJumpLinksItem_onFocus() {
-    this.dispatchEvent(new Event('focus', { bubbles: true }));
-};
-PfJumpLinksItem.styles = [style];
-PfJumpLinksItem.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 __decorate([
     observed('activeChanged'),
     property({ type: Boolean, reflect: true })

package/pf-jump-links/pf-jump-links-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links-item.js","sourceRoot":"","sources":["pf-jump-links-item.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAEvE;;;;;;;GAOG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;;QAKE,mCAAmC;QAES,WAAM,GAAG,KAAK,CAAC;QAK3D,qCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,EAAC;IA2BL,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,uBAAA,IAAI,4DAAS,aAAa,uBAAA,IAAI,4DAAS;;;;KAIpF,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,uBAAA,IAAI,kCAAW,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;;;;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC5D,CAAC;AAvCe,sBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEjB,iCAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;AAIlE;IAD3C,QAAQ,CAAC,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAVhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAyC3B;SAzCY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-jump-links-item.css';\n\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\n/**\n * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link\n * @cssprop --pf-c-jump-links__link--PaddingRight\n * @cssprop --pf-c-jump-links__link--PaddingBottom\n * @cssprop --pf-c-jump-links__link--PaddingLeft\n * @cssprop --pf-c-jump-links__link--OutlineOffset\n * @cssprop --pf-c-jump-links__link-text--Color\n */\n@customElement('pf-jump-links-item')\nexport class PfJumpLinksItem extends LitElement {\n  static readonly styles = [style];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  /** Whether this item is active. */\n  @observed('activeChanged')\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** hypertext reference for this link */\n  @property({ reflect: true }) href?: string;\n\n  #internals = new InternalsController(this, {\n    role: 'listitem'\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.activeChanged();\n  }\n\n  render() {\n    return html`\n      <a href=\"${ifDefined(this.href)}\" @focus=\"${this.#onFocus}\" @click=\"${this.#onClick}\">\n        <slot></slot>\n      </a>\n      <slot name=\"subsection\"></slot>\n    `;\n  }\n\n  private activeChanged() {\n    this.#internals.ariaCurrent = this.active ? 'location' : null;\n  }\n\n  #onClick() {\n    this.dispatchEvent(new Event('select', { bubbles: true }));\n  }\n\n  #onFocus() {\n    this.dispatchEvent(new Event('focus', { bubbles: true }));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-item': PfJumpLinksItem;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links-item.js","sourceRoot":"","sources":["pf-jump-links-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAEvE;;;;;;;GAOG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAKE,mCAAmC;QAES,WAAM,GAAG,KAAK,CAAC;QAK3D,eAAU,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC;IA2BL,CAAC;aAxCiB,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;aAEjB,sBAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;IAS9G,UAAU,CAEP;IAEM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,QAAQ;;;;KAIpF,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC5D,CAAC;;AAjC2C;IAD3C,QAAQ,CAAC,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAVhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAyC3B;SAzCY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-jump-links-item.css';\n\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\n/**\n * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link\n * @cssprop --pf-c-jump-links__link--PaddingRight\n * @cssprop --pf-c-jump-links__link--PaddingBottom\n * @cssprop --pf-c-jump-links__link--PaddingLeft\n * @cssprop --pf-c-jump-links__link--OutlineOffset\n * @cssprop --pf-c-jump-links__link-text--Color\n */\n@customElement('pf-jump-links-item')\nexport class PfJumpLinksItem extends LitElement {\n  static readonly styles = [style];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  /** Whether this item is active. */\n  @observed('activeChanged')\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** hypertext reference for this link */\n  @property({ reflect: true }) href?: string;\n\n  #internals = new InternalsController(this, {\n    role: 'listitem'\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.activeChanged();\n  }\n\n  render() {\n    return html`\n      <a href=\"${ifDefined(this.href)}\" @focus=\"${this.#onFocus}\" @click=\"${this.#onClick}\">\n        <slot></slot>\n      </a>\n      <slot name=\"subsection\"></slot>\n    `;\n  }\n\n  private activeChanged() {\n    this.#internals.ariaCurrent = this.active ? 'location' : null;\n  }\n\n  #onClick() {\n    this.dispatchEvent(new Event('select', { bubbles: true }));\n  }\n\n  #onFocus() {\n    this.dispatchEvent(new Event('focus', { bubbles: true }));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-item': PfJumpLinksItem;\n  }\n}\n"]}

package/pf-jump-links/pf-jump-links-list.js

@@ -9,6 +9,7 @@ const style = css `:host{display:block}#container{display:contents;--pf-c-jump-l
  * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft
  */
 let PfJumpLinksList = class PfJumpLinksList extends LitElement {
+    static { this.styles = [style]; }
     render() {
         return html `
       <div id="container" role="listbox">
@@ -17,7 +18,6 @@ let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     `;
     }
 };
-PfJumpLinksList.styles = [style];
 PfJumpLinksList = __decorate([
     customElement('pf-jump-links-list')
 ], PfJumpLinksList);

package/pf-jump-links/pf-jump-links-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links-list.js","sourceRoot":"","sources":["pf-jump-links-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;;GAIG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAG7C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AARe,sBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AADtB,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAU3B;SAVY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-jump-links-list.css';\n\n/**\n * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link\n * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom\n * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft\n */\n@customElement('pf-jump-links-list')\nexport class PfJumpLinksList extends LitElement {\n  static readonly styles = [style];\n\n  render() {\n    return html`\n      <div id=\"container\" role=\"listbox\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-list': PfJumpLinksList;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links-list.js","sourceRoot":"","sources":["pf-jump-links-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;;GAIG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;aAC7B,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;IAEjC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AATU,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAU3B;SAVY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-jump-links-list.css';\n\n/**\n * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link\n * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom\n * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft\n */\n@customElement('pf-jump-links-list')\nexport class PfJumpLinksList extends LitElement {\n  static readonly styles = [style];\n\n  render() {\n    return html`\n      <div id=\"container\" role=\"listbox\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-list': PfJumpLinksList;\n  }\n}\n"]}

package/pf-jump-links/pf-jump-links.js

@@ -1,5 +1,4 @@
-var _PfJumpLinks_instances, _PfJumpLinks_initialized, _PfJumpLinks_rovingTabindexController, _PfJumpLinks_spy, _PfJumpLinks_updateItems, _PfJumpLinks_onSelect, _PfJumpLinks_onToggle;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -60,7 +59,6 @@ const style = css `[hidden]{display:none!important}:host{display:block}#containe
 let PfJumpLinks = class PfJumpLinks extends LitElement {
     constructor() {
         super(...arguments);
-        _PfJumpLinks_instances.add(this);
         /** Whether the element features a disclosure widget around the nav items */
         this.expandable = false;
         /** Whether the expandable element's disclosure widget is expanded */
@@ -71,66 +69,65 @@ let PfJumpLinks = class PfJumpLinks extends LitElement {
         this.centered = false;
         /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */
         this.offset = 0;
-        _PfJumpLinks_initialized.set(this, false);
-        _PfJumpLinks_rovingTabindexController.set(this, new RovingTabindexController(this));
-        _PfJumpLinks_spy.set(this, new ScrollSpyController(this, {
+        this.#initialized = false;
+        this.#rovingTabindexController = new RovingTabindexController(this);
+        this.#spy = new ScrollSpyController(this, {
             rootMargin: `${this.offset}px 0px 0px 0px`,
             tagNames: ['pf-jump-links-item'],
-        }));
+        });
     }
+    static { this.styles = [style]; }
+    #initialized;
+    #rovingTabindexController;
+    #spy;
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('select', __classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onSelect));
+        this.addEventListener('select', this.#onSelect);
     }
     updated(changed) {
         if (changed.has('offset')) {
-            __classPrivateFieldGet(this, _PfJumpLinks_spy, "f").rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;
+            this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;
         }
     }
     render() {
         return html `
       <nav id="container">${this.expandable ? html `
-        <details ?open="${this.expanded}" @toggle="${__classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onToggle)}">
+        <details ?open="${this.expanded}" @toggle="${this.#onToggle}">
           <summary>
             <pf-icon icon="chevron-right"></pf-icon>
             <span id="label">${this.label}</span>
           </summary>
-          <slot role="listbox" @slotchange="${__classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_updateItems)}"></slot>
+          <slot role="listbox" @slotchange="${this.#updateItems}"></slot>
         </details>` : html `
         <span id="label">${this.label}</span>
-        <slot role="listbox" @slotchange="${__classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_updateItems)}"></slot>`}
+        <slot role="listbox" @slotchange="${this.#updateItems}"></slot>`}
       </nav>
     `;
     }
-};
-_PfJumpLinks_initialized = new WeakMap();
-_PfJumpLinks_rovingTabindexController = new WeakMap();
-_PfJumpLinks_spy = new WeakMap();
-_PfJumpLinks_instances = new WeakSet();
-_PfJumpLinks_updateItems = function _PfJumpLinks_updateItems() {
-    const items = Array.from(this.querySelectorAll(':is(pf-jump-links-item, pf-jump-links-list)'))
-        .flatMap(i => [
-        ...i.shadowRoot?.querySelectorAll('a') ?? [],
-        ...i.querySelectorAll('a') ?? [],
-    ]);
-    if (__classPrivateFieldGet(this, _PfJumpLinks_initialized, "f")) {
-        __classPrivateFieldGet(this, _PfJumpLinks_rovingTabindexController, "f").updateItems(items);
+    #updateItems() {
+        const items = Array.from(this.querySelectorAll(':is(pf-jump-links-item, pf-jump-links-list)'))
+            .flatMap(i => [
+            ...i.shadowRoot?.querySelectorAll('a') ?? [],
+            ...i.querySelectorAll('a') ?? [],
+        ]);
+        if (this.#initialized) {
+            this.#rovingTabindexController.updateItems(items);
+        }
+        else {
+            this.#rovingTabindexController.initItems(items);
+            this.#initialized = true;
+        }
     }
-    else {
-        __classPrivateFieldGet(this, _PfJumpLinks_rovingTabindexController, "f").initItems(items);
-        __classPrivateFieldSet(this, _PfJumpLinks_initialized, true, "f");
+    async #onSelect(event) {
+        this.#spy.setActive(event.target);
     }
-};
-_PfJumpLinks_onSelect = async function _PfJumpLinks_onSelect(event) {
-    __classPrivateFieldGet(this, _PfJumpLinks_spy, "f").setActive(event.target);
-};
-_PfJumpLinks_onToggle = function _PfJumpLinks_onToggle(event) {
-    if (event.target instanceof HTMLDetailsElement) {
-        this.expanded = event.target.open;
+    #onToggle(event) {
+        if (event.target instanceof HTMLDetailsElement) {
+            this.expanded = event.target.open;
+        }
+        this.dispatchEvent(new Event('toggle'));
     }
-    this.dispatchEvent(new Event('toggle'));
 };
-PfJumpLinks.styles = [style];
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfJumpLinks.prototype, "expandable", void 0);

package/pf-jump-links/pf-jump-links.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport './pf-jump-links-item.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n *\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n *\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n *\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n *\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n *\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n *\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #initialized = false;\n\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <slot role=\"listbox\" @slotchange=\"${this.#updateItems}\"></slot>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <slot role=\"listbox\" @slotchange=\"${this.#updateItems}\"></slot>`}\n      </nav>\n    `;\n  }\n\n  #updateItems() {\n    const items = Array.from(this.querySelectorAll(':is(pf-jump-links-item, pf-jump-links-list)'))\n      .flatMap(i => [\n        ...i.shadowRoot?.querySelectorAll('a') ?? [],\n        ...i.querySelectorAll('a') ?? [],\n      ]);\n    if (this.#initialized) {\n      this.#rovingTabindexController.updateItems(items);\n    } else {\n      this.#rovingTabindexController.initItems(items);\n      this.#initialized = true;\n    }\n  }\n\n  async #onSelect(event: Event) {\n    this.#spy.setActive(event.target);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport './pf-jump-links-item.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n *\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n *\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n *\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n *\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n *\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n *\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #initialized = false;\n\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <slot role=\"listbox\" @slotchange=\"${this.#updateItems}\"></slot>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <slot role=\"listbox\" @slotchange=\"${this.#updateItems}\"></slot>`}\n      </nav>\n    `;\n  }\n\n  #updateItems() {\n    const items = Array.from(this.querySelectorAll(':is(pf-jump-links-item, pf-jump-links-list)'))\n      .flatMap(i => [\n        ...i.shadowRoot?.querySelectorAll('a') ?? [],\n        ...i.querySelectorAll('a') ?? [],\n      ]);\n    if (this.#initialized) {\n      this.#rovingTabindexController.updateItems(items);\n    } else {\n      this.#rovingTabindexController.initItems(items);\n      this.#initialized = true;\n    }\n  }\n\n  async #onSelect(event: Event) {\n    this.#spy.setActive(event.target);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}

package/pf-label/BaseLabel.js

@@ -12,6 +12,7 @@ class BaseLabel extends LitElement {
         /** Represents the state of the anonymous and icon slots */
         this.slots = new SlotController(this, null, 'icon');
     }
+    static { this.styles = [styles]; }
     render() {
         const { variant, color, icon } = this;
         const hasIcon = !!icon || this.slots.hasSlotted('icon');
@@ -25,6 +26,5 @@ class BaseLabel extends LitElement {
     `;
     }
 }
-BaseLabel.styles = [styles];
 export { BaseLabel };
 //# sourceMappingURL=BaseLabel.js.map

package/pf-label/BaseLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLabel.js","sourceRoot":"","sources":["BaseLabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;EAEE;AACF,MAAsB,SAAU,SAAQ,UAAU;IAAlD;;QASE,2DAA2D;QACjD,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAgC3D,CAAC;IA9BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACxD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;wCACrD,IAAI,CAAC,iBAAiB,EAAE,EAAE;;UAExD,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE;;KAEhC,CAAC;IACJ,CAAC;;AAtBe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;SADd,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './BaseLabel.css';\n\n/**\n * Base label class\n*/\nexport abstract class BaseLabel extends LitElement {\n  static readonly styles = [styles];\n\n  abstract variant?: string;\n\n  abstract color?: string;\n\n  abstract icon?: string;\n\n  /** Represents the state of the anonymous and icon slots */\n  protected slots = new SlotController(this, null, 'icon');\n\n  override render() {\n    const { variant, color, icon } = this;\n    const hasIcon = !!icon || this.slots.hasSlotted('icon');\n    return html`\n      <span id=\"container\"\n            class=${classMap({ hasIcon, [variant ?? '']: !!variant, [color ?? '']: !!color })}>\n        <slot name=\"icon\" part=\"icon\">${this.renderDefaultIcon?.()}</slot>\n        <slot id=\"text\"></slot>\n        ${this.renderSuffix?.() ?? ''}\n      </span>\n    `;\n  }\n\n  /**\n   * Fallback content for the icon slot. When the `icon` attribute is set, it\n   * should render an icon corresponding to the value.\n   *\n   * @example ```html\n   * <pf-icon icon=${this.icon}></pf-icon>\n   * ```\n   */\n  protected abstract renderDefaultIcon?(): unknown;\n\n  /**\n   * Optional override to render content after the anonymous slot.\n   * @example ```html\n   * <button id=\"close-button\">X</button>\n   * ```\n   */\n  protected abstract renderSuffix?(): unknown;\n}\n"]}
+{"version":3,"file":"BaseLabel.js","sourceRoot":"","sources":["BaseLabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;EAEE;AACF,MAAsB,SAAU,SAAQ,UAAU;IAAlD;;QASE,2DAA2D;QACjD,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAgC3D,CAAC;aAzCiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAWzB,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACxD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;wCACrD,IAAI,CAAC,iBAAiB,EAAE,EAAE;;UAExD,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE;;KAEhC,CAAC;IACJ,CAAC;;SAvBmB,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './BaseLabel.css';\n\n/**\n * Base label class\n*/\nexport abstract class BaseLabel extends LitElement {\n  static readonly styles = [styles];\n\n  abstract variant?: string;\n\n  abstract color?: string;\n\n  abstract icon?: string;\n\n  /** Represents the state of the anonymous and icon slots */\n  protected slots = new SlotController(this, null, 'icon');\n\n  override render() {\n    const { variant, color, icon } = this;\n    const hasIcon = !!icon || this.slots.hasSlotted('icon');\n    return html`\n      <span id=\"container\"\n            class=${classMap({ hasIcon, [variant ?? '']: !!variant, [color ?? '']: !!color })}>\n        <slot name=\"icon\" part=\"icon\">${this.renderDefaultIcon?.()}</slot>\n        <slot id=\"text\"></slot>\n        ${this.renderSuffix?.() ?? ''}\n      </span>\n    `;\n  }\n\n  /**\n   * Fallback content for the icon slot. When the `icon` attribute is set, it\n   * should render an icon corresponding to the value.\n   *\n   * @example ```html\n   * <pf-icon icon=${this.icon}></pf-icon>\n   * ```\n   */\n  protected abstract renderDefaultIcon?(): unknown;\n\n  /**\n   * Optional override to render content after the anonymous slot.\n   * @example ```html\n   * <button id=\"close-button\">X</button>\n   * ```\n   */\n  protected abstract renderSuffix?(): unknown;\n}\n"]}

package/pf-label/pf-label.js

@@ -112,6 +112,8 @@ let PfLabel = class PfLabel extends BaseLabel {
         /** Flag indicating the label is removable */
         this.removable = false;
     }
+    static { this.styles = [...BaseLabel.styles, styles]; }
+    static { this.shadowRootOptions = { ...BaseLabel.shadowRootOptions, delegatesFocus: true }; }
     render() {
         const { compact, truncated } = this;
         return html `
@@ -137,8 +139,6 @@ let PfLabel = class PfLabel extends BaseLabel {
     `;
     }
 };
-PfLabel.styles = [...BaseLabel.styles, styles];
-PfLabel.shadowRootOptions = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property()
 ], PfLabel.prototype, "variant", void 0);

package/pf-label/pf-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AAEH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,SAAS;IAAtC;;QAKE;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;IA1BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AAxDe,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;AAEvC,yBAAiB,GAAmB,EAAE,GAAG,SAAS,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA3E,CAA4E;AAOjG;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA9B9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n)\n\n/**\n * The **label** component allows users to add specific element captions for user\n * clarity and convenience.\n *\n * @summary Allows users to display meta data in a stylized form.\n *\n * @fires close - when a removable label's close button is clicked\n *\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n *\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n *\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n *\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n *\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n *\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n *\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n *\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n *\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n *\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n *\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n *\n * @slot\n *       Must contain the text for the label.\n *\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}
+{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AAEH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,SAAS;IAAtC;;QAKE;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;aAzDiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;aAEvC,sBAAiB,GAAmB,EAAE,GAAG,SAAS,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA3E,CAA4E;IA6BpG,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AA/CW;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA9B9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n)\n\n/**\n * The **label** component allows users to add specific element captions for user\n * clarity and convenience.\n *\n * @summary Allows users to display meta data in a stylized form.\n *\n * @fires close - when a removable label's close button is clicked\n *\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n *\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n *\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n *\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n *\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n *\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n *\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n *\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n *\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n *\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n *\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n *\n * @slot\n *       Must contain the text for the label.\n *\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}