@madgex/design-system-ce 5.2.0 → 5.4.0

package/.eslintrc.js

@@ -1,7 +1,14 @@
 module.exports = {
-  extends: ['plugin:vue/essential', '@vue/prettier'],
-  rules: {},
   env: {
     browser: true,
   },
+  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
+  rules: {
+    'vue/no-v-html': 0,
+    'no-debugger': 0,
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/html-indent': 'off',
+    'vue/html-self-closing': ['error', { html: { void: 'any' } }],
+  },
 };

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.3.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.4.0) (2023-01-05)
+
+
+### Features
+
+* CE combobox default enter key action if not expanded ([c1d7329](https://github.com/projects/MDS/repos/mds-branding/commits/c1d732995c364c7310522f4ca1f87e6466acd08a))
+
+
+
+## [5.3.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.2.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.3.0) (2022-11-25)
+
+
+### Features
+
+* add link for text editor ([288ad29](https://github.com/projects/MDS/repos/mds-branding/commits/288ad2988076cebddeebab420e3e5438a5d2f818))
+
+
+### Bug Fixes
+
+* automatically apply protocol to textEditor link ([fee5fc7](https://github.com/projects/MDS/repos/mds-branding/commits/fee5fc760d7fc3e01f3bff56022b5fd942cb6d44))
+* remove link editor popover/button ([db6c5f8](https://github.com/projects/MDS/repos/mds-branding/commits/db6c5f8bb64d2a2d44a5ce13b7f4d943664a7aad))
+* remove link editor popover/button ([0b263f8](https://github.com/projects/MDS/repos/mds-branding/commits/0b263f824e7deebd74655aa990e5c1c9e771b831))
+* remove unused code ([b29e960](https://github.com/projects/MDS/repos/mds-branding/commits/b29e96030d7f53242d65335022a2b0af49fff733))
+* texteditor anchor validation ([5e40b46](https://github.com/projects/MDS/repos/mds-branding/commits/5e40b462974a26473d36c2b033de4d1eb606c368))
+* texteditor applyMissingProtocol mailto ([af94428](https://github.com/projects/MDS/repos/mds-branding/commits/af944282bc8f2aa239031a09310112cf0d153924))
+* textEditor link enabled if valid selection ([654dc8d](https://github.com/projects/MDS/repos/mds-branding/commits/654dc8d61d1846e684d3c3cd3b88b84d011cbc87))
+* textEditor link popover spacing ([2236c64](https://github.com/projects/MDS/repos/mds-branding/commits/2236c6442261f05dee13ab82319bc503d9262832))
+* textEditor links always underline ([d7851e3](https://github.com/projects/MDS/repos/mds-branding/commits/d7851e355b1e8dcbbf4c75c6ad8eac8b6c60ed44))
+* textEditor linkUrl i18n, for/id couple ([2cdad01](https://github.com/projects/MDS/repos/mds-branding/commits/2cdad0129cbc5354441ebf1830a7324559386533))
+* textEditor remove auto-focus on open link editor ([1c42419](https://github.com/projects/MDS/repos/mds-branding/commits/1c42419ced20efe5bb0cb1e80221eab509b29645))
+* textEditori18n ([6bf5d03](https://github.com/projects/MDS/repos/mds-branding/commits/6bf5d0352ce1ec77908c03a9e597d8ddbc7f3ba9))
+* textEdtorPopover ([13c39be](https://github.com/projects/MDS/repos/mds-branding/commits/13c39bee9c0d676fa87bf815c64873b92ba9ee7e))
+* tweak text editor link ([32e3992](https://github.com/projects/MDS/repos/mds-branding/commits/32e399236782169c3075a4a2ebc853c6a690f966))
+
+
+
 ## [5.2.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.2&sourceBranch=refs/tags/@madgex/design-system-ce@5.2.0) (2022-08-18)
 
 

package/components/combobox/Combobox.ce.vue

@@ -7,7 +7,7 @@
     @keydown.home="hiddenGuard(onKeyHome)"
     @keydown.end="hiddenGuard(onKeyEnd)"
     @keydown.esc="makeInactive"
-    @keydown.enter.stop.prevent="chooseOption"
+    @keydown.enter="handleKeyDownEnter"
   >
     <input
       @input="handleInput"
@@ -248,6 +248,13 @@ export default {
       this.chosenOption = option;
       this.makeInactive();
     },
+    /* When expanded then enter key down selects an option, otherwise enter key will be native behaviour, eg submit form */
+    handleKeyDownEnter(event) {
+      if (this.expanded) {
+        event.preventDefault();
+        this.chooseOption();
+      }
+    },
     chooseOption() {
       this.chosenOption = this.selectedOption;
       this.makeInactive();

package/components/text-editor/TextEditor.ce.vue

@@ -13,6 +13,14 @@ export default {
   components: {
     TextEditorContent,
   },
+  provide() {
+    return {
+      iconPath: this.iconpath,
+      id: this.editorid,
+      customMenuButtons: this.customMenuButtons,
+      i18nText: this.i18nText,
+    };
+  },
   props: {
     editorid: {
       type: String,
@@ -45,21 +53,16 @@ export default {
       return this.menuButtons ? JSON.parse(this.menuButtons) : null;
     },
     i18nText() {
-      return this.i18n
-        ? JSON.parse(this.i18n)
-        : {
-            toolbarLabel: 'Text formatting',
-          };
+      const parsedI18n = this.i18n ? JSON.parse(this.i18n) : {};
+      return {
+        toolbarLabel: 'Text formatting',
+        addLink: 'Add link',
+        removeLink: 'Remove link',
+        visuallyHiddenLinkUrlLabel: 'Link url',
+        ...parsedI18n,
+      };
     },
   },
-  provide() {
-    return {
-      iconPath: this.iconpath,
-      id: this.editorid,
-      customMenuButtons: this.customMenuButtons,
-      i18nText: this.i18nText,
-    };
-  },
   mounted() {
     const fallback = document.querySelector(`#text-editor-fallback-${this.editorid}`);
     if (fallback) fallback.remove();

package/components/text-editor/TextEditorContent.vue

@@ -8,6 +8,7 @@
 <script>
 import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
+import Link from '@tiptap/extension-link';
 import TextEditorToolbar from './TextEditorToolbar.vue';
 
 export default {
@@ -46,7 +47,13 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      extensions: [StarterKit],
+      extensions: [
+        StarterKit,
+        Link.configure({
+          protocols: ['http', 'https', 'mailto'], // automatically create links of text with these protocols
+          openOnClick: false,
+        }),
+      ],
       editorProps: {
         attributes: {
           class: 'mds-text-editor__content mds-edited-text',

package/components/text-editor/TextEditorPopover.vue

@@ -0,0 +1,113 @@
+<template>
+  <div ref="popperRef" class="mds-popover" :class="{ 'mds-popover--active': visible }" :aria-hidden="!visible">
+    <div class="mds-popover__arrow" data-popper-arrow />
+    <div class="mds-tooltip__inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { createPopper } from '@popperjs/core';
+import { isNodeSelection, posToDOMRect } from '@tiptap/core';
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  editor: {
+    type: Object,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// eslint-disable-next-line no-undef
+const emit = defineEmits(['update:visible']);
+
+const popperRef = ref(null);
+const instance = ref(undefined);
+
+const baseSize = 4;
+
+const destroy = () => {
+  instance.value?.destroy();
+  instance.value = undefined;
+};
+
+const virtualElement = {
+  getBoundingClientRect: () => {
+    const { view, state } = props.editor;
+    const { ranges } = state.selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+    if (isNodeSelection(state.selection)) {
+      const node = view.nodeDOM(from);
+      if (node) return node.getBoundingClientRect();
+    }
+    return posToDOMRect(view, from, to);
+  },
+};
+
+const initPopper = () => {
+  if (instance.value) destroy();
+  if (!popperRef.value) return;
+  instance.value = createPopper(virtualElement, popperRef.value, {
+    placement: 'bottom',
+    strategy: 'fixed',
+    modifiers: [
+      { name: 'offset', options: { offset: [0, baseSize * 3] } },
+      // arrow will always be at least 5px away from the edge
+      { name: 'arrow', options: { padding: 5 } },
+    ],
+  });
+};
+
+const hideMouseDown = (event) => {
+  if (!popperRef.value?.contains(event.target) && props.visible) {
+    console.log('visiblevisible');
+
+    emit('update:visible', false);
+  }
+};
+const hideKeyDown = (event) => {
+  if (event.keyCode === 27) {
+    emit('update:visible', false);
+  }
+};
+
+const updateInstance = () => instance.value?.update();
+const onEditorFocus = () => {
+  emit('update:visible', false);
+};
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      updateInstance();
+    }
+  }
+);
+
+onMounted(() => {
+  initPopper();
+  props.editor.on('focus', onEditorFocus);
+  props.editor.on('blur', updateInstance);
+  document.addEventListener('mousedown', hideMouseDown);
+  document.addEventListener('keydown', hideKeyDown);
+});
+
+onUnmounted(() => {
+  props.editor.off('focus', onEditorFocus);
+  props.editor.off('blur', updateInstance);
+  document.removeEventListener('mousedown', hideMouseDown);
+  document.removeEventListener('keydown', hideKeyDown);
+  destroy();
+});
+</script>

package/components/text-editor/TextEditorPopoverLink.vue

@@ -0,0 +1,100 @@
+<template>
+  <TextEditorPopover id="link-editor" v-model:visible="visibleModel" :editor="editor">
+    <div class="mds-grid">
+      <div class="mds-grid-row">
+        <span class="mds-grid-col mds-grid-fit-content">
+          <label class="mds-visually-hidden" for="link-url">{{ i18nText.visuallyHiddenLinkUrlLabel }}</label>
+          <input
+            id="link-url"
+            ref="linkInput"
+            v-model="linkUrlModel"
+            class="mds-form-control"
+            placeholder="example.com"
+          />
+        </span>
+        <span class="mds-grid-col">
+          <button class="mds-button mds-width-full" @click="setLink">{{ i18nText.addLink }}</button>
+          <button class="mds-button mds-button--plain mds-width-full" @click="removeLink">
+            {{ i18nText.removeLink }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </TextEditorPopover>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import TextEditorPopover from './TextEditorPopover.vue';
+import { applyMissingProtocol } from './apply-missing-protocol';
+import { nextTick } from 'process';
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  linkUrl: {
+    type: String,
+    default: '',
+  },
+  editor: {
+    type: Object,
+    required: true,
+  },
+});
+// eslint-disable-next-line no-undef
+const emit = defineEmits(['update:visible', 'update:linkUrl']);
+
+const i18nText = inject('i18nText');
+
+const visibleModel = computed({
+  get() {
+    return props.visible;
+  },
+  set(val) {
+    emit('update:visible', val);
+  },
+});
+const linkUrlModel = computed({
+  get() {
+    return props.linkUrl;
+  },
+  set(val) {
+    emit('update:linkUrl', val);
+  },
+});
+
+const setLink = () => {
+  // cancelled
+  if (linkUrlModel.value === null) {
+    visibleModel.value = false;
+    return;
+  }
+
+  // unset link if empty
+  if (linkUrlModel.value?.trim() === '') {
+    props.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+    visibleModel.value = false;
+    return;
+  }
+  linkUrlModel.value = applyMissingProtocol(linkUrlModel.value);
+
+  // update link
+  nextTick(() => {
+    props.editor
+      .chain()
+      .focus()
+      .extendMarkRange('link')
+      .setLink({ href: linkUrlModel.value })
+      .setTextSelection(0)
+      .run();
+    visibleModel.value = false;
+  });
+};
+const removeLink = () => {
+  props.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+  linkUrlModel.value = false;
+};
+</script>

package/components/text-editor/TextEditorToolbar.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="mds-text-editor__menu" role="toolbar" :aria-label="i18nText.toolbarLabel" :aria-controls="id">
     <TextEditorButton
-      ref="menuButton"
       v-for="button in menuButtons"
-      :key="button.id"
       :id="button.id"
+      ref="menuButton"
+      :key="button.id"
       :label="button.label"
       :icon-name="button.iconName"
-      :isActive="button.isActive?.(editor)"
+      :is-active="button.isActive?.(editor)"
       :disabled="button.isDisabled?.(editor)"
-      :initialTabindex="firstFocusableButton.id === button.id ? 0 : -1"
+      :initial-tabindex="firstFocusableButton.id === button.id ? 0 : -1"
       :aria-pressed="button.id === 'undo' || button.id === 'redo' ? null : button.isActive?.(editor)"
+      :aria-expanded="button.ariaExpanded?.()"
       @click="button.onClick(editor)"
       @keyup.left="setFocusToSibling('previous', $event)"
       @keyup.up="setFocusToSibling('previous', $event)"
@@ -18,19 +19,24 @@
       @keyup.down="setFocusToSibling('next', $event)"
       @update-tab-index="updateTabIndex"
     />
+    <!-- <TextEditorPopoverLink v-if="editor" v-model:linkUrl="linkUrl" v-model:visible="showLinkEditor" :editor="editor" /> -->
   </div>
 </template>
 
 <script>
 import TextEditorButton from './TextEditorButton.vue';
+// import TextEditorPopoverLink from './TextEditorPopoverLink.vue';
 
 export default {
   name: 'TextEditorToolbar',
 
   components: {
     TextEditorButton,
+    // TextEditorPopoverLink,
   },
 
+  inject: ['id', 'customMenuButtons', 'i18nText'],
+
   props: {
     editor: {
       type: Object,
@@ -38,8 +44,6 @@ export default {
     },
   },
 
-  inject: ['id', 'customMenuButtons', 'i18nText'],
-
   data() {
     return {
       defaultMenuButtons: [
@@ -78,6 +82,25 @@ export default {
           onClick: (editor) => editor.commands.toggleOrderedList(),
           isActive: (editor) => editor.isActive('orderedList'),
         },
+        /* {
+          id: 'link',
+          label: 'Link',
+          iconName: 'text-link',
+          ariaExpanded: () => this.showLinkEditor,
+          onClick: (editor) => {
+            if (this.shouldShowLinkEditor()) {
+              // only show the bubble menu for links
+              this.showLinkEditor = true;
+              // update link in text input if we should show it
+              const previousUrl = editor.getAttributes('link').href;
+              this.linkUrl = previousUrl ?? '';
+            }
+          },
+          isActive: (editor) => editor.isActive('link'),
+          isDisabled: () => {
+            return !this.shouldShowLinkEditor();
+          },
+        }, */
         {
           id: 'undo',
           label: 'Undo',
@@ -93,9 +116,10 @@ export default {
           isDisabled: (editor) => !editor.can().redo(),
         },
       ],
+      // showLinkEditor: false,
+      // linkUrl: '',
     };
   },
-
   computed: {
     menuButtons() {
       if (this.customMenuButtons?.length) {
@@ -115,7 +139,6 @@ export default {
       return this.menuButtons.find((button) => !button.isDisabled?.(this.editor));
     },
   },
-
   methods: {
     findSiblings(currentElement, position) {
       let sibling = position === 'previous' ? currentElement.previousElementSibling : currentElement.nextElementSibling;
@@ -144,6 +167,12 @@ export default {
         }
       });
     },
+    /* shouldShowLinkEditor() {
+      // no selection, so cant open link editor
+      const hasSelection = this.editor.state.selection.$from.pos !== this.editor.state.selection.$to.pos;
+      const cursorIsAtLink = this.editor.isActive('link');
+      return hasSelection || cursorIsAtLink;
+    }, */
   },
 };
 </script>

package/components/text-editor/apply-missing-protocol.js

@@ -0,0 +1,7 @@
+const isValidProtocol = (href) => /^https?:\/\/|mailto:/.test(href);
+
+export const applyMissingProtocol = (href) => {
+  const isValid = isValidProtocol(href);
+  if (!isValid) return `http://${href}`;
+  return href;
+};

package/dist/custom-elements/mds-combobox.js

@@ -1 +1 @@
-import{_ as h,o as a,c as l,a as c,w as r,t as m,b as v,r as I,n as g,d as p,e as x,f as _,g as C,h as B,F as k,i as w,j as L}from"../plugin-vue_export-helper.js";const V={name:"ComboboxClear",inject:["iconPath","clearInput"]},S=["aria-label","title"],T={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},M=["href"];function E(t,i,n,u,o,e){return a(),l("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:i[0]||(i[0]=d=>t.$emit("clear",d)),onKeydown:i[1]||(i[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),l("svg",T,[c("use",{href:`${e.iconPath}#icon-close`},null,8,M)]))],40,S)}var H=h(V,[["render",E]]);const K={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0},comboboxid:{type:String,required:!0}},inject:["iconPath","loadingText"]},F=["aria-labelledby","hidden"],A={key:0,class:"mds-combobox-loading"},q={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},G=["href"],P={class:"mds-visually-hidden"};function j(t,i,n,u,o,e){return a(),l("ul",{class:"mds-combobox__listbox",role:"listbox","aria-labelledby":`${n.comboboxid}-label`,hidden:n.hidden},[n.isLoading?(a(),l("li",A,[(a(),l("svg",q,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,G)])),c("span",P,m(e.loadingText),1)])):v("",!0),I(t.$slots,"default")],8,F)}var N=h(K,[["render",j]]);const D={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView(!1)}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),i=>`<span class="mds-combobox__option--marked">${i}</span>`)}}},R=["aria-selected","innerHTML"];function U(t,i,n,u,o,e){return a(),l("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":n.focused}]),role:"option","aria-selected":n.focused.toString(),onMousedown:i[0]||(i[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,R)}var $=h(D,[["render",U]]);const z={name:"Combobox",components:{ComboboxClear:H,ListBox:N,ListBoxOption:$},emits:["search","select-option","clear-all"],props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""}},data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},mounted(){var n,u,o,e;const t=(u=(n=this.$el.parentElement)==null?void 0:n.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),i=(e=(o=this.$el.parentElement)==null?void 0:o.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),i&&i.removeAttribute("id")},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},describedBy(){return`${this.comboboxid}-assistiveHint`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.indexOf(this.selectedOption);if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",describedByText:"When autocomplete results are available, use up and down arrows to review and enter to select.",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>1?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(n=>n.value===this.selectedOption.value),i=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[i]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(n=>n.value===this.selectedOption.value),i=t===0?t:t-1;this.selectedOption=this.visibleOptions[i]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},J=["value","id","name","placeholder","aria-owns","aria-expanded","aria-activedescendant","aria-invalid","aria-describedby"],W={"aria-live":"polite",role:"status",class:"mds-visually-hidden"},Q=["id"];function X(t,i,n,u,o,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),y=p("ListBox");return a(),l("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[i[4]||(i[4]=r(s=>e.hiddenGuard(e.onKeyDown),["down"])),i[5]||(i[5]=r(s=>e.hiddenGuard(e.onKeyUp),["up"])),i[6]||(i[6]=r(s=>e.hiddenGuard(e.onKeyHome),["home"])),i[7]||(i[7]=r(s=>e.hiddenGuard(e.onKeyEnd),["end"])),i[8]||(i[8]=r((...s)=>e.makeInactive&&e.makeInactive(...s),["esc"])),i[9]||(i[9]=r(B((...s)=>e.chooseOption&&e.chooseOption(...s),["stop","prevent"]),["enter"]))]},[c("input",{onInput:i[0]||(i[0]=(...s)=>e.handleInput&&e.handleInput(...s)),value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",ref:"comboInput",id:n.comboboxid,name:n.name,placeholder:n.placeholder,"aria-owns":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,"aria-describedby":e.describedBy,onChange:i[1]||(i[1]=(...s)=>e.handleChange&&e.handleChange(...s)),onBlur:i[2]||(i[2]=(...s)=>e.onInputBlur&&e.onInputBlur(...s)),onFocus:i[3]||(i[3]=(...s)=>e.handleFocus&&e.handleFocus(...s))},null,40,J),o.searchValue.length>0?(a(),x(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),_(y,{id:e.listBoxId,hidden:e.listBoxHidden,isLoading:e.isLoading,comboboxid:n.comboboxid},{default:C(()=>[(a(!0),l(k,null,w(e.visibleOptions,(s,b)=>{var f;return a(),x(O,{key:b,option:s,id:`${e.optionId}-${b}`,focused:((f=e.selectedOption)==null?void 0:f.value)===(s==null?void 0:s.value),onMousedown:Z=>e.clickOption(s),searchValue:o.searchValue},null,8,["option","id","focused","onMousedown","searchValue"])}),128))]),_:1},8,["id","hidden","isLoading","comboboxid"]),c("div",W,m(o.resultCountMessage),1),c("span",{id:e.describedBy,style:{display:"none"}},m(e.i18nText.describedByText),9,Q)],34)}var Y=h(z,[["render",X]]);const te=L(Y,{shadowRoot:!1});export{te as default};
+import{_ as h,o as a,c as l,a as c,w as r,t as m,b as v,r as I,n as g,d as p,e as x,f as _,g as C,F as B,h as w,i as k}from"../plugin-vue_export-helper.js";const L={name:"ComboboxClear",inject:["iconPath","clearInput"]},V=["aria-label","title"],S={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},T=["href"];function E(t,n,s,u,o,e){return a(),l("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:n[0]||(n[0]=d=>t.$emit("clear",d)),onKeydown:n[1]||(n[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),l("svg",S,[c("use",{href:`${e.iconPath}#icon-close`},null,8,T)]))],40,V)}var K=h(L,[["render",E]]);const M={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0},comboboxid:{type:String,required:!0}},inject:["iconPath","loadingText"]},H=["aria-labelledby","hidden"],F={key:0,class:"mds-combobox-loading"},D={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},A=["href"],q={class:"mds-visually-hidden"};function G(t,n,s,u,o,e){return a(),l("ul",{class:"mds-combobox__listbox",role:"listbox","aria-labelledby":`${s.comboboxid}-label`,hidden:s.hidden},[s.isLoading?(a(),l("li",F,[(a(),l("svg",D,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,A)])),c("span",q,m(e.loadingText),1)])):v("",!0),I(t.$slots,"default")],8,H)}var P=h(M,[["render",G]]);const N={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView(!1)}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),n=>`<span class="mds-combobox__option--marked">${n}</span>`)}}},j=["aria-selected","innerHTML"];function R(t,n,s,u,o,e){return a(),l("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":s.focused}]),role:"option","aria-selected":s.focused.toString(),onMousedown:n[0]||(n[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,j)}var U=h(N,[["render",R]]);const $={name:"Combobox",components:{ComboboxClear:K,ListBox:P,ListBoxOption:U},emits:["search","select-option","clear-all"],props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""}},data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},mounted(){var s,u,o,e;const t=(u=(s=this.$el.parentElement)==null?void 0:s.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),n=(e=(o=this.$el.parentElement)==null?void 0:o.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),n&&n.removeAttribute("id")},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},describedBy(){return`${this.comboboxid}-assistiveHint`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.indexOf(this.selectedOption);if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",describedByText:"When autocomplete results are available, use up and down arrows to review and enter to select.",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>1?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},handleKeyDownEnter(t){this.expanded&&(t.preventDefault(),this.chooseOption())},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[n]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===0?t:t-1;this.selectedOption=this.visibleOptions[n]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},z=["value","id","name","placeholder","aria-owns","aria-expanded","aria-activedescendant","aria-invalid","aria-describedby"],J={"aria-live":"polite",role:"status",class:"mds-visually-hidden"},W=["id"];function Q(t,n,s,u,o,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),y=p("ListBox");return a(),l("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[n[4]||(n[4]=r(i=>e.hiddenGuard(e.onKeyDown),["down"])),n[5]||(n[5]=r(i=>e.hiddenGuard(e.onKeyUp),["up"])),n[6]||(n[6]=r(i=>e.hiddenGuard(e.onKeyHome),["home"])),n[7]||(n[7]=r(i=>e.hiddenGuard(e.onKeyEnd),["end"])),n[8]||(n[8]=r((...i)=>e.makeInactive&&e.makeInactive(...i),["esc"])),n[9]||(n[9]=r((...i)=>e.handleKeyDownEnter&&e.handleKeyDownEnter(...i),["enter"]))]},[c("input",{onInput:n[0]||(n[0]=(...i)=>e.handleInput&&e.handleInput(...i)),value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",ref:"comboInput",id:s.comboboxid,name:s.name,placeholder:s.placeholder,"aria-owns":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,"aria-describedby":e.describedBy,onChange:n[1]||(n[1]=(...i)=>e.handleChange&&e.handleChange(...i)),onBlur:n[2]||(n[2]=(...i)=>e.onInputBlur&&e.onInputBlur(...i)),onFocus:n[3]||(n[3]=(...i)=>e.handleFocus&&e.handleFocus(...i))},null,40,z),o.searchValue.length>0?(a(),x(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),_(y,{id:e.listBoxId,hidden:e.listBoxHidden,isLoading:e.isLoading,comboboxid:s.comboboxid},{default:C(()=>[(a(!0),l(B,null,w(e.visibleOptions,(i,b)=>{var f;return a(),x(O,{key:b,option:i,id:`${e.optionId}-${b}`,focused:((f=e.selectedOption)==null?void 0:f.value)===(i==null?void 0:i.value),onMousedown:Y=>e.clickOption(i),searchValue:o.searchValue},null,8,["option","id","focused","onMousedown","searchValue"])}),128))]),_:1},8,["id","hidden","isLoading","comboboxid"]),c("div",J,m(o.resultCountMessage),1),c("span",{id:e.describedBy,style:{display:"none"}},m(e.i18nText.describedByText),9,W)],34)}var X=h($,[["render",Q]]);const ee=k(X,{shadowRoot:!1});export{ee as default};