@kelvininc/ui-components
Version:
Kelvin UI Components
64 lines (57 loc) • 6.95 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { j as EActionButtonType, d as ETooltipPosition, o as EIconName } from './wizard.types-COrzvkrr.js';
const TOOLTIP_CUSTOM_STYLE = {
'--container-max-width': '350px'
};
const wizardFooterCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--stepper-width:100%}.wizard-footer-container{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-2xl)}.wizard-footer-container .actions-container{display:flex;flex:1}.wizard-footer-container .actions-container .wizard-stepper{width:var(--stepper-width);padding-right:var(--spacing-2xl)}.wizard-footer-container .buttons-container{display:flex;gap:var(--spacing-xl)}";
const KvWizardFooter = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.stepClick = createEvent(this, "stepClick", 7);
this.cancelClick = createEvent(this, "cancelClick", 7);
this.prevClick = createEvent(this, "prevClick", 7);
this.nextClick = createEvent(this, "nextClick", 7);
this.completeClick = createEvent(this, "completeClick", 7);
/** @inheritdoc */
this.showStepBar = true;
/** @inheritdoc */
this.completeBtnLabel = 'Submit';
/** @inheritdoc */
this.cancelEnabled = true;
/** @inheritdoc */
this.prevEnabled = true;
/** @inheritdoc */
this.nextEnabled = true;
this.onPrevClick = (event) => {
this.prevClick.emit(event);
};
this.onNextClick = (event) => {
this.nextClick.emit(event);
};
this.onCancelClick = (event) => {
this.cancelClick.emit(event);
};
this.onCompleteClick = (event) => {
this.completeClick.emit(event);
};
this.onStepClick = ({ detail }) => {
this.stepClick.emit(detail);
};
}
render() {
return (h(Host, { key: '1c72b48a085e1fde9d89507ac439de49ba326758' }, h("div", { key: '941b5b1e93bfc47a026e2a4942bc19446540c195', class: "wizard-footer-container" }, h("div", { key: 'ad4384e06a633ad552dd16760d7c175bf0d0868e', class: "actions-container", part: "footer-actions-container" }, this.showStepBar && (h("div", { key: '9c297a9ab1791fa02e567eb7fa93bce06e713ddc', class: "wizard-stepper" }, h("kv-step-bar", { key: '4cfda7504734d659e3f4604de04623fdd4b3d3f1', label: this.label, steps: this.steps, currentStep: this.currentStep, progressPercentage: this.progressPercentage, hasError: this.hasError, onStepClicked: this.onStepClick }))), h("slot", { key: '9a6da7fe005aa1bbee378067b8d73f527a876263', name: "additional-actions" })), h("div", { key: 'eeb928d2812621d145f8048bed4695230b02a60e', class: "buttons-container" }, this.showCancelBtn && (h("kv-action-button-text", { key: '8e8c33251445c004b6c660c399907c23a952f378', type: EActionButtonType.Tertiary, text: "Cancel", disabled: !this.cancelEnabled, onClickButton: ({ detail: event }) => this.onCancelClick(event) })), this.showPrevBtn && (h("kv-action-button-text", { key: 'a8e79366aa9a139fd864ec4c4a22097f05e1fb88', type: EActionButtonType.Tertiary, text: "Previous", disabled: !this.prevEnabled, onClickButton: ({ detail: event }) => this.onPrevClick(event) })), this.showNextBtn && (h("kv-tooltip", { key: '4a33b37757bcf7ece8fdc11b731b91fbcde3abe3', position: ETooltipPosition.TopEnd, text: this.nextTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, h("kv-action-button-text", { key: '92d3abc54efab613dbc64be3b1cd9af05e0b5bcb', type: EActionButtonType.Primary, text: "Next", disabled: !this.nextEnabled, onClickButton: ({ detail: event }) => this.onNextClick(event) }))), this.showCompleteBtn && (h("kv-tooltip", { key: '003e61445fd913a3fee53bbedbb43831efd8297d', position: ETooltipPosition.TopEnd, text: this.completeTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, h("kv-action-button-text", { key: 'a62be7cc9a03a5ee7ca2dddda79c3f4ca0b74de9', type: EActionButtonType.Primary, text: this.completeBtnLabel, disabled: !this.completeEnabled, onClickButton: ({ detail: event }) => this.onCompleteClick(event) })))))));
}
};
KvWizardFooter.style = wizardFooterCss;
const wizardHeaderCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--text-color:var(--text-surface-neutral-secondary);--separator-color:var(--text-surface-neutral-secondary);--container-padding:var(--spacing-2xl)}.wizard-header-container{display:flex;padding:var(--container-padding);justify-content:space-between}.wizard-header-container .left-container{display:flex;align-items:center;flex:1}.wizard-header-container .left-container .label,.wizard-header-container .left-container .description{color:var(--text-color)}.wizard-header-container .left-container .label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase}.wizard-header-container .left-container .description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0}.wizard-header-container .left-container .separator{width:4px;height:4px;border-radius:50%;margin:0 var(--spacing-md);background-color:var(--separator-color)}.wizard-header-container .left-container kv-toggle-tip .toggle-tip-open-element-container{cursor:pointer;user-select:none;pointer-events:all;margin-left:var(--spacing-md)}";
const KvWizardHeader = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
var _a;
return (h(Host, { key: '755722aafe8c7c992d81936e1fd05bc970a49a8f' }, h("div", { key: 'ea3295bdc10841fcd2636f00dbe33db3965cc03e', class: "wizard-header-container" }, h("div", { key: '2196bef1c7318b14a6096cc7a4fef74c864eab8a', class: "left-container" }, h("span", { key: '0396db15a603d405e72af97cf00efbf5341d520a', class: "label" }, this.label), h("span", { key: '421cba23aac898ce48870e7b3d7a44148ee23bac', class: "separator" }), h("span", { key: 'ba0b7f662cbe4b0504d98e4fca5295dab09caabb', class: "description" }, this.description), ((_a = this.tip) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("kv-toggle-tip", { key: 'afc847b950a6c13e99f8b393fd18036bd9dba376', text: this.tip, position: ETooltipPosition.Bottom, customClass: "wizard-header-tip" }, h("kv-icon", { key: '082f1c4c12a0a8658cf373baa6108d5367a07881', name: EIconName.Info, slot: "open-element-slot" })))), h("slot", { key: '7cea27cf9c27afeb6fc428498bef8b8358066fb4', name: "additional-header-actions" }))));
}
};
KvWizardHeader.style = wizardHeaderCss;
export { KvWizardFooter as kv_wizard_footer, KvWizardHeader as kv_wizard_header };