igniteui-webcomponents 7.1.2 → 7.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +51 -0
- package/components/banner/banner.d.ts +53 -17
- package/components/banner/banner.js +5 -0
- package/components/banner/banner.js.map +1 -1
- package/components/button/button-base.d.ts +80 -26
- package/components/button/button-base.js +64 -23
- package/components/button/button-base.js.map +1 -1
- package/components/button/button.d.ts +12 -3
- package/components/button/button.js +1 -1
- package/components/button/button.js.map +1 -1
- package/components/button/icon-button.d.ts +25 -9
- package/components/button/icon-button.js +2 -2
- package/components/button/icon-button.js.map +1 -1
- package/components/button-group/themes/shared/button/button.common.css.js +1 -1
- package/components/button-group/themes/shared/button/button.common.css.js.map +1 -1
- package/components/button-group/themes/shared/button/button.indigo.css.js +1 -1
- package/components/button-group/themes/shared/button/button.indigo.css.js.map +1 -1
- package/components/calendar/base.d.ts +5 -4
- package/components/calendar/base.js +3 -2
- package/components/calendar/base.js.map +1 -1
- package/components/calendar/calendar.js +17 -13
- package/components/calendar/calendar.js.map +1 -1
- package/components/calendar/days-view/days-view.d.ts +1 -0
- package/components/calendar/days-view/days-view.js +7 -4
- package/components/calendar/days-view/days-view.js.map +1 -1
- package/components/calendar/helpers.d.ts +1 -1
- package/components/calendar/helpers.js.map +1 -1
- package/components/chat/chat-message.js +8 -8
- package/components/chat/chat-message.js.map +1 -1
- package/components/chat/chat-state.d.ts +3 -1
- package/components/chat/chat-state.js +3 -2
- package/components/chat/chat-state.js.map +1 -1
- package/components/chat/chat.d.ts +5 -1
- package/components/chat/chat.js +14 -4
- package/components/chat/chat.js.map +1 -1
- package/components/checkbox/checkbox.js +1 -0
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/switch.js +1 -0
- package/components/checkbox/switch.js.map +1 -1
- package/components/combo/combo.d.ts +1 -0
- package/components/combo/combo.js +7 -0
- package/components/combo/combo.js.map +1 -1
- package/components/combo/controllers/navigation.js +3 -0
- package/components/combo/controllers/navigation.js.map +1 -1
- package/components/common/controllers/command.d.ts +62 -0
- package/components/common/controllers/command.js +25 -0
- package/components/common/controllers/command.js.map +1 -0
- package/components/common/controllers/id-resolver.d.ts +31 -0
- package/components/common/controllers/id-resolver.js +136 -0
- package/components/common/controllers/id-resolver.js.map +1 -0
- package/components/common/i18n/EN/calendar.resources.d.ts +16 -14
- package/components/common/i18n/EN/calendar.resources.js +1 -1
- package/components/common/i18n/EN/calendar.resources.js.map +1 -1
- package/components/common/i18n/EN/chat.resources.d.ts +10 -8
- package/components/common/i18n/EN/chat.resources.js.map +1 -1
- package/components/common/i18n/EN/date-picker.resources.d.ts +8 -0
- package/components/common/i18n/EN/date-picker.resources.js +8 -0
- package/components/common/i18n/EN/date-picker.resources.js.map +1 -0
- package/components/common/i18n/EN/date-range-picker.resources.d.ts +9 -7
- package/components/common/i18n/EN/date-range-picker.resources.js +1 -1
- package/components/common/i18n/EN/date-range-picker.resources.js.map +1 -1
- package/components/common/i18n/i18n-controller.d.ts +14 -11
- package/components/common/i18n/i18n-controller.js +33 -41
- package/components/common/i18n/i18n-controller.js.map +1 -1
- package/components/common/i18n/utils.d.ts +8 -2
- package/components/common/i18n/utils.js +52 -44
- package/components/common/i18n/utils.js.map +1 -1
- package/components/common/mixins/alert.d.ts +47 -9
- package/components/common/mixins/alert.js +55 -12
- package/components/common/mixins/alert.js.map +1 -1
- package/components/common/mixins/forms/associated.js +11 -0
- package/components/common/mixins/forms/associated.js.map +1 -1
- package/components/common/mixins/forms/form-transformers.d.ts +1 -1
- package/components/common/mixins/forms/form-transformers.js.map +1 -1
- package/components/common/mixins/forms/types.d.ts +5 -0
- package/components/common/mixins/forms/types.js.map +1 -1
- package/components/common/mixins/mask-behavior.d.ts +73 -0
- package/components/common/mixins/mask-behavior.js +159 -0
- package/components/common/mixins/mask-behavior.js.map +1 -0
- package/components/common/templates/input-shell.d.ts +24 -0
- package/components/common/templates/input-shell.js +43 -0
- package/components/common/templates/input-shell.js.map +1 -0
- package/components/common/templates/masked-input.d.ts +39 -0
- package/components/common/templates/masked-input.js +37 -0
- package/components/common/templates/masked-input.js.map +1 -0
- package/components/common/util.d.ts +11 -0
- package/components/common/util.js +20 -0
- package/components/common/util.js.map +1 -1
- package/components/date-picker/date-picker.d.ts +6 -4
- package/components/date-picker/date-picker.js +16 -5
- package/components/date-picker/date-picker.js.map +1 -1
- package/components/date-range-picker/date-range-input.d.ts +60 -0
- package/components/date-range-picker/date-range-input.js +251 -0
- package/components/date-range-picker/date-range-input.js.map +1 -0
- package/components/date-range-picker/date-range-mask-parser.d.ts +106 -0
- package/components/date-range-picker/date-range-mask-parser.js +121 -0
- package/components/date-range-picker/date-range-mask-parser.js.map +1 -0
- package/components/date-range-picker/date-range-picker.d.ts +17 -11
- package/components/date-range-picker/date-range-picker.js +89 -61
- package/components/date-range-picker/date-range-picker.js.map +1 -1
- package/components/date-range-picker/predefined-ranges-area.d.ts +4 -4
- package/components/date-range-picker/predefined-ranges-area.js +8 -4
- package/components/date-range-picker/predefined-ranges-area.js.map +1 -1
- package/components/date-range-picker/validators.d.ts +5 -19
- package/components/date-range-picker/validators.js +20 -16
- package/components/date-range-picker/validators.js.map +1 -1
- package/components/date-time-input/date-time-input.base.d.ts +155 -0
- package/components/date-time-input/date-time-input.base.js +275 -0
- package/components/date-time-input/date-time-input.base.js.map +1 -0
- package/components/date-time-input/date-time-input.d.ts +33 -122
- package/components/date-time-input/date-time-input.js +45 -258
- package/components/date-time-input/date-time-input.js.map +1 -1
- package/components/date-time-input/datetime-mask-parser.d.ts +11 -1
- package/components/date-time-input/datetime-mask-parser.js +5 -5
- package/components/date-time-input/datetime-mask-parser.js.map +1 -1
- package/components/dialog/dialog.d.ts +88 -31
- package/components/dialog/dialog.js +29 -31
- package/components/dialog/dialog.js.map +1 -1
- package/components/file-input/file-input.d.ts +1 -1
- package/components/input/input-base.d.ts +2 -10
- package/components/input/input-base.js +11 -57
- package/components/input/input-base.js.map +1 -1
- package/components/input/input.d.ts +1 -1
- package/components/input/input.js +1 -0
- package/components/input/input.js.map +1 -1
- package/components/input/themes/dark/input.shared.css.d.ts +1 -0
- package/components/input/themes/dark/input.shared.css.js +3 -0
- package/components/input/themes/dark/input.shared.css.js.map +1 -0
- package/components/input/themes/light/input.shared.css.js +1 -1
- package/components/input/themes/light/input.shared.css.js.map +1 -1
- package/components/input/themes/shared/input.common.css.js +1 -1
- package/components/input/themes/shared/input.common.css.js.map +1 -1
- package/components/input/themes/shared/input.material.css.js +1 -1
- package/components/input/themes/shared/input.material.css.js.map +1 -1
- package/components/input/themes/themes.js +4 -3
- package/components/input/themes/themes.js.map +1 -1
- package/components/mask-input/mask-input.d.ts +9 -4
- package/components/mask-input/mask-input.js +30 -36
- package/components/mask-input/mask-input.js.map +1 -1
- package/components/nav-drawer/nav-drawer.d.ts +93 -17
- package/components/nav-drawer/nav-drawer.js +148 -21
- package/components/nav-drawer/nav-drawer.js.map +1 -1
- package/components/nav-drawer/themes/container.base.css.js +1 -1
- package/components/nav-drawer/themes/container.base.css.js.map +1 -1
- package/components/nav-drawer/themes/shared/container/nav-drawer.common.css.js +1 -1
- package/components/nav-drawer/themes/shared/container/nav-drawer.common.css.js.map +1 -1
- package/components/nav-drawer/themes/shared/container/nav-drawer.fluent.css.js +1 -1
- package/components/nav-drawer/themes/shared/container/nav-drawer.fluent.css.js.map +1 -1
- package/components/nav-drawer/themes/shared/container/nav-drawer.indigo.css.js +1 -1
- package/components/nav-drawer/themes/shared/container/nav-drawer.indigo.css.js.map +1 -1
- package/components/radio/radio.js +1 -0
- package/components/radio/radio.js.map +1 -1
- package/components/snackbar/snackbar.d.ts +9 -5
- package/components/snackbar/snackbar.js +6 -8
- package/components/snackbar/snackbar.js.map +1 -1
- package/components/snackbar/themes/snackbar.base.css.js +1 -1
- package/components/snackbar/themes/snackbar.base.css.js.map +1 -1
- package/components/stepper/step.d.ts +1 -1
- package/components/stepper/step.js +4 -4
- package/components/stepper/step.js.map +1 -1
- package/components/stepper/stepper.js +5 -0
- package/components/stepper/stepper.js.map +1 -1
- package/components/stepper/themes/step/step.base.css.js +1 -1
- package/components/stepper/themes/step/step.base.css.js.map +1 -1
- package/components/stepper/themes/stepper/stepper.base.css.js +1 -1
- package/components/stepper/themes/stepper/stepper.base.css.js.map +1 -1
- package/components/toast/themes/toast.base.css.js +1 -1
- package/components/toast/themes/toast.base.css.js.map +1 -1
- package/components/toast/toast.d.ts +9 -2
- package/components/toast/toast.js +0 -2
- package/components/toast/toast.js.map +1 -1
- package/components/types.d.ts +4 -0
- package/components/types.js.map +1 -1
- package/custom-elements.json +34882 -28909
- package/igniteui-webcomponents.css-data.json +1 -1
- package/igniteui-webcomponents.html-data.json +1 -1
- package/index.d.ts +5 -2
- package/index.js +1 -1
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/skills/igniteui-wc-choose-components/SKILL.md +23 -6
- package/skills/igniteui-wc-choose-components/reference/mcp-setup.md +82 -0
- package/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md +4 -2
- package/web-types.json +2 -2
- package/components/mask-input/mask-input-base.d.ts +0 -51
- package/components/mask-input/mask-input-base.js +0 -146
- package/components/mask-input/mask-input-base.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/radio.base.css.js';\nimport { styles as shared } from './themes/shared/radio.common.css.js';\nimport { all } from './themes/themes.js';\nimport { getGroup } from './utils.js';\nimport { radioValidators } from './validators.js';\n\nexport interface IgcRadioChangeEventArgs {\n checked: boolean;\n value?: string;\n}\n\nexport interface IgcRadioComponentEventMap {\n igcChange: CustomEvent<IgcRadioChangeEventArgs>;\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n}\n\nlet nextId = 1;\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required 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 igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio input control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(\n EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>(\n LitElement\n )\n) {\n public static readonly tagName = 'igc-radio';\n protected static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcRadioComponent, IgcValidationContainerComponent);\n }\n\n protected override get __validators() {\n return radioValidators;\n }\n\n private readonly _inputId = `radio-${nextId++}`;\n private readonly _labelId = `radio-label-${this._inputId}`;\n private readonly _focusRingManager = addKeyboardFocusRing(this);\n private readonly _slots = addSlotController(this, {\n slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n onChange: this._handleSlotChange,\n });\n\n protected override readonly _formValue = createFormValueState(this, {\n initialValue: false,\n transformers: FormValueBooleanTransformers,\n });\n\n protected _value!: string;\n\n @query('input', true)\n protected readonly _input!: HTMLInputElement;\n\n @state()\n protected _hideLabel = true;\n\n @state()\n private _tabIndex = 0;\n\n /** Returns all radio elements from the group, that is having the same name property. */\n private get _radios() {\n return getGroup(this).radios;\n }\n\n /** All sibling radio elements of the one invoking the getter. */\n private get _siblings() {\n return getGroup(this).siblings;\n }\n\n /** All non-disabled radio elements from the group. */\n private get _active() {\n return getGroup(this).active;\n }\n\n /** All checked radio elements from the group. */\n private get _checkedRadios() {\n return getGroup(this).checked;\n }\n\n @property({ type: Boolean, reflect: true })\n public override set required(value: boolean) {\n super.required = value;\n\n if (this.hasUpdated) {\n for (const radio of this._siblings) {\n radio._validate();\n }\n }\n }\n\n public override get required(): boolean {\n return this._required;\n }\n\n /**\n * The value attribute of the control.\n * @attr\n */\n @property()\n public set value(value: string) {\n this._value = value;\n if (this.checked) {\n this._formValue.setValueAndFormState(this.checked);\n }\n }\n\n public get value(): string {\n return this._value;\n }\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n public set checked(value: boolean) {\n this._formValue.setValueAndFormState(value);\n this._tabIndex = this.checked ? 0 : -1;\n if (this.hasUpdated && this.checked) {\n this._updateCheckedState();\n }\n }\n\n public get checked(): boolean {\n return this._formValue.value;\n }\n\n /**\n * The label position of the radio control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: ToggleLabelPosition = 'after';\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n addKeybindings(this, {\n skip: () => this.disabled,\n bindingDefaults: { preventDefault: true, repeat: true },\n })\n .set(arrowLeft, () => this._navigate(isLTR(this) ? -1 : 1))\n .set(arrowRight, () => this._navigate(isLTR(this) ? 1 : -1))\n .set(arrowUp, () => this._navigate(-1))\n .set(arrowDown, () => this._navigate(1));\n }\n\n protected override async firstUpdated(): Promise<void> {\n await this.updateComplete;\n\n if (this.checked && this === last(this._checkedRadios)) {\n for (const radio of this._siblings) {\n radio.checked = false;\n radio.defaultChecked = false;\n }\n } else {\n this._validate();\n }\n }\n\n protected _handleSlotChange(): void {\n this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);\n }\n\n protected override _setDefaultValue(current: string | null): void {\n this._formValue.defaultValue = isDefined(current);\n for (const radio of this._siblings) {\n radio.defaultChecked = false;\n }\n }\n\n /** Simulates a click on the radio control. */\n public override click(): void {\n this._input.click();\n }\n\n /* alternateName: focusComponent */\n /** Sets focus on the radio control. */\n public override focus(options?: FocusOptions): void {\n this._input.focus(options);\n }\n\n /* alternateName: blurComponent */\n /** Removes focus from the radio control. */\n public override blur(): void {\n this._input.blur();\n }\n\n private _checkValidity(): boolean {\n return super.checkValidity();\n }\n\n private _reportValidity(): boolean {\n return super.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public override checkValidity(): boolean {\n for (const radio of this._siblings) {\n radio._checkValidity();\n }\n\n return this._checkValidity();\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public override reportValidity(): boolean {\n for (const radio of this._siblings) {\n radio._reportValidity();\n }\n\n return this._reportValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public override setCustomValidity(message: string): void {\n for (const radio of this._radios) {\n radio._validate(message);\n }\n }\n\n private _updateCheckedState(): void {\n for (const radio of this._siblings) {\n radio.checked = false;\n }\n }\n\n protected override formResetCallback(): void {\n super.formResetCallback();\n this._resetTabIndexes();\n this.updateComplete.then(() => this._validate());\n }\n\n /** Called after a form reset callback to restore default keyboard navigation. */\n private _resetTabIndexes(): void {\n const radios = this._radios;\n\n if (isEmpty(this._checkedRadios)) {\n for (const radio of radios) {\n radio._tabIndex = 0;\n }\n } else {\n for (const radio of radios) {\n radio._tabIndex = radio.checked ? 0 : -1;\n }\n }\n }\n\n protected _handleClick(event: PointerEvent) {\n event.stopPropagation();\n this._setTouchedState();\n\n if (this.checked) {\n return;\n }\n\n this.checked = true;\n this._input.focus();\n this.emitEvent('igcChange', {\n detail: {\n checked: this.checked,\n value: this.value,\n },\n });\n }\n\n protected _navigate(idx: number): void {\n const active = this._active;\n const next = wrap(0, active.length - 1, active.indexOf(this) + idx);\n const radio = active[next];\n\n this._setTouchedState();\n radio.focus();\n radio.checked = true;\n radio.emitEvent('igcChange', {\n detail: { checked: radio.checked, value: radio.value },\n });\n }\n\n protected _renderValidatorContainer(): TemplateResult {\n return IgcValidationContainerComponent.create(this);\n }\n\n protected override render() {\n const labelledBy = this.getAttribute('aria-labelledby');\n const describedBy = this._slots.hasAssignedElements('helper-text')\n ? 'helper-text'\n : nothing;\n const checked = this.checked;\n\n return html`\n <label\n part=${partMap({\n base: true,\n checked,\n focused: this._focusRingManager.focused,\n })}\n for=${this._inputId}\n >\n <input\n id=${this._inputId}\n type=\"radio\"\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n .checked=${live(checked)}\n tabindex=${this._tabIndex}\n aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n aria-describedby=${describedBy}\n @click=${this._handleClick}\n />\n <span part=${partMap({ control: true, checked })}>\n <span\n part=${partMap({ ripple: true, checked })}\n ?hidden=${this.disabled}\n ></span>\n </span>\n <span\n id=${this._labelId}\n part=${partMap({ label: true, checked })}\n ?hidden=${this._hideLabel}\n >\n <slot></slot>\n </span>\n </label>\n ${this._renderValidatorContainer()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-radio': IgcRadioComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/radio.base.css.js';\nimport { styles as shared } from './themes/shared/radio.common.css.js';\nimport { all } from './themes/themes.js';\nimport { getGroup } from './utils.js';\nimport { radioValidators } from './validators.js';\n\nexport interface IgcRadioChangeEventArgs {\n checked: boolean;\n value?: string;\n}\n\nexport interface IgcRadioComponentEventMap {\n igcChange: CustomEvent<IgcRadioChangeEventArgs>;\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n}\n\nlet nextId = 1;\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required 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 igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio input control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(\n EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>(\n LitElement\n )\n) {\n public static readonly tagName = 'igc-radio';\n protected static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcRadioComponent, IgcValidationContainerComponent);\n }\n\n protected override get __validators() {\n return radioValidators;\n }\n\n private readonly _inputId = `radio-${nextId++}`;\n private readonly _labelId = `radio-label-${this._inputId}`;\n private readonly _focusRingManager = addKeyboardFocusRing(this);\n private readonly _slots = addSlotController(this, {\n slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n onChange: this._handleSlotChange,\n });\n\n protected override readonly _formValue = createFormValueState(this, {\n initialValue: false,\n transformers: FormValueBooleanTransformers,\n });\n\n protected _value!: string;\n\n @query('input', true)\n protected readonly _input!: HTMLInputElement;\n\n @state()\n protected _hideLabel = true;\n\n @state()\n private _tabIndex = 0;\n\n /** Returns all radio elements from the group, that is having the same name property. */\n private get _radios() {\n return getGroup(this).radios;\n }\n\n /** All sibling radio elements of the one invoking the getter. */\n private get _siblings() {\n return getGroup(this).siblings;\n }\n\n /** All non-disabled radio elements from the group. */\n private get _active() {\n return getGroup(this).active;\n }\n\n /** All checked radio elements from the group. */\n private get _checkedRadios() {\n return getGroup(this).checked;\n }\n\n @property({ type: Boolean, reflect: true })\n public override set required(value: boolean) {\n super.required = value;\n\n if (this.hasUpdated) {\n for (const radio of this._siblings) {\n radio._validate();\n }\n }\n }\n\n public override get required(): boolean {\n return this._required;\n }\n\n /**\n * The value attribute of the control.\n * @attr\n */\n @property()\n public set value(value: string) {\n this._value = value;\n if (this.checked) {\n this._formValue.setValueAndFormState(this.checked);\n }\n }\n\n public get value(): string {\n return this._value;\n }\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n public set checked(value: boolean) {\n this._formValue.setValueAndFormState(value);\n this._tabIndex = this.checked ? 0 : -1;\n if (this.hasUpdated && this.checked) {\n this._updateCheckedState();\n }\n }\n\n public get checked(): boolean {\n return this._formValue.value;\n }\n\n /**\n * The label position of the radio control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: ToggleLabelPosition = 'after';\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n addKeybindings(this, {\n skip: () => this.disabled,\n bindingDefaults: { preventDefault: true, repeat: true },\n })\n .set(arrowLeft, () => this._navigate(isLTR(this) ? -1 : 1))\n .set(arrowRight, () => this._navigate(isLTR(this) ? 1 : -1))\n .set(arrowUp, () => this._navigate(-1))\n .set(arrowDown, () => this._navigate(1));\n }\n\n protected override async firstUpdated(): Promise<void> {\n await this.updateComplete;\n\n if (this.checked && this === last(this._checkedRadios)) {\n for (const radio of this._siblings) {\n radio.checked = false;\n radio.defaultChecked = false;\n }\n } else {\n this._validate();\n }\n }\n\n protected _handleSlotChange(): void {\n this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);\n }\n\n protected override _setDefaultValue(current: string | null): void {\n this._formValue.defaultValue = isDefined(current);\n for (const radio of this._siblings) {\n radio.defaultChecked = false;\n }\n }\n\n /** Simulates a click on the radio control. */\n public override click(): void {\n this._input.click();\n }\n\n /* alternateName: focusComponent */\n /** Sets focus on the radio control. */\n public override focus(options?: FocusOptions): void {\n this._input.focus(options);\n }\n\n /* alternateName: blurComponent */\n /** Removes focus from the radio control. */\n public override blur(): void {\n this._input.blur();\n }\n\n private _checkValidity(): boolean {\n return super.checkValidity();\n }\n\n private _reportValidity(): boolean {\n return super.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public override checkValidity(): boolean {\n for (const radio of this._siblings) {\n radio._checkValidity();\n }\n\n return this._checkValidity();\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public override reportValidity(): boolean {\n for (const radio of this._siblings) {\n radio._reportValidity();\n }\n\n return this._reportValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public override setCustomValidity(message: string): void {\n for (const radio of this._radios) {\n radio._validate(message);\n }\n }\n\n private _updateCheckedState(): void {\n for (const radio of this._siblings) {\n radio.checked = false;\n }\n }\n\n protected override formResetCallback(): void {\n super.formResetCallback();\n this._resetTabIndexes();\n this.updateComplete.then(() => this._validate());\n }\n\n /** Called after a form reset callback to restore default keyboard navigation. */\n private _resetTabIndexes(): void {\n const radios = this._radios;\n\n if (isEmpty(this._checkedRadios)) {\n for (const radio of radios) {\n radio._tabIndex = 0;\n }\n } else {\n for (const radio of radios) {\n radio._tabIndex = radio.checked ? 0 : -1;\n }\n }\n }\n\n protected _handleClick(event: PointerEvent) {\n event.stopPropagation();\n this._setTouchedState();\n\n if (this.checked) {\n return;\n }\n\n this.checked = true;\n this._input.focus();\n this.emitEvent('igcChange', {\n detail: {\n checked: this.checked,\n value: this.value,\n },\n });\n }\n\n protected _navigate(idx: number): void {\n const active = this._active;\n const next = wrap(0, active.length - 1, active.indexOf(this) + idx);\n const radio = active[next];\n\n this._setTouchedState();\n radio.focus();\n radio.checked = true;\n radio.emitEvent('igcChange', {\n detail: { checked: radio.checked, value: radio.value },\n });\n }\n\n protected _renderValidatorContainer(): TemplateResult {\n return IgcValidationContainerComponent.create(this);\n }\n\n protected override render() {\n const labelledBy = this.getAttribute('aria-labelledby');\n const describedBy = this._slots.hasAssignedElements('helper-text')\n ? 'helper-text'\n : nothing;\n const checked = this.checked;\n\n return html`\n <label\n part=${partMap({\n base: true,\n checked,\n focused: this._focusRingManager.focused,\n })}\n for=${this._inputId}\n >\n <input\n id=${this._inputId}\n type=\"radio\"\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n .checked=${live(checked)}\n tabindex=${this._tabIndex}\n aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n aria-describedby=${describedBy}\n @click=${this._handleClick}\n @keydown=${this._handleEnterKeydown}\n />\n <span part=${partMap({ control: true, checked })}>\n <span\n part=${partMap({ ripple: true, checked })}\n ?hidden=${this.disabled}\n ></span>\n </span>\n <span\n id=${this._labelId}\n part=${partMap({ label: true, checked })}\n ?hidden=${this._hideLabel}\n >\n <slot></slot>\n </span>\n </label>\n ${this._renderValidatorContainer()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-radio': IgcRadioComponent;\n }\n}\n"]}
|
|
@@ -8,10 +8,16 @@ declare const IgcSnackbarComponent_base: import("../common/mixins/constructor.js
|
|
|
8
8
|
* A snackbar component is used to provide feedback about an operation
|
|
9
9
|
* by showing a brief message at the bottom of the screen.
|
|
10
10
|
*
|
|
11
|
+
* The component integrates with the
|
|
12
|
+
* [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):
|
|
13
|
+
* an Ignite button or a native `<button>` with `command="--show"` / `"--hide"` /
|
|
14
|
+
* `"--toggle"` and `commandfor` pointing to this element will call the
|
|
15
|
+
* corresponding method declaratively without any JavaScript.
|
|
16
|
+
*
|
|
11
17
|
* @element igc-snackbar
|
|
12
18
|
*
|
|
13
19
|
* @slot - Default slot to render the snackbar content.
|
|
14
|
-
* @slot action - Renders the action part of the snackbar. Usually an interactive element (button)
|
|
20
|
+
* @slot action - Renders the action part of the snackbar. Usually an interactive element (button).
|
|
15
21
|
*
|
|
16
22
|
* @fires igcAction - Emitted when the snackbar action button is clicked.
|
|
17
23
|
*
|
|
@@ -24,13 +30,11 @@ export default class IgcSnackbarComponent extends IgcSnackbarComponent_base {
|
|
|
24
30
|
static readonly tagName = "igc-snackbar";
|
|
25
31
|
static styles: import("lit").CSSResult[];
|
|
26
32
|
static register(): void;
|
|
27
|
-
protected readonly _contentRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
|
|
28
|
-
protected readonly _player: import("../../animations/player.js").AnimationController;
|
|
29
33
|
/**
|
|
30
|
-
* The
|
|
34
|
+
* The text of the action button.
|
|
31
35
|
* @attr action-text
|
|
32
36
|
*/
|
|
33
|
-
actionText
|
|
37
|
+
actionText?: string;
|
|
34
38
|
constructor();
|
|
35
39
|
private _handleClick;
|
|
36
40
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
@@ -6,8 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html, nothing } from 'lit';
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
|
-
import { createRef, ref } from 'lit/directives/ref.js';
|
|
10
|
-
import { addAnimationController } from '../../animations/player.js';
|
|
11
9
|
import { addThemingController } from '../../theming/theming-controller.js';
|
|
12
10
|
import IgcButtonComponent from '../button/button.js';
|
|
13
11
|
import { registerComponent } from '../common/definitions/register.js';
|
|
@@ -24,8 +22,6 @@ export default class IgcSnackbarComponent extends EventEmitterMixin(IgcBaseAlert
|
|
|
24
22
|
}
|
|
25
23
|
constructor() {
|
|
26
24
|
super();
|
|
27
|
-
this._contentRef = createRef();
|
|
28
|
-
this._player = addAnimationController(this, this._contentRef);
|
|
29
25
|
addThemingController(this, all);
|
|
30
26
|
}
|
|
31
27
|
_handleClick() {
|
|
@@ -33,16 +29,18 @@ export default class IgcSnackbarComponent extends EventEmitterMixin(IgcBaseAlert
|
|
|
33
29
|
}
|
|
34
30
|
render() {
|
|
35
31
|
return html `
|
|
36
|
-
<div
|
|
32
|
+
<div part="base" .inert=${!this.open}>
|
|
37
33
|
<span part="message">
|
|
38
34
|
<slot></slot>
|
|
39
35
|
</span>
|
|
40
36
|
|
|
41
37
|
<slot name="action" part="action-container" @click=${this._handleClick}>
|
|
42
38
|
${this.actionText
|
|
43
|
-
? html
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
? html `
|
|
40
|
+
<igc-button type="button" part="action" variant="flat">
|
|
41
|
+
${this.actionText}
|
|
42
|
+
</igc-button>
|
|
43
|
+
`
|
|
46
44
|
: nothing}
|
|
47
45
|
</slot>
|
|
48
46
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AA4BzC,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,iBAAiB,CAGjE,yBAAyB,CAAC;aACH,YAAO,GAAG,cAAc,CAAC;aAClC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;IAC9D,CAAC;IASD;QACE,KAAK,EAAE,CAAC;QACR,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;gCACiB,CAAC,IAAI,CAAC,IAAI;;;;;6DAKmB,IAAI,CAAC,YAAY;YAClE,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;oBAEE,IAAI,CAAC,UAAU;;eAEpB;YACH,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;;AA7BM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;wDACZ","sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcBaseAlertLikeComponent } from '../common/mixins/alert.js';\nimport type { AbstractConstructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles as shared } from './themes/shared/snackbar.common.css.js';\nimport { styles } from './themes/snackbar.base.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcSnackbarComponentEventMap {\n igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * The component integrates with the\n * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\n * an Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` /\n * `\"--toggle\"` and `commandfor` pointing to this element will call the\n * corresponding method declaratively without any JavaScript.\n *\n * @element igc-snackbar\n *\n * @slot - Default slot to render the snackbar content.\n * @slot action - Renders the action part of the snackbar. Usually an interactive element (button).\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The default snackbar action button.\n * @csspart action-container - The area holding the actions.\n */\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n IgcSnackbarComponentEventMap,\n AbstractConstructor<IgcBaseAlertLikeComponent>\n>(IgcBaseAlertLikeComponent) {\n public static readonly tagName = 'igc-snackbar';\n public static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcSnackbarComponent, IgcButtonComponent);\n }\n\n /**\n * The text of the action button.\n * @attr action-text\n */\n @property({ attribute: 'action-text' })\n public actionText?: string;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n private _handleClick(): void {\n this.emitEvent('igcAction');\n }\n\n protected override render() {\n return html`\n <div part=\"base\" .inert=${!this.open}>\n <span part=\"message\">\n <slot></slot>\n </span>\n\n <slot name=\"action\" part=\"action-container\" @click=${this._handleClick}>\n ${this.actionText\n ? html`\n <igc-button type=\"button\" part=\"action\" variant=\"flat\">\n ${this.actionText}\n </igc-button>\n `\n : nothing}\n </slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-snackbar': IgcSnackbarComponent;\n }\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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{position:
|
|
2
|
+
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{--margin-block: 0.5rem;position:absolute;font-family:var(--ig-font-family);margin-block:var(--margin-block);border:none;background:none;position-area:center}:host igc-button{--ig-size: 2}:host([position=top]){align-self:start}:host([position=middle]){align-self:anchor-center}:host([position=bottom]){align-self:end}[part~=base]{display:flex;flex-wrap:row nowrap;align-items:center;justify-content:space-between;min-height:3rem;padding:max(var(--is-large, 1)*max(0.4375rem, -1 * 0.4375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.4375rem, -1 * 0.4375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.4375rem, -1 * 0.4375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:1.5rem;backface-visibility:hidden;backdrop-filter:blur(8px)}[part~=message]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);flex:1 1 50%}:host([action-text]) igc-button::part(base):hover{background:rgba(0,0,0,0)}:host([action-text]) igc-button::part(base):focus{box-shadow:none}:host(:not([open])) [part=base]{display:none}`;
|
|
3
3
|
//# sourceMappingURL=snackbar.base.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/snackbar/themes/snackbar.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"snackbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/snackbar/themes/snackbar.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,imGAAimG,CAAC","sourcesContent":["\n import { css } from 'lit';\n 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{--margin-block: 0.5rem;position:absolute;font-family:var(--ig-font-family);margin-block:var(--margin-block);border:none;background:none;position-area:center}:host igc-button{--ig-size: 2}:host([position=top]){align-self:start}:host([position=middle]){align-self:anchor-center}:host([position=bottom]){align-self:end}[part~=base]{display:flex;flex-wrap:row nowrap;align-items:center;justify-content:space-between;min-height:3rem;padding:max(var(--is-large, 1)*max(0.4375rem, -1 * 0.4375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.4375rem, -1 * 0.4375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.4375rem, -1 * 0.4375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:1.5rem;backface-visibility:hidden;backdrop-filter:blur(8px)}[part~=message]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);flex:1 1 50%}:host([action-text]) igc-button::part(base):hover{background:rgba(0,0,0,0)}:host([action-text]) igc-button::part(base):focus{box-shadow:none}:host(:not([open])) [part=base]{display:none}`;\n "]}
|
|
@@ -73,7 +73,7 @@ export default class IgcStepComponent extends LitElement {
|
|
|
73
73
|
private readonly _bodyPlayer;
|
|
74
74
|
private readonly _contentPlayer;
|
|
75
75
|
private readonly _slots;
|
|
76
|
-
private
|
|
76
|
+
private _stepperContext?;
|
|
77
77
|
private get _stepper();
|
|
78
78
|
private get _state();
|
|
79
79
|
private get _isHorizontal();
|
|
@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
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;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { consume } from '@lit/context';
|
|
8
7
|
import { html, LitElement, nothing } from 'lit';
|
|
9
8
|
import { property } from 'lit/decorators.js';
|
|
10
9
|
import { cache } from 'lit/directives/cache.js';
|
|
@@ -12,6 +11,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
|
|
|
12
11
|
import { EaseInOut } from '../../animations/easings.js';
|
|
13
12
|
import { addAnimationController } from '../../animations/player.js';
|
|
14
13
|
import { addThemingController } from '../../theming/theming-controller.js';
|
|
14
|
+
import { createAsyncContext } from '../common/controllers/async-consumer.js';
|
|
15
15
|
import { addSlotController, setSlots } from '../common/controllers/slot.js';
|
|
16
16
|
import { registerComponent } from '../common/definitions/register.js';
|
|
17
17
|
import { partMap } from '../common/part-map.js';
|
|
@@ -89,6 +89,9 @@ export default class IgcStepComponent extends LitElement {
|
|
|
89
89
|
this.disabled = false;
|
|
90
90
|
this.complete = false;
|
|
91
91
|
addThemingController(this, all);
|
|
92
|
+
createAsyncContext(this, STEPPER_CONTEXT, (context) => {
|
|
93
|
+
this._stepperContext = context;
|
|
94
|
+
});
|
|
92
95
|
}
|
|
93
96
|
willUpdate(changed) {
|
|
94
97
|
if (changed.has('active') ||
|
|
@@ -210,9 +213,6 @@ export default class IgcStepComponent extends LitElement {
|
|
|
210
213
|
`;
|
|
211
214
|
}
|
|
212
215
|
}
|
|
213
|
-
__decorate([
|
|
214
|
-
consume({ context: STEPPER_CONTEXT, subscribe: true })
|
|
215
|
-
], IgcStepComponent.prototype, "_stepperContext", void 0);
|
|
216
216
|
__decorate([
|
|
217
217
|
property({ type: Boolean, reflect: true })
|
|
218
218
|
], IgcStepComponent.prototype, "invalid", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.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 {\n HorizontalTransitionAnimation,\n StepperOrientation,\n StepperStepType,\n StepperTitlePosition,\n StepperVerticalAnimation,\n} from '../types.js';\nimport { bodyAnimations, contentAnimations } from './common/animations.js';\nimport { STEPPER_CONTEXT, type StepperContext } from './common/context.js';\nimport type { StepperState } from './common/state.js';\nimport type IgcStepperComponent from './stepper.js';\nimport { styles as shared } from './themes/step/shared/step.common.css.js';\nimport { styles } from './themes/step/step.base.css.js';\nimport { all } from './themes/step/themes.js';\n\n/**\n * A step component used within an `igc-stepper` to represent an individual step in a wizard-like workflow.\n *\n * @remarks\n * Each step has a header (with an indicator, title, and subtitle) and a content area.\n * Steps can be marked as `active`, `complete`, `disabled`, `optional`, or `invalid`\n * to control their appearance and behavior within the stepper.\n *\n * Custom indicators can be provided via the `indicator` slot, and the content area\n * is rendered in the default slot.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle have been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The step's `content`.\n *\n * @example\n * ```html\n * <igc-step>\n * <igc-icon slot=\"indicator\" name=\"home\"></igc-icon>\n * <span slot=\"title\">Home</span>\n * <span slot=\"subtitle\">Return to the home page</span>\n * <p>Welcome! This is the first step.</p>\n * </igc-step>\n * ```\n *\n * @example Step with state attributes\n * ```html\n * <igc-step complete>\n * <span slot=\"title\">Completed step</span>\n * <p>This step has been completed.</p>\n * </igc-step>\n *\n * <igc-step active invalid>\n * <span slot=\"title\">Current step</span>\n * <p>This step has validation errors.</p>\n * </igc-step>\n *\n * <igc-step disabled>\n * <span slot=\"title\">Disabled step</span>\n * <p>This step is not accessible.</p>\n * </igc-step>\n * ```\n */\nexport default class IgcStepComponent extends LitElement {\n public static readonly tagName = 'igc-step';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcStepComponent);\n }\n\n //#region Internal state and properties\n\n private readonly _bodyRef = createRef<HTMLElement>();\n private readonly _contentRef = createRef<HTMLElement>();\n\n private readonly _bodyPlayer = addAnimationController(this, this._bodyRef);\n private readonly _contentPlayer = addAnimationController(\n this,\n this._contentRef\n );\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots('indicator', 'title', 'subtitle'),\n });\n\n @consume({ context: STEPPER_CONTEXT, subscribe: true })\n private readonly _stepperContext?: StepperContext;\n\n private get _stepper(): IgcStepperComponent | undefined {\n return this._stepperContext?.stepper;\n }\n\n private get _state(): StepperState | undefined {\n return this._stepperContext?.state;\n }\n\n private get _isHorizontal(): boolean {\n return this._orientation === 'horizontal';\n }\n\n private get _hasTitle(): boolean {\n return this._slots.hasAssignedElements('title');\n }\n\n private get _hasSubtitle(): boolean {\n return this._slots.hasAssignedElements('subtitle');\n }\n\n private get _animation():\n | StepperVerticalAnimation\n | HorizontalTransitionAnimation {\n const animation = this._isHorizontal\n ? this._stepper?.horizontalAnimation\n : this._stepper?.verticalAnimation;\n\n return animation ?? (this._isHorizontal ? 'slide' : 'grow');\n }\n\n private get _animationDuration(): number {\n return this._stepper?.animationDuration ?? 320;\n }\n\n private get _contentTop(): boolean {\n return this._stepper?.contentTop ?? false;\n }\n\n private get _index(): number {\n return this._stepper?.steps.indexOf(this) ?? -1;\n }\n\n private get _orientation(): StepperOrientation {\n return this._stepper?.orientation ?? 'horizontal';\n }\n\n private get _titlePosition(): StepperTitlePosition {\n return this._stepper?.titlePosition ?? 'auto';\n }\n\n private get _stepType(): StepperStepType {\n return this._stepper?.stepType ?? 'full';\n }\n\n private get _previousComplete(): boolean {\n return this._state?.get(this)?.previousCompleted ?? false;\n }\n\n private get _visited(): boolean {\n return this._state?.get(this)?.visited ?? false;\n }\n\n private get _isAccessible(): boolean {\n return this._state?.isAccessible(this) ?? true;\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /**\n * Whether the step is invalid.\n *\n * Invalid steps are styled with an error state and are not\n * interactive when the stepper is in linear mode.\n *\n * @attr invalid\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Whether the step is active.\n *\n * Active steps are styled with an active state and their content is visible.\n *\n * @attr active\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * Whether the step is optional.\n *\n * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n * if optional step is invalid the user could still move to the next step.\n *\n * @attr optional\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public optional = false;\n\n /**\n * Whether the step is disabled.\n *\n * Disabled steps are styled with a disabled state and are not interactive.\n *\n * @attr disabled\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /**\n * Whether the step is completed.\n *\n * @attr complete\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public complete = false;\n\n //#endregion\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (\n changed.has('active') ||\n changed.has('complete') ||\n changed.has('disabled') ||\n changed.has('invalid') ||\n changed.has('optional')\n ) {\n this._state?.onStepPropertyChanged(this, changed);\n }\n }\n\n /**\n * @hidden @internal\n * @deprecated since 5.4.0. Use the Stepper's `navigateTo` method instead.\n */\n public async toggleAnimation(\n type: 'in' | 'out',\n direction: 'normal' | 'reverse' = 'normal'\n ) {\n const bodyAnimation = bodyAnimations.get(this._animation)!.get(type)!;\n const contentAnimation = contentAnimations.get(this._animation)!.get(type)!;\n const bodyHeight = getComputedStyle(this).getPropertyValue(\n '--vertical-body-height'\n );\n\n const options: KeyframeAnimationOptions = {\n duration: this._animationDuration,\n easing: EaseInOut.Quad,\n direction,\n };\n\n const step = {\n height: bodyHeight,\n };\n\n const result = await Promise.all([\n this._bodyPlayer.playExclusive(\n bodyAnimation({ keyframe: options, step })\n ),\n this._contentPlayer.playExclusive(\n contentAnimation({ keyframe: options, step })\n ),\n ]);\n\n return result.every(Boolean);\n }\n\n private get _headerContainerParts() {\n return {\n 'header-container': true,\n disabled: !this._isAccessible,\n 'complete-start': this.complete,\n 'complete-end': this._previousComplete,\n optional: this.optional,\n invalid:\n this.invalid && this._visited && !this.active && this._isAccessible,\n top: this._titlePosition === 'top',\n bottom:\n this._titlePosition === 'bottom' ||\n (this._isHorizontal && this._titlePosition === 'auto'),\n start: this._titlePosition === 'start',\n end:\n this._titlePosition === 'end' ||\n (!this._isHorizontal && this._titlePosition === 'auto'),\n };\n }\n\n private get _textParts() {\n const hasText = this._hasTitle || this._hasSubtitle;\n\n return {\n text: true,\n empty:\n this._stepType === 'indicator' ||\n (this._stepType === 'full' && !hasText),\n };\n }\n\n private _renderIndicator() {\n return this._stepType !== 'title'\n ? html`\n <div part=\"indicator\">\n <slot name=\"indicator\">\n <span>${this._index + 1}</span>\n </slot>\n </div>\n `\n : nothing;\n }\n\n private _renderTitleAndSubtitle() {\n return html`\n <div part=${partMap(this._textParts)}>\n <div part=\"title\">\n <slot name=\"title\"></slot>\n </div>\n <div part=\"subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n `;\n }\n\n private _renderHeader() {\n const index = this._index + 1;\n const size = this._stepper?.steps.length ?? 0;\n\n return html`\n <div part=${partMap(this._headerContainerParts)}>\n <div\n data-step-header\n role=\"tab\"\n part=\"header\"\n id=\"igc-step-header-${index}\"\n aria-selected=${this.active}\n aria-controls=\"igc-step-content-${index}\"\n aria-posinset=${index}\n aria-setsize=${size}\n tabindex=${this.active ? 0 : -1}\n >\n ${this._renderIndicator()} ${this._renderTitleAndSubtitle()}\n </div>\n </div>\n `;\n }\n\n private _renderContent() {\n const index = this._index + 1;\n\n return html`\n <div\n ${ref(this._bodyRef)}\n id=\"igc-step-content-${index}\"\n part=\"body\"\n role=\"tabpanel\"\n aria-labelledby=\"igc-step-header-${index}\"\n >\n <div ${ref(this._contentRef)} part=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n protected override render() {\n const renderBeforeHeader = this._contentTop && this._isHorizontal;\n\n return html`\n ${cache(\n renderBeforeHeader\n ? html`${this._renderContent()} ${this._renderHeader()}`\n : html`${this._renderHeader()} ${this._renderContent()}`\n )}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-step': IgcStepComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { createAsyncContext } from '../common/controllers/async-consumer.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 {\n HorizontalTransitionAnimation,\n StepperOrientation,\n StepperStepType,\n StepperTitlePosition,\n StepperVerticalAnimation,\n} from '../types.js';\nimport { bodyAnimations, contentAnimations } from './common/animations.js';\nimport { STEPPER_CONTEXT, type StepperContext } from './common/context.js';\nimport type { StepperState } from './common/state.js';\nimport type IgcStepperComponent from './stepper.js';\nimport { styles as shared } from './themes/step/shared/step.common.css.js';\nimport { styles } from './themes/step/step.base.css.js';\nimport { all } from './themes/step/themes.js';\n\n/**\n * A step component used within an `igc-stepper` to represent an individual step in a wizard-like workflow.\n *\n * @remarks\n * Each step has a header (with an indicator, title, and subtitle) and a content area.\n * Steps can be marked as `active`, `complete`, `disabled`, `optional`, or `invalid`\n * to control their appearance and behavior within the stepper.\n *\n * Custom indicators can be provided via the `indicator` slot, and the content area\n * is rendered in the default slot.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle have been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The step's `content`.\n *\n * @example\n * ```html\n * <igc-step>\n * <igc-icon slot=\"indicator\" name=\"home\"></igc-icon>\n * <span slot=\"title\">Home</span>\n * <span slot=\"subtitle\">Return to the home page</span>\n * <p>Welcome! This is the first step.</p>\n * </igc-step>\n * ```\n *\n * @example Step with state attributes\n * ```html\n * <igc-step complete>\n * <span slot=\"title\">Completed step</span>\n * <p>This step has been completed.</p>\n * </igc-step>\n *\n * <igc-step active invalid>\n * <span slot=\"title\">Current step</span>\n * <p>This step has validation errors.</p>\n * </igc-step>\n *\n * <igc-step disabled>\n * <span slot=\"title\">Disabled step</span>\n * <p>This step is not accessible.</p>\n * </igc-step>\n * ```\n */\nexport default class IgcStepComponent extends LitElement {\n public static readonly tagName = 'igc-step';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcStepComponent);\n }\n\n //#region Internal state and properties\n\n private readonly _bodyRef = createRef<HTMLElement>();\n private readonly _contentRef = createRef<HTMLElement>();\n\n private readonly _bodyPlayer = addAnimationController(this, this._bodyRef);\n private readonly _contentPlayer = addAnimationController(\n this,\n this._contentRef\n );\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots('indicator', 'title', 'subtitle'),\n });\n\n private _stepperContext?: StepperContext;\n\n private get _stepper(): IgcStepperComponent | undefined {\n return this._stepperContext?.stepper;\n }\n\n private get _state(): StepperState | undefined {\n return this._stepperContext?.state;\n }\n\n private get _isHorizontal(): boolean {\n return this._orientation === 'horizontal';\n }\n\n private get _hasTitle(): boolean {\n return this._slots.hasAssignedElements('title');\n }\n\n private get _hasSubtitle(): boolean {\n return this._slots.hasAssignedElements('subtitle');\n }\n\n private get _animation():\n | StepperVerticalAnimation\n | HorizontalTransitionAnimation {\n const animation = this._isHorizontal\n ? this._stepper?.horizontalAnimation\n : this._stepper?.verticalAnimation;\n\n return animation ?? (this._isHorizontal ? 'slide' : 'grow');\n }\n\n private get _animationDuration(): number {\n return this._stepper?.animationDuration ?? 320;\n }\n\n private get _contentTop(): boolean {\n return this._stepper?.contentTop ?? false;\n }\n\n private get _index(): number {\n return this._stepper?.steps.indexOf(this) ?? -1;\n }\n\n private get _orientation(): StepperOrientation {\n return this._stepper?.orientation ?? 'horizontal';\n }\n\n private get _titlePosition(): StepperTitlePosition {\n return this._stepper?.titlePosition ?? 'auto';\n }\n\n private get _stepType(): StepperStepType {\n return this._stepper?.stepType ?? 'full';\n }\n\n private get _previousComplete(): boolean {\n return this._state?.get(this)?.previousCompleted ?? false;\n }\n\n private get _visited(): boolean {\n return this._state?.get(this)?.visited ?? false;\n }\n\n private get _isAccessible(): boolean {\n return this._state?.isAccessible(this) ?? true;\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /**\n * Whether the step is invalid.\n *\n * Invalid steps are styled with an error state and are not\n * interactive when the stepper is in linear mode.\n *\n * @attr invalid\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Whether the step is active.\n *\n * Active steps are styled with an active state and their content is visible.\n *\n * @attr active\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * Whether the step is optional.\n *\n * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n * if optional step is invalid the user could still move to the next step.\n *\n * @attr optional\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public optional = false;\n\n /**\n * Whether the step is disabled.\n *\n * Disabled steps are styled with a disabled state and are not interactive.\n *\n * @attr disabled\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /**\n * Whether the step is completed.\n *\n * @attr complete\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public complete = false;\n\n //#endregion\n\n constructor() {\n super();\n\n addThemingController(this, all);\n createAsyncContext(this, STEPPER_CONTEXT, (context) => {\n this._stepperContext = context;\n });\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (\n changed.has('active') ||\n changed.has('complete') ||\n changed.has('disabled') ||\n changed.has('invalid') ||\n changed.has('optional')\n ) {\n this._state?.onStepPropertyChanged(this, changed);\n }\n }\n\n /**\n * @hidden @internal\n * @deprecated since 5.4.0. Use the Stepper's `navigateTo` method instead.\n */\n public async toggleAnimation(\n type: 'in' | 'out',\n direction: 'normal' | 'reverse' = 'normal'\n ) {\n const bodyAnimation = bodyAnimations.get(this._animation)!.get(type)!;\n const contentAnimation = contentAnimations.get(this._animation)!.get(type)!;\n const bodyHeight = getComputedStyle(this).getPropertyValue(\n '--vertical-body-height'\n );\n\n const options: KeyframeAnimationOptions = {\n duration: this._animationDuration,\n easing: EaseInOut.Quad,\n direction,\n };\n\n const step = {\n height: bodyHeight,\n };\n\n const result = await Promise.all([\n this._bodyPlayer.playExclusive(\n bodyAnimation({ keyframe: options, step })\n ),\n this._contentPlayer.playExclusive(\n contentAnimation({ keyframe: options, step })\n ),\n ]);\n\n return result.every(Boolean);\n }\n\n private get _headerContainerParts() {\n return {\n 'header-container': true,\n disabled: !this._isAccessible,\n 'complete-start': this.complete,\n 'complete-end': this._previousComplete,\n optional: this.optional,\n invalid:\n this.invalid && this._visited && !this.active && this._isAccessible,\n top: this._titlePosition === 'top',\n bottom:\n this._titlePosition === 'bottom' ||\n (this._isHorizontal && this._titlePosition === 'auto'),\n start: this._titlePosition === 'start',\n end:\n this._titlePosition === 'end' ||\n (!this._isHorizontal && this._titlePosition === 'auto'),\n };\n }\n\n private get _textParts() {\n const hasText = this._hasTitle || this._hasSubtitle;\n\n return {\n text: true,\n empty:\n this._stepType === 'indicator' ||\n (this._stepType === 'full' && !hasText),\n };\n }\n\n private _renderIndicator() {\n return this._stepType !== 'title'\n ? html`\n <div part=\"indicator\">\n <slot name=\"indicator\">\n <span>${this._index + 1}</span>\n </slot>\n </div>\n `\n : nothing;\n }\n\n private _renderTitleAndSubtitle() {\n return html`\n <div part=${partMap(this._textParts)}>\n <div part=\"title\">\n <slot name=\"title\"></slot>\n </div>\n <div part=\"subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n `;\n }\n\n private _renderHeader() {\n const index = this._index + 1;\n const size = this._stepper?.steps.length ?? 0;\n\n return html`\n <div part=${partMap(this._headerContainerParts)}>\n <div\n data-step-header\n role=\"tab\"\n part=\"header\"\n id=\"igc-step-header-${index}\"\n aria-selected=${this.active}\n aria-controls=\"igc-step-content-${index}\"\n aria-posinset=${index}\n aria-setsize=${size}\n tabindex=${this.active ? 0 : -1}\n >\n ${this._renderIndicator()} ${this._renderTitleAndSubtitle()}\n </div>\n </div>\n `;\n }\n\n private _renderContent() {\n const index = this._index + 1;\n\n return html`\n <div\n ${ref(this._bodyRef)}\n id=\"igc-step-content-${index}\"\n part=\"body\"\n role=\"tabpanel\"\n aria-labelledby=\"igc-step-header-${index}\"\n >\n <div ${ref(this._contentRef)} part=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n protected override render() {\n const renderBeforeHeader = this._contentTop && this._isHorizontal;\n\n return html`\n ${cache(\n renderBeforeHeader\n ? html`${this._renderContent()} ${this._renderHeader()}`\n : html`${this._renderHeader()} ${this._renderContent()}`\n )}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-step': IgcStepComponent;\n }\n}\n"]}
|
|
@@ -93,6 +93,11 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
|
|
|
93
93
|
if (properties.has('linear')) {
|
|
94
94
|
this._state.setVisitedState(this.linear);
|
|
95
95
|
}
|
|
96
|
+
if (properties.has('horizontalAnimation') ||
|
|
97
|
+
properties.has('animationDuration')) {
|
|
98
|
+
const duration = this.horizontalAnimation !== 'none' ? this.animationDuration : 0;
|
|
99
|
+
this.style.setProperty('--animation-duration', `${duration}ms`);
|
|
100
|
+
}
|
|
96
101
|
super.update(properties);
|
|
97
102
|
}
|
|
98
103
|
_skipKeyboard(_, event) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n endKey,\n homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n addSafeEventListener,\n first,\n getElementFromPath,\n getRoot,\n isLTR,\n last,\n wrap,\n} from '../common/util.js';\nimport type {\n HorizontalTransitionAnimation,\n StepperOrientation,\n StepperStepType,\n StepperTitlePosition,\n StepperVerticalAnimation,\n} from '../types.js';\nimport { STEPPER_CONTEXT } from './common/context.js';\nimport { createStepperState } from './common/state.js';\nimport type {\n IgcActiveStepChangedEventArgs,\n IgcActiveStepChangingEventArgs,\n IgcStepperComponentEventMap,\n} from './common/types.js';\nimport IgcStepComponent from './step.js';\nimport { styles } from './themes/stepper/stepper.base.css.js';\nimport { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';\nimport { styles as fluent } from './themes/stepper/stepper.fluent.css.js';\nimport { styles as indigo } from './themes/stepper/stepper.indigo.css.js';\n\nconst STEPPER_SYNC_PROPERTIES: (keyof IgcStepperComponent)[] = [\n 'orientation',\n 'stepType',\n 'contentTop',\n 'verticalAnimation',\n 'horizontalAnimation',\n 'animationDuration',\n 'titlePosition',\n];\n\n/**\n * A stepper component that provides a wizard-like workflow by dividing content into logical steps.\n *\n * @remarks\n * The stepper component allows the user to navigate between multiple `igc-step` elements.\n * It supports horizontal and vertical orientation, linear and non-linear navigation,\n * keyboard navigation, and provides API methods to control the active step.\n *\n * In linear mode, the user can only advance to the next step if the current step is valid\n * (not marked as `invalid`).\n *\n * @element igc-stepper\n *\n * @slot - Renders `igc-step` components inside the default slot.\n *\n * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.\n * @fires igcActiveStepChanged - Emitted after the active step has changed.\n *\n * @example\n * ```html\n * <igc-stepper>\n * <igc-step>\n * <span slot=\"title\">Step 1</span>\n * <p>Step 1 content</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Step 2</span>\n * <p>Step 2 content</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n *\n * @example Linear stepper with vertical orientation\n * ```html\n * <igc-stepper orientation=\"vertical\" linear>\n * <igc-step complete>\n * <span slot=\"title\">Completed step</span>\n * <p>This step is already complete.</p>\n * </igc-step>\n * <igc-step active>\n * <span slot=\"title\">Current step</span>\n * <p>Fill in the details to proceed.</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Next step</span>\n * <p>Upcoming content.</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n */\nexport default class IgcStepperComponent extends EventEmitterMixin<\n IgcStepperComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-stepper';\n public static styles = styles;\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcStepperComponent, IgcStepComponent);\n }\n\n //#region Internal state and properties\n\n private readonly _state = createStepperState();\n\n private readonly _contextProvider = new ContextProvider(this, {\n context: STEPPER_CONTEXT,\n initialValue: {\n stepper: this,\n state: this._state,\n },\n });\n\n private readonly _internals = addInternalsController(this, {\n initialARIA: {\n role: 'tablist',\n },\n });\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots(),\n onChange: this._handleSlotChange,\n });\n\n private get _isHorizontal(): boolean {\n return this.orientation === 'horizontal';\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /** Returns all of the stepper's steps. */\n public get steps(): readonly IgcStepComponent[] {\n return this._state.steps;\n }\n\n /**\n * The orientation of the stepper.\n *\n * @attr orientation\n * @default 'horizontal'\n */\n @property({ reflect: true })\n public orientation: StepperOrientation = 'horizontal';\n\n /**\n * The visual type of the steps.\n *\n * @attr step-type\n * @default 'full'\n */\n @property({ reflect: true, attribute: 'step-type' })\n public stepType: StepperStepType = 'full';\n\n /**\n * Whether the stepper is linear.\n *\n * @remarks\n * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.\n *\n * @attr linear\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public linear = false;\n\n /**\n * Whether the content is displayed above the steps.\n *\n * @attr content-top\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'content-top' })\n public contentTop = false;\n\n /**\n * The animation type when in vertical mode.\n *\n * @attr vertical-animation\n * @default 'grow'\n */\n @property({ attribute: 'vertical-animation' })\n public verticalAnimation: StepperVerticalAnimation = 'grow';\n\n /**\n * The animation type when in horizontal mode.\n *\n * @attr horizontal-animation\n * @default 'slide'\n */\n @property({ attribute: 'horizontal-animation' })\n public horizontalAnimation: HorizontalTransitionAnimation = 'slide';\n\n /**\n * The animation duration in either vertical or horizontal mode in milliseconds.\n *\n * @attr animation-duration\n * @default 320\n */\n @property({ type: Number, attribute: 'animation-duration' })\n public animationDuration = 320;\n\n /**\n * The position of the steps title.\n *\n * @remarks\n * When the stepper is horizontally orientated the title is positioned below the indicator.\n * When the stepper is vertically orientated the title is positioned on the right side of the indicator.\n *\n * @attr title-position\n * @default 'auto'\n */\n @property({ reflect: false, attribute: 'title-position' })\n public titlePosition: StepperTitlePosition = 'auto';\n\n //#endregion\n\n constructor() {\n super();\n\n addSafeEventListener(this, 'click', this._handleInteraction);\n\n addThemingController(this, {\n light: { bootstrap, fluent, indigo },\n dark: { bootstrap, fluent, indigo },\n });\n\n addKeybindings(this, {\n skip: this._skipKeyboard,\n })\n .set(arrowUp, this._handleArrowUp)\n .set(arrowDown, this._handleArrowDown)\n .set(arrowLeft, this._handleArrowLeft)\n .set(arrowRight, this._handleArrowRight)\n .set(homeKey, this._handleHomeKey)\n .set(endKey, this._handleEndKey)\n .setActivateHandler(this._handleInteraction);\n }\n\n //#region Lifecycle hooks\n\n protected override update(properties: PropertyValues<this>): void {\n this._syncStepperAttributes(properties);\n\n if (properties.has('orientation')) {\n this._internals.setARIA({ ariaOrientation: this.orientation });\n }\n\n if (properties.has('linear')) {\n this._state.setVisitedState(this.linear);\n }\n\n super.update(properties);\n }\n\n //#endregion\n\n //#region Keyboard navigation handlers\n\n private _skipKeyboard(_: Element, event: KeyboardEvent): boolean {\n return !getElementFromPath('[data-step-header]', event);\n }\n\n private _handleHomeKey(): void {\n this._getStepHeader(first(this._state.accessibleSteps))?.focus();\n }\n\n private _handleEndKey(): void {\n this._getStepHeader(last(this._state.accessibleSteps))?.focus();\n }\n\n private _handleArrowDown(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getNextStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowUp(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getPreviousStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowLeft(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getPreviousStep(step)\n : this._getNextStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n private _handleArrowRight(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getNextStep(step)\n : this._getPreviousStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n //#endregion\n\n //#region Event handlers\n\n private _handleInteraction(event: Event): void {\n const step = getElementFromPath(IgcStepComponent.tagName, event);\n\n if (step && this._state.isAccessible(step)) {\n this._activateStep(step);\n }\n }\n\n private _handleSlotChange(): void {\n this._state.setSteps(\n this._slots.getAssignedElements('[default]', {\n selector: IgcStepComponent.tagName,\n })\n );\n\n this._state.stepsChanged();\n this.style.setProperty('--steps-count', this.steps.length.toString());\n }\n\n //#endregion\n\n //#region Internal methods\n\n private _syncStepperAttributes(properties: PropertyValues<this>): void {\n if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {\n this._contextProvider.updateObservers();\n }\n }\n\n private _animateSteps(\n nextStep: IgcStepComponent,\n currentStep: IgcStepComponent\n ): void {\n const steps = this._state.steps;\n\n if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {\n // Animate steps in ascending/next direction\n currentStep.toggleAnimation('out');\n nextStep.toggleAnimation('in');\n } else {\n // Animate steps in descending/previous direction\n currentStep.toggleAnimation('in', 'reverse');\n nextStep.toggleAnimation('out', 'reverse');\n }\n }\n\n private _emitChanging(args: IgcActiveStepChangingEventArgs): boolean {\n return this.emitEvent('igcActiveStepChanging', {\n detail: args,\n cancelable: true,\n });\n }\n\n private _emitChanged(args: IgcActiveStepChangedEventArgs): void {\n this.emitEvent('igcActiveStepChanged', {\n detail: args,\n });\n }\n\n private _activateStep(step: IgcStepComponent, shouldEmit = true): void {\n if (step === this._state.activeStep) {\n return;\n }\n\n if (!shouldEmit) {\n this._state.changeActiveStep(step);\n return;\n }\n\n const steps = this._state.steps;\n const activeIndex = steps.indexOf(this._state.activeStep!);\n const index = steps.indexOf(step);\n\n const args = { oldIndex: activeIndex, newIndex: index };\n\n if (!this._emitChanging(args)) {\n return;\n }\n\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n\n this._state.changeActiveStep(step);\n this._emitChanged({ index });\n }\n\n private _moveToNextStep(next = true): void {\n const step = this._state.getAdjacentStep(next);\n\n if (step) {\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n this._state.changeActiveStep(step);\n }\n }\n\n private _getNextStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);\n\n return steps[next];\n }\n\n private _getPreviousStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);\n\n return steps[previous];\n }\n\n private _getActiveStepComponent(): IgcStepComponent | null {\n const active = getRoot(this).activeElement;\n return active ? active.closest(IgcStepComponent.tagName) : null;\n }\n\n private _getStepHeader(step?: IgcStepComponent): HTMLElement | null {\n return step?.renderRoot.querySelector('[data-step-header]') ?? null;\n }\n\n //#endregion\n\n //#region Public API\n\n /** Activates the step at a given index. */\n public navigateTo(index: number): void {\n const step = this._state.steps[index];\n\n if (step) {\n this._activateStep(step, false);\n }\n }\n\n /** Activates the next enabled step. */\n public next(): void {\n this._moveToNextStep();\n }\n\n /** Activates the previous enabled step. */\n public prev(): void {\n this._moveToNextStep(false);\n }\n\n /**\n * Resets the stepper to its initial state i.e. activates the first step.\n *\n * @remarks\n * The steps' content will not be automatically reset.\n */\n public reset(): void {\n this._state.reset();\n }\n\n //#endregion\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-stepper': IgcStepperComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n endKey,\n homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n addSafeEventListener,\n first,\n getElementFromPath,\n getRoot,\n isLTR,\n last,\n wrap,\n} from '../common/util.js';\nimport type {\n HorizontalTransitionAnimation,\n StepperOrientation,\n StepperStepType,\n StepperTitlePosition,\n StepperVerticalAnimation,\n} from '../types.js';\nimport { STEPPER_CONTEXT } from './common/context.js';\nimport { createStepperState } from './common/state.js';\nimport type {\n IgcActiveStepChangedEventArgs,\n IgcActiveStepChangingEventArgs,\n IgcStepperComponentEventMap,\n} from './common/types.js';\nimport IgcStepComponent from './step.js';\nimport { styles } from './themes/stepper/stepper.base.css.js';\nimport { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';\nimport { styles as fluent } from './themes/stepper/stepper.fluent.css.js';\nimport { styles as indigo } from './themes/stepper/stepper.indigo.css.js';\n\nconst STEPPER_SYNC_PROPERTIES: (keyof IgcStepperComponent)[] = [\n 'orientation',\n 'stepType',\n 'contentTop',\n 'verticalAnimation',\n 'horizontalAnimation',\n 'animationDuration',\n 'titlePosition',\n];\n\n/**\n * A stepper component that provides a wizard-like workflow by dividing content into logical steps.\n *\n * @remarks\n * The stepper component allows the user to navigate between multiple `igc-step` elements.\n * It supports horizontal and vertical orientation, linear and non-linear navigation,\n * keyboard navigation, and provides API methods to control the active step.\n *\n * In linear mode, the user can only advance to the next step if the current step is valid\n * (not marked as `invalid`).\n *\n * @element igc-stepper\n *\n * @slot - Renders `igc-step` components inside the default slot.\n *\n * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.\n * @fires igcActiveStepChanged - Emitted after the active step has changed.\n *\n * @example\n * ```html\n * <igc-stepper>\n * <igc-step>\n * <span slot=\"title\">Step 1</span>\n * <p>Step 1 content</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Step 2</span>\n * <p>Step 2 content</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n *\n * @example Linear stepper with vertical orientation\n * ```html\n * <igc-stepper orientation=\"vertical\" linear>\n * <igc-step complete>\n * <span slot=\"title\">Completed step</span>\n * <p>This step is already complete.</p>\n * </igc-step>\n * <igc-step active>\n * <span slot=\"title\">Current step</span>\n * <p>Fill in the details to proceed.</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Next step</span>\n * <p>Upcoming content.</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n */\nexport default class IgcStepperComponent extends EventEmitterMixin<\n IgcStepperComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-stepper';\n public static styles = styles;\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcStepperComponent, IgcStepComponent);\n }\n\n //#region Internal state and properties\n\n private readonly _state = createStepperState();\n\n private readonly _contextProvider = new ContextProvider(this, {\n context: STEPPER_CONTEXT,\n initialValue: {\n stepper: this,\n state: this._state,\n },\n });\n\n private readonly _internals = addInternalsController(this, {\n initialARIA: {\n role: 'tablist',\n },\n });\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots(),\n onChange: this._handleSlotChange,\n });\n\n private get _isHorizontal(): boolean {\n return this.orientation === 'horizontal';\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /** Returns all of the stepper's steps. */\n public get steps(): readonly IgcStepComponent[] {\n return this._state.steps;\n }\n\n /**\n * The orientation of the stepper.\n *\n * @attr orientation\n * @default 'horizontal'\n */\n @property({ reflect: true })\n public orientation: StepperOrientation = 'horizontal';\n\n /**\n * The visual type of the steps.\n *\n * @attr step-type\n * @default 'full'\n */\n @property({ reflect: true, attribute: 'step-type' })\n public stepType: StepperStepType = 'full';\n\n /**\n * Whether the stepper is linear.\n *\n * @remarks\n * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.\n *\n * @attr linear\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public linear = false;\n\n /**\n * Whether the content is displayed above the steps.\n *\n * @attr content-top\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'content-top' })\n public contentTop = false;\n\n /**\n * The animation type when in vertical mode.\n *\n * @attr vertical-animation\n * @default 'grow'\n */\n @property({ attribute: 'vertical-animation' })\n public verticalAnimation: StepperVerticalAnimation = 'grow';\n\n /**\n * The animation type when in horizontal mode.\n *\n * @attr horizontal-animation\n * @default 'slide'\n */\n @property({ attribute: 'horizontal-animation' })\n public horizontalAnimation: HorizontalTransitionAnimation = 'slide';\n\n /**\n * The animation duration in either vertical or horizontal mode in milliseconds.\n *\n * @attr animation-duration\n * @default 320\n */\n @property({ type: Number, attribute: 'animation-duration' })\n public animationDuration = 320;\n\n /**\n * The position of the steps title.\n *\n * @remarks\n * When the stepper is horizontally orientated the title is positioned below the indicator.\n * When the stepper is vertically orientated the title is positioned on the right side of the indicator.\n *\n * @attr title-position\n * @default 'auto'\n */\n @property({ reflect: false, attribute: 'title-position' })\n public titlePosition: StepperTitlePosition = 'auto';\n\n //#endregion\n\n constructor() {\n super();\n\n addSafeEventListener(this, 'click', this._handleInteraction);\n\n addThemingController(this, {\n light: { bootstrap, fluent, indigo },\n dark: { bootstrap, fluent, indigo },\n });\n\n addKeybindings(this, {\n skip: this._skipKeyboard,\n })\n .set(arrowUp, this._handleArrowUp)\n .set(arrowDown, this._handleArrowDown)\n .set(arrowLeft, this._handleArrowLeft)\n .set(arrowRight, this._handleArrowRight)\n .set(homeKey, this._handleHomeKey)\n .set(endKey, this._handleEndKey)\n .setActivateHandler(this._handleInteraction);\n }\n\n //#region Lifecycle hooks\n\n protected override update(properties: PropertyValues<this>): void {\n this._syncStepperAttributes(properties);\n\n if (properties.has('orientation')) {\n this._internals.setARIA({ ariaOrientation: this.orientation });\n }\n\n if (properties.has('linear')) {\n this._state.setVisitedState(this.linear);\n }\n\n if (\n properties.has('horizontalAnimation') ||\n properties.has('animationDuration')\n ) {\n const duration =\n this.horizontalAnimation !== 'none' ? this.animationDuration : 0;\n\n this.style.setProperty('--animation-duration', `${duration}ms`);\n }\n\n super.update(properties);\n }\n\n //#endregion\n\n //#region Keyboard navigation handlers\n\n private _skipKeyboard(_: Element, event: KeyboardEvent): boolean {\n return !getElementFromPath('[data-step-header]', event);\n }\n\n private _handleHomeKey(): void {\n this._getStepHeader(first(this._state.accessibleSteps))?.focus();\n }\n\n private _handleEndKey(): void {\n this._getStepHeader(last(this._state.accessibleSteps))?.focus();\n }\n\n private _handleArrowDown(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getNextStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowUp(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getPreviousStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowLeft(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getPreviousStep(step)\n : this._getNextStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n private _handleArrowRight(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getNextStep(step)\n : this._getPreviousStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n //#endregion\n\n //#region Event handlers\n\n private _handleInteraction(event: Event): void {\n const step = getElementFromPath(IgcStepComponent.tagName, event);\n\n if (step && this._state.isAccessible(step)) {\n this._activateStep(step);\n }\n }\n\n private _handleSlotChange(): void {\n this._state.setSteps(\n this._slots.getAssignedElements('[default]', {\n selector: IgcStepComponent.tagName,\n })\n );\n\n this._state.stepsChanged();\n this.style.setProperty('--steps-count', this.steps.length.toString());\n }\n\n //#endregion\n\n //#region Internal methods\n\n private _syncStepperAttributes(properties: PropertyValues<this>): void {\n if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {\n this._contextProvider.updateObservers();\n }\n }\n\n private _animateSteps(\n nextStep: IgcStepComponent,\n currentStep: IgcStepComponent\n ): void {\n const steps = this._state.steps;\n\n if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {\n // Animate steps in ascending/next direction\n currentStep.toggleAnimation('out');\n nextStep.toggleAnimation('in');\n } else {\n // Animate steps in descending/previous direction\n currentStep.toggleAnimation('in', 'reverse');\n nextStep.toggleAnimation('out', 'reverse');\n }\n }\n\n private _emitChanging(args: IgcActiveStepChangingEventArgs): boolean {\n return this.emitEvent('igcActiveStepChanging', {\n detail: args,\n cancelable: true,\n });\n }\n\n private _emitChanged(args: IgcActiveStepChangedEventArgs): void {\n this.emitEvent('igcActiveStepChanged', {\n detail: args,\n });\n }\n\n private _activateStep(step: IgcStepComponent, shouldEmit = true): void {\n if (step === this._state.activeStep) {\n return;\n }\n\n if (!shouldEmit) {\n this._state.changeActiveStep(step);\n return;\n }\n\n const steps = this._state.steps;\n const activeIndex = steps.indexOf(this._state.activeStep!);\n const index = steps.indexOf(step);\n\n const args = { oldIndex: activeIndex, newIndex: index };\n\n if (!this._emitChanging(args)) {\n return;\n }\n\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n\n this._state.changeActiveStep(step);\n this._emitChanged({ index });\n }\n\n private _moveToNextStep(next = true): void {\n const step = this._state.getAdjacentStep(next);\n\n if (step) {\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n this._state.changeActiveStep(step);\n }\n }\n\n private _getNextStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);\n\n return steps[next];\n }\n\n private _getPreviousStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);\n\n return steps[previous];\n }\n\n private _getActiveStepComponent(): IgcStepComponent | null {\n const active = getRoot(this).activeElement;\n return active ? active.closest(IgcStepComponent.tagName) : null;\n }\n\n private _getStepHeader(step?: IgcStepComponent): HTMLElement | null {\n return step?.renderRoot.querySelector('[data-step-header]') ?? null;\n }\n\n //#endregion\n\n //#region Public API\n\n /** Activates the step at a given index. */\n public navigateTo(index: number): void {\n const step = this._state.steps[index];\n\n if (step) {\n this._activateStep(step, false);\n }\n }\n\n /** Activates the next enabled step. */\n public next(): void {\n this._moveToNextStep();\n }\n\n /** Activates the previous enabled step. */\n public prev(): void {\n this._moveToNextStep(false);\n }\n\n /**\n * Resets the stepper to its initial state i.e. activates the first step.\n *\n * @remarks\n * The steps' content will not be automatically reset.\n */\n public reset(): void {\n this._state.reset();\n }\n\n //#endregion\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-stepper': IgcStepperComponent;\n }\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:"";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:"";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:block;grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:"";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;height:
|
|
2
|
+
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{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:"";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:"";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:var(--body-display, block);grid-template-rows:var(--body-grid-rows, none);grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;transition:grid-template-rows var(--animation-duration, 320ms) var(--body-transition-delay, 0ms);position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:"";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;min-height:0;overflow:hidden;opacity:0}[part=content]>slot{display:block;padding-inline:var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2)) var(--horizontal-body-padding, var(--vertical-body-padding));padding-block:var(--horizontal-body-padding, var(--vertical-body-padding)) var(--horizontal-body-padding, var(--vertical-body-padding))}[part~=top]{align-items:var(--step-not-full-header-aligmnet, flex-end)}[part~=top]::before,[part~=top]::after{inset-block-end:var(--step-separator-position)}[part~=top] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column-reverse}[part~=top] [part~=header]::before,[part~=top] [part~=header]::after{inset-block-end:var(--step-separator-position)}[part~=bottom]{align-items:var(--step-not-full-header-aligmnet, start)}[part~=bottom]::before,[part~=bottom]::after{inset-block-start:var(--step-separator-position)}[part~=bottom] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column}[part~=bottom] [part~=header]::before,[part~=bottom] [part~=header]::after{inset-block-start:var(--step-separator-position)}[part~=top] [part~=text],[part~=bottom] [part~=text]{width:100%}[part~=start]{--align-text: end}[part~=start] [part=text]{order:-1}[part~=end]{--align-text: start}[part~=start],[part~=end]{align-items:center}[part~=start] [part~=text],[part~=end] [part~=text]{overflow:hidden}[part~=start] [part~=header]::before,[part~=start] [part~=header]::after,[part~=end] [part~=header]::before,[part~=end] [part~=header]::after{display:none}[part~=indicator]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);width:var(--indicator-size);min-width:var(--indicator-size);height:var(--indicator-size);position:relative}[part~=indicator],::slotted([slot=indicator]){display:flex;align-items:center;justify-content:center}::slotted([slot=indicator]){--diameter: calc(var(--indicator-size) - 0.125rem);--ig-icon-size: 1.125rem}[part~=text]{text-align:var(--align-text, initial);min-width:var(--indicator-size)}[part~=subtitle],[part~=title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part~=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=subtitle]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}[part~=empty]{display:none}:host([active]) [part~=body]{height:100%}:host([active]) [part~="body bottom"]::before{inset-block-start:0}:host([active]) [part=content]{pointer-events:all;opacity:1}[part~=disabled] [part=header]{cursor:default}`;
|
|
3
3
|
//# sourceMappingURL=step.base.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step.base.css.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/step.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"step.base.css.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/step.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kvOAAkvO,CAAC","sourcesContent":["\n import { css } from 'lit';\n 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{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:\"\";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:\"\";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:var(--body-display, block);grid-template-rows:var(--body-grid-rows, none);grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;transition:grid-template-rows var(--animation-duration, 320ms) var(--body-transition-delay, 0ms);position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:\"\";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;min-height:0;overflow:hidden;opacity:0}[part=content]>slot{display:block;padding-inline:var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2)) var(--horizontal-body-padding, var(--vertical-body-padding));padding-block:var(--horizontal-body-padding, var(--vertical-body-padding)) var(--horizontal-body-padding, var(--vertical-body-padding))}[part~=top]{align-items:var(--step-not-full-header-aligmnet, flex-end)}[part~=top]::before,[part~=top]::after{inset-block-end:var(--step-separator-position)}[part~=top] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column-reverse}[part~=top] [part~=header]::before,[part~=top] [part~=header]::after{inset-block-end:var(--step-separator-position)}[part~=bottom]{align-items:var(--step-not-full-header-aligmnet, start)}[part~=bottom]::before,[part~=bottom]::after{inset-block-start:var(--step-separator-position)}[part~=bottom] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column}[part~=bottom] [part~=header]::before,[part~=bottom] [part~=header]::after{inset-block-start:var(--step-separator-position)}[part~=top] [part~=text],[part~=bottom] [part~=text]{width:100%}[part~=start]{--align-text: end}[part~=start] [part=text]{order:-1}[part~=end]{--align-text: start}[part~=start],[part~=end]{align-items:center}[part~=start] [part~=text],[part~=end] [part~=text]{overflow:hidden}[part~=start] [part~=header]::before,[part~=start] [part~=header]::after,[part~=end] [part~=header]::before,[part~=end] [part~=header]::after{display:none}[part~=indicator]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);width:var(--indicator-size);min-width:var(--indicator-size);height:var(--indicator-size);position:relative}[part~=indicator],::slotted([slot=indicator]){display:flex;align-items:center;justify-content:center}::slotted([slot=indicator]){--diameter: calc(var(--indicator-size) - 0.125rem);--ig-icon-size: 1.125rem}[part~=text]{text-align:var(--align-text, initial);min-width:var(--indicator-size)}[part~=subtitle],[part~=title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part~=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=subtitle]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}[part~=empty]{display:none}:host([active]) [part~=body]{height:100%}:host([active]) [part~=\"body bottom\"]::before{inset-block-start:0}:host([active]) [part=content]{pointer-events:all;opacity:1}[part~=disabled] [part=header]{cursor:default}`;\n "]}
|