@kelvininc/ui-components
Version:
Kelvin UI Components
76 lines (68 loc) • 7.58 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
var actionButton_types = require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
var icon_types = require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.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}}:host{--stepper-width:100%}.wizard-footer-container{display:flex;align-items:center;justify-content:space-between;padding:var(--kv-spacing-4x, 16px)}.wizard-footer-container .actions-container{display:flex;flex:1}.wizard-footer-container .actions-container .wizard-stepper{width:var(--stepper-width);padding-right:var(--kv-spacing-4x, 16px)}.wizard-footer-container .buttons-container{display:flex;gap:var(--kv-spacing-3x, 12px)}";
const KvWizardFooter = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.stepClick = index.createEvent(this, "stepClick", 7);
this.cancelClick = index.createEvent(this, "cancelClick", 7);
this.prevClick = index.createEvent(this, "prevClick", 7);
this.nextClick = index.createEvent(this, "nextClick", 7);
this.completeClick = index.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 = () => {
this.prevClick.emit();
};
this.onNextClick = () => {
this.nextClick.emit();
};
this.onCancelClick = () => {
this.cancelClick.emit();
};
this.onCompleteClick = () => {
this.completeClick.emit();
};
this.onStepClick = ({ detail }) => {
this.stepClick.emit(detail);
};
}
render() {
return (index.h(index.Host, { key: 'a41503ba15623276d6f01aaeb103e973572ef30c' }, index.h("div", { key: '7ccc7ab3b345bff5b0d5ee6fb2efc043853e2e7c', class: "wizard-footer-container" }, index.h("div", { key: '4769d4ac7a6a15d78cbe838da9700ef4f5884b32', class: "actions-container", part: "footer-actions-container" }, this.showStepBar && (index.h("div", { key: '04ec24e3eda2279807e9e30a973c141db94539f5', class: "wizard-stepper" }, index.h("kv-step-bar", { key: '389f981f38e663a24135f12b8b4fe8d439a0240f', label: this.label, steps: this.steps, currentStep: this.currentStep, progressPercentage: this.progressPercentage, hasError: this.hasError, onStepClicked: this.onStepClick }))), index.h("slot", { key: '7e24293cb3c87f46a8addaf3493e506e9831c522', name: "additional-actions" })), index.h("div", { key: 'fa33e0d777568447a22fcf1184a8d7ebaa13407e', class: "buttons-container" }, this.showCancelBtn && (index.h("kv-action-button-text", { key: '4fee4ca5c38ae878c6f6eb2c760c4821fa18e0e2', type: actionButton_types.EActionButtonType.Ghost, text: "Cancel", disabled: !this.cancelEnabled, onClickButton: this.onCancelClick })), this.showPrevBtn && (index.h("kv-action-button-text", { key: '07123b81e5e265244a0238d5cbfe6d8a70e73925', type: actionButton_types.EActionButtonType.Tertiary, text: "Previous", disabled: !this.prevEnabled, onClickButton: this.onPrevClick })), this.showNextBtn && (index.h("kv-tooltip", { key: '5b71ad8a2a40302c278e8ac28f606af3d302e73f', position: components.ETooltipPosition.TopEnd, text: this.nextTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, index.h("kv-action-button-text", { key: '4136953cfe3b5036fe4d234b70dbce45b0978124', type: actionButton_types.EActionButtonType.Primary, text: "Next", disabled: !this.nextEnabled, onClickButton: this.onNextClick }))), this.showCompleteBtn && (index.h("kv-tooltip", { key: 'd9e53ea95c276c22c26021d27a9226490b235c9f', position: components.ETooltipPosition.TopEnd, text: this.completeTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, index.h("kv-action-button-text", { key: 'b1c50f16cfb75300be073500d28cb9c68ce0bee1', type: actionButton_types.EActionButtonType.Primary, text: this.completeBtnLabel, disabled: !this.completeEnabled, onClickButton: this.onCompleteClick })))))));
}
};
KvWizardFooter.style = wizardFooterCss;
const wizardHeaderCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--text-color:var(--kv-neutral-1, #f2f2f6);--separator-color:var(--kv-neutral-2, #e5e5e5);--container-padding:var(--kv-spacing-4x, 16px)}.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:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase}.wizard-header-container .left-container .description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:300;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none}.wizard-header-container .left-container .separator{width:4px;height:4px;border-radius:50%;margin:0 var(--kv-spacing-2x, 8px);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(--kv-spacing-2x, 8px)}";
const KvWizardHeader = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
var _a;
return (index.h(index.Host, { key: '2e9d5797f3f1871cfaf220d409101686e31ef534' }, index.h("div", { key: '5914e6c5456216c14727a955b3e7b840585c372e', class: "wizard-header-container" }, index.h("div", { key: 'c95e9b08c31c456cb478bc6ff78f1cc63fcae710', class: "left-container" }, index.h("span", { key: '1a69f83a660350cd0bd0569c406ed08e4a44fae2', class: "label" }, this.label), index.h("span", { key: '1e0ffb180b7e68b75c9c3595f32927d34d94b650', class: "separator" }), index.h("span", { key: '18679e998932493d2ac40ae6e057b78a0f634778', class: "description" }, this.description), ((_a = this.tip) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("kv-toggle-tip", { key: '8e03dfb2887f5c5d9d4d329a9cc66d17bbc67110', text: this.tip, position: components.ETooltipPosition.Bottom, customClass: "wizard-header-tip" }, index.h("kv-icon", { key: 'e938f09434a38cb13a79ee8d6fcdc7f8039b033d', name: icon_types.EIconName.Info, slot: "open-element-slot" })))), index.h("slot", { key: '3c60f6589c4a28582b450fd42620a4cfcf4a2854', name: "additional-header-actions" }))));
}
};
KvWizardHeader.style = wizardHeaderCss;
exports.kv_wizard_footer = KvWizardFooter;
exports.kv_wizard_header = KvWizardHeader;