UNPKG

@nethserver/ns8-ui-lib

Version:
1,726 lines (1,504 loc) 680 kB
import { CvButton, CvIconButton, CvInlineNotification, CvTile, CvToastNotification, CvLink, CvTooltip, CvTag, CvTextInput, CvOverflowMenu, CvModal, CvPagination, CvDataTable, CvDataTableHeading, CvDataTableRow, CvDataTableCell, CvCheckbox, CvToggle, CvTabs } from '@carbon/vue'; import LottieAnimation from 'lottie-web-vue'; import Copy20 from '@carbon/icons-vue/es/copy/20'; import ChevronDown20 from '@carbon/icons-vue/es/chevron--down/20'; import { carbonPrefixMixin, themeMixin, uidMixin, methodsMixin } from '@carbon/vue/src/mixins'; import Information16 from '@carbon/icons-vue/es/information/16'; import CheckmarkFilled20 from '@carbon/icons-vue/es/checkmark--filled/20'; import ErrorFilled20 from '@carbon/icons-vue/es/error--filled/20'; import Warning20 from '@carbon/icons-vue/es/warning--filled/20'; import { WarningFilled16, WarningAltFilled16, View16, ViewOff16 } from '@carbon/icons-vue'; import crypto$1 from 'crypto'; import OverflowMenuVertical20 from '@carbon/icons-vue/es/overflow-menu--vertical/20'; import Close20 from '@carbon/icons-vue/es/close/20'; import ArrowRight20 from '@carbon/icons-vue/es/arrow--right/20'; import ArrowRight32 from '@carbon/icons-vue/es/arrow--right/32'; import Notification20 from '@carbon/icons-vue/es/notification/20'; import UserAvatar20 from '@carbon/icons-vue/es/user--avatar/20'; import UserAvatar32 from '@carbon/icons-vue/es/user--avatar/32'; import AppSwitcher20 from '@carbon/icons-vue/es/app-switcher/20'; import Search20 from '@carbon/icons-vue/es/search/20'; import RowExpand20 from '@carbon/icons-vue/es/row--expand/20'; import RowCollapse20 from '@carbon/icons-vue/es/row--collapse/20'; import Reset32 from '@carbon/icons-vue/es/reset/32'; import Reset20 from '@carbon/icons-vue/es/reset/20'; import Download20 from '@carbon/icons-vue/es/download/20'; import Launch20 from '@carbon/icons-vue/es/launch/20'; import Upgrade20 from '@carbon/icons-vue/es/upgrade/20'; import Upgrade32 from '@carbon/icons-vue/es/upgrade/32'; import Settings16 from '@carbon/icons-vue/es/settings/16'; import Settings20 from '@carbon/icons-vue/es/settings/20'; import Settings32 from '@carbon/icons-vue/es/settings/32'; import ChevronUp20 from '@carbon/icons-vue/es/chevron--up/20'; import ChevronLeft20 from '@carbon/icons-vue/es/chevron--left/20'; import ChevronRight20 from '@carbon/icons-vue/es/chevron--right/20'; import Information20 from '@carbon/icons-vue/es/information/20'; import InformationFilled16 from '@carbon/icons-vue/es/information--filled/16'; import Application20 from '@carbon/icons-vue/es/application/20'; import Add20 from '@carbon/icons-vue/es/add/20'; import Rocket20 from '@carbon/icons-vue/es/rocket/20'; import Rocket32 from '@carbon/icons-vue/es/rocket/32'; import Chip20 from '@carbon/icons-vue/es/chip/20'; import Chip32 from '@carbon/icons-vue/es/chip/32'; import Save20 from '@carbon/icons-vue/es/save/20'; import Save32 from '@carbon/icons-vue/es/save/32'; import Application32 from '@carbon/icons-vue/es/application/32'; import EdgeNode20 from '@carbon/icons-vue/es/edge-node/20'; import EdgeNode32 from '@carbon/icons-vue/es/edge-node/32'; import Cube32 from '@carbon/icons-vue/es/cube/32'; import EdgeCluster32 from '@carbon/icons-vue/es/edge-cluster/32'; import EdgeCluster20 from '@carbon/icons-vue/es/edge-cluster/20'; import Connect32 from '@carbon/icons-vue/es/connect/32'; import Connect20 from '@carbon/icons-vue/es/connect/20'; import Edit20 from '@carbon/icons-vue/es/edit/20'; import Password20 from '@carbon/icons-vue/es/password/20'; import Star20 from '@carbon/icons-vue/es/star/20'; import Checkmark20 from '@carbon/icons-vue/es/checkmark/20'; import ZoomIn20 from '@carbon/icons-vue/es/zoom--in/20'; import Events32 from '@carbon/icons-vue/es/events/32'; import Events20 from '@carbon/icons-vue/es/events/20'; import Events16 from '@carbon/icons-vue/es/events/16'; import Link20 from '@carbon/icons-vue/es/link/20'; import Link32 from '@carbon/icons-vue/es/link/32'; import WarningAlt32 from '@carbon/icons-vue/es/warning--alt/32'; import WarningAlt20 from '@carbon/icons-vue/es/warning--alt/20'; import Tools20 from '@carbon/icons-vue/es/tools/20'; import Tools32 from '@carbon/icons-vue/es/tools/32'; import Network_220 from '@carbon/icons-vue/es/network--2/20'; import Network_232 from '@carbon/icons-vue/es/network--2/32'; import DataBase20 from '@carbon/icons-vue/es/data--base/20'; import DataBase32 from '@carbon/icons-vue/es/data--base/32'; import DataBackup20 from '@carbon/icons-vue/es/data-backup/20'; import DataBackup32 from '@carbon/icons-vue/es/data-backup/32'; import ArrowDown20 from '@carbon/icons-vue/es/arrow--down/20'; import ArrowDown32 from '@carbon/icons-vue/es/arrow--down/32'; import Time20 from '@carbon/icons-vue/es/time/20'; import Time32 from '@carbon/icons-vue/es/time/32'; import Hourglass20 from '@carbon/icons-vue/es/hourglass/20'; import Hourglass32 from '@carbon/icons-vue/es/hourglass/32'; import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16'; import CheckmarkFilled32 from '@carbon/icons-vue/es/checkmark--filled/32'; import ErrorFilled16 from '@carbon/icons-vue/es/error--filled/16'; import ErrorFilled32 from '@carbon/icons-vue/es/error--filled/32'; import WarningFilled16$1 from '@carbon/icons-vue/es/warning--filled/16'; import Warning32 from '@carbon/icons-vue/es/warning--filled/32'; import Power16 from '@carbon/icons-vue/es/power/16'; import Power20 from '@carbon/icons-vue/es/power/20'; import Power32 from '@carbon/icons-vue/es/power/32'; import Document20 from '@carbon/icons-vue/es/document/20'; import Document32 from '@carbon/icons-vue/es/document/32'; import OverflowMenuVertical32 from '@carbon/icons-vue/es/overflow-menu--vertical/32'; import Restart20 from '@carbon/icons-vue/es/restart/20'; import Restart32 from '@carbon/icons-vue/es/restart/32'; import TrashCan20 from '@carbon/icons-vue/es/trash-can/20'; import TrashCan32 from '@carbon/icons-vue/es/trash-can/32'; import Erase20 from '@carbon/icons-vue/es/erase/20'; import Erase32 from '@carbon/icons-vue/es/erase/32'; import Row20 from '@carbon/icons-vue/es/row/20'; import Column20 from '@carbon/icons-vue/es/column/20'; import Catalog20 from '@carbon/icons-vue/es/catalog/20'; import Catalog32 from '@carbon/icons-vue/es/catalog/32'; import Group20 from '@carbon/icons-vue/es/group/20'; import Router32 from '@carbon/icons-vue/es/router/32'; import Router20 from '@carbon/icons-vue/es/router/20'; import Certificate32 from '@carbon/icons-vue/es/certificate/32'; import Certificate20 from '@carbon/icons-vue/es/certificate/20'; import BareMetalServer20 from '@carbon/icons-vue/es/bare-metal-server/20'; import BareMetalServer32 from '@carbon/icons-vue/es/bare-metal-server/32'; import Firewall20 from '@carbon/icons-vue/es/firewall/20'; import Firewall32 from '@carbon/icons-vue/es/firewall/32'; import Wikis32 from '@carbon/icons-vue/es/wikis/32'; import Wikis20 from '@carbon/icons-vue/es/wikis/20'; import Wikis16 from '@carbon/icons-vue/es/wikis/16'; import At32 from '@carbon/icons-vue/es/at/32'; import At20 from '@carbon/icons-vue/es/at/20'; import User16 from '@carbon/icons-vue/es/user/16'; import User20 from '@carbon/icons-vue/es/user/20'; import User32 from '@carbon/icons-vue/es/user/32'; import Unknown16 from '@carbon/icons-vue/es/unknown/16'; import Unknown20 from '@carbon/icons-vue/es/unknown/20'; import Unknown32 from '@carbon/icons-vue/es/unknown/32'; import Email16 from '@carbon/icons-vue/es/email/16'; import Email20 from '@carbon/icons-vue/es/email/20'; import Email32 from '@carbon/icons-vue/es/email/32'; import Locked16 from '@carbon/icons-vue/es/locked/16'; import Locked20 from '@carbon/icons-vue/es/locked/20'; import Locked32 from '@carbon/icons-vue/es/locked/32'; import Folder16 from '@carbon/icons-vue/es/folder/16'; import Folder20 from '@carbon/icons-vue/es/folder/20'; import Folder32 from '@carbon/icons-vue/es/folder/32'; import Asterisk16 from '@carbon/icons-vue/es/asterisk/16'; import Asterisk20 from '@carbon/icons-vue/es/asterisk/20'; import Asterisk32 from '@carbon/icons-vue/es/asterisk/32'; import Box16 from '@carbon/icons-vue/es/box/16'; import Box20 from '@carbon/icons-vue/es/box/20'; import Box32 from '@carbon/icons-vue/es/box/32'; import UserMilitary32 from '@carbon/icons-vue/es/user--military/32'; import Rule16 from '@carbon/icons-vue/es/rule/16'; import Rule20 from '@carbon/icons-vue/es/rule/20'; import Rule32 from '@carbon/icons-vue/es/rule/32'; import Filter16 from '@carbon/icons-vue/es/filter/16'; import Filter20 from '@carbon/icons-vue/es/filter/20'; import Filter32 from '@carbon/icons-vue/es/filter/32'; import CloseFilled16 from '@carbon/icons-vue/es/close--filled/16'; import CloseFilled20 from '@carbon/icons-vue/es/close--filled/20'; import CloseFilled32 from '@carbon/icons-vue/es/close--filled/32'; import Badge16 from '@carbon/icons-vue/es/badge/16'; import Badge20 from '@carbon/icons-vue/es/badge/20'; import Badge32 from '@carbon/icons-vue/es/badge/32'; import FolderShared16 from '@carbon/icons-vue/es/folder--shared/16'; import FolderShared20 from '@carbon/icons-vue/es/folder--shared/20'; import FolderShared32 from '@carbon/icons-vue/es/folder--shared/32'; import MailAll16 from '@carbon/icons-vue/es/mail--all/16'; import MailAll20 from '@carbon/icons-vue/es/mail--all/20'; import MailAll32 from '@carbon/icons-vue/es/mail--all/32'; import CloudUpload16 from '@carbon/icons-vue/es/cloud--upload/16'; import CloudUpload20 from '@carbon/icons-vue/es/cloud--upload/20'; import CloudUpload32 from '@carbon/icons-vue/es/cloud--upload/32'; import CvSideNavDivider from '@carbon/vue/src/components/cv-ui-shell/cv-side-nav-divider.vue'; import Search16 from '@carbon/icons-vue/es/search/16'; import Close16 from '@carbon/icons-vue/es/close/16'; import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16'; import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16'; import CvCheckbox$1 from '@carbon/vue/src/components/cv-checkbox/cv-checkbox'; import { mapState } from 'vuex'; // var script$C = { name: "NsButton", extends: CvButton, props: { icon: { type: [String, Object], default: undefined, validator(val) { if (!val || typeof val === "string") { return true; } return val.render !== null; } }, kind: { type: String, default: "secondary", validator: val => ["default", "primary", "secondary", "tertiary", "ghost", "danger", "danger--ghost", "danger--tertiary"].includes(val) }, size: { type: String, default: "default", validator: val => ["default", "field", "small", "sm", "lg", "xl"].includes(val) }, loading: { type: Boolean, default: false } } }; function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { if (typeof shadowMode !== 'boolean') { createInjectorSSR = createInjector; createInjector = shadowMode; shadowMode = false; } // Vue.extend constructor export interop. const options = typeof script === 'function' ? script.options : script; // render functions if (template && template.render) { options.render = template.render; options.staticRenderFns = template.staticRenderFns; options._compiled = true; // functional template if (isFunctionalTemplate) { options.functional = true; } } // scopedId if (scopeId) { options._scopeId = scopeId; } let hook; if (moduleIdentifier) { // server build hook = function (context) { // 2.3 injection context = context || // cached call (this.$vnode && this.$vnode.ssrContext) || // stateful (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__; } // inject component styles if (style) { style.call(this, createInjectorSSR(context)); } // register component module identifier for async chunk inference if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier); } }; // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook; } else if (style) { hook = shadowMode ? function (context) { style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); } : function (context) { style.call(this, createInjector(context)); }; } if (hook) { if (options.functional) { // register for functional component in vue file const originalRender = options.render; options.render = function renderWithStyleInjection(h, context) { hook.call(context); return originalRender(h, context); }; } else { // inject component registration as beforeCreate hook const existing = options.beforeCreate; options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; } } return script; } const isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); function createInjector(context) { return (id, style) => addStyle(id, style); } let HEAD; const styles = {}; function addStyle(id, css) { const group = isOldIE ? css.media || 'default' : id; const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); if (!style.ids.has(id)) { style.ids.add(id); let code = css.source; if (css.map) { // https://developer.chrome.com/devtools/docs/javascript-debugging // this makes source maps inside style tags work properly in Chrome code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; } if (!style.element) { style.element = document.createElement('style'); style.element.type = 'text/css'; if (css.media) style.element.setAttribute('media', css.media); if (HEAD === undefined) { HEAD = document.head || document.getElementsByTagName('head')[0]; } HEAD.appendChild(style.element); } if ('styleSheet' in style.element) { style.styles.push(code); style.element.styleSheet.cssText = style.styles .filter(Boolean) .join('\n'); } else { const index = style.ids.size - 1; const textNode = document.createTextNode(code); const nodes = style.element.childNodes; if (nodes[index]) style.element.removeChild(nodes[index]); if (nodes.length) style.element.insertBefore(textNode, nodes[index]); else style.element.appendChild(textNode); } } } /* script */ const __vue_script__$C = script$C; /* template */ var __vue_render__$K = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('button', _vm._g({ staticClass: "cv-button", class: _vm.buttonClassOpts(), attrs: { "role": "button" } }, _vm.inputListeners), [_vm._t("default"), _vm._v(" "), _vm.loading ? _c('span', { class: ['loader', _vm.carbonPrefix + "--btn__icon"] }) : _vm._e(), _vm._v(" "), _vm.icon && !_vm.loading ? _c('CvSvg', { class: _vm.carbonPrefix + "--btn__icon", attrs: { "svg": _vm.icon } }) : _vm._e()], 2); }; var __vue_staticRenderFns__$K = []; /* style */ const __vue_inject_styles__$N = function (inject) { if (!inject) return; inject("data-v-34f1ee57_0", { source: ".bx--btn .bx--btn__icon[data-v-34f1ee57]{width:1.25rem;height:1.25rem}.bx--btn.bx--btn--sm .bx--btn__icon[data-v-34f1ee57]{width:1rem;height:1rem}.loader[data-v-34f1ee57]{right:1rem;border:3px solid transparent;border-radius:50%;border-top:3px solid currentColor;border-right:3px solid currentColor;border-bottom:3px solid currentColor;animation:spin-data-v-34f1ee57 .5s linear infinite}.bx--btn--ghost .bx--btn__icon.loading[data-v-34f1ee57]{position:static;margin-left:.5rem}.bx--btn--danger--ghost .bx--btn__icon.loading[data-v-34f1ee57],.bx--btn--danger-ghost .bx--btn__icon.loading[data-v-34f1ee57]{position:static;margin-left:.5rem}@keyframes spin-data-v-34f1ee57{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$N = "data-v-34f1ee57"; /* module identifier */ const __vue_module_identifier__$N = undefined; /* functional template */ const __vue_is_functional_template__$N = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1m = /*#__PURE__*/normalizeComponent({ render: __vue_render__$K, staticRenderFns: __vue_staticRenderFns__$K }, __vue_inject_styles__$N, __vue_script__$C, __vue_scope_id__$N, __vue_is_functional_template__$N, __vue_module_identifier__$N, false, createInjector, undefined, undefined); var NsButton = __vue_component__$1m; // // // // // // // // // // // // // // // // // // // // var script$B = { name: "NsPictogram", props: { title: { type: String, default: "" }, width: { type: [Number, String], default: 64 }, height: { type: [Number, String], default: 64 }, color: { type: String, default: "currentColor" } } }; /* script */ const __vue_script__$B = script$B; /* template */ var __vue_render__$J = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('svg', { attrs: { "xmlns": "http://www.w3.org/2000/svg", "width": _vm.width, "height": _vm.height, "viewBox": "0 0 32 32", "aria-labelledby": _vm.title, "role": "presentation" } }, [_c('title', { attrs: { "id": _vm.title, "lang": "en" } }, [_vm._v(_vm._s(_vm.title) + " icon")]), _vm._v(" "), _c('g', { attrs: { "fill": _vm.color } }, [_vm._t("default")], 2)]); }; var __vue_staticRenderFns__$J = []; /* style */ const __vue_inject_styles__$M = undefined; /* scoped */ const __vue_scope_id__$M = undefined; /* module identifier */ const __vue_module_identifier__$M = undefined; /* functional template */ const __vue_is_functional_template__$M = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1l = /*#__PURE__*/normalizeComponent({ render: __vue_render__$J, staticRenderFns: __vue_staticRenderFns__$J }, __vue_inject_styles__$M, __vue_script__$B, __vue_scope_id__$M, __vue_is_functional_template__$M, __vue_module_identifier__$M, false, undefined, undefined, undefined); var NsPictogram = __vue_component__$1l; // var script$A = { name: "NsLottieAnimation", components: { LottieAnimation }, props: { animationData: { type: Object, required: true }, loop: { type: [Boolean, Number], default: false }, autoPlay: { type: Boolean, default: true }, refName: { type: String, default: "anim" }, animateOnHover: { type: Boolean, default: true } }, methods: { onLoopComplete(eventData) { this.$emit("loopComplete", eventData); }, onComplete(eventData) { this.$emit("complete", eventData); if (this.animateOnHover) { this.$refs[this.refName].stop(); } }, onEnterFrame(eventData) { this.$emit("enterFrame", eventData); }, onMouseOver(eventData) { this.$emit("mouseover", eventData); if (this.animateOnHover) { this.$refs[this.refName].play(); } } } }; /* script */ const __vue_script__$A = script$A; /* template */ var __vue_render__$I = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', { staticClass: "ns-lottie-animation", on: { "mouseover": _vm.onMouseOver } }, [_c('LottieAnimation', { ref: _vm.refName, attrs: { "animationData": _vm.animationData, "loop": _vm.loop, "autoPlay": _vm.autoPlay }, on: { "loopComplete": _vm.onLoopComplete, "complete": _vm.onComplete, "enterFrame": _vm.onEnterFrame } })], 1); }; var __vue_staticRenderFns__$I = []; /* style */ const __vue_inject_styles__$L = undefined; /* scoped */ const __vue_scope_id__$L = "data-v-cc2533e0"; /* module identifier */ const __vue_module_identifier__$L = undefined; /* functional template */ const __vue_is_functional_template__$L = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1k = /*#__PURE__*/normalizeComponent({ render: __vue_render__$I, staticRenderFns: __vue_staticRenderFns__$I }, __vue_inject_styles__$L, __vue_script__$A, __vue_scope_id__$L, __vue_is_functional_template__$L, __vue_module_identifier__$L, false, undefined, undefined, undefined); var NsLottieAnimation = __vue_component__$1k; /* script */ /* template */ var __vue_render__$H = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('path', { attrs: { "id": "warning--02_1_", "d": "M23.668,29.312l-0.359-0.623c4.522-2.61,7.331-7.473,7.331-12.688c0-8.073-6.567-14.64-14.64-14.64\n\tC7.927,1.36,1.36,7.927,1.36,16c0,5.216,2.81,10.078,7.332,12.688l-0.36,0.623C3.587,26.573,0.64,21.473,0.64,16\n\tC0.64,7.53,7.53,0.64,16,0.64S31.36,7.53,31.36,16C31.36,21.473,28.413,26.573,23.668,29.312z M16.36,24h-0.72V6h0.72V24z M16,28.5\n\tc-0.552,0-1,0.448-1,1s0.448,1,1,1s1-0.448,1-1S16.552,28.5,16,28.5z" } }); }; var __vue_staticRenderFns__$H = []; /* style */ const __vue_inject_styles__$K = undefined; /* scoped */ const __vue_scope_id__$K = undefined; /* module identifier */ const __vue_module_identifier__$K = undefined; /* functional template */ const __vue_is_functional_template__$K = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1j = /*#__PURE__*/normalizeComponent({ render: __vue_render__$H, staticRenderFns: __vue_staticRenderFns__$H }, __vue_inject_styles__$K, {}, __vue_scope_id__$K, __vue_is_functional_template__$K, __vue_module_identifier__$K, false, undefined, undefined, undefined); var ExclamationMarkPictogram = __vue_component__$1j; // var script$z = { name: "NsEmptyState", components: { NsPictogram, ExclamationMarkPictogram, NsLottieAnimation }, props: { title: { type: String, required: true }, animationData: Object, animationTitle: String, loop: { type: [Boolean, Number], default: 1 } }, computed: { hasPictogramSlot() { return !!this.$slots.pictogram; }, hasDescriptionSlot() { return !!this.$slots.description; } } }; /* script */ const __vue_script__$z = script$z; /* template */ var __vue_render__$G = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', { staticClass: "empty-state" }, [_vm.animationData ? _c('NsLottieAnimation', { staticClass: "animation image", attrs: { "animationData": _vm.animationData, "refName": _vm.animationTitle, "animateOnHover": true, "loop": _vm.loop, "autoPlay": true } }) : _c('NsPictogram', { staticClass: "image", attrs: { "title": "empty state" } }, [_vm.hasPictogramSlot ? [_vm._t("pictogram")] : [_c('ExclamationMarkPictogram')]], 2), _vm._v(" "), _c('h5', { staticClass: "title" }, [_vm._v(_vm._s(_vm.title))]), _vm._v(" "), _vm.hasDescriptionSlot ? [_c('div', { staticClass: "description" }, [_vm._t("description")], 2)] : _vm._e()], 2); }; var __vue_staticRenderFns__$G = []; /* style */ const __vue_inject_styles__$J = function (inject) { if (!inject) return; inject("data-v-0540fdb8_0", { source: ".empty-state[data-v-0540fdb8]{text-align:center;padding:2rem}.empty-state .image[data-v-0540fdb8]{margin-bottom:1rem}.empty-state .description[data-v-0540fdb8]{margin-top:1rem}.animation[data-v-0540fdb8]{display:inline-block;width:64px;height:64px}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$J = "data-v-0540fdb8"; /* module identifier */ const __vue_module_identifier__$J = undefined; /* functional template */ const __vue_is_functional_template__$J = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1h = /*#__PURE__*/normalizeComponent({ render: __vue_render__$G, staticRenderFns: __vue_staticRenderFns__$G }, __vue_inject_styles__$J, __vue_script__$z, __vue_scope_id__$J, __vue_is_functional_template__$J, __vue_module_identifier__$J, false, createInjector, undefined, undefined); var __vue_component__$1i = __vue_component__$1h; // var script$y = { name: "NsCodeSnippet", components: { CvButton, CvIconButton, ChevronDown20 }, mixins: [carbonPrefixMixin, themeMixin], props: { expanded: { type: Boolean, default: false }, wrapText: { type: Boolean, default: true }, disabled: Boolean, feedbackAriaLabel: String, hideCopyButton: Boolean, lessText: { type: String, default: "Show less" }, moreText: { type: String, default: "Show more" }, hideExpandButton: Boolean, copyTooltip: { type: String, default: "Copy to clipboard" }, copyFeedback: { type: String, default: "Copied" }, copyTipPosition: { type: String, default: "bottom", validator: val => ["top", "right", "bottom", "left"].includes(val) }, copyTipAlignment: { type: String, default: "end", validator: val => ["start", "center", "end"].includes(val) }, light: Boolean }, data() { return { justCopied: false, Copy20, isExpanded: false }; }, computed: { classes() { return [`cv-code-snippet`, `${this.carbonPrefix}--snippet`, `${this.carbonPrefix}--snippet--multi`, { [`${this.carbonPrefix}--snippet--light`]: this.isLight, [`${this.carbonPrefix}--snippet--no-copy`]: this.hideCopyButton, [`${this.carbonPrefix}--snippet--wraptext`]: this.wrapText, [`${this.carbonPrefix}--snippet--expand`]: this.isExpanded, [`${this.carbonPrefix}--snippet--disabled`]: this.disabled }]; }, tooltipToShow() { if (this.justCopied) { return this.copyFeedback; } else { return this.copyTooltip; } }, expandButtonText() { return this.isExpanded ? this.lessText : this.moreText; } }, watch: { expanded: function () { this.isExpanded = this.expanded; } }, created() { this.isExpanded = this.expanded; }, methods: { toggleExpand() { this.isExpanded = !this.isExpanded; }, copyCode() { // copy to clipboard this.$refs.clippy.value = this.$refs.code.innerText; this.$refs.clippy.select(); document.execCommand("copy"); this.justCopied = true; setTimeout(() => { this.justCopied = false; }, 2000); } } }; /* script */ const __vue_script__$y = script$y; /* template */ var __vue_render__$F = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', { staticClass: "cv-code-snippet-multiline", class: _vm.classes, attrs: { "data-code-snippet": "" } }, [_c('div', { class: [_vm.carbonPrefix + "--snippet-container", { 'no-expand': _vm.hideExpandButton }] }, [_c('code', { ref: "code" }, [_c('pre', [_vm._t("default")], 2)]), _vm._v(" "), _c('textarea', { ref: "clippy", staticClass: "cv-code-snippet__clippy", staticStyle: { "position": "absolute", "left": "-9999px", "max-width": "0", "opacity": "0", "overflow": "hidden" }, attrs: { "aria-hidden": "true" } })]), _vm._v(" "), !_vm.hideCopyButton ? _c('cv-icon-button', { class: _vm.carbonPrefix + "--copy-btn", attrs: { "kind": "ghost", "icon": _vm.Copy20, "label": _vm.tooltipToShow, "tip-position": _vm.copyTipPosition, "tip-alignment": _vm.copyTipAlignment, "disabled": _vm.disabled }, on: { "click": _vm.copyCode } }) : _vm._e(), _vm._v(" "), !_vm.hideExpandButton ? _c('cv-button', { class: _vm.carbonPrefix + "--snippet-btn--expand", attrs: { "type": "button", "kind": "ghost", "size": "small" }, on: { "click": _vm.toggleExpand } }, [_c('span', { class: _vm.carbonPrefix + "--snippet-btn--text" }, [_vm._v(_vm._s(_vm.expandButtonText))]), _vm._v(" "), _c('ChevronDown20', { class: _vm.carbonPrefix + "--icon-chevron--down" })], 1) : _vm._e()], 1); }; var __vue_staticRenderFns__$F = []; /* style */ const __vue_inject_styles__$I = function (inject) { if (!inject) return; inject("data-v-084a2bcc_0", { source: ".bx--snippet--multi .bx--snippet-container[data-v-084a2bcc]{min-height:4.5rem;max-height:9.6rem;overflow-y:hidden}.bx--snippet--multi .bx--snippet-container.no-expand[data-v-084a2bcc]{min-height:2.5rem}.bx--snippet--multi.bx--snippet--expand .bx--snippet-container[data-v-084a2bcc]{max-height:100%}.bx--snippet--multi .bx--copy-btn[data-v-084a2bcc]{position:absolute!important;top:.5rem;right:.5rem;z-index:11;width:3rem;height:2rem}.bx--snippet-btn--expand[data-v-084a2bcc]{right:.5rem;bottom:.5rem}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$I = "data-v-084a2bcc"; /* module identifier */ const __vue_module_identifier__$I = undefined; /* functional template */ const __vue_is_functional_template__$I = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1f = /*#__PURE__*/normalizeComponent({ render: __vue_render__$F, staticRenderFns: __vue_staticRenderFns__$F }, __vue_inject_styles__$I, __vue_script__$y, __vue_scope_id__$I, __vue_is_functional_template__$I, __vue_module_identifier__$I, false, createInjector, undefined, undefined); var __vue_component__$1g = __vue_component__$1f; // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // var script$x = { name: "NsCircleTimer", props: { timeLimit: { type: Number, // milliseconds required: true }, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 20 }, color: { type: String, default: "#00a2de" } }, data() { return { timerInterval: null, timePassed: 0, timeLeft: -1 // length = 2πr = 2 * π * 40 = 251 }; }, computed: { circleDasharray() { return `${(this.calculateTimeFraction() * 251).toFixed(0)} 251`; } }, created() { this.timeLimitSeconds = this.timeLimit / 1000; this.timeLeft = this.timeLimitSeconds; this.$nextTick(() => { this.timePassed += 1; this.timeLeft = this.timeLimitSeconds - this.timePassed; }); this.timerInterval = setInterval(() => { this.timePassed += 1; this.timeLeft = this.timeLimitSeconds - this.timePassed; }, 1000); }, beforeDestroy() { clearInterval(this.timerInterval); }, methods: { calculateTimeFraction() { return this.timeLeft / this.timeLimitSeconds; } } }; /* script */ const __vue_script__$x = script$x; /* template */ var __vue_render__$E = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', { staticClass: "base-timer", style: { height: _vm.size + 'px', width: _vm.size + 'px' } }, [_c('svg', { staticClass: "base-timer__svg", attrs: { "viewBox": "0 0 100 100", "xmlns": "http://www.w3.org/2000/svg" } }, [_c('g', { staticClass: "base-timer__circle" }, [_c('path', { staticClass: "base-timer__path-remaining green", style: { 'stroke-width': _vm.strokeWidth + 'px', 'stroke-dasharray': _vm.circleDasharray, color: _vm.color }, attrs: { "id": "base-timer-path-remaining", "stroke-dasharray": "251", "d": "\n M 50, 50\n m -40, 0\n a 40,40 0 1,0 80,0\n a 40,40 0 1,0 -80,0\n " } })])])]); }; var __vue_staticRenderFns__$E = []; /* style */ const __vue_inject_styles__$H = function (inject) { if (!inject) return; inject("data-v-6609841f_0", { source: ".base-timer[data-v-6609841f]{position:relative}.base-timer__circle[data-v-6609841f]{fill:none;stroke:none}.base-timer__path-remaining[data-v-6609841f]{stroke:currentColor;transform:rotate(90deg);transform-origin:center;transition:1s linear all}.base-timer__svg[data-v-6609841f]{transform:scaleX(-1)}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$H = "data-v-6609841f"; /* module identifier */ const __vue_module_identifier__$H = undefined; /* functional template */ const __vue_is_functional_template__$H = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1e = /*#__PURE__*/normalizeComponent({ render: __vue_render__$E, staticRenderFns: __vue_staticRenderFns__$E }, __vue_inject_styles__$H, __vue_script__$x, __vue_scope_id__$H, __vue_is_functional_template__$H, __vue_module_identifier__$H, false, createInjector, undefined, undefined); var NsCircleTimer = __vue_component__$1e; // var script$w = { name: "NsInlineNotification", extends: CvInlineNotification, components: { NsCircleTimer }, props: { showCloseButton: { type: Boolean, default: false }, description: String, actionLabel: { type: String, default: "" }, closeAriaLabel: { type: String, default: "Dismiss notification" }, kind: { type: String, default: "info", validator: val => ["error", "info", "warning", "success"].includes(val) }, lowContrast: Boolean, loading: { type: Boolean, default: false }, timer: { type: Number } } }; /* script */ const __vue_script__$w = script$w; /* template */ var __vue_render__$D = function () { var _obj; var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', _vm._g({ class: ['cv-inline-notification', _vm.carbonPrefix + "--inline-notification", _vm.carbonPrefix + "--inline-notification--" + _vm.kind.toLowerCase(), (_obj = {}, _obj[_vm.carbonPrefix + "--inline-notification--low-contrast"] = _vm.lowContrast, _obj)], attrs: { "data-notification": "", "role": _vm.isAlert ? 'alert' : false, "aria-live": !_vm.isAlert ? 'polite' : false } }, _vm.$listeners), [_c('div', { class: _vm.carbonPrefix + "--inline-notification__details details" }, [_c(_vm.icon, { tag: "component", class: _vm.carbonPrefix + "--inline-notification__icon" }), _vm._v(" "), _c('div', { class: _vm.carbonPrefix + "--inline-notification__text-wrapper" }, [_vm.$slots.title || _vm.title ? _c('p', { class: _vm.carbonPrefix + "--inline-notification__title title" }, [_vm.$slots.title ? _vm._t("title") : _c('span', [_vm._v(_vm._s(_vm.title))])], 2) : _vm._e(), _vm._v(" "), _vm.$slots.description || _vm.description ? _c('p', { class: [_vm.carbonPrefix + "--inline-notification__subtitle", { 'mg-right': _vm.loading || _vm.timer }] }, [_vm.$slots.description ? _vm._t("description") : _c('span', [_vm._v(_vm._s(_vm.description))])], 2) : _vm._e(), _vm._v(" "), _vm.loading ? _c('p', { staticClass: "loader" }) : _vm._e(), _vm._v(" "), _vm.timer ? _c('p', [_c('NsCircleTimer', { attrs: { "timeLimit": _vm.timer, "size": 16, "strokeWidth": 20, "color": "white" } })], 1) : _vm._e()])], 1), _vm._v(" "), _vm.actionLabel ? _c('button', { class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", _vm.carbonPrefix + "--btn--ghost", 'action-button'], attrs: { "type": "button" }, on: { "click": function ($event) { return _vm.$emit('action'); } } }, [_vm._v("\n " + _vm._s(_vm.actionLabel) + "\n ")]) : _vm._e(), _vm._v(" "), _vm.showCloseButton ? _c('button', { class: _vm.carbonPrefix + "--inline-notification__close-button", attrs: { "type": "button", "aria-label": _vm.closeAriaLabel, "data-notification-btn": "" }, on: { "click": function ($event) { return _vm.$emit('close'); } } }, [_c('Close20', { class: _vm.carbonPrefix + "--inline-notification__close-icon" })], 1) : _vm._e()]); }; var __vue_staticRenderFns__$D = []; /* style */ const __vue_inject_styles__$G = function (inject) { if (!inject) return; inject("data-v-55c5000a_0", { source: ".title[data-v-55c5000a]{margin-right:.75rem;margin-bottom:.2rem;font-size:.875rem!important;font-weight:600!important}.mg-right[data-v-55c5000a]{margin-right:.75rem}.action-button[data-v-55c5000a]{margin-right:.5rem}.bx--inline-notification__text-wrapper p[data-v-55c5000a]{padding-right:0!important}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$G = "data-v-55c5000a"; /* module identifier */ const __vue_module_identifier__$G = undefined; /* functional template */ const __vue_is_functional_template__$G = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1d = /*#__PURE__*/normalizeComponent({ render: __vue_render__$D, staticRenderFns: __vue_staticRenderFns__$D }, __vue_inject_styles__$G, __vue_script__$w, __vue_scope_id__$G, __vue_is_functional_template__$G, __vue_module_identifier__$G, false, createInjector, undefined, undefined); var NsInlineNotification = __vue_component__$1d; // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // var script$v = { name: "NsProgressBar", props: { value: { // a number between 0 and 100 type: [String, Number], default: 0 }, indeterminate: { type: Boolean, default: false }, height: { type: String, default: "5px" }, warningThreshold: { type: Number, default: 70 }, dangerThreshold: { type: Number, default: 90 }, useStatusColors: { type: Boolean, default: false }, useHealthyColor: { type: Boolean, default: true } }, data() { return { progressLineStyle: { width: this.numericValue + "%", transition: "width 0.3s", height: this.height }, heightStyle: { height: this.height } }; }, created() { this.progressLineStyle.width = this.numericValue + "%"; this.heightStyle.height = this.height; }, computed: { numericValue() { return Number(this.value) || 0; }, healthyStatus() { return this.useStatusColors && this.useHealthyColor && this.numericValue < this.warningThreshold; }, warningStatus() { return this.useStatusColors && this.numericValue >= this.warningThreshold && this.numericValue < this.dangerThreshold; }, dangerStatus() { return this.useStatusColors && this.numericValue >= this.dangerThreshold; } }, watch: { value: function () { this.progressLineStyle.width = this.numericValue + "%"; } } }; /* script */ const __vue_script__$v = script$v; /* template */ var __vue_render__$C = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', { staticClass: "progress-bar-container", style: _vm.heightStyle }, [_c('div', { staticClass: "slider", style: _vm.heightStyle }, [_vm.indeterminate ? [_c('div', { staticClass: "indeterminate-line", style: _vm.heightStyle }), _vm._v(" "), _c('div', { staticClass: "indeterminate-subline inc", style: _vm.heightStyle }), _vm._v(" "), _c('div', { staticClass: "indeterminate-subline dec", style: _vm.heightStyle })] : [_c('div', { class: ['line', { healthy: _vm.healthyStatus, warning: _vm.warningStatus, danger: _vm.dangerStatus }], style: _vm.heightStyle }), _vm._v(" "), _c('div', { class: ['progress-line', { healthy: _vm.healthyStatus, warning: _vm.warningStatus, danger: _vm.dangerStatus }], style: _vm.progressLineStyle })]], 2)]); }; var __vue_staticRenderFns__$C = []; /* style */ const __vue_inject_styles__$F = function (inject) { if (!inject) return; inject("data-v-2813565d_0", { source: ".progress-bar-container[data-v-2813565d]{width:100%;position:relative}.slider[data-v-2813565d]{position:absolute;width:100%;overflow-x:hidden}.line[data-v-2813565d]{position:absolute;opacity:.4;width:100%}.progress-line[data-v-2813565d]{position:absolute}.indeterminate-line[data-v-2813565d]{position:absolute;opacity:.4;width:150%}.indeterminate-subline[data-v-2813565d]{position:absolute}.inc[data-v-2813565d]{animation:increase-data-v-2813565d 2s infinite}.dec[data-v-2813565d]{animation:decrease-data-v-2813565d 2s .5s infinite}@keyframes increase-data-v-2813565d{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease-data-v-2813565d{from{left:-80%;width:80%}to{left:110%;width:10%}}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$F = "data-v-2813565d"; /* module identifier */ const __vue_module_identifier__$F = undefined; /* functional template */ const __vue_is_functional_template__$F = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1c = /*#__PURE__*/normalizeComponent({ render: __vue_render__$C, staticRenderFns: __vue_staticRenderFns__$C }, __vue_inject_styles__$F, __vue_script__$v, __vue_scope_id__$F, __vue_is_functional_template__$F, __vue_module_identifier__$F, false, createInjector, undefined, undefined); var NsProgressBar = __vue_component__$1c; // // // // var script$u = { name: "NsSvg", props: { svg: { type: [String, Object], default: undefined, validator(val) { if (!val || typeof val === "string") { return true; } return val.render !== null; } } }, computed: { isSvg() { return this.svg !== undefined && this.svg.indexOf("<svg") >= 0; }, isSymbol() { return this.svg !== undefined && !this.isSvg && this.svg.indexOf("#") >= 0; } }, render(createElement) { if (typeof this.svg === "object") { return createElement("component", { is: this.svg }); } else if (this.isSvg) { return createElement("svg", { domProps: { innerHTML: this.svg } }); } else { if (this.isSymbol) { return createElement("svg", {}, [createElement("use", { attrs: { href: this.svg } })]); } else { return createElement("img", { attrs: { src: this.svg } }); } } } }; /* script */ const __vue_script__$u = script$u; /* template */ /* style */ const __vue_inject_styles__$E = undefined; /* scoped */ const __vue_scope_id__$E = undefined; /* module identifier */ const __vue_module_identifier__$E = undefined; /* functional template */ const __vue_is_functional_template__$E = undefined; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$1b = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$E, __vue_script__$u, __vue_scope_id__$E, __vue_is_functional_template__$E, __vue_module_identifier__$E, false, undefined, undefined, undefined); var NsSvg = __vue_component__$1b; // var script$t = { name: "NsTile", extends: CvTile, inheritAttrs: false, model: { // required for selectable kind prop: "modelValue", event: "modelEvent" }, components: { NsSvg }, props: { // NsTile cannot be expandable selected: Boolean, kind: { type: String, default: "standard", validator: value => ["clickable", "selectable", "standard"].includes(value) }, icon: { type: [String, Object], default: undefined, validator(val) { if (!val || typeof val === "string") { return true; } return val.render !== null; } }, footerIcon: { type: [String, Object], default: undefined, validator(val) { if (!val || typeof val === "string") { return true; } return val.render !== null; } }, centered: Boolean, large: Boolean, light: Boolean, disabled: Boolean }, computed: { tagType() { if (this.disabled) { // not selectable nor clickable return "cv-tile-standard"; } switch (this.kind) { case "clickable": return "cv-tile-clickable"; case "selectable": return "cv-tile-selectable"; default: return "cv-tile-standard"; } } } }; /* script */ const __vue_script__$t = script$t; /* template */ var __vue_render__$B = function () { var _obj; var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c(_vm.tagType, _vm._g(_vm._b({ ref: "tile", tag: "component", class: ["cv-tile " + _vm.carbonPrefix + "--tile", (_obj = {}, _obj[_vm.carbonPrefix + "--tile--light"] = _vm.isLight, _obj), 'ns-tile', { 'pad-bottom': _vm.footerIcon }, { 'disabled-tile': _vm.disabled }], attrs: { "checked": _vm.selected, "expanded": _vm.expanded } }, 'component', _vm.$attrs, false), _vm.$listeners), [_c('div', { class: ['container', { large: _vm.large, centered: _vm.centered || _vm.icon }] }, [_vm.icon ? _c('NsSvg', { staticClass: "tile-icon", attrs: { "svg": _vm.icon } }) : _vm._e(), _vm._v(" "), [_vm._t("default")]], 2), _vm._v(" "), _vm.footerIcon ? _c('NsSvg', { staticClass: "tile-footer-icon", attrs: { "svg": _vm.footerIcon } }) : _vm._e()], 1); }; var __vue_staticRenderFns__$B = []; /* style */ const __vue_inject_styles__$D = function (inject) { if (!inject) return; inject("data-v-2babf9e8_0", { source: ".ns-tile[data-v-2babf9e8]{margin-bottom:2rem;position:relative}.container[data-v-2babf9e8]{display:flex;flex-direction:column;justify-content:center}.centered[data-v-2babf9e8]{text-align:center}.large[data-v-2babf9e8]{min-height:10rem}.tile-icon[data-v-2babf9e8]{display:block;margin-left:auto;margin-right:auto;margin-bottom:1rem}.tile-footer-icon[data-v-2babf9e8]{position:absolute;right:1rem;bottom:1rem;flex-shrink:0;width:1.25rem;height:1.25rem}.pad-bottom[data-v-2babf9e8]{padding-bottom:4rem}.disabled-tile[data-v-2babf9e8]{color:#c6c6c6}", map: undefined, media: undefined }); }; /* scoped */ const __vue_scope_id__$D = "data-v-2babf9e8"; /* module identifier */ const __vue_module_identifier__$D = undefined; /* functional template */ const __vue_is_functional_template__$D = false; /* style inject SSR */ /* style inject shadow dom */ const __vue_component__$19 = /*#__PURE__*/normalizeComponent({ render: __vue_render__$B, staticRenderFns: __vue_staticRenderFns__$B }, __vue_inject_styles__$D, __vue_script__$t, __vue_scope_id__$D, __vue_is_functional_template__$D, __vue_module_identifier__$D, false, createInjector, undefined, undefined); var __vue_component__$1a = __vue_component__$19; function toInteger(dirtyNumber) { if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) { return NaN; } var number = Number(dirtyNumber); if (isNaN(number)) { return number; } return number < 0 ? Math.ceil(number) : Math.floor(number); } function requiredArgs(required, args) { if (args.length < required) { throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present'); } } /** * @name toDate * @category Common Helpers * @summary Convert the given argument to an instance of Date. * * @description * Convert the given argument to an instance of Date. * * If the argument is an instance of Date, the function returns its clone. * * If the argument is a number, it is treated as a timestamp. * * If the argument is none of the above, the function returns Invalid Date. * * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`. * * @param {Date|Number} argument - the value to convert * @returns {Date} the parsed date in the l