igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
251 lines • 9.49 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcStepComponent_1;
import { LitElement, html, nothing } from 'lit';
import { property, query, queryAssignedElements } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { when } from 'lit/directives/when.js';
import { EaseInOut } from '../../animations/easings.js';
import { addAnimationController } from '../../animations/player.js';
import { themes } from '../../theming/theming-decorator.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { partNameMap } from '../common/util.js';
import { bodyAnimations, contentAnimations, } from './animations.js';
import { styles as shared } from './themes/step/shared/step.common.css.js';
import { styles } from './themes/step/step.base.css.js';
import { all } from './themes/step/themes.js';
let IgcStepComponent = IgcStepComponent_1 = class IgcStepComponent extends LitElement {
constructor() {
super(...arguments);
this.bodyRef = createRef();
this.contentRef = createRef();
this.bodyAnimationPlayer = addAnimationController(this, this.bodyRef);
this.contentAnimationPlayer = addAnimationController(this, this.contentRef);
this.invalid = false;
this.active = false;
this.optional = false;
this.disabled = false;
this.complete = false;
this.previousComplete = false;
this.stepType = 'full';
this.orientation = 'horizontal';
this.index = -1;
this.contentTop = false;
this.linearDisabled = false;
this.visited = false;
this.animation = 'fade';
this.animationDuration = 350;
}
static register() {
registerComponent(IgcStepComponent_1);
}
async toggleAnimation(type, direction = 'normal') {
const bodyAnimation = bodyAnimations.get(this.animation).get(type);
const contentAnimation = contentAnimations.get(this.animation).get(type);
const bodyHeight = window
.getComputedStyle(this)
.getPropertyValue('--vertical-body-height');
const options = {
duration: this.animationDuration,
easing: EaseInOut.Quad,
direction,
};
const step = {
height: bodyHeight,
};
const [_, event] = await Promise.all([
this.bodyAnimationPlayer.stopAll(),
this.bodyAnimationPlayer.play(bodyAnimation({ keyframe: options, step })),
this.contentAnimationPlayer.stopAll(),
this.contentAnimationPlayer.play(contentAnimation({ keyframe: options, step })),
]);
return event.type;
}
activeChange() {
if (this.active) {
this.dispatchEvent(new CustomEvent('stepActiveChanged', { bubbles: true, detail: false }));
}
}
disabledInvalidOptionalChange() {
this.dispatchEvent(new CustomEvent('stepDisabledInvalidChanged', { bubbles: true }));
}
completeChange() {
this.dispatchEvent(new CustomEvent('stepCompleteChanged', { bubbles: true }));
}
handleClick(event) {
event.stopPropagation();
if (this.isAccessible) {
this.dispatchEvent(new CustomEvent('stepActiveChanged', { bubbles: true, detail: true }));
}
}
handleKeydown(event) {
this.dispatchEvent(new CustomEvent('stepHeaderKeydown', {
bubbles: true,
detail: { event, focusedStep: this },
}));
}
get isAccessible() {
return !this.disabled && !this.linearDisabled;
}
get headerContainerParts() {
return {
'header-container': true,
disabled: !this.isAccessible,
'complete-start': this.complete,
'complete-end': this.previousComplete,
optional: this.optional,
invalid: this.invalid && this.visited && !this.active && this.isAccessible,
top: this.titlePosition === 'top',
bottom: this.titlePosition === 'bottom' ||
(this.orientation === 'horizontal' && !this.titlePosition),
start: this.titlePosition === 'start',
end: this.titlePosition === 'end' ||
(this.orientation === 'vertical' && !this.titlePosition),
};
}
get textParts() {
return {
text: true,
empty: this.stepType === 'indicator'
? true
: this.stepType === 'full' &&
!this._titleChildren.length &&
!this._subTitleChildren.length,
};
}
renderIndicator() {
if (this.stepType !== 'title') {
return html `
<div part="indicator">
<slot name="indicator">
<span>${this.index + 1}</span>
</slot>
</div>
`;
}
return nothing;
}
renderTitleAndSubtitle() {
return html `
<div part="${partNameMap(this.textParts)}">
<div part="title">
<slot name="title"></slot>
</div>
<div part="subtitle">
<slot name="subtitle"></slot>
</div>
</div>
`;
}
renderContent() {
return html `<div
${ref(this.bodyRef)}
id="igc-step-content-${this.index}"
part="body"
role="tabpanel"
aria-labelledby="igc-step-header-${this.index}"
>
<div part="content" ${ref(this.contentRef)}>
<slot></slot>
</div>
</div>`;
}
render() {
return html `
${when(this.contentTop && this.orientation === 'horizontal', () => this.renderContent(), () => nothing)}
<div part="${partNameMap(this.headerContainerParts)}">
<div
part="header"
tabindex="${this.active ? '0' : '-1'}"
role="tab"
aria-selected="${this.active}"
=${this.handleClick}
=${this.handleKeydown}
>
${this.renderIndicator()} ${this.renderTitleAndSubtitle()}
</div>
</div>
${when(this.orientation === 'vertical' || !this.contentTop, () => this.renderContent(), () => nothing)}
`;
}
};
IgcStepComponent.tagName = 'igc-step';
IgcStepComponent.styles = [styles, shared];
__decorate([
queryAssignedElements({ slot: 'title' })
], IgcStepComponent.prototype, "_titleChildren", void 0);
__decorate([
queryAssignedElements({ slot: 'subtitle' })
], IgcStepComponent.prototype, "_subTitleChildren", void 0);
__decorate([
query('[part~="header"]')
], IgcStepComponent.prototype, "header", void 0);
__decorate([
query('[part~="body"]')
], IgcStepComponent.prototype, "contentBody", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "invalid", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "active", void 0);
__decorate([
property({ type: Boolean })
], IgcStepComponent.prototype, "optional", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "disabled", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], IgcStepComponent.prototype, "complete", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "previousComplete", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "stepType", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "titlePosition", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "orientation", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "index", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "contentTop", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "linearDisabled", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "visited", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "animation", void 0);
__decorate([
property({ attribute: false })
], IgcStepComponent.prototype, "animationDuration", void 0);
__decorate([
watch('active', { waitUntilFirstUpdate: true })
], IgcStepComponent.prototype, "activeChange", null);
__decorate([
watch('disabled', { waitUntilFirstUpdate: true }),
watch('invalid', { waitUntilFirstUpdate: true }),
watch('optional', { waitUntilFirstUpdate: true })
], IgcStepComponent.prototype, "disabledInvalidOptionalChange", null);
__decorate([
watch('complete', { waitUntilFirstUpdate: true })
], IgcStepComponent.prototype, "completeChange", null);
IgcStepComponent = IgcStepComponent_1 = __decorate([
themes(all)
], IgcStepComponent);
export default IgcStepComponent;
//# sourceMappingURL=step.js.map