@patternfly/elements 4.0.2 → 4.2.0

package/pf-progress/pf-progress.js

@@ -7,7 +7,236 @@ 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 `* {\n  box-sizing: border-box;\n}\n\n#container {\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: #0066cc33; /* WARNING: not a recognized token value */\n  --_pf-c-progress--m-success__bar--BackgroundColorWithOpacity: #3e863533;  /* WARNING: not a recognized token value */\n  --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */\n  --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */\n\n  --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);\n  --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);\n  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);\n  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);\n  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);\n  --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);\n  --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);\n  --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);\n  --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);\n  --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);\n  --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem);\n  display: grid;\n  align-items: end;\n  grid-gap: var(--pf-c-progress--GridGap);\n  grid-template-columns: 1fr auto;\n  grid-template-rows: 1fr auto;\n  width: 100%;\n}\n\n.sm {\n  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);\n  --pf-c-progress__indicator--Height: var(--pf-c-progress--m-sm__bar--Height);\n}\n\n.sm #description {\n  font-size: var(--pf-c-progress--m-sm__description--FontSize);\n}\n\n.lg {\n  --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);\n  --pf-c-progress__indicator--Height: var(--pf-c-progress--m-lg__bar--Height);\n}\n\n.outside #description {\n  grid-column: 1/3;\n}\n\n.outside #status {\n  grid-column: 2/3;\n  grid-row: 2/3;\n  align-self: center;\n}\n\n.outside progress,\n.outside span {\n  display: inline-block;\n  font-size: var(--pf-c-progress--m-outside__measure--FontSize);\n  grid-column: 1/2;\n}\n\n.singleline {\n  grid-template-rows: 1fr;\n}\n\n.singleline #description {\n  display: none;\n  visibility: hidden;\n}\n\n.singleline progress,\n.singleline span {\n  grid-row: 1/2;\n  grid-column: 1/2;\n}\n\n.singleline #status {\n  grid-row: 1/2;\n  grid-column: 2/3;\n}\n\n.outside, .singleline {\n  grid-template-columns: 1fr fit-content(50%);\n}\n\n#container.success {\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity);\n  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);\n}\n\n#container.warning {\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity);\n  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);\n}\n\n#container.danger {\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity);\n  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);\n}\n\n#description {\n  word-break: break-word;\n  grid-column: 1/2;\n}\n\n.descriptionTruncated #description {\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#status {\n  grid-column: 2/3;\n  grid-row: 1/2;\n  text-align: right;\n  word-break: break-word;\n  display: flex;\n  align-items: center;\n  justify-content: end;\n}\n\npf-icon {\n  margin-left: var(--pf-c-progress__status-icon--MarginLeft);\n  color: var(--pf-c-progress__status-icon--Color);\n}\n\nprogress {\n  position: relative;\n  grid-column: 1/3;\n  grid-row: 2/3;\n  align-self: center;\n  height: var(--pf-c-progress__bar--Height);\n  background-color: var(--pf-c-progress__bar--BackgroundColor);\n}\n\n.indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: var(--pf-c-progress__indicator--Height);\n  background-color: var(--pf-c-progress__indicator--BackgroundColor);\n}\n\n.indicator {\n  width: 100%;\n  height: var(--pf-c-progress__bar--Height);\n\n  display: block;\n}\n\nspan {\n  grid-column: 1/3;\n  grid-row: 2/3;\n  text-align: center;\n  color: var(--pf-c-progress--m-success--m-inside__measure--Color);\n}\n\nspan::after {\n  content: attr(data-value);\n  position: relative;\n  height: 100%;\n}\n\nprogress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);\n\n  width: 100%;\n  height: var(--pf-c-progress__bar--Height);\n}\n\nprogress:not([value]) {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\nprogress[value]::-webkit-progress-bar {\n  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);\n}\n\nprogress[value]::-moz-progress-bar {\n  background: var(--pf-c-progress__bar--before--BackgroundColor);\n}\n\nprogress[value]::-webkit-progress-value {\n  background-size: 100% 100%;\n  background-image: linear-gradient(\n    90deg,\n    var(--pf-c-progress__bar--before--BackgroundColor) 100%,\n    var(--pf-c-progress__bar--before--BackgroundColor) 100%\n  );\n}\n\npf-tooltip {\n  height: 0.01px;\n}\n`;
+const styles = css `* {
+  box-sizing: border-box;
+}
+
+#container {
+  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: #0066cc33; /* WARNING: not a recognized token value */
+  --_pf-c-progress--m-success__bar--BackgroundColorWithOpacity: #3e863533;  /* WARNING: not a recognized token value */
+  --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */
+  --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */
+
+  /** Gap between sections of progress bar */
+  --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);
+  /** Color of progress bar */
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);
+  /** Height of progress bar */
+  --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);
+  /** Background color of progress bar */
+  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);
+  /** Color of status icon */
+  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);
+  /** Margin left of status icon */
+  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** Height of progress bar indicator */
+  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
+  /** Background color of progress bar indicator */
+  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  /** Background color of progress bar when variant is success */
+  --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  /** Background color of progress bar when variant is warning */
+  --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Background color of progress bar when variant is danger */
+  --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Color of status icon when variant is success */
+  --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+  /** Color of status icon when variant is warning */
+  --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+  /** Color of status icon when variant is danger */
+  --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  /** Color of progress bar measure when variant is success and measure location is inside */
+  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);
+  /** Font size of progress bar measure when measure location is outside */
+  --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Height of progress bar when size is small */
+  --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);
+  /** Font size of progress bar description when size is small */
+  --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Height of progress bar when size is large */
+  --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: 0.01px;
+}
+`;
 const ICONS = new Map(Object.entries({
     success: { icon: 'circle-check' },
     danger: { icon: 'circle-xmark' },
@@ -101,7 +330,7 @@ _PfProgress_icon_get = function _PfProgress_icon_get() {
     return ICONS.get(this.variant ?? '')?.icon;
 };
 PfProgress.styles = [styles];
-PfProgress.version = "4.0.2";
+PfProgress.version = "4.2.0";
 __decorate([
     property({ reflect: true, type: Number })
 ], PfProgress.prototype, "value", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues, TemplateResult } 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 * @summary Display completion status of ongoing process or task.\n * @cssprop {<length>} [--pf-c-progress--GridGap=1rem]\n *          Gap between the sections of the progress bar.\n *\n * @cssprop {<color>} [--pf-c-progress__bar--before--BackgroundColor=#06c]\n *          Color of the progress bar.\n *\n * @cssprop {<length>} [--pf-c-progress__bar--Height=1rem]\n *          Height of the progress bar.\n *\n * @cssprop {<color>} [--pf-c-progress__bar--BackgroundColor=#ffffff]\n *          Background color of the progress bar.\n *\n * @cssprop {<color>} [--pf-c-progress__status-icon--Color=#151515]\n *          Color of the status icon.\n *\n * @cssprop {<length>} [--pf-c-progress__status-icon--MarginLeft=0.5rem]\n *          Margin left of the status icon.\n *\n * @cssprop {<length>} [--pf-c-progress__indicator--Height=1rem]\n *          Height of the progress bar indicator.\n *\n * @cssprop {<color>} [--pf-c-progress__indicator--BackgroundColor=#ffffff]\n *          Background color of the progress bar indicator.\n *\n * @cssprop {<color>} [--pf-c-progress--m-success__bar--BackgroundColor=#3e8635]\n *          Background color of the progress bar when variant is success.\n *\n * @cssprop {<color>} [--pf-c-progress--m-warning__bar--BackgroundColor=#f0ab00]\n *          Background color of the progress bar when variant is warning.\n *\n * @cssprop {<color>} [--pf-c-progress--m-danger__bar--BackgroundColor=#c9190b]\n *          Background color of the progress bar when variant is danger.\n *\n * @cssprop {<color>} [--pf-c-progress--m-success__status-icon--Color=#3e8635]\n *          Color of the status icon when variant is success.\n *\n * @cssprop {<color>} [--pf-c-progress--m-warning__status-icon--Color=#f0ab00]\n *          Color of the status icon when variant is warning.\n *\n * @cssprop {<color>} [--pf-c-progress--m-danger__status-icon--Color=#c9190b]\n *          Color of the status icon when variant is danger.\n *\n * @cssprop {<color>} [--pf-c-progress--m-success--m-inside__measure--Color=#ffffff]\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *\n * @cssprop {<length>} [--pf-c-progress--m-outside__measure--FontSize=0.875rem]\n *          Font size of the progress bar measure when measure location is outside.\n *\n * @cssprop {<length>} [--pf-c-progress--m-sm__bar--Height=0.5rem]\n *          Height of the progress bar when the size is small.\n *\n * @cssprop {<length>} [--pf-c-progress--m-sm__description--FontSize=0.875rem]\n *          Font size of the progress bar description when the size is small.\n *\n * @cssprop {<length>} [--pf-c-progress--m-lg__bar--Height=1.5rem]\n *          Height of the progress bar when the size is large.\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [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>): void {\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(): TemplateResult<1> {\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"]}
+{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues, TemplateResult } 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 * @summary Display completion status of ongoing process or task.\n * @alias Progress\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [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>): void {\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(): TemplateResult<1> {\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

@@ -8,7 +8,131 @@ import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const style = css `[hidden] {\n  display: none !important;\n}\n\n#icon {\n  z-index: var(--pf-c-progress-stepper__step-icon--ZIndex);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--pf-c-progress-stepper__step-icon--Width);\n  height: var(--pf-c-progress-stepper__step-icon--Height);\n  color: var(--pf-c-progress-stepper__step-icon--Color);\n  background-color: var(--pf-c-progress-stepper__step-icon--BackgroundColor);\n  border: var(--pf-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-c-progress-stepper__step-icon--BorderColor);\n  border-radius: 50%;\n  font-size: var(--pf-c-progress-stepper__step-icon--FontSize);\n  --pf-icon--size: 1.125em;\n}\n\n#main {\n  position: var(--pf-c-progress-stepper__step-main--Position, initial);\n  min-width: 0;\n  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);\n  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);\n  overflow-wrap: anywhere;\n}\n\n:host(:not([current])) #main.compact {\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  margin-bottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);\n}\n\n:host([current]) #main.compact {\n  grid-column: 1/-1;\n  grid-row: 1/2;\n}\n\n#title {\n  font-size: var(--pf-c-progress-stepper__step-title--FontSize);\n  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);\n  color: var(--pf-c-progress-stepper__step-title--Color);\n  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);\n  border: 0;\n}\n\n#description {\n  margin-top: var(--pf-c-progress-stepper__step-description--MarginTop);\n  font-size: var(--pf-c-progress-stepper__step-description--FontSize);\n  color: var(--pf-c-progress-stepper__step-description--Color);\n  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);\n  display: block;\n}\n\n:host {\n  display: contents;\n}\n\n#connector {\n  position: relative;\n  display: flex;\n  justify-content: var(--pf-c-progress-stepper__step-connector--JustifyContent);\n  width: 100%;\n}\n\n#connector.compact {\n  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);\n  grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);\n  padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);\n}\n\n:host(:not(:last-of-type)) #main::before {\n  content: var(--pf-c-progress-stepper__step-main--before--Content);\n  position: absolute;\n  top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));\n  left: calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);\n  width: auto;\n  height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));\n  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);\n}\n\n:host(:not(:last-of-type)) #connector::before {\n  position: absolute;\n  top: var(--pf-c-progress-stepper__step-connector--before--Top);\n  left: var(--pf-c-progress-stepper__step-connector--before--Left);\n  width: var(--pf-c-progress-stepper__step-connector--before--Width);\n  height: var(--pf-c-progress-stepper__step-connector--before--Height);\n  content: var(--pf-c-progress-stepper__step-connector--before--Content);\n  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);\n  border-bottom: var(--pf-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderBottomColor);\n  transform: var(--pf-c-progress-stepper__step-connector--before--Transform);\n}\n\n:host([current]) {\n  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight);\n  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-current__step-title--Color);\n}\n\n:host([variant="success"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--success-color--100, #3e8635);\n}\n\n:host([variant="info"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100, #2b9af3);\n}\n\n:host([variant="warning"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--warning-color--100, #f0ab00);\n}\n\n:host([variant="danger"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);\n}\n`;
+const style = css `[hidden] {
+  display: none !important;
+}
+
+#icon {
+  z-index: var(--pf-c-progress-stepper__step-icon--ZIndex);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pf-c-progress-stepper__step-icon--Width);
+  height: var(--pf-c-progress-stepper__step-icon--Height);
+  color: var(--pf-c-progress-stepper__step-icon--Color);
+  background-color: var(--pf-c-progress-stepper__step-icon--BackgroundColor);
+  border: var(--pf-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-c-progress-stepper__step-icon--BorderColor);
+  border-radius: 50%;
+  font-size: var(--pf-c-progress-stepper__step-icon--FontSize);
+  --pf-icon--size: 1.125em;
+}
+
+#main {
+  position: var(--pf-c-progress-stepper__step-main--Position, initial);
+  min-width: 0;
+  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
+  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
+  overflow-wrap: anywhere;
+}
+
+:host(:not([current])) #main.compact {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  margin-bottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);
+}
+
+:host([current]) #main.compact {
+  grid-column: 1/-1;
+  grid-row: 1/2;
+}
+
+#title {
+  font-size: var(--pf-c-progress-stepper__step-title--FontSize);
+  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
+  color: var(--pf-c-progress-stepper__step-title--Color);
+  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
+}
+
+#description {
+  margin-top: var(--pf-c-progress-stepper__step-description--MarginTop);
+  font-size: var(--pf-c-progress-stepper__step-description--FontSize);
+  color: var(--pf-c-progress-stepper__step-description--Color);
+  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
+  display: block;
+}
+
+:host {
+  display: contents;
+}
+
+#connector {
+  position: relative;
+  display: flex;
+  justify-content: var(--pf-c-progress-stepper__step-connector--JustifyContent);
+  width: 100%;
+}
+
+#connector.compact {
+  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
+  grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
+  padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
+}
+
+:host(:not(:last-of-type)) #main::before {
+  content: var(--pf-c-progress-stepper__step-main--before--Content);
+  position: absolute;
+  top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));
+  left: calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
+  width: auto;
+  height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));
+  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);
+}
+
+:host(:not(:last-of-type)) #connector::before {
+  position: absolute;
+  top: var(--pf-c-progress-stepper__step-connector--before--Top);
+  left: var(--pf-c-progress-stepper__step-connector--before--Left);
+  width: var(--pf-c-progress-stepper__step-connector--before--Width);
+  height: var(--pf-c-progress-stepper__step-connector--before--Height);
+  content: var(--pf-c-progress-stepper__step-connector--before--Content);
+  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);
+  border-bottom: var(--pf-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderBottomColor);
+  transform: var(--pf-c-progress-stepper__step-connector--before--Transform);
+}
+
+:host([current]) {
+  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight);
+  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-current__step-title--Color);
+}
+
+:host([variant="success"]) {
+  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--success-color--100, #3e8635);
+}
+
+:host([variant="info"]) {
+  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100, #2b9af3);
+}
+
+:host([variant="warning"]) {
+  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+}
+
+:host([variant="danger"]) {
+  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--Color);
+  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);
+  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);
+  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);
+  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);
+  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);
+}
+`;
 const ICONS = new Map(Object.entries({
     success: { icon: 'check-circle' },
     danger: { icon: 'exclamation-circle' },
@@ -53,7 +177,7 @@ _PfProgressStep_slots = new WeakMap();
 _PfProgressStep_internals = new WeakMap();
 PfProgressStep.parentTagName = 'pf-progress-stepper';
 PfProgressStep.styles = [style];
-PfProgressStep.version = "4.0.2";
+PfProgressStep.version = "4.2.0";
 __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":";;AAGA,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,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACnC,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;IACjC,MAAM,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE;IACtC,OAAO,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACzC,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,YAAY,EAAE;CACpD,CAAC,CAAC,CAAC;AAWG,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAiBL,yDAAyD;QACb,YAAO,GAAG,KAAK,CAAC;QAE5D,gCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,EAAC;QAE1D,oCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAC;;IAEhE,MAAM;QACJ,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,uBAAA,IAAI,6BAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC;QACrF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,IAAI,CAAC;QACrE,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,GAAG,CAAC;QACtE,MAAM,EAAE,aAAa,EAAE,GAAI,IAAI,CAAC,WAAqC,CAAC;QACtE,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAoB,aAAa,CAAC,IAAI,EAAE,CAAC;QACnF,OAAO,IAAI,CAAA;mCACoB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;8BAE1B,CAAC,IAAI;4BACP,SAAS,CAAC,IAAI,CAAC;2BAChB,SAAS,CAAC,GAAG,CAAC;;;8BAGX,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;6DAEU,CAAC,cAAc,KAAK,IAAI,CAAC,WAAW;;KAE5F,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,uBAAA,IAAI,iCAAW,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;;;;AAhDgB,4BAAa,GAAG,qBAAqB,AAAxB,CAAyB;AAEvC,qBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAGtC;IAAX,QAAQ,EAAE;mDAAsB;AAGrB;IAAX,QAAQ,EAAE;4CAAe;AAGW;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;+CAAkB;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAiE;AAGjD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAiB;AAlBjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc","sourcesContent":["import type { PropertyValues, TemplateResult } 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: 'check-circle' },\n  danger: { icon: 'exclamation-circle' },\n  warning: { icon: 'exclamation-triangle' },\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@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles: CSSStyleSheet[] = [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 = InternalsController.of(this, { role: 'listitem' });\n\n  render(): TemplateResult<1> {\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>): void {\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, TemplateResult } 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: 'check-circle' },\n  danger: { icon: 'exclamation-circle' },\n  warning: { icon: 'exclamation-triangle' },\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@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles: CSSStyleSheet[] = [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 = InternalsController.of(this, { role: 'listitem' });\n\n  render(): TemplateResult<1> {\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>): void {\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"]}