dees-catalog/ts_web/elements/dees-input-dropdown.ts

372 lines
11 KiB
TypeScript
Raw Normal View History

2023-12-08 17:15:40 +00:00
import {
customElement,
DeesElement,
type TemplateResult,
property,
state,
html,
css,
cssManager,
type CSSResult,
} from '@design.estate/dees-element';
2023-08-07 17:13:29 +00:00
import * as domtools from '@design.estate/dees-domtools';
2023-11-29 16:20:32 +00:00
import { demoFunc } from './dees-input-dropdown.demo.js';
2023-12-08 17:15:40 +00:00
import { DeesWindowLayer } from './dees-windowlayer.js';
2020-09-13 16:24:48 +00:00
2021-03-06 15:48:02 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-input-dropdown': DeesInputDropdown;
}
}
2020-09-13 16:24:48 +00:00
@customElement('dees-input-dropdown')
2022-01-24 00:39:47 +00:00
export class DeesInputDropdown extends DeesElement {
2023-12-08 17:15:40 +00:00
public static demo = demoFunc;
2020-12-09 23:05:13 +00:00
2021-08-19 22:25:14 +00:00
// INSTANCE
2023-10-23 15:26:03 +00:00
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
2021-08-19 22:25:14 +00:00
2023-08-28 07:49:51 +00:00
@property({
type: String,
reflect: true,
})
2020-09-13 16:24:48 +00:00
public label: string = 'Label';
@property()
public key: string;
@property()
2023-12-08 17:15:40 +00:00
public options: { option: string; key: string; payload?: any }[] = [];
2020-09-13 16:24:48 +00:00
@property()
2023-12-08 17:15:40 +00:00
public selectedOption: { option: string; key: string; payload?: any } = null;
2020-09-13 16:24:48 +00:00
2021-08-25 11:51:55 +00:00
@property({
2023-12-08 17:15:40 +00:00
type: Boolean,
2021-08-25 11:51:55 +00:00
})
public required: boolean = false;
2021-08-26 19:30:35 +00:00
@property({
2023-12-08 17:15:40 +00:00
type: Boolean,
})
public enableSearch: boolean = true;
@property({
type: Boolean,
2021-08-26 19:30:35 +00:00
})
public disabled: boolean = false;
2023-12-08 17:15:40 +00:00
@state()
public opensToTop: boolean = false;
2023-12-20 18:09:55 +00:00
@state()
private filteredOptions: { option: string; key: string; payload?: any }[] = [];
@state()
private highlightedIndex: number = 0;
@state()
public isOpened = false;
2023-03-25 16:30:41 +00:00
public static styles = [
cssManager.defaultStyles,
css`
* {
2023-12-08 17:15:40 +00:00
box-sizing: border-box;
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
:host {
font-family: Roboto;
position: relative;
display: block;
color: ${cssManager.bdTheme('#222', '#fff')};
margin-bottom: 24px;
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
.maincontainer {
display: block;
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
.label {
font-size: 14px;
margin-bottom: 4px;
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
.selectedBox {
user-select: none;
position: relative;
max-width: 420px;
height: 40px;
line-height: 40px;
padding: 0px 8px;
2023-12-26 20:21:18 +00:00
background: ${cssManager.bdTheme('#fafafa', '#222222')};
2023-12-08 17:15:40 +00:00
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
border-radius: 3px;
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
transition: all 0.2s ease;
}
2023-03-25 19:56:12 +00:00
2023-12-26 20:21:18 +00:00
.selectedBox:hover {
filter: ${cssManager.bdTheme('brightness(0.95)', 'brightness(1.1)')};
}
2023-12-20 18:09:55 +00:00
.accentBottom {
2023-12-26 20:21:18 +00:00
filter: none !important;
2023-12-08 17:15:40 +00:00
}
2020-09-13 16:24:48 +00:00
2023-12-20 18:09:55 +00:00
.accentTop {
2023-12-26 20:21:18 +00:00
filter: none !important;
2023-12-08 17:15:40 +00:00
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
.selectionBox {
will-change: transform;
pointer-events: none;
transition: all 0.2s ease;
opacity: 0;
background: ${cssManager.bdTheme('#ffffff', '#222222')};
max-width: 420px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
min-height: 40px;
2024-01-10 04:11:55 +00:00
border-radius: 8px;
2023-12-20 18:09:55 +00:00
padding: 4px 8px;
2023-12-08 17:15:40 +00:00
position: absolute;
2023-12-20 18:09:55 +00:00
user-select: none;
2023-12-08 17:15:40 +00:00
}
2024-01-10 04:11:55 +00:00
.selectionBox.top {
transform: translate(0px, 4px);
}
.selectionBox.bottom {
transform: translate(0px, -4px);
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
.selectionBox.show {
pointer-events: all;
2024-01-10 04:11:55 +00:00
transform: scale(1, 1) translate(0px, 0px);
2023-12-08 17:15:40 +00:00
opacity: 1;
2023-12-20 18:09:55 +00:00
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
2023-12-08 17:15:40 +00:00
}
2020-09-13 16:24:48 +00:00
2023-12-08 17:15:40 +00:00
.option {
transition: all 0.1s;
2023-12-20 18:09:55 +00:00
line-height: 32px;
2023-12-08 17:15:40 +00:00
padding: 0px 4px;
border-radius: 3px;
2023-12-20 18:09:55 +00:00
margin: 4px 0px;
}
.option.highlighted {
2024-01-10 04:11:55 +00:00
border-left: 2px solid #0069f2;
2023-12-20 18:09:55 +00:00
padding-left: 6px;
background: #ffffff20;
2023-12-08 17:15:40 +00:00
}
.option:hover {
color: #fff;
padding-left: 8px;
2024-01-10 04:11:55 +00:00
background: #0069f2;
2023-12-08 17:15:40 +00:00
}
2024-01-10 04:11:55 +00:00
.search.top {
padding-top: 4px;
}
.search.bottom {
padding-bottom: 4px;
2023-12-08 17:15:40 +00:00
}
.search input {
display: block;
background: none;
border: none;
height: 24px;
color: inherit;
2024-01-10 04:11:55 +00:00
text-align: left;
2023-12-08 17:15:40 +00:00
font-size: 12px;
font-weight: 600;
2024-01-10 04:11:55 +00:00
width: 100%;
2023-12-08 17:15:40 +00:00
margin: auto;
}
2024-01-10 04:11:55 +00:00
.search.top input {
border-bottom: 1px dotted #333;
}
.search.bottom input {
border-top: 1px dotted #333;
}
2023-12-08 17:15:40 +00:00
.search input:focus {
outline: none;
}
`,
];
2023-03-25 16:30:41 +00:00
public render(): TemplateResult {
return html`
2023-12-20 18:09:55 +00:00
<div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
2023-12-08 17:15:40 +00:00
${this.label ? html`<div class="label">${this.label}</div>` : html``}
2020-09-13 16:24:48 +00:00
<div class="selectionBox">
2023-12-08 17:15:40 +00:00
${this.enableSearch && !this.opensToTop
? html`
2024-01-10 04:11:55 +00:00
<div class="search top">
2023-12-20 18:09:55 +00:00
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
2023-12-08 17:15:40 +00:00
</div>
`
: null}
2023-12-20 18:09:55 +00:00
${this.filteredOptions.map((option, index) => {
const isHighlighted = this.highlightedIndex === index;
2020-09-13 16:24:48 +00:00
return html`
2023-12-08 17:15:40 +00:00
<div
2023-12-20 18:09:55 +00:00
class="option ${isHighlighted ? 'highlighted' : ''}"
2023-12-08 17:15:40 +00:00
@click=${() => {
this.updateSelection(option);
}}
>
${option.option}
</div>
`;
2020-09-13 16:24:48 +00:00
})}
2023-12-08 17:15:40 +00:00
${this.enableSearch && this.opensToTop
? html`
2024-01-10 04:11:55 +00:00
<div class="search bottom">
2023-12-20 18:09:55 +00:00
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
2023-12-08 17:15:40 +00:00
</div>
`
: null}
</div>
<div
class="selectedBox"
@click="${(event) => {
if (!this.isElevated) {
this.toggleSelectionBox();
} else {
this.updateSelection(this.selectedOption);
}
}}"
>
2024-01-09 12:57:53 +00:00
${this.selectedOption?.option || 'Select...'}
2020-09-13 16:24:48 +00:00
</div>
</div>
`;
}
firstUpdated() {
2024-01-09 12:57:53 +00:00
this.selectedOption = this.selectedOption || null;
2023-12-20 18:09:55 +00:00
this.filteredOptions = this.options; // Initialize filteredOptions
2020-09-13 16:24:48 +00:00
}
public async updateSelection(selectedOption) {
this.selectedOption = selectedOption;
2023-12-08 17:15:40 +00:00
this.dispatchEvent(
new CustomEvent('selectedOption', {
detail: selectedOption,
bubbles: true,
})
);
if (this.isElevated) {
this.toggleSelectionBox();
}
2021-08-19 22:25:14 +00:00
this.changeSubject.next(this);
2020-09-13 16:24:48 +00:00
}
2023-12-08 17:15:40 +00:00
private isElevated: boolean = false;
private windowOverlay: DeesWindowLayer;
public async toggleSelectionBox() {
2023-12-20 18:09:55 +00:00
this.isOpened = !this.isOpened;
2023-12-08 17:15:40 +00:00
const domtoolsInstance = await this.domtoolsPromise;
const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
if (!this.isElevated) {
this.windowOverlay = await DeesWindowLayer.createAndShow({
blur: false,
});
const elevatedDropdown = new DeesInputDropdown();
elevatedDropdown.isElevated = true;
elevatedDropdown.label = this.label;
elevatedDropdown.enableSearch = this.enableSearch;
elevatedDropdown.required = this.required;
elevatedDropdown.disabled = this.disabled;
elevatedDropdown.style.position = 'fixed';
elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px';
elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px';
elevatedDropdown.style.width = this.clientWidth + 'px';
elevatedDropdown.options = this.options;
elevatedDropdown.selectedOption = this.selectedOption;
2024-01-09 12:57:53 +00:00
elevatedDropdown.highlightedIndex = elevatedDropdown.selectedOption ? elevatedDropdown.options.indexOf(
elevatedDropdown.options.find((option) => option.key === this.selectedOption.key)
) : -1;
console.log(elevatedDropdown.options);
2023-12-08 17:15:40 +00:00
console.log(elevatedDropdown.selectedOption);
2024-01-09 12:57:53 +00:00
console.log(elevatedDropdown.highlightedIndex);
2023-12-08 17:15:40 +00:00
this.windowOverlay.appendChild(elevatedDropdown);
await domtoolsInstance.convenience.smartdelay.delayFor(0);
elevatedDropdown.toggleSelectionBox();
const destroyOverlay = async () => {
(elevatedDropdown.shadowRoot.querySelector('.selectionBox') as HTMLElement).style.opacity =
'0';
elevatedDropdown.removeEventListener('selectedOption', handleSelection);
this.windowOverlay.removeEventListener('clicked', destroyOverlay);
this.windowOverlay.destroy();
};
const handleSelection = async (event) => {
await this.updateSelection(elevatedDropdown.selectedOption);
destroyOverlay();
};
elevatedDropdown.addEventListener('selectedOption', handleSelection);
this.windowOverlay.addEventListener('clicked', destroyOverlay);
} else {
if (!selectionBox.classList.contains('show')) {
selectionBox.style.width = selectedBox.clientWidth + 'px';
const spaceData = selectedBox.getBoundingClientRect();
if (300 > window.innerHeight - spaceData.bottom) {
this.opensToTop = true;
selectedBox.classList.add('accentTop');
2024-01-10 04:11:55 +00:00
selectionBox.classList.add('top');
2023-12-08 17:15:40 +00:00
selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
} else {
selectedBox.classList.add('accentBottom');
2024-01-10 04:11:55 +00:00
selectionBox.classList.add('bottom');
2023-12-08 17:15:40 +00:00
this.opensToTop = false;
const labelOffset = this.label ? 24 : 0;
selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
}
await domtoolsInstance.convenience.smartdelay.delayFor(0);
const searchInput = selectionBox.querySelector('input');
2024-01-10 04:11:55 +00:00
searchInput?.focus();
selectionBox.classList.add('show');
2023-12-08 17:15:40 +00:00
} else {
selectedBox.style.pointerEvents = 'none';
selectionBox.classList.remove('show');
2024-01-10 04:11:55 +00:00
// selectedBox.style.opacity = '0';
2023-12-08 17:15:40 +00:00
}
}
2023-11-29 16:20:32 +00:00
}
2023-12-20 18:09:55 +00:00
private handleSearch(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
this.filteredOptions = this.options.filter((option) =>
option.option.toLowerCase().includes(searchTerm)
);
this.highlightedIndex = 0; // Reset highlighted index
}
private handleKeyDown(event: KeyboardEvent): void {
if (!this.isOpened) {
console.log('discarded key event. Check why this function is called.');
return;
}
const key = event.key;
const maxIndex = this.filteredOptions.length - 1;
if (key === 'ArrowDown') {
this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
event.preventDefault();
} else if (key === 'ArrowUp') {
this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
event.preventDefault();
} else if (key === 'Enter') {
this.updateSelection(this.filteredOptions[this.highlightedIndex]);
event.preventDefault();
}
}
2020-09-13 16:24:48 +00:00
}