igniteui-webcomponents 5.1.2 → 5.2.0

package/components/mask-input/mask-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { isEmpty, partNameMap } from '../common/util.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport {\n  IgcMaskInputBaseComponent,\n  type MaskRange,\n} from './mask-input-base.js';\nimport { maskValidators } from './validators.js';\n\n/**\n * A masked input is an input field where a developer can control user input and format the visible value,\n * based on configurable rules\n *\n * @element igc-mask-input\n *\n * @slot prefix - Renders content before the input\n * @slot suffix - Renders content after the input\n * @slot helper-text - Renders content below the input\n * @slot value-missing - Renders content when the required validation fails.\n * @slot bad-input - Renders content when a required mask pattern validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcInput - Emitted when the control receives user input\n * @fires igcChange - Emitted when an alteration of the control's value is committed by the user\n *\n * @csspart container - The main wrapper that holds all main input elements\n * @csspart input - The native input element\n * @csspart label - The native label element\n * @csspart prefix - The prefix wrapper\n * @csspart suffix - The suffix wrapper\n * @csspart helper-text - The helper text wrapper\n */\nexport default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {\n  public static readonly tagName = 'igc-mask-input';\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcMaskInputComponent, IgcValidationContainerComponent);\n  }\n\n  protected override get __validators() {\n    return maskValidators;\n  }\n\n  protected _value = '';\n\n  /**\n   * Dictates the behavior when retrieving the value of the control:\n   *\n   * - `raw` will return the clean user input.\n   * - `withFormatting` will return the value with all literals and prompts.\n   * @attr value-mode\n   */\n  @property({ attribute: 'value-mode' })\n  public valueMode: 'raw' | 'withFormatting' = 'raw';\n\n  /**\n   * The value of the input.\n   *\n   * Regardless of the currently set `value-mode`, an empty value will return an empty string.\n   * @attr\n   */\n  public get value(): string {\n    return this.valueMode !== 'raw' ? this.maskedValue : this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  @property()\n  public set value(string: string) {\n    this._value = string ?? '';\n    this.maskedValue = this.parser.apply(this._value);\n    this.updateMaskedValue();\n    this.updateFormValue();\n  }\n\n  /**\n   * The mask pattern to apply on the input.\n   * @attr\n   */\n  @property()\n  public get mask(): string {\n    return this._mask;\n  }\n\n  /** The mask pattern to apply on the input. */\n  public set mask(value: string) {\n    this._mask = value;\n    this.parser.mask = value;\n    if (this.value) {\n      this.maskedValue = this.parser.apply(this._value);\n    }\n  }\n\n  protected override _setDefaultValue(\n    _: string | null,\n    current: string | null\n  ): void {\n    this._defaultValue = current;\n  }\n\n  protected updateFormValue() {\n    this.valueMode === 'raw'\n      ? this._setFormValue(this.value || null)\n      : this._setFormValue(this.maskedValue || null);\n    this._validate();\n  }\n\n  @watch('prompt')\n  protected promptChange() {\n    this.parser.prompt = this.prompt;\n    if (this.value) {\n      this.maskedValue = this.parser.apply(this._value);\n    }\n  }\n\n  protected async updateInput(string: string, range: MaskRange) {\n    const { value, end } = this.parser.replace(\n      this.maskedValue,\n      string,\n      range.start,\n      range.end\n    );\n\n    this.maskedValue = value;\n    this._value = this.parser.parse(value);\n\n    this.updateFormValue();\n    this.requestUpdate();\n\n    if (range.start !== this.mask.length) {\n      this.emitEvent('igcInput', { detail: this.value });\n    }\n    await this.updateComplete;\n\n    this.input.setSelectionRange(end, end);\n  }\n\n  protected handleDragEnter() {\n    if (!this.focused && !this._value) {\n      this.maskedValue = this.emptyMask;\n    }\n  }\n\n  protected handleDragLeave() {\n    if (!this.focused) {\n      this.updateMaskedValue();\n    }\n  }\n\n  protected async handleFocus() {\n    this.focused = true;\n\n    if (this.readOnly) {\n      return;\n    }\n\n    if (!this._value) {\n      // In case of empty value, select the whole mask\n      this.maskedValue = this.emptyMask;\n\n      await this.updateComplete;\n      this.select();\n    }\n  }\n\n  protected handleBlur() {\n    this.focused = false;\n    this.updateMaskedValue();\n    this.invalid = !this.checkValidity();\n  }\n\n  protected handleChange() {\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected updateMaskedValue() {\n    if (this.maskedValue === this.emptyMask) {\n      this.maskedValue = '';\n    }\n  }\n\n  protected override _updateSetRangeTextValue() {\n    this.value = this.parser.parse(this.maskedValue);\n  }\n\n  protected override renderInput() {\n    return html`\n      <input\n        type=\"text\"\n        part=${partNameMap(this.resolvePartNames('input'))}\n        name=${ifDefined(this.name)}\n        .value=${live(this.maskedValue)}\n        .placeholder=${live(this.placeholder ?? this.parser.escapedMask)}\n        ?readonly=${this.readOnly}\n        ?disabled=${this.disabled}\n        @dragenter=${this.handleDragEnter}\n        @dragleave=${this.handleDragLeave}\n        @dragstart=${this.handleDragStart}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @cut=${this.handleCut}\n        @change=${this.handleChange}\n        @click=${this.handleClick}\n        @compositionstart=${this.handleCompositionStart}\n        @compositionend=${this.handleCompositionEnd}\n        @input=${this.handleInput}\n        aria-describedby=${ifDefined(\n          isEmpty(this._helperText) ? nothing : 'helper-text'\n        )}\n        aria-invalid=${this.invalid ? 'true' : 'false'}\n        @keydown=${this.handleKeydown}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-mask-input': IgcMaskInputComponent;\n  }\n}\n"]}
+{"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport {\n  type FormValue,\n  createFormValueState,\n} from '../common/mixins/forms/form-value.js';\nimport { isEmpty, partNameMap } from '../common/util.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport {\n  IgcMaskInputBaseComponent,\n  type MaskRange,\n} from './mask-input-base.js';\nimport { maskValidators } from './validators.js';\n\n/**\n * A masked input is an input field where a developer can control user input and format the visible value,\n * based on configurable rules\n *\n * @element igc-mask-input\n *\n * @slot prefix - Renders content before the input\n * @slot suffix - Renders content after the input\n * @slot helper-text - Renders content below the input\n * @slot value-missing - Renders content when the required validation fails.\n * @slot bad-input - Renders content when a required mask pattern validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcInput - Emitted when the control receives user input\n * @fires igcChange - Emitted when an alteration of the control's value is committed by the user\n *\n * @csspart container - The main wrapper that holds all main input elements\n * @csspart input - The native input element\n * @csspart label - The native label element\n * @csspart prefix - The prefix wrapper\n * @csspart suffix - The suffix wrapper\n * @csspart helper-text - The helper text wrapper\n */\nexport default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {\n  public static readonly tagName = 'igc-mask-input';\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcMaskInputComponent, IgcValidationContainerComponent);\n  }\n\n  protected override get __validators() {\n    return maskValidators;\n  }\n\n  protected override _formValue: FormValue<string>;\n\n  protected get _isRawMode() {\n    return this.valueMode === 'raw';\n  }\n\n  /**\n   * Dictates the behavior when retrieving the value of the control:\n   *\n   * - `raw` will return the clean user input.\n   * - `withFormatting` will return the value with all literals and prompts.\n   * @attr value-mode\n   */\n  @property({ attribute: 'value-mode' })\n  public valueMode: 'raw' | 'withFormatting' = 'raw';\n\n  /**\n   * The value of the input.\n   *\n   * Regardless of the currently set `value-mode`, an empty value will return an empty string.\n   * @attr\n   */\n  public get value(): string {\n    const value = this._formValue.value;\n\n    if (this._isRawMode) {\n      return value;\n    }\n    return value ? this.maskedValue : value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  @property()\n  public set value(string: string) {\n    const value = string ?? '';\n    this.maskedValue = this.parser.apply(value);\n    this.updateMaskedValue();\n    this._formValue.setValueAndFormState(value);\n    this._validate();\n  }\n\n  /**\n   * The mask pattern to apply on the input.\n   * @attr\n   */\n  @property()\n  public get mask(): string {\n    return this._mask;\n  }\n\n  /** The mask pattern to apply on the input. */\n  public set mask(value: string) {\n    this._mask = value;\n    this.parser.mask = value;\n    if (this.value) {\n      this.maskedValue = this.parser.apply(this._formValue.value);\n    }\n  }\n\n  constructor() {\n    super();\n\n    this._formValue = createFormValueState(this, {\n      initialValue: '',\n      transformers: {\n        setFormValue: (value) =>\n          this._isRawMode ? value || null : this.maskedValue || null,\n      },\n    });\n  }\n\n  @watch('prompt')\n  protected promptChange() {\n    this.parser.prompt = this.prompt;\n    if (this.value) {\n      this.maskedValue = this.parser.apply(this._formValue.value);\n    }\n  }\n\n  protected override _restoreDefaultValue(): void {\n    const value = this.defaultValue as string;\n\n    this.maskedValue = this.parser.apply(value);\n    this.updateMaskedValue();\n    this._formValue.setValueAndFormState(value);\n    this._updateValidity();\n  }\n\n  protected async updateInput(string: string, range: MaskRange) {\n    const { value, end } = this.parser.replace(\n      this.maskedValue,\n      string,\n      range.start,\n      range.end\n    );\n\n    this.maskedValue = value;\n    this._formValue.setValueAndFormState(this.parser.parse(value));\n    this._validate();\n    this.requestUpdate();\n\n    if (range.start !== this.mask.length) {\n      this.emitEvent('igcInput', { detail: this.value });\n    }\n    await this.updateComplete;\n\n    this.input.setSelectionRange(end, end);\n  }\n\n  protected handleDragEnter() {\n    if (!this.focused && !this._formValue.value) {\n      this.maskedValue = this.emptyMask;\n    }\n  }\n\n  protected handleDragLeave() {\n    if (!this.focused) {\n      this.updateMaskedValue();\n    }\n  }\n\n  protected async handleFocus() {\n    this.focused = true;\n\n    if (this.readOnly) {\n      return;\n    }\n\n    if (!this._formValue.value) {\n      // In case of empty value, select the whole mask\n      this.maskedValue = this.emptyMask;\n\n      await this.updateComplete;\n      this.select();\n    }\n  }\n\n  protected handleBlur() {\n    this.focused = false;\n    this.updateMaskedValue();\n    this.invalid = !this.checkValidity();\n  }\n\n  protected handleChange() {\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected updateMaskedValue() {\n    if (this.maskedValue === this.emptyMask) {\n      this.maskedValue = '';\n    }\n  }\n\n  protected override _updateSetRangeTextValue() {\n    this.value = this.parser.parse(this.maskedValue);\n  }\n\n  protected override renderInput() {\n    return html`\n      <input\n        type=\"text\"\n        part=${partNameMap(this.resolvePartNames('input'))}\n        name=${ifDefined(this.name)}\n        .value=${live(this.maskedValue)}\n        .placeholder=${live(this.placeholder ?? this.parser.escapedMask)}\n        ?readonly=${this.readOnly}\n        ?disabled=${this.disabled}\n        @dragenter=${this.handleDragEnter}\n        @dragleave=${this.handleDragLeave}\n        @dragstart=${this.handleDragStart}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @cut=${this.handleCut}\n        @change=${this.handleChange}\n        @click=${this.handleClick}\n        @compositionstart=${this.handleCompositionStart}\n        @compositionend=${this.handleCompositionEnd}\n        @input=${this.handleInput}\n        aria-describedby=${ifDefined(\n          isEmpty(this._helperText) ? nothing : 'helper-text'\n        )}\n        aria-invalid=${this.invalid ? 'true' : 'false'}\n        @keydown=${this.handleKeydown}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-mask-input': IgcMaskInputComponent;\n  }\n}\n"]}

package/components/nav-drawer/themes/container.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s}:host [part~=mini]{min-width:var(--menu-mini-width)}:host [part=base]{width:var(--menu-full-width)}:host [part=main]{width:100%}:host [part=overlay]{position:fixed;inset:0;z-index:2;opacity:1;transition:opacity ease-out .3s,.3s}:host([position=relative]) [part=base]{position:relative;width:var(--menu-full-width);box-shadow:none;z-index:initial;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;bottom:auto}:host([position=bottom]) [part=base]{top:auto;bottom:0}:host([position=start]) [part=base],:host([position=start]) [part~=mini]{inset-inline-start:0;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host(:not([open])[position=start]),:host([dir=rtl]:not([open])[position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([open])[position=end]),:host([dir=rtl]:not([open])[position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1)}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{transform:translateY(60vh)}:host([open][position=end]) [part=base]{border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part="mini hidden"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:not([open])) [part=base]{transform:translateX(calc(100% * var(--dir)));opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s}:host [part~=mini]{min-width:var(--menu-mini-width)}:host [part=base]{width:var(--menu-full-width)}:host [part=main]{width:100%}:host [part=overlay]{position:fixed;inset:0;z-index:2;opacity:1;transition:opacity ease-out .3s,.3s}:host([position=relative]) [part=base]{position:relative;width:var(--menu-full-width);box-shadow:none;z-index:initial;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;bottom:auto}:host([position=bottom]) [part=base]{top:auto;bottom:0}:host([position=start]) [part=base],:host([position=start]) [part~=mini]{inset-inline-start:0;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host(:not([open])[position=start]),:host([dir=rtl]:not([open])[position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([open])[position=end]),:host([dir=rtl]:not([open])[position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1)}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{transform:translateY(60vh)}:host([open][position=end]) [part=base]{border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part="mini hidden"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:not([open])) [part=base]{transform:translateX(calc(100% * var(--dir)));opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;
 //# sourceMappingURL=container.base.css.js.map

package/components/nav-drawer/themes/container.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,q3GAAq3G,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s}:host [part~=mini]{min-width:var(--menu-mini-width)}:host [part=base]{width:var(--menu-full-width)}:host [part=main]{width:100%}:host [part=overlay]{position:fixed;inset:0;z-index:2;opacity:1;transition:opacity ease-out .3s,.3s}:host([position=relative]) [part=base]{position:relative;width:var(--menu-full-width);box-shadow:none;z-index:initial;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;bottom:auto}:host([position=bottom]) [part=base]{top:auto;bottom:0}:host([position=start]) [part=base],:host([position=start]) [part~=mini]{inset-inline-start:0;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host(:not([open])[position=start]),:host([dir=rtl]:not([open])[position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([open])[position=end]),:host([dir=rtl]:not([open])[position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1)}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{transform:translateY(60vh)}:host([open][position=end]) [part=base]{border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part=\"mini hidden\"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:not([open])) [part=base]{transform:translateX(calc(100% * var(--dir)));opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;\n"]}
+{"version":3,"file":"container.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/container.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6gHAA6gH,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--menu-full-width: 15rem;display:flex;flex-shrink:0;font-family:var(--ig-font-family)}:host [part=base],:host [part~=mini]{--ig-scrollbar-size: rem(8px);position:fixed;height:100%;min-height:100%;overflow-x:hidden;inset-block:0;z-index:999;opacity:1;transition:transform ease-out .3s,.3s,opacity ease-out .3s,.3s}:host [part~=mini]{min-width:var(--menu-mini-width)}:host [part=base]{width:var(--menu-full-width)}:host [part=main]{width:100%}:host [part=overlay]{position:fixed;inset:0;z-index:2;opacity:1;transition:opacity ease-out .3s,.3s}:host([position=relative]) [part=base]{position:relative;width:var(--menu-full-width);box-shadow:none;z-index:initial;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part~=mini]{position:relative;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=relative]) [part=overlay]{display:none}:host([position=top]) [part=main],:host([position=bottom]) [part=main]{width:100%}:host([position=top]) [part=base],:host([position=bottom]) [part=base]{height:50vh;min-height:initial;width:100%;inset-inline:0}:host([position=top]) [part=base]{top:0;bottom:auto}:host([position=bottom]) [part=base]{top:auto;bottom:0}:host([position=start]) [part=base],:host([position=start]) [part~=mini]{inset-inline-start:0;border-inline-end-style:solid;border-inline-end-width:.0625rem}:host([position=end]) [part=base],:host([position=end]) [part~=mini]{inset-inline-end:0;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host(:not([open])[position=start]),:host([dir=rtl]:not([open])[position=end]){--dir: calc(var(--ig-dir, 1) * -1)}:host(:not([open])[position=end]),:host([dir=rtl]:not([open])[position=start]){--dir: calc(var(--ig-dir, 1) * 1)}:host(:not([open])[position=relative]) [part=base]{margin-inline-start:calc(var(--menu-full-width)*-1)}:host(:not([open])[position=top]) [part=base],:host(:not([open])[position=bottom]) [part=base]{transform:translateY(-60vh)}:host(:not([open])[position=top]) [part=mini],:host(:not([open])[position=bottom]) [part=mini]{display:none}:host(:not([open])[position=bottom]) [part=base]{transform:translateY(60vh)}:host([open][position=end]) [part=base]{border-inline-end:none;border-inline-start-style:solid;border-inline-start-width:.0625rem}:host([open]) [part=mini],[part=\"mini hidden\"]{display:none}:host([open]:not([position=relative])) [part=base]{border-inline-end-style:solid;border-inline-end-width:.0625rem}:host(:not([open])) [part=base]{transform:translateX(calc(100% * var(--dir)));opacity:0}:host(:not([open])) [part=overlay]{pointer-events:none;opacity:0}`;\n"]}

package/components/nav-drawer/themes/header-item.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;align-items:center;white-space:nowrap}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;align-items:center;white-space:nowrap}`;
 //# sourceMappingURL=header-item.base.css.js.map

package/components/nav-drawer/themes/header-item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-item.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/header-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,22BAA22B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;align-items:center;white-space:nowrap}`;\n"]}
+{"version":3,"file":"header-item.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/header-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mgCAAmgC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;align-items:center;white-space:nowrap}`;\n"]}

package/components/nav-drawer/themes/item.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}[part~=base]{display:flex;align-items:center;flex-flow:row nowrap;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:rgba(0,0,0,0);white-space:nowrap;text-decoration:none;border:none;justify-content:flex-start;transition:background .15s ease-out}[part~=base] ::slotted(igc-icon){--ig-size: 3;display:flex;font:inherit}[part=content]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[part="base mini"]{display:block}[part="base mini"] [part=content]{display:none}:host([disabled]){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}[part~=base]{display:flex;align-items:center;flex-flow:row nowrap;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:rgba(0,0,0,0);white-space:nowrap;text-decoration:none;border:none;justify-content:flex-start;transition:background .15s ease-out}[part~=base] ::slotted(igc-icon){--ig-size: 3;display:flex;font:inherit}[part=content]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[part="base mini"]{display:block}[part="base mini"] [part=content]{display:none}:host([disabled]){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}`;
 //# sourceMappingURL=item.base.css.js.map

package/components/nav-drawer/themes/item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,o7CAAo7C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}[part~=base]{display:flex;align-items:center;flex-flow:row nowrap;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:rgba(0,0,0,0);white-space:nowrap;text-decoration:none;border:none;justify-content:flex-start;transition:background .15s ease-out}[part~=base] ::slotted(igc-icon){--ig-size: 3;display:flex;font:inherit}[part=content]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[part=\"base mini\"]{display:block}[part=\"base mini\"] [part=content]{display:none}:host([disabled]){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}`;\n"]}
+{"version":3,"file":"item.base.css.js","sourceRoot":"","sources":["../../../../src/components/nav-drawer/themes/item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4kDAA4kD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}[part~=base]{display:flex;align-items:center;flex-flow:row nowrap;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:rgba(0,0,0,0);white-space:nowrap;text-decoration:none;border:none;justify-content:flex-start;transition:background .15s ease-out}[part~=base] ::slotted(igc-icon){--ig-size: 3;display:flex;font:inherit}[part=content]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[part=\"base mini\"]{display:block}[part=\"base mini\"] [part=content]{display:none}:host([disabled]){-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;pointer-events:none}`;\n"]}

package/components/navbar/themes/navbar.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;font-family:var(--ig-font-family);z-index:4}:host ::slotted(igc-icon){--ig-size: 3}:host ::slotted(igc-button){--ig-size: 2}[part=base]{--ig-size: 1;display:inherit;position:relative;flex-flow:row nowrap;flex-grow:1;align-items:center;gap:1rem}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-grow:1;align-items:center;overflow:visible}[part=start],[part=end]{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:visible}[part=end]{gap:1rem}[name=start]::slotted(*){margin-inline-end:1rem}::slotted(igc-icon){cursor:pointer;transition:color .15s cubic-bezier(0.25, 0.46, 0.45, 0.94)}::slotted(*){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);line-height:normal;margin:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;font-family:var(--ig-font-family);z-index:4}:host ::slotted(igc-icon){--ig-size: 3}:host ::slotted(igc-button){--ig-size: 2}[part=base]{--ig-size: 1;display:inherit;position:relative;flex-flow:row nowrap;flex-grow:1;align-items:center;gap:1rem}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-grow:1;align-items:center;overflow:visible}[part=start],[part=end]{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:visible}[part=end]{gap:1rem}[name=start]::slotted(*){margin-inline-end:1rem}::slotted(igc-icon){cursor:pointer;transition:color .15s cubic-bezier(0.25, 0.46, 0.45, 0.94)}::slotted(*){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);line-height:normal;margin:0}`;
 //# sourceMappingURL=navbar.base.css.js.map

package/components/navbar/themes/navbar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/navbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4hEAA4hE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;font-family:var(--ig-font-family);z-index:4}:host ::slotted(igc-icon){--ig-size: 3}:host ::slotted(igc-button){--ig-size: 2}[part=base]{--ig-size: 1;display:inherit;position:relative;flex-flow:row nowrap;flex-grow:1;align-items:center;gap:1rem}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-grow:1;align-items:center;overflow:visible}[part=start],[part=end]{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:visible}[part=end]{gap:1rem}[name=start]::slotted(*){margin-inline-end:1rem}::slotted(igc-icon){cursor:pointer;transition:color .15s cubic-bezier(0.25, 0.46, 0.45, 0.94)}::slotted(*){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);line-height:normal;margin:0}`;\n"]}
+{"version":3,"file":"navbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/navbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,orEAAorE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;font-family:var(--ig-font-family);z-index:4}:host ::slotted(igc-icon){--ig-size: 3}:host ::slotted(igc-button){--ig-size: 2}[part=base]{--ig-size: 1;display:inherit;position:relative;flex-flow:row nowrap;flex-grow:1;align-items:center;gap:1rem}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-grow:1;align-items:center;overflow:visible}[part=start],[part=end]{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:visible}[part=end]{gap:1rem}[name=start]::slotted(*){margin-inline-end:1rem}::slotted(igc-icon){cursor:pointer;transition:color .15s cubic-bezier(0.25, 0.46, 0.45, 0.94)}::slotted(*){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);line-height:normal;margin:0}`;\n"]}

package/components/popover/themes/light/popover.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{position:fixed;overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{position:fixed;overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0}`;
 //# sourceMappingURL=popover.base.css.js.map

package/components/popover/themes/light/popover.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,s9BAAs9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{position:fixed;overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0}`;\n"]}
+{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8mCAA8mC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{position:fixed;overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0}`;\n"]}

package/components/progress/base.d.ts

@@ -1,12 +1,14 @@
 import { LitElement } from 'lit';
+import type { StyleInfo } from 'lit/directives/style-map.js';
 import type { StyleVariant } from '../types.js';
 export declare abstract class IgcProgressBaseComponent extends LitElement {
-    private __internals;
-    private _ticker;
-    protected assignedElements: Array<HTMLElement>;
-    protected progressIndicator: Element;
-    protected percentage: number;
-    protected progress: number;
+    private readonly __internals;
+    protected _assignedElements: HTMLElement[];
+    protected _base: HTMLElement;
+    protected _percentage: number;
+    protected _progress: number;
+    protected _hasFraction: boolean;
+    protected _styleInfo: StyleInfo;
     /**
      * Maximum value of the control.
      * @attr
@@ -47,16 +49,13 @@ export declare abstract class IgcProgressBaseComponent extends LitElement {
     labelFormat: string;
     protected indeterminateChange(): void;
     protected maxChange(): void;
-    protected valueChange(previous: number): void;
+    protected valueChange(): void;
     constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected updated(): void;
     private _updateARIA;
-    private _setProgress;
-    connectedCallback(): Promise<void>;
-    protected cancelAnimations(): void;
-    protected animateLabelTo(start: number, end: number): void;
+    private _updateProgress;
+    protected renderLabel(): import("lit-html").TemplateResult<1>;
     protected renderLabelFormat(): string;
     protected renderDefaultSlot(): import("lit-html").TemplateResult<1>;
-    protected renderLabelText(): string;
 }

package/components/progress/base.js

@@ -7,13 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { watch } from '../common/decorators/watch.js';
-import { asPercent, clamp, formatString } from '../common/util.js';
+import { asPercent, clamp, formatString, isEmpty, partNameMap, } from '../common/util.js';
 export class IgcProgressBaseComponent extends LitElement {
     indeterminateChange() {
-        this.cancelAnimations();
         if (!this.indeterminate) {
-            this._setProgress();
-            this.animateLabelTo(0, this.value);
+            this._updateProgress();
         }
     }
     maxChange() {
@@ -21,24 +19,27 @@ export class IgcProgressBaseComponent extends LitElement {
         if (this.value > this.max) {
             this.value = this.max;
         }
-        this._setProgress();
         if (!this.indeterminate) {
-            cancelAnimationFrame(this._ticker);
-            this.animateLabelTo(this.max, this.value);
+            this._updateProgress();
         }
     }
-    valueChange(previous) {
+    valueChange() {
         this.value = clamp(this.value, 0, this.max);
-        this._setProgress();
         if (!this.indeterminate) {
-            cancelAnimationFrame(this._ticker);
-            this.animateLabelTo(previous, this.value);
+            this._updateProgress();
         }
     }
     constructor() {
         super();
-        this.percentage = 0;
-        this.progress = 0;
+        this._percentage = 0;
+        this._progress = 0;
+        this._hasFraction = false;
+        this._styleInfo = {
+            '--_progress-whole': '0.00',
+            '--_progress-integer': '0',
+            '--_progress-fraction': '0',
+            '--_transition-duration': '0ms',
+        };
         this.max = 100;
         this.value = 0;
         this.variant = 'primary';
@@ -46,8 +47,11 @@ export class IgcProgressBaseComponent extends LitElement {
         this.indeterminate = false;
         this.hideLabel = false;
         this.__internals = this.attachInternals();
-        this.__internals.role = 'progressbar';
-        this.__internals.ariaValueMin = '0';
+        Object.assign(this.__internals, {
+            role: 'progressbar',
+            ariaValueMin: '0',
+            ariaValueNow: '0',
+        });
     }
     createRenderRoot() {
         const root = super.createRenderRoot();
@@ -58,78 +62,63 @@ export class IgcProgressBaseComponent extends LitElement {
         this._updateARIA();
     }
     _updateARIA() {
-        const internals = this.__internals;
-        const text = this.labelFormat
-            ? this.renderLabelFormat()
-            : `${this.percentage}%`;
-        internals.ariaValueMax = `${this.max}`;
-        internals.ariaValueNow = this.indeterminate ? null : `${this.value}`;
-        internals.ariaValueText = this.indeterminate ? null : text;
-    }
-    _setProgress() {
-        this.progress = this.value / this.max;
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        await this.updateComplete;
-        if (!this.indeterminate) {
-            requestAnimationFrame(() => {
-                this._setProgress();
-                this.animateLabelTo(0, this.value);
-            });
-        }
-    }
-    cancelAnimations() {
-        cancelAnimationFrame(this._ticker);
-        this.progressIndicator?.getAnimations().forEach((animation) => {
-            if (animation instanceof CSSTransition) {
-                animation.cancel();
-            }
+        const text = this.labelFormat ? this.renderLabelFormat() : `${this.value}%`;
+        Object.assign(this.__internals, {
+            ariaValueMax: this.max.toString(),
+            ariaValueNow: this.indeterminate ? null : this.value.toString(),
+            ariaValueText: this.indeterminate ? null : text,
         });
     }
-    animateLabelTo(start, end) {
-        let t0;
-        const tick = (t1) => {
-            t0 = t0 ?? t1;
-            const delta = Math.min((t1 - t0) / Math.max(this.animationDuration, 1), 1);
-            this.percentage = Math.floor(asPercent(delta * (end - start) + start, this.max));
-            if (delta < 1) {
-                this._ticker = requestAnimationFrame(tick);
-            }
-            else {
-                cancelAnimationFrame(this._ticker);
-            }
+    _updateProgress() {
+        const percentage = asPercent(this.value, Math.max(1, this.max));
+        const fractionValue = Math.round((percentage % 1) * 100);
+        this._hasFraction = fractionValue > 0;
+        this._styleInfo = {
+            '--_progress-whole': percentage.toFixed(2),
+            '--_progress-integer': Math.floor(percentage),
+            '--_progress-fraction': fractionValue,
+            '--_transition-duration': `${this.animationDuration}ms`,
         };
-        requestAnimationFrame(tick);
+    }
+    renderLabel() {
+        const parts = partNameMap({
+            label: true,
+            value: true,
+            fraction: this._hasFraction,
+        });
+        return this.labelFormat
+            ? html `<span part=${parts}>${this.renderLabelFormat()}</span>`
+            : html `<span part="${parts} counter"></span>`;
     }
     renderLabelFormat() {
         return formatString(this.labelFormat, this.value, this.max);
     }
     renderDefaultSlot() {
-        const hasNoLabel = this.indeterminate || this.hideLabel || this.assignedElements.length;
+        const hideDefaultLabel = this.indeterminate || this.hideLabel || !isEmpty(this._assignedElements);
         return html `
       <slot part="label"></slot>
-      ${hasNoLabel
-            ? nothing
-            : html `<span part="label value">${this.renderLabelText()}</span>`}
+      ${hideDefaultLabel ? nothing : this.renderLabel()}
     `;
     }
-    renderLabelText() {
-        return this.labelFormat ? this.renderLabelFormat() : `${this.percentage}%`;
-    }
 }
 __decorate([
     queryAssignedElements()
-], IgcProgressBaseComponent.prototype, "assignedElements", void 0);
+], IgcProgressBaseComponent.prototype, "_assignedElements", void 0);
+__decorate([
+    query('[part="base"]', true)
+], IgcProgressBaseComponent.prototype, "_base", void 0);
 __decorate([
-    query('[part~="fill"]', true)
-], IgcProgressBaseComponent.prototype, "progressIndicator", void 0);
+    state()
+], IgcProgressBaseComponent.prototype, "_percentage", void 0);
+__decorate([
+    state()
+], IgcProgressBaseComponent.prototype, "_progress", void 0);
 __decorate([
     state()
-], IgcProgressBaseComponent.prototype, "percentage", void 0);
+], IgcProgressBaseComponent.prototype, "_hasFraction", void 0);
 __decorate([
     state()
-], IgcProgressBaseComponent.prototype, "progress", void 0);
+], IgcProgressBaseComponent.prototype, "_styleInfo", void 0);
 __decorate([
     property({ type: Number })
 ], IgcProgressBaseComponent.prototype, "max", void 0);
@@ -152,12 +141,12 @@ __decorate([
     property({ attribute: 'label-format' })
 ], IgcProgressBaseComponent.prototype, "labelFormat", void 0);
 __decorate([
-    watch('indeterminate', { waitUntilFirstUpdate: true })
+    watch('indeterminate')
 ], IgcProgressBaseComponent.prototype, "indeterminateChange", null);
 __decorate([
-    watch('max', { waitUntilFirstUpdate: true })
+    watch('max')
 ], IgcProgressBaseComponent.prototype, "maxChange", null);
 __decorate([
-    watch('value', { waitUntilFirstUpdate: true })
+    watch('value')
 ], 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 { LitElement, html, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\n\nimport { watch } from '../common/decorators/watch.js';\nimport { asPercent, clamp, formatString } from '../common/util.js';\nimport type { StyleVariant } from '../types.js';\n\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private __internals: ElementInternals;\n  private _ticker!: number;\n\n  @queryAssignedElements()\n  protected assignedElements!: Array<HTMLElement>;\n\n  @query('[part~=\"fill\"]', true)\n  protected progressIndicator!: Element;\n\n  @state()\n  protected percentage = 0;\n\n  @state()\n  protected progress = 0;\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', { waitUntilFirstUpdate: true })\n  protected indeterminateChange() {\n    this.cancelAnimations();\n\n    if (!this.indeterminate) {\n      this._setProgress();\n      this.animateLabelTo(0, this.value);\n    }\n  }\n\n  @watch('max', { waitUntilFirstUpdate: true })\n  protected maxChange() {\n    this.max = Math.max(0, this.max);\n\n    if (this.value > this.max) {\n      this.value = this.max;\n    }\n\n    this._setProgress();\n\n    if (!this.indeterminate) {\n      cancelAnimationFrame(this._ticker);\n      this.animateLabelTo(this.max, this.value);\n    }\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  protected valueChange(previous: number) {\n    this.value = clamp(this.value, 0, this.max);\n    this._setProgress();\n\n    if (!this.indeterminate) {\n      cancelAnimationFrame(this._ticker);\n      this.animateLabelTo(previous, this.value);\n    }\n  }\n\n  constructor() {\n    super();\n    this.__internals = this.attachInternals();\n\n    this.__internals.role = 'progressbar';\n    this.__internals.ariaValueMin = '0';\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 internals = this.__internals;\n    const text = this.labelFormat\n      ? this.renderLabelFormat()\n      : `${this.percentage}%`;\n\n    internals.ariaValueMax = `${this.max}`;\n    internals.ariaValueNow = this.indeterminate ? null : `${this.value}`;\n    internals.ariaValueText = this.indeterminate ? null : text;\n  }\n\n  private _setProgress() {\n    this.progress = this.value / this.max;\n  }\n\n  public override async connectedCallback() {\n    super.connectedCallback();\n\n    await this.updateComplete;\n    if (!this.indeterminate) {\n      requestAnimationFrame(() => {\n        this._setProgress();\n        this.animateLabelTo(0, this.value);\n      });\n    }\n  }\n\n  protected cancelAnimations() {\n    cancelAnimationFrame(this._ticker);\n    this.progressIndicator?.getAnimations().forEach((animation) => {\n      if (animation instanceof CSSTransition) {\n        animation.cancel();\n      }\n    });\n  }\n\n  protected animateLabelTo(start: number, end: number) {\n    let t0: number;\n\n    const tick = (t1: number) => {\n      t0 = t0 ?? t1;\n\n      const delta = Math.min(\n        (t1 - t0) / Math.max(this.animationDuration, 1),\n        1\n      );\n\n      this.percentage = Math.floor(\n        asPercent(delta * (end - start) + start, this.max)\n      );\n\n      if (delta < 1) {\n        this._ticker = requestAnimationFrame(tick);\n      } else {\n        cancelAnimationFrame(this._ticker);\n      }\n    };\n\n    requestAnimationFrame(tick);\n  }\n\n  protected renderLabelFormat() {\n    return formatString(this.labelFormat, this.value, this.max);\n  }\n\n  protected renderDefaultSlot() {\n    const hasNoLabel =\n      this.indeterminate || this.hideLabel || this.assignedElements.length;\n\n    return html`\n      <slot part=\"label\"></slot>\n      ${hasNoLabel\n        ? nothing\n        : html`<span part=\"label value\">${this.renderLabelText()}</span>`}\n    `;\n  }\n\n  protected renderLabelText() {\n    return this.labelFormat ? this.renderLabelFormat() : `${this.percentage}%`;\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/progress/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, 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 { watch } from '../common/decorators/watch.js';\nimport {\n  asPercent,\n  clamp,\n  formatString,\n  isEmpty,\n  partNameMap,\n} from '../common/util.js';\nimport type { StyleVariant } from '../types.js';\n\nexport abstract class IgcProgressBaseComponent extends LitElement {\n  private readonly __internals: ElementInternals;\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  constructor() {\n    super();\n    this.__internals = this.attachInternals();\n\n    Object.assign(this.__internals, {\n      role: 'progressbar',\n      ariaValueMin: '0',\n      ariaValueNow: '0',\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    Object.assign(this.__internals, {\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 = partNameMap({\n      label: true,\n      value: true,\n      fraction: this._hasFraction,\n    });\n\n    return this.labelFormat\n      ? html`<span part=${parts}>${this.renderLabelFormat()}</span>`\n      : html`<span part=\"${parts} counter\"></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"]}

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

@@ -30,7 +30,6 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
     private _gradientId;
     private _assignedGradients;
     protected renderSvg(): import("lit-html").TemplateResult<2>;
-    protected renderWrapper(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/progress/circular-progress.js

@@ -10,7 +10,7 @@ import { queryAssignedElements } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, partNameMap } from '../common/util.js';
+import { createCounter, isEmpty, partNameMap } 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';
@@ -25,20 +25,21 @@ let IgcCircularProgressComponent = IgcCircularProgressComponent_1 = class IgcCir
         registerComponent(IgcCircularProgressComponent_1, IgcCircularGradientComponent);
     }
     renderSvg() {
-        const parts = { indeterminate: this.indeterminate, track: true };
+        const parts = partNameMap({
+            indeterminate: this.indeterminate,
+            track: true,
+        });
         const styles = {
             stroke: `url(#${this._gradientId})`,
-            '--percentage': `${this.progress}`,
-            '--duration': `${this.animationDuration}ms`,
         };
-        const gradients = this._assignedGradients.length
+        const gradients = !isEmpty(this._assignedGradients)
             ? this._assignedGradients.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" />
       `;
         return svg `
-      <circle part=${partNameMap(parts)}/>
+      <circle part=${parts}/>
       <circle style=${styleMap(styles)} part="fill"/>
 
       <defs>
@@ -48,20 +49,19 @@ let IgcCircularProgressComponent = IgcCircularProgressComponent_1 = class IgcCir
       </defs>
     `;
     }
-    renderWrapper() {
-        const parts = {
+    render() {
+        const parts = partNameMap({
             svg: true,
             indeterminate: this.indeterminate,
-        };
+        });
         return html `
-      <svg part=${partNameMap(parts)}>${this.renderSvg()}</svg>
-      <slot name="gradient"></slot>
-      ${this.renderDefaultSlot()}
+      <div part="base" style=${styleMap(this._styleInfo)}>
+        <svg part=${parts}>${this.renderSvg()}</svg>
+        <slot name="gradient"></slot>
+        ${this.renderDefaultSlot()}
+      </div>
     `;
     }
-    render() {
-        return this.renderWrapper();
-    }
 };
 IgcCircularProgressComponent.tagName = 'igc-circular-progress';
 IgcCircularProgressComponent.styles = [styles, shared];

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;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC/D,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;AA0BnC,IAAM,4BAA4B,oCAAlC,MAAM,4BAA6B,SAAQ,wBAAwB;IAAnE;;QAcL,gBAAW,GAAG,qBAAqB,8BAA4B,CAAC,SAAS,EAAE,EAAE,CAAC;IAmDxF,CAAC;IA1DQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,8BAA4B,EAC5B,4BAA4B,CAC7B,CAAC;IACJ,CAAC;IAOS,SAAS;QACjB,MAAM,KAAK,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACjE,MAAM,MAAM,GAAG;YACb,MAAM,EAAE,QAAQ,IAAI,CAAC,WAAW,GAAG;YACnC,cAAc,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE;YAClC,YAAY,EAAE,GAAG,IAAI,CAAC,iBAAiB,IAAI;SAC5C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM;YAC9C,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,WAAW,CAAC,KAAK,CAAC;sBACjB,QAAQ,CAAC,MAAM,CAAC;;;+BAGP,IAAI,CAAC,WAAW;YACnC,SAAS;;;KAGhB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,MAAM,KAAK,GAAG;YACZ,GAAG,EAAE,IAAI;YACT,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC;QAEF,OAAO,IAAI,CAAA;kBACG,WAAW,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;;QAEhD,IAAI,CAAC,iBAAiB,EAAE;KAC3B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;IAC9B,CAAC;;AA/DsB,oCAAO,GAAG,uBAAuB,AAA1B,CAA2B;AAClC,mCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAEzB,sCAAS,GAAG,aAAa,EAAE,AAAlB,CAAmB;AAa5C;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wEACqB;AAjB9C,4BAA4B;IADhD,MAAM,CAAC,GAAG,CAAC;GACS,4BAA4B,CAiEhD;eAjEoB,4BAA4B","sourcesContent":["import { html, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter, partNameMap } 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 */\n@themes(all)\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!: Array<IgcCircularGradientComponent>;\n\n  protected renderSvg() {\n    const parts = { indeterminate: this.indeterminate, track: true };\n    const styles = {\n      stroke: `url(#${this._gradientId})`,\n      '--percentage': `${this.progress}`,\n      '--duration': `${this.animationDuration}ms`,\n    };\n\n    const gradients = this._assignedGradients.length\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=${partNameMap(parts)}/>\n      <circle style=${styleMap(styles)} part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this._gradientId} gradientTransform=\"rotate(90)\">\n          ${gradients}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected renderWrapper() {\n    const parts = {\n      svg: true,\n      indeterminate: this.indeterminate,\n    };\n\n    return html`\n      <svg part=${partNameMap(parts)}>${this.renderSvg()}</svg>\n      <slot name=\"gradient\"></slot>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n\n  protected override render() {\n    return this.renderWrapper();\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,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACxE,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;AA0BnC,IAAM,4BAA4B,oCAAlC,MAAM,4BAA6B,SAAQ,wBAAwB;IAAnE;;QAcL,gBAAW,GAAG,qBAAqB,8BAA4B,CAAC,SAAS,EAAE,EAAE,CAAC;IAkDxF,CAAC;IAzDQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,8BAA4B,EAC5B,4BAA4B,CAC7B,CAAC;IACJ,CAAC;IAOS,SAAS;QACjB,MAAM,KAAK,GAAG,WAAW,CAAC;YACxB,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC;QACH,MAAM,MAAM,GAAG;YACb,MAAM,EAAE,QAAQ,IAAI,CAAC,WAAW,GAAG;SACpC,CAAC;QAEF,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,KAAK;sBACJ,QAAQ,CAAC,MAAM,CAAC;;;+BAGP,IAAI,CAAC,WAAW;YACnC,SAAS;;;KAGhB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,KAAK,GAAG,WAAW,CAAC;YACxB,GAAG,EAAE,IAAI;YACT,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;oBACpC,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE;;UAEnC,IAAI,CAAC,iBAAiB,EAAE;;KAE7B,CAAC;IACJ,CAAC;;AA9DsB,oCAAO,GAAG,uBAAuB,AAA1B,CAA2B;AAClC,mCAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAEzB,sCAAS,GAAG,aAAa,EAAE,AAAlB,CAAmB;AAa5C;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wEACgB;AAjBzC,4BAA4B;IADhD,MAAM,CAAC,GAAG,CAAC;GACS,4BAA4B,CAgEhD;eAhEoB,4BAA4B","sourcesContent":["import { html, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter, isEmpty, partNameMap } 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 */\n@themes(all)\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  protected renderSvg() {\n    const parts = partNameMap({\n      indeterminate: this.indeterminate,\n      track: true,\n    });\n    const styles = {\n      stroke: `url(#${this._gradientId})`,\n    };\n\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=${parts}/>\n      <circle style=${styleMap(styles)} 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    const parts = partNameMap({\n      svg: true,\n      indeterminate: this.indeterminate,\n    });\n\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <svg part=${parts}>${this.renderSvg()}</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"]}