igniteui-webcomponents 6.1.2 → 6.2.0

package/components/progress/base.js

@@ -5,11 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { watch } from '../common/decorators/watch.js';
 import { partMap } from '../common/part-map.js';
-import { asPercent, clamp, formatString, isEmpty } from '../common/util.js';
+import { asPercent, clamp, formatString } from '../common/util.js';
 export class IgcProgressBaseComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -36,12 +36,12 @@ export class IgcProgressBaseComponent extends LitElement {
         this.indeterminate = false;
         this.hideLabel = false;
     }
-    indeterminateChange() {
+    _indeterminateChange() {
         if (!this.indeterminate) {
             this._updateProgress();
         }
     }
-    maxChange() {
+    _maxChange() {
         this.max = Math.max(0, this.max);
         if (this.value > this.max) {
             this.value = this.max;
@@ -50,22 +50,19 @@ export class IgcProgressBaseComponent extends LitElement {
             this._updateProgress();
         }
     }
-    valueChange() {
+    _valueChange() {
         this.value = clamp(this.value, 0, this.max);
         if (!this.indeterminate) {
             this._updateProgress();
         }
     }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
-    }
     updated() {
         this._updateARIA();
     }
     _updateARIA() {
-        const text = this.labelFormat ? this.renderLabelFormat() : `${this.value}%`;
+        const text = this.labelFormat
+            ? this._renderLabelFormat()
+            : `${this.value}%`;
         this._internals.setARIA({
             ariaValueMax: this.max.toString(),
             ariaValueNow: this.indeterminate ? null : this.value.toString(),
@@ -83,30 +80,29 @@ export class IgcProgressBaseComponent extends LitElement {
             '--_transition-duration': `${this.animationDuration}ms`,
         };
     }
-    renderLabel() {
+    _renderLabel() {
         const parts = {
             label: true,
             value: true,
             fraction: this._hasFraction,
         };
         return this.labelFormat
-            ? html `<span part=${partMap(parts)}>${this.renderLabelFormat()}</span>`
+            ? html `<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`
             : html `<span part=${partMap({ ...parts, counter: true })}></span>`;
     }
-    renderLabelFormat() {
+    _renderLabelFormat() {
         return formatString(this.labelFormat, this.value, this.max);
     }
-    renderDefaultSlot() {
-        const hideDefaultLabel = this.indeterminate || this.hideLabel || !isEmpty(this._assignedElements);
+    _renderDefaultSlot() {
+        const hideDefaultLabel = this.indeterminate ||
+            this.hideLabel ||
+            this._slots.hasAssignedElements('[default]');
         return html `
       <slot part="label"></slot>
-      ${hideDefaultLabel ? nothing : this.renderLabel()}
+      ${hideDefaultLabel ? nothing : this._renderLabel()}
     `;
     }
 }
-__decorate([
-    queryAssignedElements()
-], IgcProgressBaseComponent.prototype, "_assignedElements", void 0);
 __decorate([
     query('[part="base"]', true)
 ], IgcProgressBaseComponent.prototype, "_base", void 0);
@@ -145,11 +141,11 @@ __decorate([
 ], IgcProgressBaseComponent.prototype, "labelFormat", void 0);
 __decorate([
     watch('indeterminate')
-], IgcProgressBaseComponent.prototype, "indeterminateChange", null);
+], IgcProgressBaseComponent.prototype, "_indeterminateChange", null);
 __decorate([
     watch('max')
-], IgcProgressBaseComponent.prototype, "maxChange", null);
+], IgcProgressBaseComponent.prototype, "_maxChange", null);
 __decorate([
     watch('value')
-], IgcProgressBaseComponent.prototype, "valueChange", null);
+], IgcProgressBaseComponent.prototype, "_valueChange", null);
 //# sourceMappingURL=base.js.map

package/components/progress/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { partMap } from '../common/part-map.js';\nimport { asPercent, clamp, formatString, isEmpty } from '../common/util.js';\nimport type { StyleVariant } from '../types.js';\n\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'progressbar',\n      ariaValueMin: '0',\n      ariaValueNow: '0',\n    },\n  });\n\n  @queryAssignedElements()\n  protected _assignedElements!: HTMLElement[];\n\n  @query('[part=\"base\"]', true)\n  protected _base!: HTMLElement;\n\n  @state()\n  protected _percentage = 0;\n\n  @state()\n  protected _progress = 0;\n\n  @state()\n  protected _hasFraction = false;\n\n  @state()\n  protected _styleInfo: StyleInfo = {\n    '--_progress-whole': '0.00',\n    '--_progress-integer': '0',\n    '--_progress-fraction': '0',\n    '--_transition-duration': '0ms',\n  };\n\n  /**\n   * Maximum value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 100;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * The variant of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr animation-duration\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 500;\n\n  /**\n   * The indeterminate state of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: false })\n  public indeterminate = false;\n\n  /**\n   * Shows/hides the label of the control.\n   * @attr hide-label\n   */\n  @property({ type: Boolean, attribute: 'hide-label', reflect: false })\n  public hideLabel = false;\n\n  /**\n   * Format string for the default label of the control.\n   * Placeholders:\n   *  {0} - current value of the control.\n   *  {1} - max value of the control.\n   * @attr label-format\n   */\n  @property({ attribute: 'label-format' })\n  public labelFormat!: string;\n\n  @watch('indeterminate')\n  protected indeterminateChange() {\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  @watch('max')\n  protected maxChange() {\n    this.max = Math.max(0, this.max);\n    if (this.value > this.max) {\n      this.value = this.max;\n    }\n\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  @watch('value')\n  protected valueChange() {\n    this.value = clamp(this.value, 0, this.max);\n\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  protected override createRenderRoot() {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', () => this.requestUpdate());\n    return root;\n  }\n\n  protected override updated() {\n    this._updateARIA();\n  }\n\n  private _updateARIA() {\n    const text = this.labelFormat ? this.renderLabelFormat() : `${this.value}%`;\n\n    this._internals.setARIA({\n      ariaValueMax: this.max.toString(),\n      ariaValueNow: this.indeterminate ? null : this.value.toString(),\n      ariaValueText: this.indeterminate ? null : text,\n    });\n  }\n\n  private _updateProgress() {\n    const percentage = asPercent(this.value, Math.max(1, this.max));\n    const fractionValue = Math.round((percentage % 1) * 100);\n    this._hasFraction = fractionValue > 0;\n\n    this._styleInfo = {\n      '--_progress-whole': percentage.toFixed(2),\n      '--_progress-integer': Math.floor(percentage),\n      '--_progress-fraction': fractionValue,\n      '--_transition-duration': `${this.animationDuration}ms`,\n    };\n  }\n\n  protected renderLabel() {\n    const parts = {\n      label: true,\n      value: true,\n      fraction: this._hasFraction,\n    };\n\n    return this.labelFormat\n      ? html`<span part=${partMap(parts)}>${this.renderLabelFormat()}</span>`\n      : html`<span part=${partMap({ ...parts, counter: true })}></span>`;\n  }\n\n  protected renderLabelFormat() {\n    return formatString(this.labelFormat, this.value, this.max);\n  }\n\n  protected renderDefaultSlot() {\n    const hideDefaultLabel =\n      this.indeterminate || this.hideLabel || !isEmpty(this._assignedElements);\n\n    return html`\n      <slot part=\"label\"></slot>\n      ${hideDefaultLabel ? nothing : this.renderLabel()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport type { SlotController } from '../common/controllers/slot.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { partMap } from '../common/part-map.js';\nimport { asPercent, clamp, formatString } from '../common/util.js';\nimport type { StyleVariant } from '../types.js';\n\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'progressbar',\n      ariaValueMin: '0',\n      ariaValueNow: '0',\n    },\n  });\n\n  protected abstract _slots: SlotController<any>;\n\n  @query('[part=\"base\"]', true)\n  protected _base!: HTMLElement;\n\n  @state()\n  protected _percentage = 0;\n\n  @state()\n  protected _progress = 0;\n\n  @state()\n  protected _hasFraction = false;\n\n  @state()\n  protected _styleInfo: StyleInfo = {\n    '--_progress-whole': '0.00',\n    '--_progress-integer': '0',\n    '--_progress-fraction': '0',\n    '--_transition-duration': '0ms',\n  };\n\n  /**\n   * Maximum value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 100;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * The variant of the control.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: StyleVariant = 'primary';\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr animation-duration\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 500;\n\n  /**\n   * The indeterminate state of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: false })\n  public indeterminate = false;\n\n  /**\n   * Shows/hides the label of the control.\n   * @attr hide-label\n   */\n  @property({ type: Boolean, attribute: 'hide-label', reflect: false })\n  public hideLabel = false;\n\n  /**\n   * Format string for the default label of the control.\n   * Placeholders:\n   *  {0} - current value of the control.\n   *  {1} - max value of the control.\n   * @attr label-format\n   */\n  @property({ attribute: 'label-format' })\n  public labelFormat!: string;\n\n  @watch('indeterminate')\n  protected _indeterminateChange(): void {\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  @watch('max')\n  protected _maxChange(): void {\n    this.max = Math.max(0, this.max);\n    if (this.value > this.max) {\n      this.value = this.max;\n    }\n\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  @watch('value')\n  protected _valueChange(): void {\n    this.value = clamp(this.value, 0, this.max);\n\n    if (!this.indeterminate) {\n      this._updateProgress();\n    }\n  }\n\n  protected override updated(): void {\n    this._updateARIA();\n  }\n\n  private _updateARIA(): void {\n    const text = this.labelFormat\n      ? this._renderLabelFormat()\n      : `${this.value}%`;\n\n    this._internals.setARIA({\n      ariaValueMax: this.max.toString(),\n      ariaValueNow: this.indeterminate ? null : this.value.toString(),\n      ariaValueText: this.indeterminate ? null : text,\n    });\n  }\n\n  private _updateProgress(): void {\n    const percentage = asPercent(this.value, Math.max(1, this.max));\n    const fractionValue = Math.round((percentage % 1) * 100);\n    this._hasFraction = fractionValue > 0;\n\n    this._styleInfo = {\n      '--_progress-whole': percentage.toFixed(2),\n      '--_progress-integer': Math.floor(percentage),\n      '--_progress-fraction': fractionValue,\n      '--_transition-duration': `${this.animationDuration}ms`,\n    };\n  }\n\n  protected _renderLabel() {\n    const parts = {\n      label: true,\n      value: true,\n      fraction: this._hasFraction,\n    };\n\n    return this.labelFormat\n      ? html`<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`\n      : html`<span part=${partMap({ ...parts, counter: true })}></span>`;\n  }\n\n  protected _renderLabelFormat(): string {\n    return formatString(this.labelFormat, this.value, this.max);\n  }\n\n  protected _renderDefaultSlot() {\n    const hideDefaultLabel =\n      this.indeterminate ||\n      this.hideLabel ||\n      this._slots.hasAssignedElements('[default]');\n\n    return html`\n      <slot part=\"label\"></slot>\n      ${hideDefaultLabel ? nothing : this._renderLabel()}\n    `;\n  }\n}\n"]}

package/components/progress/circular-gradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-gradient.js","sourceRoot":"","sources":["../../../src/components/progress/circular-gradient.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAWtE,MAAqB,4BAA6B,SAAQ,UAAU;IAApE;;QAaS,WAAM,GAAG,IAAI,CAAC;QAOd,UAAK,GAAG,OAAO,CAAC;QAOhB,YAAO,GAAG,CAAC,CAAC;IAKrB,CAAC;IA5BQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,4BAA4B,CAAC,CAAC;IAClD,CAAC;IAuBkB,MAAM;QACvB,OAAO,OAAO,CAAC;IACjB,CAAC;;AA9BsB,oCAAO,GAAG,uBAAuB,AAA1B,CAA2B;eADtC,4BAA4B;AAaxC;IADN,QAAQ,EAAE;4DACU;AAOd;IADN,QAAQ,EAAE;2DACY;AAOhB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACR","sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { registerComponent } from '../common/definitions/register.js';\n\n/**\n * Used for defining gradient stops in the igc-circular-progress.\n * For each `igc-circular-gradient` defined as `gradient` slot of `igc-circular-progress` element would be created a SVG stop element.\n * The values passed as `color`, `offset` and `opacity` would be set as\n * `stop-color`, `offset` and `stop-opacity` of the SVG element without further validations.\n *\n * @element igc-circular-gradient\n *\n */\nexport default class IgcCircularGradientComponent extends LitElement {\n  public static readonly tagName = 'igc-circular-gradient';\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcCircularGradientComponent);\n  }\n\n  /**\n   * Defines where the gradient stop is placed along the gradient vector\n   * @attr\n   */\n  @property()\n  public offset = '0%';\n\n  /**\n   * Defines the color of the gradient stop\n   * @attr\n   */\n  @property()\n  public color = 'black';\n\n  /**\n   * Defines the opacity of the gradient stop\n   * @attr\n   */\n  @property({ type: Number })\n  public opacity = 1;\n\n  protected override render() {\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-gradient': IgcCircularGradientComponent;\n  }\n}\n"]}
+{"version":3,"file":"circular-gradient.js","sourceRoot":"","sources":["../../../src/components/progress/circular-gradient.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAWtE,MAAqB,4BAA6B,SAAQ,UAAU;IAApE;;QAaS,WAAM,GAAG,IAAI,CAAC;QAOd,UAAK,GAAG,OAAO,CAAC;QAOhB,YAAO,GAAG,CAAC,CAAC;IAKrB,CAAC;IA5BQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,4BAA4B,CAAC,CAAC;IAClD,CAAC;IAuBkB,MAAM;QACvB,OAAO,OAAO,CAAC;IACjB,CAAC;;AA9BsB,oCAAO,GAAG,uBAAuB,AAA1B,CAA2B;eADtC,4BAA4B;AAaxC;IADN,QAAQ,EAAE;4DACU;AAOd;IADN,QAAQ,EAAE;2DACY;AAOhB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACR","sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '../common/definitions/register.js';\n\n/**\n * Used for defining gradient stops in the igc-circular-progress.\n * For each `igc-circular-gradient` defined as `gradient` slot of `igc-circular-progress` element would be created a SVG stop element.\n * The values passed as `color`, `offset` and `opacity` would be set as\n * `stop-color`, `offset` and `stop-opacity` of the SVG element without further validations.\n *\n * @element igc-circular-gradient\n *\n */\nexport default class IgcCircularGradientComponent extends LitElement {\n  public static readonly tagName = 'igc-circular-gradient';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCircularGradientComponent);\n  }\n\n  /**\n   * Defines where the gradient stop is placed along the gradient vector\n   * @attr\n   */\n  @property()\n  public offset = '0%';\n\n  /**\n   * Defines the color of the gradient stop\n   * @attr\n   */\n  @property()\n  public color = 'black';\n\n  /**\n   * Defines the opacity of the gradient stop\n   * @attr\n   */\n  @property({ type: Number })\n  public opacity = 1;\n\n  protected override render() {\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-gradient': IgcCircularGradientComponent;\n  }\n}\n"]}

package/components/progress/circular-progress.d.ts

@@ -25,12 +25,11 @@ import { IgcProgressBaseComponent } from './base.js';
 export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
     static readonly tagName = "igc-circular-progress";
     static styles: import("lit").CSSResult[];
-    private static readonly increment;
     static register(): void;
-    private _gradientId;
-    private _assignedGradients;
+    private readonly _gradientId;
+    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"[default]" | "gradient">;
     constructor();
-    protected renderSvg(): import("lit-html").TemplateResult<2>;
+    protected _renderSvg(): import("lit-html").TemplateResult<2>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/progress/circular-progress.js

@@ -1,33 +1,34 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 import { html, svg } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter, isEmpty } from '../common/util.js';
 import { IgcProgressBaseComponent } from './base.js';
 import IgcCircularGradientComponent from './circular-gradient.js';
 import { styles } from './themes/circular/circular.progress.base.css.js';
 import { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';
 import { all } from './themes/circular/themes.js';
+let nextId = 1;
 class IgcCircularProgressComponent extends IgcProgressBaseComponent {
     static register() {
         registerComponent(IgcCircularProgressComponent, IgcCircularGradientComponent);
     }
     constructor() {
         super();
-        this._gradientId = `circular-progress-${IgcCircularProgressComponent.increment()}`;
+        this._gradientId = `circular-progress-${nextId++}`;
+        this._slots = addSlotController(this, {
+            slots: setSlots('gradient'),
+        });
         addThemingController(this, all);
     }
-    renderSvg() {
-        const gradients = !isEmpty(this._assignedGradients)
-            ? this._assignedGradients.map(({ offset, color, opacity }) => svg `<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`)
+    _renderSvg() {
+        const gradients = this._slots.hasAssignedElements('gradient')
+            ? this._slots
+                .getAssignedElements('gradient', {
+                selector: IgcCircularGradientComponent.tagName,
+            })
+                .map(({ offset, color, opacity }) => svg `<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`)
             : svg `
         <stop offset="0%" part="gradient_start" />
         <stop offset="100%" part="gradient_end" />
@@ -47,19 +48,15 @@ class IgcCircularProgressComponent extends IgcProgressBaseComponent {
         return html `
       <div part="base" style=${styleMap(this._styleInfo)}>
         <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>
-          ${this.renderSvg()}
+          ${this._renderSvg()}
         </svg>
         <slot name="gradient"></slot>
-        ${this.renderDefaultSlot()}
+        ${this._renderDefaultSlot()}
       </div>
     `;
     }
 }
 IgcCircularProgressComponent.tagName = 'igc-circular-progress';
 IgcCircularProgressComponent.styles = [styles, shared];
-IgcCircularProgressComponent.increment = createCounter();
 export default IgcCircularProgressComponent;
-__decorate([
-    queryAssignedElements({ slot: 'gradient' })
-], IgcCircularProgressComponent.prototype, "_assignedGradients", void 0);
 //# sourceMappingURL=circular-progress.js.map

package/components/progress/circular-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,4BAA4B,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAyBlD,MAAqB,4BAA6B,SAAQ,wBAAwB;IAOzE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,4BAA4B,EAC5B,4BAA4B,CAC7B,CAAC;IACJ,CAAC;IAOD;QACE,KAAK,EAAE,CAAC;QANF,gBAAW,GAAG,qBAAqB,4BAA4B,CAAC,SAAS,EAAE,EAAE,CAAC;QAOpF,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,SAAS;QACjB,MAAM,SAAS,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC;YACjD,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CACzB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA,gBAAgB,MAAM,eAAe,KAAK,iBAAiB,OAAO,IAAI,CAC5E;YACH,CAAC,CAAC,GAAG,CAAA;;;OAGJ,CAAC;QAEJ,OAAO,GAAG,CAAA;qBACO,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;sBAC1D,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;;;+BAGxC,IAAI,CAAC,WAAW;YACnC,SAAS;;;KAGhB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;oBACpC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;YACjE,IAAI,CAAC,SAAS,EAAE;;;UAGlB,IAAI,CAAC,iBAAiB,EAAE;;KAE7B,CAAC;IACJ,CAAC;;AAxDsB,oCAAO,GAAG,uBAAuB,AAA1B,CAA2B;AAClC,mCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAEzB,sCAAS,GAAG,aAAa,EAAE,AAAlB,CAAmB;eAJjC,4BAA4B;AAiBvC;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wEACgB","sourcesContent":["import { html, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { createCounter, isEmpty } from '../common/util.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';\nimport { all } from './themes/circular/themes.js';\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n *\n * @csspart svg - The igc-circular-progress SVG element.\n * @csspart gradient_start - The igc-circular-progress linear-gradient start color.\n * @csspart gradient_end - The igc-circular-progress linear-gradient end color.\n * @csspart track - The igc-circular-progress ring track area.\n * @csspart fill - The igc-circular-progress indicator area.\n * @csspart label - The igc-circular-progress label.\n * @csspart value - The igc-circular-progress label value.\n * @csspart indeterminate - The igc-circular-progress indeterminate state.\n * @csspart primary - The igc-circular-progress primary state.\n * @csspart danger - The igc-circular-progress error state.\n * @csspart warning - The igc-circular-progress warning state.\n * @csspart info - The igc-circular-progress info state.\n * @csspart success - The igc-circular-progress success state.\n */\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = [styles, shared];\n\n  private static readonly increment = createCounter();\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcCircularProgressComponent,\n      IgcCircularGradientComponent\n    );\n  }\n\n  private _gradientId = `circular-progress-${IgcCircularProgressComponent.increment()}`;\n\n  @queryAssignedElements({ slot: 'gradient' })\n  private _assignedGradients!: IgcCircularGradientComponent[];\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected renderSvg() {\n    const gradients = !isEmpty(this._assignedGradients)\n      ? this._assignedGradients.map(\n          ({ offset, color, opacity }) =>\n            svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`\n        )\n      : svg`\n        <stop offset=\"0%\" part=\"gradient_start\" />\n        <stop offset=\"100%\" part=\"gradient_end\" />\n      `;\n\n    return svg`\n      <circle part=${partMap({ track: true, indeterminate: this.indeterminate })}/>\n      <circle style=${styleMap({ stroke: `url(#${this._gradientId})` })} part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this._gradientId} gradientTransform=\"rotate(90)\">\n          ${gradients}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>\n          ${this.renderSvg()}\n        </svg>\n        <slot name=\"gradient\"></slot>\n        ${this.renderDefaultSlot()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,4BAA4B,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAElD,IAAI,MAAM,GAAG,CAAC,CAAC;AAyBf,MAAqB,4BAA6B,SAAQ,wBAAwB;IAKzE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,4BAA4B,EAC5B,4BAA4B,CAC7B,CAAC;IACJ,CAAC;IAOD;QACE,KAAK,EAAE,CAAC;QANO,gBAAW,GAAG,qBAAqB,MAAM,EAAE,EAAE,CAAC;QACnC,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAC3D,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC;SAC5B,CAAC,CAAC;QAID,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,UAAU;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAC,MAAM;iBACR,mBAAmB,CAA+B,UAAU,EAAE;gBAC7D,QAAQ,EAAE,4BAA4B,CAAC,OAAO;aAC/C,CAAC;iBACD,GAAG,CACF,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA,gBAAgB,MAAM,eAAe,KAAK,iBAAiB,OAAO,IAAI,CAC5E;YACL,CAAC,CAAC,GAAG,CAAA;;;OAGJ,CAAC;QAEJ,OAAO,GAAG,CAAA;qBACO,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;sBAC1D,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;;;+BAGxC,IAAI,CAAC,WAAW;YACnC,SAAS;;;KAGhB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;oBACpC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,EAAE;;;UAGnB,IAAI,CAAC,kBAAkB,EAAE;;KAE9B,CAAC;IACJ,CAAC;;AA1DsB,oCAAO,GAAG,uBAAuB,AAA1B,CAA2B;AAClC,mCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,4BAA4B","sourcesContent":["import { html, svg } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';\nimport { all } from './themes/circular/themes.js';\n\nlet nextId = 1;\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n *\n * @csspart svg - The igc-circular-progress SVG element.\n * @csspart gradient_start - The igc-circular-progress linear-gradient start color.\n * @csspart gradient_end - The igc-circular-progress linear-gradient end color.\n * @csspart track - The igc-circular-progress ring track area.\n * @csspart fill - The igc-circular-progress indicator area.\n * @csspart label - The igc-circular-progress label.\n * @csspart value - The igc-circular-progress label value.\n * @csspart indeterminate - The igc-circular-progress indeterminate state.\n * @csspart primary - The igc-circular-progress primary state.\n * @csspart danger - The igc-circular-progress error state.\n * @csspart warning - The igc-circular-progress warning state.\n * @csspart info - The igc-circular-progress info state.\n * @csspart success - The igc-circular-progress success state.\n */\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcCircularProgressComponent,\n      IgcCircularGradientComponent\n    );\n  }\n\n  private readonly _gradientId = `circular-progress-${nextId++}`;\n  protected override readonly _slots = addSlotController(this, {\n    slots: setSlots('gradient'),\n  });\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderSvg() {\n    const gradients = this._slots.hasAssignedElements('gradient')\n      ? this._slots\n          .getAssignedElements<IgcCircularGradientComponent>('gradient', {\n            selector: IgcCircularGradientComponent.tagName,\n          })\n          .map(\n            ({ offset, color, opacity }) =>\n              svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`\n          )\n      : svg`\n        <stop offset=\"0%\" part=\"gradient_start\" />\n        <stop offset=\"100%\" part=\"gradient_end\" />\n      `;\n\n    return svg`\n      <circle part=${partMap({ track: true, indeterminate: this.indeterminate })}/>\n      <circle style=${styleMap({ stroke: `url(#${this._gradientId})` })} part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this._gradientId} gradientTransform=\"rotate(90)\">\n          ${gradients}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>\n          ${this._renderSvg()}\n        </svg>\n        <slot name=\"gradient\"></slot>\n        ${this._renderDefaultSlot()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}

package/components/progress/linear-progress.d.ts

@@ -24,6 +24,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
     static readonly tagName = "igc-linear-progress";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"[default]">;
     /**
      * Sets the striped look of the control.
      * @attr

package/components/progress/linear-progress.js

@@ -8,6 +8,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { IgcProgressBaseComponent } from './base.js';
@@ -20,6 +21,9 @@ class IgcLinearProgressComponent extends IgcProgressBaseComponent {
     }
     constructor() {
         super();
+        this._slots = addSlotController(this, {
+            slots: setSlots(),
+        });
         this.striped = false;
         this.labelAlign = 'top-start';
         addThemingController(this, all);
@@ -37,7 +41,7 @@ class IgcLinearProgressComponent extends IgcProgressBaseComponent {
           <div part=${partMap(parts)}></div>
           <div part=${partMap({ ...parts, secondary: true })}></div>
         </div>
-        ${this.renderDefaultSlot()}
+        ${this._renderDefaultSlot()}
       </div>
     `;
     }

package/components/progress/linear-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/progress/linear-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAsBhD,MAAqB,0BAA2B,SAAQ,wBAAwB;IAKvE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IAChD,CAAC;IAgBD;QACE,KAAK,EAAE,CAAC;QAVH,YAAO,GAAG,KAAK,CAAC;QAOhB,eAAU,GAA6B,WAAW,CAAC;QAIxD,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;SACrB,CAAC;QAEF,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;;sBAElC,OAAO,CAAC,KAAK,CAAC;sBACd,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;UAElD,IAAI,CAAC,iBAAiB,EAAE;;KAE7B,CAAC;IACJ,CAAC;;AA5CsB,kCAAO,GAAG,qBAAqB,AAAxB,CAAyB;AAChC,iCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,0BAA0B;AActC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACpB;AAOhB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DACI","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport type { LinearProgressLabelAlign } from '../types.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport { styles } from './themes/linear/linear.progress.base.css.js';\nimport { styles as shared } from './themes/linear/shared/linear.progress.common.css.js';\nimport { all } from './themes/linear/themes.js';\n\n/**\n * A linear progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-linear-progress\n *\n * @slot - The text area container.\n *\n * @csspart track - The igc-linear-progress track area.\n * @csspart fill - The igc-linear-progress indicator area.\n * @csspart striped - The igc-linear-progress striped indicator.\n * @csspart label - The igc-linear-progress label.\n * @csspart value - The igc-linear-progress label value.\n * @csspart indeterminate - The igc-linear-progress indeterminate state.\n * @csspart primary - The igc-linear-progress indicator primary state.\n * @csspart danger - The igc-linear-progress indicator error state.\n * @csspart warning - The igc-linear-progress indicator warning state.\n * @csspart info - The igc-linear-progress indicator info state.\n * @csspart success - The igc-linear-progress indicator success state.\n */\nexport default class IgcLinearProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-linear-progress';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcLinearProgressComponent);\n  }\n\n  /**\n   * Sets the striped look of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public striped = false;\n\n  /**\n   * The position for the default label of the control.\n   * @attr label-align\n   */\n  @property({ attribute: 'label-align', reflect: true })\n  public labelAlign: LinearProgressLabelAlign = 'top-start';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    const parts = {\n      fill: true,\n      striped: this.striped,\n      indeterminate: this.indeterminate,\n      [this.variant]: true,\n    };\n\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <div part=\"track\">\n          <div part=${partMap(parts)}></div>\n          <div part=${partMap({ ...parts, secondary: true })}></div>\n        </div>\n        ${this.renderDefaultSlot()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-linear-progress': IgcLinearProgressComponent;\n  }\n}\n"]}
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/progress/linear-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAsBhD,MAAqB,0BAA2B,SAAQ,wBAAwB;IAKvE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IAChD,CAAC;IAoBD;QACE,KAAK,EAAE,CAAC;QAnBkB,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAC3D,KAAK,EAAE,QAAQ,EAAE;SAClB,CAAC,CAAC;QAOI,YAAO,GAAG,KAAK,CAAC;QAOhB,eAAU,GAA6B,WAAW,CAAC;QAIxD,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;SACrB,CAAC;QAEF,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;;sBAElC,OAAO,CAAC,KAAK,CAAC;sBACd,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;UAElD,IAAI,CAAC,kBAAkB,EAAE;;KAE9B,CAAC;IACJ,CAAC;;AAhDsB,kCAAO,GAAG,qBAAqB,AAAxB,CAAyB;AAChC,iCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,0BAA0B;AAkBtC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACpB;AAOhB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DACI","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport type { LinearProgressLabelAlign } from '../types.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport { styles } from './themes/linear/linear.progress.base.css.js';\nimport { styles as shared } from './themes/linear/shared/linear.progress.common.css.js';\nimport { all } from './themes/linear/themes.js';\n\n/**\n * A linear progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-linear-progress\n *\n * @slot - The text area container.\n *\n * @csspart track - The igc-linear-progress track area.\n * @csspart fill - The igc-linear-progress indicator area.\n * @csspart striped - The igc-linear-progress striped indicator.\n * @csspart label - The igc-linear-progress label.\n * @csspart value - The igc-linear-progress label value.\n * @csspart indeterminate - The igc-linear-progress indeterminate state.\n * @csspart primary - The igc-linear-progress indicator primary state.\n * @csspart danger - The igc-linear-progress indicator error state.\n * @csspart warning - The igc-linear-progress indicator warning state.\n * @csspart info - The igc-linear-progress indicator info state.\n * @csspart success - The igc-linear-progress indicator success state.\n */\nexport default class IgcLinearProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-linear-progress';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcLinearProgressComponent);\n  }\n\n  protected override readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n  });\n\n  /**\n   * Sets the striped look of the control.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public striped = false;\n\n  /**\n   * The position for the default label of the control.\n   * @attr label-align\n   */\n  @property({ attribute: 'label-align', reflect: true })\n  public labelAlign: LinearProgressLabelAlign = 'top-start';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    const parts = {\n      fill: true,\n      striped: this.striped,\n      indeterminate: this.indeterminate,\n      [this.variant]: true,\n    };\n\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <div part=\"track\">\n          <div part=${partMap(parts)}></div>\n          <div part=${partMap({ ...parts, secondary: true })}></div>\n        </div>\n        ${this._renderDefaultSlot()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-linear-progress': IgcLinearProgressComponent;\n  }\n}\n"]}

package/components/radio/radio.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, type TemplateResult } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
-import { type FormValueOf } from '../common/mixins/forms/form-value.js';
 import type { ToggleLabelPosition } from '../types.js';
 export interface IgcRadioChangeEventArgs {
     checked: boolean;
@@ -31,15 +30,14 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
     static readonly tagName = "igc-radio";
     protected static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly increment;
     protected get __validators(): import("../common/validators.js").Validator<IgcRadioComponent>[];
-    protected readonly _formValue: FormValueOf<boolean>;
     private readonly _inputId;
     private readonly _labelId;
     private readonly _focusRingManager;
+    private readonly _slots;
+    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<boolean>;
     protected _value: string;
     protected readonly _input: HTMLInputElement;
-    protected readonly _label: Array<Node>;
     protected _hideLabel: boolean;
     private _tabIndex;
     /** Returns all radio elements from the group, that is having the same name property. */
@@ -70,8 +68,8 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
      */
     labelPosition: ToggleLabelPosition;
     constructor();
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected firstUpdated(): Promise<void>;
+    protected _handleSlotChange(): void;
     protected _setDefaultValue(current: string | null): void;
     /** Simulates a click on the radio control. */
     click(): void;

package/components/radio/radio.js

@@ -4,25 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
-import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import { createFormValueState, defaultBooleanTransformers, } from '../common/mixins/forms/form-value.js';
+import { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter, isDefined, isEmpty, isLTR, last, wrap, } from '../common/util.js';
+import { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/radio.base.css.js';
 import { styles as shared } from './themes/shared/radio.common.css.js';
 import { all } from './themes/themes.js';
 import { getGroup } from './utils.js';
 import { radioValidators } from './validators.js';
+let nextId = 1;
 class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitterMixin(LitElement)) {
     static register() {
         registerComponent(IgcRadioComponent, IgcValidationContainerComponent);
@@ -56,7 +59,7 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
     set value(value) {
         this._value = value;
         if (this.checked) {
-            this._setFormValue(this._value || 'on');
+            this._formValue.setValueAndFormState(this.checked);
         }
     }
     get value() {
@@ -65,7 +68,6 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
     set checked(value) {
         this._formValue.setValueAndFormState(value);
         this._tabIndex = this.checked ? 0 : -1;
-        this._validate();
         if (this.hasUpdated && this.checked) {
             this._updateCheckedState();
         }
@@ -75,14 +77,18 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
     }
     constructor() {
         super();
+        this._inputId = `radio-${nextId++}`;
+        this._labelId = `radio-label-${this._inputId}`;
+        this._focusRingManager = addKeyboardFocusRing(this);
+        this._slots = addSlotController(this, {
+            slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),
+            onChange: this._handleSlotChange,
+        });
         this._formValue = createFormValueState(this, {
             initialValue: false,
-            transformers: defaultBooleanTransformers,
+            transformers: FormValueBooleanTransformers,
         });
-        this._inputId = `radio-${IgcRadioComponent.increment()}`;
-        this._labelId = `radio-label-${this._inputId}`;
-        this._focusRingManager = addKeyboardFocusRing(this);
-        this._hideLabel = false;
+        this._hideLabel = true;
         this._tabIndex = 0;
         this.labelPosition = 'after';
         addThemingController(this, all);
@@ -95,14 +101,6 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
             .set(arrowUp, () => this._navigate(-1))
             .set(arrowDown, () => this._navigate(1));
     }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        this._hideLabel = isEmpty(this._label);
-        root.addEventListener('slotchange', () => {
-            this._hideLabel = isEmpty(this._label);
-        });
-        return root;
-    }
     async firstUpdated() {
         await this.updateComplete;
         if (this.checked && this === last(this._checkedRadios)) {
@@ -112,9 +110,12 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
             }
         }
         else {
-            this._updateValidity();
+            this._validate();
         }
     }
+    _handleSlotChange() {
+        this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);
+    }
     _setDefaultValue(current) {
         this._formValue.defaultValue = isDefined(current);
         for (const radio of this._siblings) {
@@ -161,6 +162,7 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
     formResetCallback() {
         super.formResetCallback();
         this._resetTabIndexes();
+        this.updateComplete.then(() => this._validate());
     }
     _resetTabIndexes() {
         const radios = this._radios;
@@ -177,6 +179,7 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
     }
     _handleClick(event) {
         event.stopPropagation();
+        this._setTouchedState();
         if (this.checked) {
             return;
         }
@@ -193,6 +196,7 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
         const active = this._active;
         const next = wrap(0, active.length - 1, active.indexOf(this) + idx);
         const radio = active[next];
+        this._setTouchedState();
         radio.focus();
         radio.checked = true;
         radio.emitEvent('igcChange', {
@@ -204,6 +208,9 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
     }
     render() {
         const labelledBy = this.getAttribute('aria-labelledby');
+        const describedBy = this._slots.hasAssignedElements('helper-text')
+            ? 'helper-text'
+            : nothing;
         const checked = this.checked;
         return html `
       <label
@@ -219,25 +226,24 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
           type="radio"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
-          .required=${this.required}
-          .disabled=${this.disabled}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
           .checked=${live(checked)}
           tabindex=${this._tabIndex}
-          aria-checked=${checked}
-          aria-disabled=${this.disabled}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
+          aria-describedby=${describedBy}
           @click=${this._handleClick}
         />
         <span part=${partMap({ control: true, checked })}>
           <span
-            .hidden=${this.disabled}
             part=${partMap({ ripple: true, checked })}
+            ?hidden=${this.disabled}
           ></span>
         </span>
         <span
-          .hidden=${this._hideLabel}
-          part=${partMap({ label: true, checked })}
           id=${this._labelId}
+          part=${partMap({ label: true, checked })}
+          ?hidden=${this._hideLabel}
         >
           <slot></slot>
         </span>
@@ -248,14 +254,10 @@ class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(EventEmitter
 }
 IgcRadioComponent.tagName = 'igc-radio';
 IgcRadioComponent.styles = [styles, shared];
-IgcRadioComponent.increment = createCounter();
 export default IgcRadioComponent;
 __decorate([
     query('input', true)
 ], IgcRadioComponent.prototype, "_input", void 0);
-__decorate([
-    queryAssignedNodes({ flatten: true })
-], IgcRadioComponent.prototype, "_label", void 0);
 __decorate([
     state()
 ], IgcRadioComponent.prototype, "_hideLabel", void 0);