From 50c4d14b9f673fb3f777485410b5d38934f26138 Mon Sep 17 00:00:00 2001 From: Kout95 Date: Thu, 20 Jun 2024 15:30:05 +0200 Subject: [PATCH 1/9] feat: add checkbox --- frontend/public/icons/checkbox-check.svg | 4 ++ frontend/src/search-checkbox.ts | 69 ++++++++++++++++++++---- frontend/src/search-facets.ts | 19 ++++--- frontend/src/utils/enums.ts | 1 + 4 files changed, 73 insertions(+), 20 deletions(-) create mode 100644 frontend/public/icons/checkbox-check.svg diff --git a/frontend/public/icons/checkbox-check.svg b/frontend/public/icons/checkbox-check.svg new file mode 100644 index 00000000..43769237 --- /dev/null +++ b/frontend/public/icons/checkbox-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/search-checkbox.ts b/frontend/src/search-checkbox.ts index db6bf4ad..f7806b48 100644 --- a/frontend/src/search-checkbox.ts +++ b/frontend/src/search-checkbox.ts @@ -1,5 +1,6 @@ -import {LitElement, html, PropertyValues} from 'lit'; +import {LitElement, html, PropertyValues, css} from 'lit'; import {customElement, property} from 'lit/decorators.js'; +import {BasicEvents} from './utils/enums'; /** * A custom element that represents a checkbox. @@ -10,6 +11,51 @@ import {customElement, property} from 'lit/decorators.js'; */ @customElement('searchalicious-checkbox') export class SearchaliciousCheckbox extends LitElement { + /** + * The styles for the checkbox. + * "appearance: none" is used to remove the default checkbox style. + * We use an svg icon for the checked state, it is located in the public/icons folder. + * @type {import('lit').CSSResult} + */ + static override styles = css` + .checkbox-wrapper { + display: flex; + align-items: center; + } + + input[type='checkbox'] { + cursor: pointer; + position: relative; + width: 20px; + height: 20px; + margin-right: 0; + appearance: none; + border: 1px solid black; + background-color: transparent; + } + input[type='checkbox']:checked { + background-color: black; + } + input[type='checkbox']:focus { + outline: 1px solid blue; + } + input[type='checkbox']:checked:after { + position: absolute; + content: ''; + height: 12px; + width: 12px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: url('/static/icons/checkbox-check.svg') no-repeat center + center; + } + + label { + cursor: pointer; + padding-left: 8px; + } + `; /** * Represents the checked state of the checkbox. * @type {boolean} @@ -49,14 +95,17 @@ export class SearchaliciousCheckbox extends LitElement { */ override render() { return html` - +
+ + +
`; } @@ -66,7 +115,7 @@ export class SearchaliciousCheckbox extends LitElement { */ _handleChange(e: {target: HTMLInputElement}) { this.checked = e.target.checked; - const inputEvent = new CustomEvent('change', { + const inputEvent = new CustomEvent(BasicEvents.CHANGE, { detail: {checked: this.checked, name: this.name}, bubbles: true, composed: true, diff --git a/frontend/src/search-facets.ts b/frontend/src/search-facets.ts index e6532b66..282f8cfb 100644 --- a/frontend/src/search-facets.ts +++ b/frontend/src/search-facets.ts @@ -189,9 +189,6 @@ export class SearchaliciousTermsFacet extends SearchActionMixin( fieldset { margin-top: 1rem; } - .term-wrapper { - display: block; - } .button { margin-left: auto; margin-right: auto; @@ -337,18 +334,20 @@ export class SearchaliciousTermsFacet extends SearchActionMixin( */ renderTerm(term: FacetTerm) { return html` -
+
- + +
+ ${term.name} + ${term.count + ? html`(${term.count})` + : nothing} +
+
`; } diff --git a/frontend/src/utils/enums.ts b/frontend/src/utils/enums.ts index 00cdccd2..27fbda89 100644 --- a/frontend/src/utils/enums.ts +++ b/frontend/src/utils/enums.ts @@ -19,6 +19,7 @@ export enum SearchaliciousEvents { */ export enum BasicEvents { CLICK = 'click', + CHANGE = 'change', } /** From 2e25d512c8c0642a5fd6b3ab1efde24a5e8cdfb9 Mon Sep 17 00:00:00 2001 From: Kout95 Date: Thu, 20 Jun 2024 15:41:10 +0200 Subject: [PATCH 2/9] refacto --- frontend/src/search-checkbox.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/search-checkbox.ts b/frontend/src/search-checkbox.ts index f7806b48..dcf4f0b5 100644 --- a/frontend/src/search-checkbox.ts +++ b/frontend/src/search-checkbox.ts @@ -14,6 +14,7 @@ export class SearchaliciousCheckbox extends LitElement { /** * The styles for the checkbox. * "appearance: none" is used to remove the default checkbox style. + * margin-right: 0 is used to remove the default margin between the checkbox and the label. * We use an svg icon for the checked state, it is located in the public/icons folder. * @type {import('lit').CSSResult} */ @@ -30,14 +31,14 @@ export class SearchaliciousCheckbox extends LitElement { height: 20px; margin-right: 0; appearance: none; - border: 1px solid black; + border: 1px solid var(--searchalicious-checkbox-color, black); background-color: transparent; } input[type='checkbox']:checked { - background-color: black; + background-color: var(--searchalicious-checkbox-color, black); } input[type='checkbox']:focus { - outline: 1px solid blue; + outline: 1px solid var(--searchalicious-checkbox-focus-color, black); } input[type='checkbox']:checked:after { position: absolute; From 8701c8cca291ba86b11b4d8ee5fc4b5f87de49cd Mon Sep 17 00:00:00 2001 From: Kout95 Date: Fri, 21 Jun 2024 10:11:45 +0200 Subject: [PATCH 3/9] feat: add radio --- frontend/README.md | 4 + frontend/src/mixins/checked-input.ts | 71 +++++++++++++++++ frontend/src/search-a-licious.ts | 1 + frontend/src/search-checkbox.ts | 54 +------------ frontend/src/search-radio.ts | 109 +++++++++++++++++++++++++++ 5 files changed, 189 insertions(+), 50 deletions(-) create mode 100644 frontend/src/mixins/checked-input.ts create mode 100644 frontend/src/search-radio.ts diff --git a/frontend/README.md b/frontend/README.md index ff642f99..6d0eb6ed 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -52,6 +52,10 @@ This enables supporting multiple searches in the same page * searchalicious-checkbox is a simple checkbox * it can be used to replace the default checkbox * it allows to keep the state of the checkbox when you change the property +* searchalicious-radio is a simple radio button + * it can be used to replace the default radio button + * it allows to keep the state of the radio button when you change the property + * You can unselect the radio button by clicking on it * searchalicious-secondary-button is a button with defined style * it can be used to replace the default button * searchalicious-button-transparent is a transparent button with defined style diff --git a/frontend/src/mixins/checked-input.ts b/frontend/src/mixins/checked-input.ts new file mode 100644 index 00000000..5f04d6f1 --- /dev/null +++ b/frontend/src/mixins/checked-input.ts @@ -0,0 +1,71 @@ +import {Constructor} from './utils'; +import {LitElement, PropertyValues} from 'lit'; +import {property} from 'lit/decorators.js'; +import {BasicEvents} from '../utils/enums'; + +export interface CheckedInputMixinInterface { + checked: boolean; + name: string; + getInputElement(): HTMLInputElement | null; + _dispatchChangeEvent(checked: boolean, name: string): void; + refreshInput(): void; + _handleChange(e: {target: HTMLInputElement}): void; +} + +export const CheckedInputMixin = >( + superClass: T +) => { + class CheckedInputMixinClass extends superClass { + /** + * Represents the checked state of the input. + * @type {boolean} + */ + @property({type: Boolean}) + checked = false; + + /** + * Represents the name of the input. + * @type {string} + */ + @property({type: String}) + name = ''; + + getInputElement() { + return this.shadowRoot?.querySelector('input'); + } + + _dispatchChangeEvent(checked: boolean, name: string) { + const inputEvent = new CustomEvent(BasicEvents.CHANGE, { + detail: {checked, name}, + bubbles: true, + composed: true, + }); + this.dispatchEvent(inputEvent); + } + refreshInput() { + const inputElement = this.getInputElement(); + if (inputElement) { + inputElement.checked = this.checked; + } + + /** + * Called when the element’s DOM has been updated and rendered. + * @param {PropertyValues} _changedProperties - The changed properties. + */ + } + protected override updated(_changedProperties: PropertyValues) { + this.refreshInput(); + super.updated(_changedProperties); + } + + /** + * Handles the change event on the radio. + * @param {Event} e - The change event. + */ + _handleChange(e: {target: HTMLInputElement}) { + this.checked = e.target.checked; + this._dispatchChangeEvent(this.checked, this.name); + } + } + return CheckedInputMixinClass as Constructor & T; +}; diff --git a/frontend/src/search-a-licious.ts b/frontend/src/search-a-licious.ts index 36c0f9e5..eeaf6c9d 100644 --- a/frontend/src/search-a-licious.ts +++ b/frontend/src/search-a-licious.ts @@ -1,4 +1,5 @@ export {SearchaliciousCheckbox} from './search-checkbox'; +export {SearchaliciousRadio} from './search-radio'; export {SearchaliciousBar} from './search-bar'; export {SearchaliciousButton} from './search-button'; export {SearchaliciousPages} from './search-pages'; diff --git a/frontend/src/search-checkbox.ts b/frontend/src/search-checkbox.ts index dcf4f0b5..1e39c51b 100644 --- a/frontend/src/search-checkbox.ts +++ b/frontend/src/search-checkbox.ts @@ -1,6 +1,6 @@ -import {LitElement, html, PropertyValues, css} from 'lit'; -import {customElement, property} from 'lit/decorators.js'; -import {BasicEvents} from './utils/enums'; +import {LitElement, html, css} from 'lit'; +import {customElement} from 'lit/decorators.js'; +import {CheckedInputMixin} from './mixins/checked-input'; /** * A custom element that represents a checkbox. @@ -10,7 +10,7 @@ import {BasicEvents} from './utils/enums'; * @extends {LitElement} */ @customElement('searchalicious-checkbox') -export class SearchaliciousCheckbox extends LitElement { +export class SearchaliciousCheckbox extends CheckedInputMixin(LitElement) { /** * The styles for the checkbox. * "appearance: none" is used to remove the default checkbox style. @@ -57,38 +57,6 @@ export class SearchaliciousCheckbox extends LitElement { padding-left: 8px; } `; - /** - * Represents the checked state of the checkbox. - * @type {boolean} - */ - @property({type: Boolean}) - checked = false; - - /** - * Represents the name of the checkbox. - * @type {string} - */ - @property({type: String}) - name = ''; - - /** - * Refreshes the checkbox to reflect the current state of the `checked` property. - */ - refreshCheckbox() { - const inputElement = this.shadowRoot?.querySelector('input'); - if (inputElement) { - inputElement.checked = this.checked; - } - } - - /** - * Called when the element’s DOM has been updated and rendered. - * @param {PropertyValues} _changedProperties - The changed properties. - */ - protected override updated(_changedProperties: PropertyValues) { - this.refreshCheckbox(); - super.updated(_changedProperties); - } /** * Renders the checkbox. @@ -109,20 +77,6 @@ export class SearchaliciousCheckbox extends LitElement {
`; } - - /** - * Handles the change event on the checkbox. - * @param {Event} e - The change event. - */ - _handleChange(e: {target: HTMLInputElement}) { - this.checked = e.target.checked; - const inputEvent = new CustomEvent(BasicEvents.CHANGE, { - detail: {checked: this.checked, name: this.name}, - bubbles: true, - composed: true, - }); - this.dispatchEvent(inputEvent); - } } declare global { diff --git a/frontend/src/search-radio.ts b/frontend/src/search-radio.ts new file mode 100644 index 00000000..0f5f4a24 --- /dev/null +++ b/frontend/src/search-radio.ts @@ -0,0 +1,109 @@ +import {LitElement, html, css} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; +import {CheckedInputMixin} from './mixins/checked-input'; + +/** + * A custom element that represents a radio. + * + * This component is useful to have state of variable reflected back in the radio, + * overriding updated method. + * @extends {LitElement} + */ +@customElement('searchalicious-radio') +export class SearchaliciousRadio extends CheckedInputMixin(LitElement) { + /** + * The styles for the radio. + * "appearance: none" is used to remove the default radio style. + * margin-right: 0 is used to remove the default margin between the radio and the label. + * We use an svg icon for the checked state, it is located in the public/icons folder. + * @type {import('lit').CSSResult} + */ + static override styles = css` + .radio-wrapper { + display: flex; + align-items: center; + } + + input[type='radio'] { + cursor: pointer; + position: relative; + width: 20px; + height: 20px; + margin-right: 0; + appearance: none; + border: 1px solid var(--searchalicious-radio-color, black); + background-color: transparent; + + border-radius: 50%; + } + + input[type='radio']:checked { + } + + input[type='radio']:focus { + outline: 1px solid var(--searchalicious-radio-focus-color, black); + } + + input[type='radio']:checked:after { + position: absolute; + content: ''; + height: 14px; + width: 14px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + background-color: var(--searchalicious-radio-color, black); + } + + label { + cursor: pointer; + padding-left: 8px; + } + `; + + @property({type: Boolean, attribute: 'can-be-unchecked'}) + canBeUnchecked = false; + + /** + * Allows for the radio to be unchecked. + * @param {Event} e - The event object. + */ + _handleClick() { + if (this.canBeUnchecked && this.checked) { + this.checked = false; + this._dispatchChangeEvent(this.checked, this.name); + } + } + /** + * Renders the radio. + * @returns {import('lit').TemplateResult<1>} - The HTML template for the radio. + */ + override render() { + return html` +
+ + +
+ `; + } +} +declare global { + /** + * The HTMLElementTagNameMap interface represents a map of custom element tag names to custom element constructors. + * Here, it's extended to include 'searchalicious-radio' as a valid custom element tag name. + */ + interface HTMLElementTagNameMap { + 'searchalicious-radio': SearchaliciousRadio; + } +} From a67b905385cc40f60720cb7046e4a978984345d0 Mon Sep 17 00:00:00 2001 From: Kout95 <65901733+Kout95@users.noreply.github.com> Date: Fri, 21 Jun 2024 10:33:55 +0200 Subject: [PATCH 4/9] Update README.md --- frontend/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/README.md b/frontend/README.md index 6d0eb6ed..e2e5363e 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -55,7 +55,7 @@ This enables supporting multiple searches in the same page * searchalicious-radio is a simple radio button * it can be used to replace the default radio button * it allows to keep the state of the radio button when you change the property - * You can unselect the radio button by clicking on it + * You can unchecked the radio button by clicking on it * searchalicious-secondary-button is a button with defined style * it can be used to replace the default button * searchalicious-button-transparent is a transparent button with defined style From 9a70a5817f7bb8a32353b9c7df9048d5764cfbb7 Mon Sep 17 00:00:00 2001 From: Kout95 Date: Fri, 21 Jun 2024 11:19:00 +0200 Subject: [PATCH 5/9] feat: add toggle --- frontend/README.md | 3 + frontend/src/search-a-licious.ts | 1 + frontend/src/search-checkbox.ts | 5 +- frontend/src/search-radio.ts | 8 +-- frontend/src/search-toggle.ts | 118 +++++++++++++++++++++++++++++++ 5 files changed, 124 insertions(+), 11 deletions(-) create mode 100644 frontend/src/search-toggle.ts diff --git a/frontend/README.md b/frontend/README.md index e2e5363e..745da139 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -56,6 +56,9 @@ This enables supporting multiple searches in the same page * it can be used to replace the default radio button * it allows to keep the state of the radio button when you change the property * You can unchecked the radio button by clicking on it +* searchalicious-toggle is a simple toggle button + * it can be used to replace the checkbox + * it allows to keep the state of the toggle button when you change the property * searchalicious-secondary-button is a button with defined style * it can be used to replace the default button * searchalicious-button-transparent is a transparent button with defined style diff --git a/frontend/src/search-a-licious.ts b/frontend/src/search-a-licious.ts index eeaf6c9d..e1325ac3 100644 --- a/frontend/src/search-a-licious.ts +++ b/frontend/src/search-a-licious.ts @@ -1,5 +1,6 @@ export {SearchaliciousCheckbox} from './search-checkbox'; export {SearchaliciousRadio} from './search-radio'; +export {SearchaliciousToggle} from './search-toggle'; export {SearchaliciousBar} from './search-bar'; export {SearchaliciousButton} from './search-button'; export {SearchaliciousPages} from './search-pages'; diff --git a/frontend/src/search-checkbox.ts b/frontend/src/search-checkbox.ts index 1e39c51b..3662d766 100644 --- a/frontend/src/search-checkbox.ts +++ b/frontend/src/search-checkbox.ts @@ -22,6 +22,7 @@ export class SearchaliciousCheckbox extends CheckedInputMixin(LitElement) { .checkbox-wrapper { display: flex; align-items: center; + flex-wrap: wrap; } input[type='checkbox'] { @@ -80,10 +81,6 @@ export class SearchaliciousCheckbox extends CheckedInputMixin(LitElement) { } declare global { - /** - * The HTMLElementTagNameMap interface represents a map of custom element tag names to custom element constructors. - * Here, it's extended to include 'searchalicious-checkbox' as a valid custom element tag name. - */ interface HTMLElementTagNameMap { 'searchalicious-checkbox': SearchaliciousCheckbox; } diff --git a/frontend/src/search-radio.ts b/frontend/src/search-radio.ts index 0f5f4a24..08a57e53 100644 --- a/frontend/src/search-radio.ts +++ b/frontend/src/search-radio.ts @@ -13,15 +13,13 @@ import {CheckedInputMixin} from './mixins/checked-input'; export class SearchaliciousRadio extends CheckedInputMixin(LitElement) { /** * The styles for the radio. - * "appearance: none" is used to remove the default radio style. - * margin-right: 0 is used to remove the default margin between the radio and the label. - * We use an svg icon for the checked state, it is located in the public/icons folder. * @type {import('lit').CSSResult} */ static override styles = css` .radio-wrapper { display: flex; align-items: center; + flex-wrap: wrap; } input[type='radio'] { @@ -99,10 +97,6 @@ export class SearchaliciousRadio extends CheckedInputMixin(LitElement) { } } declare global { - /** - * The HTMLElementTagNameMap interface represents a map of custom element tag names to custom element constructors. - * Here, it's extended to include 'searchalicious-radio' as a valid custom element tag name. - */ interface HTMLElementTagNameMap { 'searchalicious-radio': SearchaliciousRadio; } diff --git a/frontend/src/search-toggle.ts b/frontend/src/search-toggle.ts new file mode 100644 index 00000000..bc16de20 --- /dev/null +++ b/frontend/src/search-toggle.ts @@ -0,0 +1,118 @@ +import {LitElement, html, css} from 'lit'; +import {customElement} from 'lit/decorators.js'; +import {CheckedInputMixin} from './mixins/checked-input'; + +/** + * A custom element that represents a toggle. + * + * This component is useful to have state of variable reflected back in the toggle, + * overriding updated method. + * @extends {LitElement} + */ +@customElement('searchalicious-toggle') +export class SearchaliciousToggle extends CheckedInputMixin(LitElement) { + /** + * The styles for the toggle. + * @type {import('lit').CSSResult} + */ + static override styles = css` + .toggle-wrapper { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + label { + cursor: pointer; + padding-right: 8px; + } + + .toggle { + cursor: pointer; + position: relative; + display: inline-block; + width: 30px; + height: 17px; + flex-shrink: 0; + } + + .toggle input { + display: none; + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var( + --searchalicious-toggle-inactive-background-color, + grey + ); + transition: 0.4s; + border-radius: 17px; + } + + .slider:before { + position: absolute; + content: ''; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background-color: var(--searchalicious-toggle-circle-color, white); + transition: 0.4s; + border-radius: 50%; + } + input[type='checkbox']:checked + .slider { + background-color: var( + --searchalicious-toggle-active-background-color, + black + ); + } + input[type='checkbox']:checked + .slider:before { + transform: translateX(13px); + } + `; + + onClick() { + const inputElement = this.getInputElement(); + if (!inputElement) { + return; + } + inputElement.checked = !inputElement.checked; + this.checked = !this.checked; + this._dispatchChangeEvent(this.checked, this.name); + } + + /** + * Renders the toggle. + * @returns {import('lit').TemplateResult<1>} - The HTML template for the toggle. + */ + override render() { + return html` +
+ +
+ + +
+
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'searchalicious-toggle': SearchaliciousToggle; + } +} From 672469fd04c68c49453d2bcb8c598bb543ebf8ea Mon Sep 17 00:00:00 2001 From: Kout95 Date: Fri, 21 Jun 2024 11:25:05 +0200 Subject: [PATCH 6/9] fix: merge --- frontend/src/search-facets.ts | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/frontend/src/search-facets.ts b/frontend/src/search-facets.ts index 9f5912d7..3353fa86 100644 --- a/frontend/src/search-facets.ts +++ b/frontend/src/search-facets.ts @@ -385,23 +385,13 @@ export class SearchaliciousTermsFacet extends SearchActionMixin( .name=${term.key} .checked=${this.selectedTerms[term.key]} @change=${this.onCheckboxChange} - > -
${term.name} - ${ - term.count - ? html`(${term.count})` - : nothing - } + ${term.count + ? html`(${term.count})` + : nothing}
From f49689a24e39c66c5bdbeb83bdf13e1fb4c78329 Mon Sep 17 00:00:00 2001 From: Kout95 Date: Fri, 21 Jun 2024 11:26:28 +0200 Subject: [PATCH 7/9] docs --- frontend/src/search-toggle.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/search-toggle.ts b/frontend/src/search-toggle.ts index bc16de20..150fcc89 100644 --- a/frontend/src/search-toggle.ts +++ b/frontend/src/search-toggle.ts @@ -13,6 +13,8 @@ import {CheckedInputMixin} from './mixins/checked-input'; export class SearchaliciousToggle extends CheckedInputMixin(LitElement) { /** * The styles for the toggle. + * input[type='checkbox'] is hidden and the slider is used to represent the toggle. + * We keep input for accessibility. * @type {import('lit').CSSResult} */ static override styles = css` From 0a4892272756fa7826764fb47be20aecc2104c93 Mon Sep 17 00:00:00 2001 From: Kout95 Date: Fri, 21 Jun 2024 11:30:14 +0200 Subject: [PATCH 8/9] feat: avoid input to be shrink --- frontend/src/search-checkbox.ts | 1 + frontend/src/search-radio.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/search-checkbox.ts b/frontend/src/search-checkbox.ts index 3662d766..fc73c7ef 100644 --- a/frontend/src/search-checkbox.ts +++ b/frontend/src/search-checkbox.ts @@ -28,6 +28,7 @@ export class SearchaliciousCheckbox extends CheckedInputMixin(LitElement) { input[type='checkbox'] { cursor: pointer; position: relative; + flex-shrink: 0; width: 20px; height: 20px; margin-right: 0; diff --git a/frontend/src/search-radio.ts b/frontend/src/search-radio.ts index 08a57e53..3b15f39c 100644 --- a/frontend/src/search-radio.ts +++ b/frontend/src/search-radio.ts @@ -25,13 +25,13 @@ export class SearchaliciousRadio extends CheckedInputMixin(LitElement) { input[type='radio'] { cursor: pointer; position: relative; + flex-shrink: 0; width: 20px; height: 20px; margin-right: 0; appearance: none; border: 1px solid var(--searchalicious-radio-color, black); background-color: transparent; - border-radius: 50%; } From edc7eef8dc777a877b9747d22cc3b15708e22000 Mon Sep 17 00:00:00 2001 From: Kout95 Date: Fri, 21 Jun 2024 11:38:12 +0200 Subject: [PATCH 9/9] feat: add label property, add inputId for radio --- frontend/src/mixins/checked-input.ts | 8 ++++++++ frontend/src/search-checkbox.ts | 4 +++- frontend/src/search-radio.ts | 15 ++++++++++++--- frontend/src/search-toggle.ts | 4 +++- 4 files changed, 26 insertions(+), 5 deletions(-) diff --git a/frontend/src/mixins/checked-input.ts b/frontend/src/mixins/checked-input.ts index 5f04d6f1..d0f9be8e 100644 --- a/frontend/src/mixins/checked-input.ts +++ b/frontend/src/mixins/checked-input.ts @@ -6,6 +6,7 @@ import {BasicEvents} from '../utils/enums'; export interface CheckedInputMixinInterface { checked: boolean; name: string; + label: string; getInputElement(): HTMLInputElement | null; _dispatchChangeEvent(checked: boolean, name: string): void; refreshInput(): void; @@ -30,6 +31,13 @@ export const CheckedInputMixin = >( @property({type: String}) name = ''; + /** + * Represents the label of the input. + * @type {string} + */ + @property({type: String}) + label = ''; + getInputElement() { return this.shadowRoot?.querySelector('input'); } diff --git a/frontend/src/search-checkbox.ts b/frontend/src/search-checkbox.ts index fc73c7ef..12e1f828 100644 --- a/frontend/src/search-checkbox.ts +++ b/frontend/src/search-checkbox.ts @@ -75,7 +75,9 @@ export class SearchaliciousCheckbox extends CheckedInputMixin(LitElement) { ?checked=${this.checked} @change=${this._handleChange} /> - + `; } diff --git a/frontend/src/search-radio.ts b/frontend/src/search-radio.ts index 3b15f39c..8ceb61b8 100644 --- a/frontend/src/search-radio.ts +++ b/frontend/src/search-radio.ts @@ -60,9 +60,18 @@ export class SearchaliciousRadio extends CheckedInputMixin(LitElement) { } `; + /** + * Allows or disallows the radio to be unchecked. + */ @property({type: Boolean, attribute: 'can-be-unchecked'}) canBeUnchecked = false; + /** + * Represents the id of the input. + */ + @property({type: String}) + inputId = ''; + /** * Allows for the radio to be unchecked. * @param {Event} e - The event object. @@ -83,14 +92,14 @@ export class SearchaliciousRadio extends CheckedInputMixin(LitElement) { -