Santhosh Janardhanan
de2d83092e
- Delete old Vite+Svelte frontend - Initialize new SvelteKit project with TypeScript - Configure Tailwind CSS v4 + DaisyUI - Implement JWT authentication with auto-refresh - Create login page with form validation (Zod) - Add protected route guards - Update Docker configuration for single-stage build - Add E2E tests with Playwright (6/11 passing) - Fix Svelte 5 reactivity with $state() runes Known issues: - 5 E2E tests failing (timing/async issues) - Token refresh implementation needs debugging - Validation error display timing
76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
import Event from '../../event/Event.js';
|
|
import HTMLElement from '../html-element/HTMLElement.js';
|
|
import * as PropertySymbol from '../../PropertySymbol.js';
|
|
import EventPhaseEnum from '../../event/EventPhaseEnum.js';
|
|
import MouseEvent from '../../event/events/MouseEvent.js';
|
|
import ElementEventAttributeUtility from '../element/ElementEventAttributeUtility.js';
|
|
/**
|
|
* HTMLDetailsElement
|
|
*
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement
|
|
*/
|
|
export default class HTMLDetailsElement extends HTMLElement {
|
|
// Events
|
|
/* eslint-disable jsdoc/require-jsdoc */
|
|
get ontoggle() {
|
|
return ElementEventAttributeUtility.getEventListener(this, 'ontoggle');
|
|
}
|
|
set ontoggle(value) {
|
|
this[PropertySymbol.propertyEventListeners].set('ontoggle', value);
|
|
}
|
|
/* eslint-enable jsdoc/require-jsdoc */
|
|
/**
|
|
* Returns the open attribute.
|
|
*/
|
|
get open() {
|
|
return this.getAttribute('open') !== null;
|
|
}
|
|
/**
|
|
* Sets the open attribute.
|
|
*
|
|
* @param open New value.
|
|
*/
|
|
set open(open) {
|
|
if (open) {
|
|
this.setAttribute('open', '');
|
|
}
|
|
else {
|
|
this.removeAttribute('open');
|
|
}
|
|
}
|
|
/**
|
|
* @override
|
|
*/
|
|
[PropertySymbol.onSetAttribute](attribute, replacedAttribute) {
|
|
super[PropertySymbol.onSetAttribute](attribute, replacedAttribute);
|
|
if (attribute[PropertySymbol.name] === 'open') {
|
|
if (attribute[PropertySymbol.value] !== replacedAttribute?.[PropertySymbol.value]) {
|
|
this.dispatchEvent(new Event('toggle'));
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* @override
|
|
*/
|
|
[PropertySymbol.onRemoveAttribute](removedAttribute) {
|
|
super[PropertySymbol.onRemoveAttribute](removedAttribute);
|
|
if (removedAttribute && removedAttribute[PropertySymbol.name] === 'open') {
|
|
this.dispatchEvent(new Event('toggle'));
|
|
}
|
|
}
|
|
/**
|
|
* @override
|
|
*/
|
|
dispatchEvent(event) {
|
|
const returnValue = super.dispatchEvent(event);
|
|
if (!event[PropertySymbol.defaultPrevented] &&
|
|
event[PropertySymbol.target]?.[PropertySymbol.localName] === 'summary' &&
|
|
event.type === 'click' &&
|
|
event.eventPhase === EventPhaseEnum.bubbling &&
|
|
event instanceof MouseEvent) {
|
|
this.open = !this.open;
|
|
}
|
|
return returnValue;
|
|
}
|
|
}
|
|
//# sourceMappingURL=HTMLDetailsElement.js.map
|