@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
105 lines (104 loc) • 3.51 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const sr_only_close_button$1 = require("../../common/mixins/sr_only_close_button.cjs");
const sr_only_close_button = require("../../common/sr_only_close_button.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const button = require("../button/button.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtNoticeAction",
components: {
DtIconClose: vue3.DtIconClose,
DtButton: button.default,
SrOnlyCloseButton: sr_only_close_button.default
},
mixins: [sr_only_close_button$1.default],
props: {
/**
* Props for the notice close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the notice
* @values true, false
*/
hideClose: {
type: Boolean,
default: false
},
/**
* Hides the action from the notice
* @values true, false
*/
hideAction: {
type: Boolean,
default: false
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close"
],
created() {
if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
console.error("Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.");
}
},
mounted() {
if (!this.hideClose) {
this.lastFocusedElement = document.activeElement;
}
},
beforeUnmount() {
var _a;
(_a = this.lastFocusedElement) == null ? void 0 : _a.focus();
},
methods: {
close() {
this.$emit("close");
}
}
};
const _hoisted_1 = {
class: "d-notice__actions",
"data-qa": "notice-content-actions"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
const _component_dt_button = vue.resolveComponent("dt-button");
const _component_sr_only_close_button = vue.resolveComponent("sr-only-close-button");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
!$props.hideAction ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true),
!$props.hideClose ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
key: 1,
ref: "closeButton",
"data-qa": "dt-notice-action-close-button",
size: "sm",
importance: "clear",
circle: "",
"aria-label": $props.closeButtonProps.ariaLabel ? $props.closeButtonProps.ariaLabel : "Close"
}, $props.closeButtonProps, { onClick: $options.close }), {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_close, { size: "200" })
]),
_: 1
}, 16, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),
_ctx.showVisuallyHiddenClose ? (vue.openBlock(), vue.createBlock(_component_sr_only_close_button, {
key: 2,
"visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
onClose: $options.close
}, null, 8, ["visually-hidden-close-label", "onClose"])) : vue.createCommentVNode("", true)
]);
}
const DtNoticeAction = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtNoticeAction;
//# sourceMappingURL=notice_action.vue.cjs.map