@patternfly/elements 2.3.1 → 2.4.0

package/pf-progress/pf-progress.d.ts

@@ -0,0 +1,111 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+/**
+ * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
+ *
+ * @summary Display completion status of ongoing process or task.
+ *
+ * @cssprop {<length>} --pf-c-progress--GridGap
+ *          Gap between the sections of the progress bar.
+ *          {@default `1rem`}
+ *
+ * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
+ *          Color of the progress bar.
+ *          {@default `#06c`}
+ *
+ * @cssprop {<length>} --pf-c-progress__bar--Height
+ *          Height of the progress bar.
+ *          {@default `1rem`}
+ *
+ * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
+ *          Background color of the progress bar.
+ *          {@default `#ffffff`}
+ *
+ * @cssprop {<color>} --pf-c-progress__status-icon--Color
+ *          Color of the status icon.
+ *          {@default `#151515`}
+ *
+ * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
+ *          Margin left of the status icon.
+ *          {@default `0.5rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress__indicator--Height
+ *          Height of the progress bar indicator.
+ *          {@default `1rem`}
+ *
+ * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
+ *          Background color of the progress bar indicator.
+ *          {@default `#ffffff`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
+ *          Background color of the progress bar when variant is success.
+ *          {@default `#3e8635`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
+ *          Background color of the progress bar when variant is warning.
+ *          {@default `#f0ab00`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
+ *          Background color of the progress bar when variant is danger.
+ *          {@default `#c9190b`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
+ *          Color of the status icon when variant is success.
+ *          {@default `#3e8635`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
+ *          Color of the status icon when variant is warning.
+ *          {@default `#f0ab00`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
+ *          Color of the status icon when variant is danger.
+ *          {@default `#c9190b`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
+ *          Color of the progress bar measure when variant is success and measure location is inside.
+ *          {@default `#ffffff`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize
+ *          Font size of the progress bar measure when measure location is outside.
+ *          {@default `0.875rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
+ *          Height of the progress bar when the size is small.
+ *          {@default `0.5rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
+ *          Font size of the progress bar description when the size is small.
+ *          {@default `0.875rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
+ *          Height of the progress bar when the size is large.
+ *          {@default `1.5rem`}
+ *
+ */
+export declare class PfProgress extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    /** Represents the value of the progress bar */
+    value: number;
+    /** Description (title) above the progress bar */
+    description?: string;
+    /** Indicate whether to truncate the string description (title) */
+    descriptionTruncated: boolean;
+    /** Maximum value for the progress bar */
+    max: number;
+    /** Minimum value for the progress bar */
+    min: number;
+    /** Size of the progress bar (height) */
+    size?: 'sm' | 'lg';
+    /** Where the percentage will be displayed with the progress element */
+    measureLocation?: 'outside' | 'inside' | 'none';
+    /** Variant of the progress bar */
+    variant?: 'success' | 'danger' | 'warning';
+    willUpdate(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-progress': PfProgress;
+    }
+}

package/pf-progress/pf-progress.js

@@ -0,0 +1,218 @@
+var _PfProgress_instances, _PfProgress_internals, _PfProgress_calculatedPercentage_get, _PfProgress_icon_get;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { css } from "lit";
+const styles = css `*{box-sizing:border-box}#container{--_pf-c-progress__bar--before--BackgroundColorWithOpacity:#0066cc33;--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity:#3e863533;--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity:#f0ab0033;--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity:#c9190b33;--pf-c-progress--GridGap:var(--pf-global--spacer--md, 1rem);--pf-c-progress__bar--before--BackgroundColor:var(--pf-global--primary-color--100, #0066cc);--pf-c-progress__bar--Height:var(--pf-global--spacer--md, 1rem);--pf-c-progress__bar--BackgroundColor:var(--pf-global--BackgroundColor--light-100, #ffffff);--pf-c-progress__status-icon--Color:var(--pf-global--Color--100, #151515);--pf-c-progress__status-icon--MarginLeft:var(--pf-global--spacer--sm, 0.5rem);--pf-c-progress__indicator--Height:var(--pf-c-progress__bar--Height);--pf-c-progress__indicator--BackgroundColor:var(--pf-c-progress__bar--before--BackgroundColor);--pf-c-progress--m-success__bar--BackgroundColor:var(--pf-global--success-color--100, #3e8635);--pf-c-progress--m-warning__bar--BackgroundColor:var(--pf-global--warning-color--100, #f0ab00);--pf-c-progress--m-danger__bar--BackgroundColor:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress--m-success__status-icon--Color:var(--pf-global--success-color--100, #3e8635);--pf-c-progress--m-warning__status-icon--Color:var(--pf-global--warning-color--100, #f0ab00);--pf-c-progress--m-danger__status-icon--Color:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress--m-success--m-inside__measure--Color:var(--pf-global--Color--light-100, #ffffff);--pf-c-progress--m-outside__measure--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress--m-sm__bar--Height:var(--pf-global--spacer--sm, 0.5rem);--pf-c-progress--m-sm__description--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress--m-lg__bar--Height:var(--pf-global--spacer--lg, 1.5rem);display:grid;align-items:end;grid-gap:var(--pf-c-progress--GridGap);grid-template-columns:1fr auto;grid-template-rows:1fr auto;width:100%}.sm{--pf-c-progress__bar--Height:var(--pf-c-progress--m-sm__bar--Height);--pf-c-progress__indicator--Height:var(--pf-c-progress--m-sm__bar--Height)}.sm #description{font-size:var(--pf-c-progress--m-sm__description--FontSize)}.lg{--pf-c-progress__bar--Height:var(--pf-c-progress--m-lg__bar--Height);--pf-c-progress__indicator--Height:var(--pf-c-progress--m-lg__bar--Height)}.outside #description{grid-column:1/3}.outside #status{grid-column:2/3;grid-row:2/3;align-self:center}.outside progress,.outside span{display:inline-block;font-size:var(--pf-c-progress--m-outside__measure--FontSize);grid-column:1/2}.singleline{grid-template-rows:1fr}.singleline #description{display:none;visibility:hidden}.singleline progress,.singleline span{grid-row:1/2;grid-column:1/2}.singleline #status{grid-row:1/2;grid-column:2/3}.outside,.singleline{grid-template-columns:1fr fit-content(50%)}#container.success{--pf-c-progress__bar--before--BackgroundColor:var(--pf-c-progress--m-success__bar--BackgroundColor);--_pf-c-progress__bar--before--BackgroundColorWithOpacity:var(--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity);--pf-c-progress__status-icon--Color:var(--pf-c-progress--m-success__status-icon--Color)}#container.warning{--pf-c-progress__bar--before--BackgroundColor:var(--pf-c-progress--m-warning__bar--BackgroundColor);--_pf-c-progress__bar--before--BackgroundColorWithOpacity:var(--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity);--pf-c-progress__status-icon--Color:var(--pf-c-progress--m-warning__status-icon--Color)}#container.danger{--pf-c-progress__bar--before--BackgroundColor:var(--pf-c-progress--m-danger__bar--BackgroundColor);--_pf-c-progress__bar--before--BackgroundColorWithOpacity:var(--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity);--pf-c-progress__status-icon--Color:var(--pf-c-progress--m-danger__status-icon--Color)}#description{word-break:break-word;grid-column:1/2}.descriptionTruncated #description{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}#status{grid-column:2/3;grid-row:1/2;text-align:right;word-break:break-word;display:flex;align-items:center;justify-content:end}pf-icon{margin-left:var(--pf-c-progress__status-icon--MarginLeft);color:var(--pf-c-progress__status-icon--Color)}progress{position:relative;grid-column:1/3;grid-row:2/3;align-self:center;height:var(--pf-c-progress__bar--Height);background-color:var(--pf-c-progress__bar--BackgroundColor)}.indicator{position:absolute;top:0;left:0;height:var(--pf-c-progress__indicator--Height);background-color:var(--pf-c-progress__indicator--BackgroundColor)}.indicator{width:100%;height:var(--pf-c-progress__bar--Height);display:block}span{grid-column:1/3;grid-row:2/3;text-align:center;color:var(--pf-c-progress--m-success--m-inside__measure--Color)}span::after{content:attr(data-value);position:relative;height:100%}progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);width:100%;height:var(--pf-c-progress__bar--Height)}progress:not([value]){-webkit-appearance:none;-moz-appearance:none;appearance:none}progress[value]::-webkit-progress-bar{background:var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity)}progress[value]::-moz-progress-bar{background:var(--pf-c-progress__bar--before--BackgroundColor)}progress[value]::-webkit-progress-value{background-size:100% 100%;background-image:linear-gradient(90deg,var(--pf-c-progress__bar--before--BackgroundColor) 100%,var(--pf-c-progress__bar--before--BackgroundColor) 100%)}pf-tooltip{height:.01px}`;
+const ICONS = new Map(Object.entries({
+    success: { icon: 'circle-check' },
+    danger: { icon: 'circle-xmark' },
+    warning: { icon: 'triangle-exclamation' }
+}));
+/**
+ * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
+ *
+ * @summary Display completion status of ongoing process or task.
+ *
+ * @cssprop {<length>} --pf-c-progress--GridGap
+ *          Gap between the sections of the progress bar.
+ *          {@default `1rem`}
+ *
+ * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
+ *          Color of the progress bar.
+ *          {@default `#06c`}
+ *
+ * @cssprop {<length>} --pf-c-progress__bar--Height
+ *          Height of the progress bar.
+ *          {@default `1rem`}
+ *
+ * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
+ *          Background color of the progress bar.
+ *          {@default `#ffffff`}
+ *
+ * @cssprop {<color>} --pf-c-progress__status-icon--Color
+ *          Color of the status icon.
+ *          {@default `#151515`}
+ *
+ * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
+ *          Margin left of the status icon.
+ *          {@default `0.5rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress__indicator--Height
+ *          Height of the progress bar indicator.
+ *          {@default `1rem`}
+ *
+ * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
+ *          Background color of the progress bar indicator.
+ *          {@default `#ffffff`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
+ *          Background color of the progress bar when variant is success.
+ *          {@default `#3e8635`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
+ *          Background color of the progress bar when variant is warning.
+ *          {@default `#f0ab00`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
+ *          Background color of the progress bar when variant is danger.
+ *          {@default `#c9190b`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
+ *          Color of the status icon when variant is success.
+ *          {@default `#3e8635`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
+ *          Color of the status icon when variant is warning.
+ *          {@default `#f0ab00`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
+ *          Color of the status icon when variant is danger.
+ *          {@default `#c9190b`}
+ *
+ * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
+ *          Color of the progress bar measure when variant is success and measure location is inside.
+ *          {@default `#ffffff`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize
+ *          Font size of the progress bar measure when measure location is outside.
+ *          {@default `0.875rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
+ *          Height of the progress bar when the size is small.
+ *          {@default `0.5rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
+ *          Font size of the progress bar description when the size is small.
+ *          {@default `0.875rem`}
+ *
+ * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
+ *          Height of the progress bar when the size is large.
+ *          {@default `1.5rem`}
+ *
+ */
+let PfProgress = class PfProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfProgress_instances.add(this);
+        _PfProgress_internals.set(this, this.attachInternals());
+        /** Represents the value of the progress bar */
+        this.value = 0;
+        /** Indicate whether to truncate the string description (title) */
+        this.descriptionTruncated = false;
+        /** Maximum value for the progress bar */
+        this.max = 100;
+        /** Minimum value for the progress bar */
+        this.min = 0;
+    }
+    willUpdate(changed) {
+        if (changed.has('value') || changed.has('min') || changed.has('max')) {
+            __classPrivateFieldGet(this, _PfProgress_internals, "f").ariaValueNow = __classPrivateFieldGet(this, _PfProgress_instances, "a", _PfProgress_calculatedPercentage_get).toString();
+        }
+        if (__classPrivateFieldGet(this, _PfProgress_instances, "a", _PfProgress_icon_get)) {
+            import('@patternfly/elements/pf-icon/pf-icon.js');
+        }
+        if (this.descriptionTruncated) {
+            import('@patternfly/elements/pf-tooltip/pf-tooltip.js');
+        }
+    }
+    render() {
+        const { size, measureLocation, variant, description, descriptionTruncated } = this;
+        const icon = __classPrivateFieldGet(this, _PfProgress_instances, "a", _PfProgress_icon_get);
+        const singleLine = description?.length === 0;
+        const pct = __classPrivateFieldGet(this, _PfProgress_instances, "a", _PfProgress_calculatedPercentage_get);
+        const width = `${pct}%`;
+        return html `
+      <div id="container" class="${classMap({
+            [size ?? '']: !!size,
+            [measureLocation ?? '']: !!measureLocation,
+            [variant ?? '']: !!variant,
+            singleLine,
+            descriptionTruncated,
+        })}">
+
+        <div id="description" aria-hidden="true">${description ?? ''}</div>
+
+        ${!descriptionTruncated ? '' : html `
+        <pf-tooltip content="${this.description ?? ''}"
+                    trigger="description"></pf-tooltip>
+        `}
+
+        ${measureLocation === 'none' ? '' : html `
+        <div id="status" aria-hidden="true">
+          ${measureLocation !== 'inside' ? '' : width}
+          <pf-icon set="fas"
+                   icon="${ifDefined(icon)}"
+                   size="md"
+                   ?hidden="${!icon}"
+          ></pf-icon>
+        </div>
+        `}
+
+          <progress id="progress"
+                    max="100"
+                    value="${pct}"
+                    aria-valuemin="0"
+                    aria-valuenow="${pct}"
+                    aria-valuemax="100"
+          ></progress>
+
+          ${measureLocation !== 'inside' ? '' : html `
+          <span id="progress-span"
+                style="${styleMap({ width })}"
+                data-value="${width}"></span>
+          `}
+      </div>`;
+    }
+};
+_PfProgress_internals = new WeakMap();
+_PfProgress_instances = new WeakSet();
+_PfProgress_calculatedPercentage_get = function _PfProgress_calculatedPercentage_get() {
+    const { value, min, max } = this;
+    const percentage = Math.round((value - min) / (max - min) * 100);
+    if (Number.isNaN(percentage) || percentage < 0) {
+        return 0;
+    }
+    return Math.min(percentage, 100);
+};
+_PfProgress_icon_get = function _PfProgress_icon_get() {
+    return ICONS.get(this.variant ?? '')?.icon;
+};
+PfProgress.styles = [styles];
+__decorate([
+    property({ reflect: true, type: Number })
+], PfProgress.prototype, "value", void 0);
+__decorate([
+    property()
+], PfProgress.prototype, "description", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'description-truncated',
+    })
+], PfProgress.prototype, "descriptionTruncated", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], PfProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], PfProgress.prototype, "min", void 0);
+__decorate([
+    property()
+], PfProgress.prototype, "size", void 0);
+__decorate([
+    property({ attribute: 'measure-location' })
+], PfProgress.prototype, "measureLocation", void 0);
+__decorate([
+    property()
+], PfProgress.prototype, "variant", void 0);
+PfProgress = __decorate([
+    customElement('pf-progress')
+], PfProgress);
+export { PfProgress };
+//# sourceMappingURL=pf-progress.js.map

package/pf-progress/pf-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' }\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n *\n * @summary Display completion status of ongoing process or task.\n *\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n *\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n *\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n *\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}

package/pf-progress-stepper/pf-progress-step.js

@@ -1,5 +1,6 @@
+var _PfProgressStep_slots, _PfProgressStep_internals;
 var PfProgressStep_1;
-import { __decorate } from "tslib";
+import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -29,17 +30,13 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
         super(...arguments);
         /** Indicates if this item is the current active item. */
         this.current = false;
-        this.#slots = new SlotController(this, 'title', 'description');
-        this.#internals = new InternalsController(this, {
+        _PfProgressStep_slots.set(this, new SlotController(this, 'title', 'description'));
+        _PfProgressStep_internals.set(this, new InternalsController(this, {
             role: 'listitem',
-        });
+        }));
     }
-    static { this.parentTagName = 'pf-progress-stepper'; }
-    static { this.styles = [style]; }
-    #slots;
-    #internals;
     render() {
-        const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');
+        const hasDescription = !!this.description ?? __classPrivateFieldGet(this, _PfProgressStep_slots, "f").hasSlotted('description');
         const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;
         const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;
         const { parentTagName } = this.constructor;
@@ -61,10 +58,14 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
     updated(changed) {
         super.updated?.(changed);
         if (changed.has('current')) {
-            this.#internals.ariaCurrent = String(!!this.current);
+            __classPrivateFieldGet(this, _PfProgressStep_internals, "f").ariaCurrent = String(!!this.current);
         }
     }
 };
+_PfProgressStep_slots = new WeakMap();
+_PfProgressStep_internals = new WeakMap();
+PfProgressStep.parentTagName = 'pf-progress-stepper';
+PfProgressStep.styles = [style];
 __decorate([
     property()
 ], PfProgressStep.prototype, "description", void 0);

package/pf-progress-stepper/pf-progress-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}

package/pf-progress-stepper/pf-progress-stepper.js

@@ -1,5 +1,6 @@
+var _PfProgressStepper_instances, _PfProgressStepper_internals, _PfProgressStepper_mo, _PfProgressStepper_onMutation;
 var PfProgressStepper_1;
-import { __decorate } from "tslib";
+import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -13,11 +14,6 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
  */
 let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends LitElement {
-    static { this.childTagName = 'pf-progress-step'; }
-    static { this.styles = [style]; }
-    static { this.formAssociated = true; }
-    #internals;
-    #mo;
     get value() {
         const { childTagName } = this.constructor;
         const steps = this.querySelectorAll(childTagName);
@@ -27,21 +23,19 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
     }
     constructor() {
         super();
+        _PfProgressStepper_instances.add(this);
         /** Whether to use the vertical layout */
         this.vertical = false;
         /** Whether to use the center alignment */
         this.center = false;
         /** Whether to use the compact layout */
         this.compact = false;
-        this.#internals = new InternalsController(this, {
+        _PfProgressStepper_internals.set(this, new InternalsController(this, {
             role: 'progressbar',
             ariaValueNow: this.value.toString(),
-        });
-        this.#mo = new MutationObserver(() => this.#onMutation());
-        this.#mo.observe(this, { childList: true });
-    }
-    #onMutation() {
-        this.#internals.ariaValueNow = this.value.toString();
+        }));
+        _PfProgressStepper_mo.set(this, new MutationObserver(() => __classPrivateFieldGet(this, _PfProgressStepper_instances, "m", _PfProgressStepper_onMutation).call(this)));
+        __classPrivateFieldGet(this, _PfProgressStepper_mo, "f").observe(this, { childList: true });
     }
     render() {
         return html `
@@ -49,6 +43,15 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
     `;
     }
 };
+_PfProgressStepper_internals = new WeakMap();
+_PfProgressStepper_mo = new WeakMap();
+_PfProgressStepper_instances = new WeakSet();
+_PfProgressStepper_onMutation = function _PfProgressStepper_onMutation() {
+    __classPrivateFieldGet(this, _PfProgressStepper_internals, "f").ariaValueNow = this.value.toString();
+};
+PfProgressStepper.childTagName = 'pf-progress-step';
+PfProgressStepper.styles = [style];
+PfProgressStepper.formAssociated = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "vertical", void 0);

package/pf-progress-stepper/pf-progress-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEH,IAAa,iBAAiB,yBAA9B,MAAa,iBAAkB,SAAQ,UAAU;aAC9B,iBAAY,GAAG,kBAAkB,AAArB,CAAsB;aAEnC,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;aAE1B,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAe7B,UAAU,CAGP;IAEH,GAAG,CAAkD;IAErD,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,eAAU,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,CAAC;QAEH,QAAG,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAYnD,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAxC2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEH,IAAa,iBAAiB,yBAA9B,MAAa,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAE1B,gCAAc,GAAG,IAAI,AAAP,CAAQ;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}

package/pf-spinner/BaseSpinner.js

@@ -27,7 +27,6 @@ class BaseSpinner extends LitElement {
         /** Preset sizes for the spinner */
         this.size = 'xl';
     }
-    static { this.styles = [styles]; }
     render() {
         return html `
       <svg role="progressbar" viewBox="0 0 100 100">
@@ -36,6 +35,7 @@ class BaseSpinner extends LitElement {
     `;
     }
 }
+BaseSpinner.styles = [styles];
 __decorate([
     property({ reflect: true })
 ], BaseSpinner.prototype, "size", void 0);

package/pf-spinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAsB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;aAfiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAQzB,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAX4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkE;SAP1E,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAsB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkE;SAP1E,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}

package/pf-spinner/pf-spinner.js

@@ -25,11 +25,11 @@ const styles = css `[hidden]{display:none!important}div{display:contents}svg{wid
  * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}
  */
 let PfSpinner = class PfSpinner extends BaseSpinner {
-    static { this.styles = [...BaseSpinner.styles, styles]; }
     render() {
         return html `<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
     }
 };
+PfSpinner.styles = [...BaseSpinner.styles, styles];
 PfSpinner = __decorate([
     customElement('pf-spinner')
 ], PfSpinner);

package/pf-spinner/pf-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.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,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;;;;GAkBG;AAGH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;aACxB,WAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IACzD,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAJU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}
+{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.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,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;;;;GAkBG;AAGH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}