From 421cf2863f858cecd1ef102d7830ed2fb576ca63 Mon Sep 17 00:00:00 2001 From: verena-ifx Date: Mon, 31 Jul 2023 18:49:53 +0200 Subject: [PATCH] single-select style update --- packages/components-vue/lib/components.ts | 2 + packages/components/package.json | 4 +- .../src/components/choices/choices.scss | 1049 +++++++++-------- .../src/components/choices/choices.stories.ts | 9 + .../src/components/choices/choices.tsx | 115 +- .../src/components/choices/readme.md | 2 + 6 files changed, 639 insertions(+), 542 deletions(-) diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts index 456c07be26..68eaa9af75 100644 --- a/packages/components-vue/lib/components.ts +++ b/packages/components-vue/lib/components.ts @@ -140,6 +140,8 @@ export const IfxChoices = /*@__PURE__*/ defineContainer maybe remove this and always set to placeholder value when item is removed - overflow: hidden; - -} - -.is-focused .choices__inner, -.is-open .choices__inner { - border-color: #b7b7b7; -} - -.is-open .choices__inner { - border-radius: 2.5px 2.5px 0 0; -} - -.is-flipped.is-open .choices__inner { - border-radius: 0 0 2.5px 2.5px; -} - -.choices__list { - margin: 0; - padding-left: 0; - list-style: none; -} - -.choices__list--single { - // display: inline-block; - padding: 4px 16px 4px 4px; - // width: 100%; -} - -[dir='rtl'] .choices__list--single { - padding-right: 4px; - padding-left: 16px; -} - -.choices__list--single .choices__item { - width: 100%; - display: flex; - justify-content: space-between; -} - -.choices__list--multiple { - display: inline; -} - -.choices__list--multiple .choices__item { - display: inline-block; - vertical-align: middle; - border-radius: 20px; - padding: 4px 10px; - font-size: 12px; - font-weight: 500; - margin-right: 3.75px; - margin-bottom: 3.75px; - background-color: tokens.$color-default-500; - border: 1px solid tokens.$color-default-500; - color: tokens.$color-text-white; - word-break: break-all; - box-sizing: border-box; -} - -.choices__list--multiple .choices__item[data-deletable] { - padding-right: 5px; -} - -[dir='rtl'] .choices__list--multiple .choices__item { - margin-right: 0; - margin-left: 3.75px; -} - -.choices__list--multiple .choices__item.is-highlighted { - background-color: tokens.$color-gray-200; - border: 1px solid tokens.$color-default-500; -} - -.is-disabled .choices__list--multiple .choices__item { - background-color: #aaaaaa; - border: 1px solid #919191; -} - -.choices__list--dropdown { - visibility: hidden; - // z-index: 1; - box-sizing: border-box; - position: absolute; - width: 100%; - background-color: #fff; - // border: 1px solid #dddddd; - top: 100%; - margin-top: -1px; - // border-bottom-left-radius: 2.5px; - // border-bottom-right-radius: 2.5px; - overflow: hidden; - word-break: break-all; - will-change: visibility; - box-shadow: 0px 0px 16px rgba(29, 29, 29, 0.12); - border-radius: 1px; - margin-top: 8px; - z-index: 1000; - -} - -.choices__list--dropdown.is-active { - visibility: visible; -} - -.is-open .choices__list--dropdown { - border-color: #b7b7b7; -} - -.is-flipped .choices__list--dropdown { - top: auto; - bottom: 100%; - margin-top: 0; - margin-bottom: -1px; - border-radius: 0.25rem 0.25rem 0 0; -} - -.choices__list--dropdown .choices__list { - position: relative; - max-height: 300px; - overflow: auto; - -webkit-overflow-scrolling: touch; - will-change: scroll-position; -} - -.choices__list--dropdown .choices__item { - position: relative; - padding: 10px; - font-size: 14px; -} - -[dir='rtl'] .choices__list--dropdown .choices__item { - text-align: right; -} - - - -@media (min-width: 640px) { - .choices__list--dropdown .choices__item--selectable { - // padding-right: 100px; remove padding so the checkmark can be aligned at the very right - } - - .choices__list--dropdown .choices__item--selectable:after { - // content: attr(data-select-text); #press to select text next to select option - font-size: 12px; - opacity: 0; + .choices:last-child { + margin-bottom: 0; + } + + .choices.is-disabled .choices__inner, + .choices.is-disabled .choices__input { + background-color: #eaeaea; + cursor: not-allowed; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .choices.is-disabled .choices__item { + cursor: not-allowed; + } + + .choices [hidden] { + display: none !important; + } + + .choices[data-type*='select-one'] { + cursor: pointer; + + } + + .choices[data-type*='select-one'] .choices__inner { + // padding-bottom: 7.5px; + } + + .choices[data-type*='select-one'] .choices__input { + display: block; + width: 100%; + padding: 10px; + border-bottom: 1px solid #dddddd; + background-color: #ffffff; + margin: 0; + } + + .choices[data-type*='select-one'] .choices__single-button { + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); + padding: 0; + background-size: 8px; position: absolute; - right: 10px; top: 50%; - transform: translateY(-50%); + right: 0; + margin-top: -10px; + margin-right: 25px; + height: 20px; + width: 20px; + border-radius: 10em; + opacity: 0.5; } - [dir='rtl'] .choices__list--dropdown .choices__item--selectable { - text-align: right; - padding-left: 100px; - padding-right: 10px; + .choices[data-type*='select-one'] .choices__single-button:hover, + .choices[data-type*='select-one'] .choices__single-button:focus { + opacity: 1; } - [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after { - right: auto; - left: 10px; - } -} - - -.choices__list--dropdown .choices__item--selectable.is-highlighted { - background-color: tokens.$color-gray-200; - font-weight: bold; -} - -.choices__list--dropdown .choices__item--selectable.is-highlighted:after { - opacity: 0.5; -} - -.choices__item { - cursor: default; -} - -.choices__item--selectable { - cursor: pointer; -} - -.choices__item--disabled { - cursor: not-allowed; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - opacity: 0.5; -} - -.choices__heading { - font-weight: 600; - font-size: 12px; - padding: 10px; - border-bottom: 1px solid #f7f7f7; - color: tokens.$color-text-black; -} - -.choices__button { - //default button for removing items - text-indent: -9999px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - // visibility: hidden; //hide remove button on select menu - - // &.single-select { //currently not needed - // //different style for the button when used in a single select - // // background-color: black; - // cursor: pointer; - - // & ifx-icon { - // display: flex; - // } + .choices[data-type*='select-one'] .choices__single-button:focus { + box-shadow: 0px 0px 0px 2px tokens.$color-default-500; + ; + } + + .choices[data-type*='select-one'] .choices__item[data-value=''] .choices__single-button { + display: none; + } + + // .choices[data-type*='select-one']:after { + // content: ''; + // height: 0; + // width: 0; + // border-style: solid; + // border-color: #333333 transparent transparent transparent; + // border-width: 5px; + // position: absolute; + // right: 11.5px; + // top: 50%; + // margin-top: -2.5px; + // pointer-events: none; // } -} - -.choices__button:focus { - outline: none; -} - -.choices__single-button { - text-indent: -9999px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - visibility: hidden; //hide remove button on select menu -} - -.choices__single-button:focus { - outline: none; -} - - - -.choices__input { - display: inline-block; - vertical-align: baseline; - background-color: #f9f9f9; - font-size: 14px; - margin-bottom: 5px; - border: 0; - border-radius: 0; - max-width: 100%; - padding: 4px 0 4px 2px; - -} - -/* clears the 'X' for the input type=search from Internet Explorer */ -.choices__input::-ms-clear { - display: none; - width: 0; - height: 0; -} - -.choices__input::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -/* clears the 'X' for the input type=search from Chrome */ -.choices__input::-webkit-search-decoration, -.choices__input::-webkit-search-cancel-button, -.choices__input::-webkit-search-results-button, -.choices__input::-webkit-search-results-decoration { - display: none; -} - - -.choices__input:focus { - outline: 0; -} - -[dir='rtl'] .choices__input { - padding-right: 2px; - padding-left: 0; -} - -.choices__placeholder { - opacity: 0.5; -} - -/*===== End of Choices ======*/ - -.select { - padding: 1rem 0; -} - -.submit { - text-align: center; -} - -.btn { - background-color: tokens.$color-default-500; - border: none; - border-radius: 4px; - color: #fff; - font-size: 1rem; - padding: 8px 12px; - cursor: pointer; -} - -.btn:hover { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5); -} - -.values-container { - background-color: #f9f9f9; - padding: .5rem; - margin-top: 1rem; -} - -.values-container .values-container__text { - word-break: break-all; - margin: 0; + + .choices[data-type*='select-one'].is-open:after { + // border-color: transparent transparent #333333 transparent; + margin-top: -7.5px; + } + + .choices[data-type*='select-one'][dir='rtl']:after { + left: 11.5px; + right: auto; + } + + .choices[data-type*='select-one'][dir='rtl'] .choices__single-button { + right: auto; + left: 0; + margin-left: 25px; + margin-right: 0; + } + + + .choices[data-type*='select-multiple'] .choices__inner, + .choices[data-type*='text'] .choices__inner { + cursor: text; + } + + .choices[data-type*='select-multiple'] .choices__button, + .choices[data-type*='text'] .choices__button { + position: relative; + display: inline-block; + margin-top: 0; + margin-right: -4px; + margin-bottom: 0; + margin-left: 8px; + padding-left: 16px; + border-left: 1px solid tokens.$color-default-500; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); + background-size: 8px; + width: 8px; + line-height: 1; + opacity: 0.75; + border-radius: 0; + } + + .choices[data-type*='select-multiple'] .choices__button:hover, + .choices[data-type*='select-multiple'] .choices__button:focus, + .choices[data-type*='text'] .choices__button:hover, + .choices[data-type*='text'] .choices__button:focus { + opacity: 1; + } + + .choices__inner { + // background-color: #ffff; + // padding-left: 7.5px; + // padding-top: 7.5px; + // padding: 7.5px; + // min-height: 24px; //min-height to have the same height when the select is empty => maybe remove this and always set to placeholder value when item is removed + overflow: hidden; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + } + + .is-focused .choices__inner, + .is-open .choices__inner { + border-color: #b7b7b7; + } + + + .is-open .choices__inner { + border-radius: 2.5px 2.5px 0 0; + } + + .is-flipped.is-open .choices__inner { + border-radius: 0 0 2.5px 2.5px; + } + + .choices__list { + margin: 0; + padding-left: 0; + list-style: none; + } + + .choices__list--single { + // display: inline-block; + // padding: 4px 16px 4px 4px; + // width: 100%; + } + + [dir='rtl'] .choices__list--single { + padding-right: 4px; + padding-left: 16px; + } + + .choices__list--single .choices__item { + width: 100%; + display: flex; + justify-content: space-between; + + + } + + .choices__list--multiple { + display: inline; + } + + .choices__list--multiple .choices__item { + display: inline-block; + vertical-align: middle; + border-radius: 20px; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + margin-right: 3.75px; + margin-bottom: 3.75px; + background-color: tokens.$color-default-500; + border: 1px solid tokens.$color-default-500; + color: tokens.$color-text-white; + word-break: break-all; + box-sizing: border-box; + } + + .choices__list--multiple .choices__item[data-deletable] { + padding-right: 5px; + } + + [dir='rtl'] .choices__list--multiple .choices__item { + margin-right: 0; + margin-left: 3.75px; + } + + .choices__list--multiple .choices__item.is-highlighted { + background-color: tokens.$color-gray-200; + border: 1px solid tokens.$color-default-500; + } + + .is-disabled .choices__list--multiple .choices__item { + background-color: #aaaaaa; + border: 1px solid #919191; + } + + .choices__list--dropdown { + visibility: hidden; + // z-index: 1; + box-sizing: border-box; + position: absolute; + width: 100%; + background-color: #fff; + // border: 1px solid #dddddd; + top: 100%; + margin-top: -1px; + // border-bottom-left-radius: 2.5px; + // border-bottom-right-radius: 2.5px; + overflow: hidden; + word-break: break-all; + will-change: visibility; + box-shadow: 0px 0px 16px rgba(29, 29, 29, 0.12); + border-radius: 1px; + margin-top: 8px; + z-index: 1000; + left: 0; + } + + .choices__list--dropdown.is-active { + visibility: visible; + } + + .is-open .choices__list--dropdown { + border-color: #b7b7b7; + } + + .is-flipped .choices__list--dropdown { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: -1px; + border-radius: 0.25rem 0.25rem 0 0; + } + + .choices__list--dropdown .choices__list { + position: relative; + max-height: 300px; + overflow: auto; + -webkit-overflow-scrolling: touch; + will-change: scroll-position; + } + + .choices__list--dropdown .choices__item { + position: relative; + padding: 10px; + font-size: 14px; + } + + [dir='rtl'] .choices__list--dropdown .choices__item { + text-align: right; + } + + + + @media (min-width: 640px) { + .choices__list--dropdown .choices__item--selectable { + // padding-right: 100px; remove padding so the checkmark can be aligned at the very right + } + + .choices__list--dropdown .choices__item--selectable:after { + // content: attr(data-select-text); #press to select text next to select option + font-size: 12px; + opacity: 0; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + } + + [dir='rtl'] .choices__list--dropdown .choices__item--selectable { + text-align: right; + padding-left: 100px; + padding-right: 10px; + } + + [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after { + right: auto; + left: 10px; + } + } + + + .choices__list--dropdown .choices__item--selectable.is-highlighted { + background-color: tokens.$color-gray-200; + font-weight: bold; + } + + .choices__list--dropdown .choices__item--selectable.is-highlighted:after { + opacity: 0.5; + } + + .choices__item { + cursor: default; + } + + .choices__item--selectable { + cursor: pointer; + } + + .choices__item--disabled { + cursor: not-allowed; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0.5; + } + + .choices__heading { + font-weight: 600; + font-size: 12px; + padding: 10px; + border-bottom: 1px solid #f7f7f7; + color: tokens.$color-text-black; + } + + .choices__button { + //default button for removing items + text-indent: -9999px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + // visibility: hidden; //hide remove button on select menu + + } + + .choices__button:focus { + outline: none; + } + + .choices__single-button { + text-indent: -9999px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + visibility: hidden; //hide remove button on select menu + } + + .choices__single-button:focus { + outline: none; + } + + + + .choices__input { + display: inline-block; + vertical-align: baseline; + background-color: #f9f9f9; + font-size: 14px; + margin-bottom: 5px; + border: 0; + border-radius: 0; + max-width: 100%; + padding: 4px 0 4px 2px; + + } + + /* clears the 'X' for the input type=search from Internet Explorer */ + .choices__input::-ms-clear { + display: none; + width: 0; + height: 0; + } + + .choices__input::-ms-reveal { + display: none; + width: 0; + height: 0; + } + + /* clears the 'X' for the input type=search from Chrome */ + .choices__input::-webkit-search-decoration, + .choices__input::-webkit-search-cancel-button, + .choices__input::-webkit-search-results-button, + .choices__input::-webkit-search-results-decoration { + display: none; + } + + + .choices__input:focus { + outline: 0; + } + + [dir='rtl'] .choices__input { + padding-right: 2px; + padding-left: 0; + } + + .choices__placeholder { + opacity: 0.5; + } + + /*===== End of Choices ======*/ + + .select { + padding: 1rem 0; + } + + .submit { + text-align: center; + } + + .btn { + background-color: tokens.$color-default-500; + border: none; + border-radius: 4px; + color: #fff; + font-size: 1rem; + padding: 8px 12px; + cursor: pointer; + } + + .btn:hover { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5); + } + + .values-container { + background-color: #f9f9f9; + padding: .5rem; + margin-top: 1rem; + } + + .values-container .values-container__text { + word-break: break-all; + margin: 0; + } } \ No newline at end of file diff --git a/packages/components/src/components/choices/choices.stories.ts b/packages/components/src/components/choices/choices.stories.ts index f45fc4707a..99aaa57d77 100644 --- a/packages/components/src/components/choices/choices.stories.ts +++ b/packages/components/src/components/choices/choices.stories.ts @@ -13,6 +13,11 @@ export default { // type: { control: { type: 'select', options: ['single', 'multiple', 'text'] } }, value: { control: 'text' }, name: { control: 'text' }, + error: { + options: [true, false], + control: { type: 'radio' }, + }, + errorMessage: { control: 'text' }, removeItemButton: { options: [true, false], control: { type: 'radio' }, @@ -37,6 +42,8 @@ const DefaultTemplate = (args) => { element.setAttribute('type', args.type); element.setAttribute('value', args.value); element.setAttribute('name', args.name); + element.setAttribute('error', args.error); + element.setAttribute('errorMessage', args.errorMessage); element.setAttribute('placeholder', args.placeholder); element.setAttribute('placeholderValue', args.placeholderValue); element.setAttribute('remove-item-button', args.removeItemButton); @@ -77,6 +84,8 @@ export const Single = DefaultTemplate.bind({}); Single.args = { type: 'single', name: 'single', + error: false, + errorMessage: 'Single select error', removeItemButton: true, placeholder: true, placeholderValue: 'Placeholder', diff --git a/packages/components/src/components/choices/choices.tsx b/packages/components/src/components/choices/choices.tsx index 8221148806..534c04f8a7 100644 --- a/packages/components/src/components/choices/choices.tsx +++ b/packages/components/src/components/choices/choices.tsx @@ -1,7 +1,10 @@ import { h, Component, Element, Method, Prop, Event, EventEmitter } from '@stencil/core'; import { HTMLStencilElement, Listen, State } from '@stencil/core/internal'; import ChoicesJs from 'choices.js'; - +// import { Choice } from '../../../../../node_modules/choices.js/src/scripts/interfaces/choice'; +// import { Group } from '../../../../../node_modules/choices.js/src/scripts/interfaces/group'; +// import { Item } from '../../../../../node_modules/choices.js/src/scripts/interfaces/item'; +// import { PassedElementType } from '../../../../../node_modules/choices.js/src/scripts/interfaces/passed-element-type'; import { AjaxFn, @@ -22,17 +25,14 @@ import { CustomAddItemText } from './interfaces'; import { getValues, filterObject, isDefined } from './utils'; -// import { Choice } from '../../../../../node_modules/choices.js/public/types/src/scripts/interfaces/choice'; -// import { Group } from '../../../../../node_modules/choices.js/public/types/src/scripts/interfaces/group'; -// import { Item } from '../../../../../node_modules/choices.js/public/types/src/scripts/interfaces/item'; -// import { PassedElementType } from '../../../../../node_modules/choices.js/public/types/src/scripts/interfaces/passed-element-type'; // eslint-disable-next-line @typescript-eslint/no-explicit-any // type TemplateOptions = Record<'classNames' | 'allowHTML', any>; + @Component({ tag: 'ifx-choices', styleUrl: 'choices.scss', - // shadow: true, + // shadow: true, //with shadow dom enabled, styles to the external choicesJs library cant be applied. }) export class Choices implements IChoicesProps, IChoicesMethods { @@ -80,15 +80,18 @@ export class Choices implements IChoicesProps, IChoicesMethods { @Prop() public callbackOnInit: OnInit; @Prop() public callbackOnCreateTemplates: OnCreateTemplates; @Prop() public valueComparer: ValueCompareFunction; - - @Element() private readonly root: HTMLElement; + //custom ifx props + @Prop() error: boolean = false; + @Prop() errorMessage: string = "Error"; @State() ifxChoicesIconIsRotated: boolean = false; @Event() ifxChange: EventEmitter; + @Element() private readonly root: HTMLElement; private choice; private element; + // @Watch('type') //not needed anymore cause multi and single select will be separate components // onTypeChange(newValue: string) { // this.removeItemButton = newValue !== 'single'; @@ -168,7 +171,6 @@ export class Choices implements IChoicesProps, IChoicesMethods { @Method() public async showDropdown(focusInput?: boolean) { this.choice.showDropdown(focusInput); - return this; } @@ -277,7 +279,9 @@ export class Choices implements IChoicesProps, IChoicesMethods { 'name': this.name || null, }; - const containerClass = `ifx-choices__container ifx-choices__selected-item`; + // const containerClass = `ifx-choices__wrapper ifx-choices__selected-item`; + const choicesContainerClass = `ifx-choices__wrapper`; + // destroy choices element to restore previous dom structure // so vdom can replace the element correctly this.destroy(); @@ -285,28 +289,44 @@ export class Choices implements IChoicesProps, IChoicesMethods { switch (this.type) { case 'single': this.element = -
- - -
- this.toggleIfxChoicesIcon()} - > +
+
this.toggleIfxChoicesIcon()} > + + +
this.toggleIfxChoicesIcon()}> + + +
+
this.toggleIfxChoicesIcon()}> + + +
+ { + this.error ? +
+ {this.errorMessage} +
: null + }
; break; case 'multiple': this.element = -
- -
- this.toggleIfxChoicesIcon()} - > +
+ +
+ +
+ this.toggleIfxChoicesIcon()} + > +
; break; @@ -325,13 +345,10 @@ export class Choices implements IChoicesProps, IChoicesMethods { this.showDropdown(!this.ifxChoicesIconIsRotated); } - setIfxChoicesIcon(state) { - this.ifxChoicesIconIsRotated = state; - } getIfxChoicesContainer() { - let ifxChoicesContainer = this.root.querySelector('.ifx-choices__container'); + let ifxChoicesContainer = this.root.querySelector('.ifx-choices_wrapper '); return ifxChoicesContainer } @@ -363,8 +380,12 @@ export class Choices implements IChoicesProps, IChoicesMethods { @Listen('mousedown', { target: 'document' }) handleOutsideClick(event: MouseEvent) { const path = event.composedPath(); + const ifxChoicesContainer = document.querySelector('.ifx-choices__wrapper') as HTMLDivElement; + if (!path.includes(this.root)) { this.closeDropdownMenu(); + console.log("remove active") + this.handleClassList(ifxChoicesContainer, 'remove', 'active'); } } @@ -441,6 +462,7 @@ export class Choices implements IChoicesProps, IChoicesMethods { // `; // } // } + return template(`