https://www.lmtire-wheel.com/dynamicjs/components?v=2.29.242

1class RscTemplate extends HTMLElement {
2
3    constructor() {
4        super();
5        this._internals = this.attachInternals();
6        this.attachShadow({ mode: 'open' });
7        const tpl = document.getElementById(this.tagName.toLowerCase());
8        this.shadowRoot.appendChild(tpl.content.cloneNode(true));
9    }
10
11}
12
13class RscVueApp extends HTMLElement {
14
15    constructor() {
16        super();
17        this._internals = this.attachInternals();
18    }
19
20    connectedCallback() {
21        if (this.closest("rsc-vue-app") !== this) return;
22        rsGlobal.initVue(this);
23    }
24}
25
26window.customElements.define(`rsc-vue-app`, RscVueApp);
27
28class RscHeader extends HTMLElement {
29
30    constructor() {
31        super();
32        this._internals = this.attachInternals();
33    }
34
35    connectedCallback() {
36        rsGlobal.initVue(this);
37    }
38}
39
40window.customElements.define(`rsc-header`, RscHeader);
41
42class RscTabs extends HTMLElement {
43
44    #selectedAttr = "aria-selected";
45    #labelledAttr = "aria-labelledby";
46    #hiddenAttr = "hidden";
47
48    constructor() {
49        super();
50        this._internals = this.attachInternals();
51    }
52
53    connectedCallback() {
54        /*rsGlobal.initVue(this);*/
55
56        document.addEventListener("vuemounted", () => {
57            this.buttons = [...this.querySelectorAll(`[${this.#selectedAttr}]`)];
58            this.content = [...this.querySelectorAll(`[${this.#labelledAttr}]`)];
59
60            this.bindEvents();
61        })
62    }
63
64    bindEvents() {
65        this.addEventListener("click", this.buttonClick.bind(this));
66    }
67
68    buttonClick = function (e) {
69        if (!this.buttons.includes(e.srcElement)) return;
70        this.hideAllContent();
71        this.showContent(e.srcElement);
72    }
73
74    hideAllContent = function () {
75        for (let button of this.buttons) {
76            button.setAttribute(this.#selectedAttr, false);
77        }
78        for (let node of this.content) {
79            node.setAttribute(this.#hiddenAttr, "");
80        }
81    }
82
83    showContent = function (srcNode) {
84        srcNode.setAttribute(this.#selectedAttr, true);
85        const nodes = this.content.filter(n => n.getAttribute(this.#labelledAttr) === srcNode.id);
86        for (let node of nodes) {
87            node.removeAttribute(this.#hiddenAttr);
88        }
89    }
90}
91
92window.customElements.define(`rsc-tabs`, RscTabs);
93
94class RscFormElement extends HTMLElement {
95
96    constructor() {
97        super();
98        this._internals = this.attachInternals();
99    }
100
101    connectedCallback() {
102        this.model = this.dataset["model"] ? JSON.parse(this.dataset["model"]) : null;
103        this.input = this.querySelector("input, select, textarea");
104        this.input.addEventListener("input", this.dispatchGlobal.bind(this));
105    }
106
107    dispatchGlobal(e) {
108        const event = new CustomEvent("inputchange", { "detail": e });
109        document.dispatchEvent(event);
110    }
111
112}
113
114window.customElements.define(`rsc-form-element`, RscFormElement);
115
116class RscTooltip extends RscTemplate {
117
118    constructor() {
119        super();
120    }
121
122    connectedCallback() {
123        this.tooltip = this.shadowRoot.querySelector('.tooltip');
124        this.closeButton = this.shadowRoot.querySelector('.close-button');
125        this.openButton = this.querySelector(`[slot="button"]`);
126
127        this.openButton?.addEventListener("click", this.toggleTooltip.bind(this));
128        this.closeButton.addEventListener("click", this.closeTooltip.bind(this));
129        this.eventName = "rsc-tooltip-open";
130        document.addEventListener(this.eventName, this.tooltipOpenHandler.bind(this));
131    }
132
133    tooltipOpenHandler(e) {
134        if (e.detail !== this) this.closeTooltip();
135    }
136
137    toggleTooltip() {
138        if (this.show == true) return this.closeTooltip();
139        if (!this.show) return this.openTooltip();
140    }
141
142    openTooltip() {
143        this.show = true;
144        const event = new CustomEvent(this.eventName, { detail: this });
145        document.dispatchEvent(event);
146        this.toggleClass();
147    }
148
149    closeTooltip() {
150        this.show = false;
151        this.toggleClass();
152    }
153
154    toggleClass() {
155        this.tooltip.classList.toggle('show', this.show);
156    }
157}
158
159window.customElements.define(`rsc-tooltip`, RscTooltip);
160
161class RscQuickFilter extends HTMLElement {
162    constructor() {
163        super();
164        this.spinner = this.querySelector('.spinner');
165    }
166
167    connectedCallback() {

168        this.filterName = this.dataset.filtername ? JSON.parse(this.dataset.filtername) : ``;
169        this.spinner.hidden = true;
170        this.bindEvents();
171    }
172
173    bindEvents() {
174        const filterButtons = this.querySelectorAll('.button');
175        filterButtons.forEach(button => {
176            button.addEventListener('click', this.buttonEventHandler.bind(this));
177        });
178    }
179
180    buttonEventHandler(event) {
181        event.preventDefault();
182        const filterValue = event.currentTarget.dataset.value;
183        this.applyFilter(filterValue);
184    }
185
186    applyFilter(value) {
187        const url = new URL(window.location.href);
188        const filterName = this.filterName.toLowerCase();
189        url.searchParams.set(filterName, value);
190        this.spinner.hidden = false;
191        location.href = url.href;
192    }
193}
194
195customElements.define('rsc-quick-filter', RscQuickFilter);
196
197
198window.customElementEvent = new CustomEvent('customElementsInitialized');
199document.dispatchEvent(customElementEvent);