@zeix/ui-element

<tab-list> <menu> <li><button type="button" aria-pressed="false">HTML</button></li> <li><button type="button" aria-pressed="false">CSS</button></li> <li><button type="button" aria-pressed="true">TypeScript</button></li> </menu> <details> <summary> <div class="summary">HTML</div> </summary> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> rating-feedback.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><rating-feedback> <form> <rating-stars> <fieldset> <legend class="visually-hidden">Rate</legend> <label> <input type="radio" class="visually-hidden" name="rating" value="1"> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="2"> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="3"> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="4"> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="5"> <span class="label">☆</span> </label> </fieldset> </rating-stars> <div class="feedback" hidden> <header> <button button="button" class="hide" aria-label="Hide">×</button> <p hidden>We're sorry to hear that! Your feedback is important, and we'd love to improve. Let us know how we can do better.</p> <p hidden>Thank you for your honesty. We appreciate your feedback and will work on making things better.</p> <p hidden>Thanks for your rating! If there's anything we can improve, we'd love to hear your thoughts.</p> <p hidden>We're glad you had a good experience! If there's anything that could make it even better, let us know.</p> <p hidden>Thank you for your support! We're thrilled you had a great experience. Your feedback keeps us motivated!</p> </header> <fieldset> <label for="rating-feedback">Describe your experience (optional)</label> <textarea id="rating-feedback"></textarea> <input-button disabled> <button type="submit" class="primary" disabled>Submit</button> </input-button> </fieldset> </div> </form> </rating-feedback></code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </details> <details> <summary> <div class="summary">CSS</div> </summary> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> rating-feedback.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>rating-feedback { position: relative; display: inline-flex; flex-direction: column; gap: var(--space-m); width: 80%; text-align: left; header { display: flex; flex-direction: row-reverse; gap: var(--space-s); margin-block: var(--space-l); } .hide { position: relative; display: block; box-sizing: border-box; top: 0; right: 0; border: 0; border-radius: var(--space-xs); color: var(--color-text); background: transparent; height: var(--input-height); font-size: var(--font-size-l); &:hover, &:focus { background: rgba(0, 0, 0, 0.05); } &:active { background: rgba(0, 0, 0, 0.1); } } p { margin: 0; } form { display: flex; flex-direction: column; } fieldset { border: 0; padding: 0; margin: 0; } .feedback label { display: block; margin-bottom: var(--space-xxs); } textarea { resize: vertical; width: 100%; display: inline-block; box-sizing: border-box; background: var(--color-input); color: var(--color-text); border: 1px solid var(--color-border); padding: var(--space-xs) var(--space-xxs); font-size: var(--font-size-m); line-height: var(--line-height-m); margin-bottom: var(--space-xs); } }</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </details> <details open> <summary> <div class="summary">TS</div> </summary> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> rating-feedback.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { setProperty, UIElement } from "../../../"; import { type InputButton } from "../input-button/input-button"; import { type RatingStars } from "../rating-stars/rating-stars"; export class RatingFeedback extends UIElement<{ rating: number, empty: boolean, submitted: boolean }> { static localName = 'rating-feedback' init = { rating: 0, empty: true, submitted: false, } connectedCallback() { super.connectedCallback() // Event listeners for rating changes and form submission this.self .on('change-rating', (e: Event) => { this.set('rating', (e as CustomEvent<number>).detail) }) .on('submit', (e: Event) => { e.preventDefault() this.set('submitted', true) console.log('Feedback submitted') }) // Event listener for hide button this.first('.hide').on('click', () => { const feedback = this.querySelector<HTMLElement>('.feedback') if (feedback) feedback.hidden = true }) // Event listener for texteare this.first('textarea').on('input', (e: Event) => { this.set('empty', (e.target as HTMLTextAreaElement)?.value.trim() === '') }) // Effects on rating changes const stars = this.querySelector<RatingStars>('rating-stars') this.first('.feedback') .sync(setProperty('hidden', () => this.get('submitted') || !(stars?.get('value') ?? 0))) this.all('.feedback p') .sync(setProperty('hidden', (_, index) => stars?.get('value') !== index + 1)) // Effect on empty state this.first<InputButton>('input-button').pass({ disabled: 'empty' }) } } RatingFeedback.define()</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </details> </tab-list>