https://brandshop.nyls.edu/wp-content/plugins/bb-plugin/modules/box/js/custom-elements/fl-menu.js?ver=2.11.1

1class FLMenu extends FLElement {
2
3	static observedAttributes = [ 'open' ]
4
5	constructor() {
6		super()
7		this.attachShadow( { mode: 'open' } )
8	}
9
10	connectedCallback() {
11		this.template.innerHTML = this.render()
12		this.shadowRoot.replaceChildren( this.template.content.cloneNode( true ) )
13		this.unbindEventsCallback = this.bindEvents()
14	}
15
16	bindEvents() {
17
18		/**
19		 * Cached callback to be used on attribute change.
20		 */
21		this.dismissCallback = this.maybeDismissMenu.bind(this)
22	}
23
24	attributeChangedCallback( name, prevValue, value ) {
25		switch( name ) {
26			case 'open':
27				this.isOpen() ? this.onOpen() : this.onClose()
28				break
29		}
30	}
31
32	open() {
33		this.setAttribute( 'open', '' )
34	}
35
36	close() {
37		this.removeAttribute( 'open' )
38	}
39
40	onOpen() {
41		//document.addEventListener( 'click', this.dismissCallback )
42	}
43
44	onClose() {
45		document.removeEventListener( 'click', this.dismissCallback )
46	}
47
48	maybeDismissMenu( e ) {
49
50		const isClickOutside = this.isOpen() && ! e.composedPath().includes( this )
51		console.log( 'maybe dismiss', isClickOutside, this )
52
53		if ( isClickOutside ) {
54			this.close()
55		}
56	}
57
58	isOpen() {
59		return !! this.hasAttribute( 'open' )
60	}
61
62	render() {
63		return `
64			<style>
65				:host {
66					--item-size: 30px;
67					--width: 150px;
68					--radius: var(--fl-builder-radius);
69					background: var(--fl-builder-input-bg-color);
70					min-height: 36px;
71					display: none;
72					grid-auto-rows: var(--fl-builder-target-size);
73					gap: 1px;
74					box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
75								rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
76								rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
77					border-radius: var(--radius);
78					position: absolute;
79					top: calc( 100% + 1px );
80					width: var(--width);
81					right: 0;
82					z-index: 9;
83				}
84				:host( [open] ) {
85					display: grid;
86				}
87				::slotted( * ) {
88					border: none;
89					background: var(--fl-builder-input-bg-color);
90					color: var(--fl-builder-input-color);
91					outline: none;
92					font-size: inherit;
93					display: flex;
94					place-items: center;
95					place-content: start;
96					padding: 0 20px;
97					text-align: left;
98					min-height: var(--item-size);
99				}
100				::slotted( *:hover ) {
101					filter: brightness( 96% );
102				}
103				::slotted( :first-child ) {
104					border-top-left-radius: var(--radius);
105					border-top-right-radius: var(--radius);
106				}
107				::slotted( :last-child ) {
108					border-bottom-left-radius: var(--radius);
109					border-bottom-right-radius: var(--radius);
110				}
111			</style>
112			<slot></slot>
113		`
114	}
115}
116customElements.define( "fl-menu", FLMenu )