@c2n/slider 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# @c2n/slider
+
+Slider built with Lit on a native `<input type="range">`: the browser handles dragging, keyboard steps, RTL and the `slider` role; the component draws a themeable track, fill, thumb, step ticks and a value bubble.
+
+```bash
+npm install @c2n/slider
+```
+
+```html
+<script type="module">
+  import '@c2n/slider'
+</script>
+
+<c2-slider value="40" aria-label="Volume"></c2-slider>
+<c2-slider min="0" max="10" step="1" value="6" ticks show-value aria-label="Rating"></c2-slider>
+<c2-slider orientation="vertical" value="70" aria-label="Level"></c2-slider>
+```
+
+- **Value**: `value`, `min`, `max` and `step` mirror the native input; `value` reflects and is snapped by the browser. `input` fires on every step of a drag, `change` when the value is committed.
+- **Bubble**: `show-value` shows the value above the thumb while hovering, dragging or focused; `--c2-slider__value--opacity: 1` keeps it always on. Set the `formatValue` property (`(v) => \`${v}%\``) to format both the bubble and `aria-valuetext`.
+- **Ticks**: `ticks` draws a mark for every `step` (up to 200), coloured differently on the filled part.
+- **Orientation**: `orientation="vertical"` turns the track upright; its length is `--c2-slider__container--length`. Horizontal sliders fill their width.
+- **Accessibility**: label it with `aria-label` or `aria-labelledby`; Arrow keys, Page Up/Down, Home and End work natively.
+
+Theme the track (`--c2-slider__track--*`, `--c2-slider__fill--color`), the thumb (`--c2-slider__thumb--*`, with hover and active halos and a focus ring), the ticks and the bubble. The full list is in `custom-elements.json` and on the docs site.

package/dist/slider.js

@@ -0,0 +1,140 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region src/slider.scss?inline
+var slider_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation=vertical]) {\n  display: inline-block;\n  width: var(--c2-slider__container--height,32px);\n  height: var(--c2-slider__container--length,160px);\n}\n\n.c2-slider {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--c2-slider__container--height,32px);\n  display: flex;\n  align-items: center;\n  touch-action: pan-y;\n}\n\n:host([orientation=vertical]) .c2-slider {\n  width: var(--c2-slider__container--height,32px);\n  height: 100%;\n  justify-content: center;\n  touch-action: pan-x;\n}\n\n:host([disabled]) .c2-slider {\n  opacity: var(--c2-slider__container__disabled--opacity,0.38);\n}\n\n.c2-slider-track {\n  position: relative;\n  flex: 1;\n  height: var(--c2-slider__track--height,4px);\n  border-radius: var(--c2-slider__track--border-radius,999px);\n  background: var(--c2-slider__track--color,#e4e4e7);\n}\n\n:host([orientation=vertical]) .c2-slider-track {\n  flex: none;\n  width: var(--c2-slider__track--height,4px);\n  height: 100%;\n}\n\n.c2-slider-fill {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  width: calc(var(--c2-slider__thumb--size,18px) / 2 + var(--_p) * (100% - var(--c2-slider__thumb--size,18px)));\n  border-radius: inherit;\n  background: var(--c2-slider__fill--color,#0265dc);\n}\n\n:host([orientation=vertical]) .c2-slider-fill {\n  inset: auto 0 0 0;\n  width: auto;\n  height: calc(var(--c2-slider__thumb--size,18px) / 2 + var(--_p) * (100% - var(--c2-slider__thumb--size,18px)));\n}\n\n.c2-slider-ticks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.c2-slider-tick {\n  position: absolute;\n  top: 50%;\n  inset-inline-start: calc(var(--c2-slider__thumb--size,18px) / 2 + var(--_p) * (100% - var(--c2-slider__thumb--size,18px)));\n  width: var(--c2-slider__tick--size,2px);\n  height: var(--c2-slider__tick--size,2px);\n  border-radius: 999px;\n  background: var(--c2-slider__tick--color,#a1a1aa);\n  transform: translate(-50%, -50%);\n}\n.c2-slider-tick.is-filled {\n  background: var(--c2-slider__tick__filled--color,#ffffff);\n}\n\n:host(:dir(rtl)) .c2-slider-tick {\n  transform: translate(50%, -50%);\n}\n\n:host([orientation=vertical]) .c2-slider-tick {\n  top: auto;\n  left: 50%;\n  right: auto;\n  bottom: calc(var(--c2-slider__thumb--size,18px) / 2 + var(--_p) * (100% - var(--c2-slider__thumb--size,18px)));\n  transform: translate(-50%, 50%);\n}\n\n.c2-slider-thumb {\n  position: absolute;\n  top: 50%;\n  inset-inline-start: calc(var(--c2-slider__thumb--size,18px) / 2 + var(--_p) * (100% - var(--c2-slider__thumb--size,18px)));\n  width: var(--c2-slider__thumb--size,18px);\n  height: var(--c2-slider__thumb--size,18px);\n  box-sizing: border-box;\n  border-radius: var(--c2-slider__thumb--border-radius,999px);\n  background: var(--c2-slider__thumb--color,#ffffff);\n  border: var(--c2-slider__thumb--border,2px solid #0265dc);\n  box-shadow: var(--c2-slider__thumb--box-shadow,0 1px 3px rgba(0, 0, 0, 0.15));\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  transition: box-shadow 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n:host(:dir(rtl)) .c2-slider-thumb {\n  transform: translate(50%, -50%);\n}\n\n:host([orientation=vertical]) .c2-slider-thumb {\n  top: auto;\n  left: 50%;\n  right: auto;\n  bottom: calc(var(--c2-slider__thumb--size,18px) / 2 + var(--_p) * (100% - var(--c2-slider__thumb--size,18px)));\n  transform: translate(-50%, 50%);\n}\n\n.c2-slider-value {\n  position: absolute;\n  bottom: calc(100% + var(--c2-slider__value--offset,8px));\n  left: 50%;\n  transform: translateX(-50%);\n  padding: var(--c2-slider__value--padding,4px 8px);\n  border-radius: var(--c2-slider__value--border-radius,6px);\n  background: var(--c2-slider__value--background,#18181b);\n  color: var(--c2-slider__value--color,#fafafa);\n  font-size: var(--c2-slider__value--font-size,12px);\n  font-weight: var(--c2-slider__value--font-weight,500);\n  line-height: 1.2;\n  white-space: nowrap;\n  opacity: var(--c2-slider__value--opacity,0);\n  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n:host([orientation=vertical]) .c2-slider-value {\n  bottom: auto;\n  left: calc(100% + var(--c2-slider__value--offset,8px));\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.c2-slider-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n}\n.c2-slider-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: var(--c2-slider__thumb--size,18px);\n  height: var(--c2-slider__thumb--size,18px);\n}\n.c2-slider-input::-moz-range-thumb {\n  width: var(--c2-slider__thumb--size,18px);\n  height: var(--c2-slider__thumb--size,18px);\n  border: 0;\n}\n.c2-slider-input:disabled {\n  cursor: default;\n}\n\n:host([orientation=vertical]) .c2-slider-input {\n  writing-mode: vertical-lr;\n  direction: rtl;\n}\n\n.c2-slider:has(.c2-slider-input:enabled:hover) .c2-slider-thumb {\n  box-shadow: var(--c2-slider__thumb__hover--box-shadow,0 0 0 6px rgba(2, 101, 220, 0.12));\n}\n\n.c2-slider:has(.c2-slider-input:enabled:active) .c2-slider-thumb {\n  box-shadow: var(--c2-slider__thumb__active--box-shadow,0 0 0 8px rgba(2, 101, 220, 0.18));\n}\n\n.c2-slider:has(.c2-slider-input:focus-visible) .c2-slider-thumb {\n  outline: var(--c2-slider__thumb__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-slider__thumb__focus--outline-offset,2px);\n}\n\n.c2-slider:has(.c2-slider-input:enabled:hover) .c2-slider-value,\n.c2-slider:has(.c2-slider-input:enabled:active) .c2-slider-value,\n.c2-slider:has(.c2-slider-input:focus-visible) .c2-slider-value {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-slider-thumb,\n  .c2-slider-value {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/slider.ts
+var MAX_TICKS = 200;
+var Slider = class Slider extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.disabled = false;
+		this.name = "";
+		this.orientation = "horizontal";
+		this.showValue = false;
+		this.ticks = false;
+		this.formatValue = (value) => String(value);
+	}
+	static {
+		this.styles = unsafeCSS(slider_default);
+	}
+	focus(options) {
+		this.formElement?.focus(options);
+	}
+	/** Position of the value along the track, `0` at `min` and `1` at `max`. */
+	get fraction() {
+		const range = this.max - this.min;
+		if (range <= 0) return 0;
+		return Math.min(1, Math.max(0, (this.value - this.min) / range));
+	}
+	update(changed) {
+		if (changed.has("value") && this.formElement) this.formElement.value = String(this.value);
+		super.update(changed);
+	}
+	handleInput(event) {
+		this.value = Number(this.formElement.value);
+		redispatchEvent(this, event);
+	}
+	handleChange(event) {
+		this.value = Number(this.formElement.value);
+		redispatchEvent(this, event);
+	}
+	renderTicks() {
+		if (!this.ticks || this.step <= 0) return nothing;
+		const count = Math.round((this.max - this.min) / this.step);
+		if (count < 1 || count > MAX_TICKS) return nothing;
+		const marks = [];
+		for (let i = 0; i <= count; i++) {
+			const fraction = i / count;
+			marks.push(html`<span
+          class=${classMap({
+				"c2-slider-tick": true,
+				"is-filled": fraction <= this.fraction
+			})}
+          style=${styleMap({ "--_p": String(fraction) })}
+        ></span>`);
+		}
+		return html`<div class="c2-slider-ticks" aria-hidden="true">${marks}</div>`;
+	}
+	render() {
+		const formatted = this.formatValue(this.value);
+		return html`
+      <div class="c2-slider" style=${styleMap({ "--_p": String(this.fraction) })}>
+        <div class="c2-slider-track" part="track">
+          <div class="c2-slider-fill" part="fill"></div>
+          ${this.renderTicks()}
+          <div class="c2-slider-thumb" part="thumb">
+            ${this.showValue ? html`<div class="c2-slider-value" part="value" aria-hidden="true">${formatted}</div>` : nothing}
+          </div>
+        </div>
+        <input
+          class="c2-slider-input"
+          type="range"
+          name=${ifDefined(this.name || void 0)}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          .value=${String(this.value)}
+          ?disabled=${this.disabled}
+          aria-label=${ifDefined(this.ariaLabel)}
+          aria-labelledby=${ifDefined(this.ariaLabelledBy)}
+          aria-valuetext=${formatted}
+          aria-orientation=${this.orientation}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+      </div>
+    `;
+	}
+};
+__decorate([query("input")], Slider.prototype, "formElement", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Slider.prototype, "value", void 0);
+__decorate([property({ type: Number })], Slider.prototype, "min", void 0);
+__decorate([property({ type: Number })], Slider.prototype, "max", void 0);
+__decorate([property({ type: Number })], Slider.prototype, "step", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Slider.prototype, "disabled", void 0);
+__decorate([property()], Slider.prototype, "name", void 0);
+__decorate([property({ reflect: true })], Slider.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-value"
+})], Slider.prototype, "showValue", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Slider.prototype, "ticks", void 0);
+__decorate([property({ attribute: false })], Slider.prototype, "formatValue", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], Slider.prototype, "ariaLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-labelledby"
+})], Slider.prototype, "ariaLabelledBy", void 0);
+Slider = __decorate([customElement("c2-slider")], Slider);
+//#endregion
+export { Slider };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/slider",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/slider.js",
+  "exports": {
+    ".": {
+      "default": "./dist/slider.js",
+      "types": "./types/src/slider.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "slider",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/slider.d.ts

@@ -0,0 +1,82 @@
+import { LitElement, type PropertyValues } from 'lit';
+export type SliderOrientation = 'horizontal' | 'vertical';
+/**
+ * Single-value slider built on a native `<input type="range">`, so dragging, keyboard steps (Arrow keys, Page Up/Down,
+ * Home/End), RTL and the `slider` role come from the browser. The component draws the track, the filled part, the
+ * thumb, optional step `ticks` and a value bubble (`show-value`) above the thumb, all themed through CSS variables.
+ *
+ * @tag c2-slider
+ *
+ * @event {Event} input - Re-dispatched from the inner input while the value changes (every step of a drag).
+ * @event {Event} change - Re-dispatched from the inner input when the value is committed (pointer released, key released).
+ *
+ * @cssproperty {pixel} [--c2-slider__container--height=32px] - Height of the horizontal slider (width when vertical); the touch target.
+ * @cssproperty {pixel} [--c2-slider__container--length=160px] - Length of a vertical slider. A horizontal one fills its width.
+ * @cssproperty {opacity} [--c2-slider__container__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-slider__track--height=4px]
+ * @cssproperty {border-radius} [--c2-slider__track--border-radius=999px]
+ * @cssproperty {color} [--c2-slider__track--color=#e4e4e7]
+ * @cssproperty {color} [--c2-slider__fill--color=#0265dc] - Filled part of the track, from the start to the thumb.
+ *
+ * @cssproperty {pixel} [--c2-slider__thumb--size=18px]
+ * @cssproperty {border-radius} [--c2-slider__thumb--border-radius=999px]
+ * @cssproperty {color} [--c2-slider__thumb--color=#ffffff]
+ * @cssproperty {border} [--c2-slider__thumb--border=2px solid #0265dc]
+ * @cssproperty {box-shadow} [--c2-slider__thumb--box-shadow=0 1px 3px rgba(0, 0, 0, 0.15)]
+ * @cssproperty {box-shadow} [--c2-slider__thumb__hover--box-shadow=0 0 0 6px rgba(2, 101, 220, 0.12)] - Halo while hovering.
+ * @cssproperty {box-shadow} [--c2-slider__thumb__active--box-shadow=0 0 0 8px rgba(2, 101, 220, 0.18)] - Halo while dragging.
+ * @cssproperty {outline} [--c2-slider__thumb__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-slider__thumb__focus--outline-offset=2px]
+ *
+ * @cssproperty {pixel} [--c2-slider__tick--size=2px]
+ * @cssproperty {color} [--c2-slider__tick--color=#a1a1aa] - Ticks on the unfilled part of the track.
+ * @cssproperty {color} [--c2-slider__tick__filled--color=#ffffff] - Ticks on the filled part.
+ *
+ * @cssproperty {background} [--c2-slider__value--background=#18181b] - Value bubble above the thumb.
+ * @cssproperty {color} [--c2-slider__value--color=#fafafa]
+ * @cssproperty {font-size} [--c2-slider__value--font-size=12px]
+ * @cssproperty {font-weight} [--c2-slider__value--font-weight=500]
+ * @cssproperty {border-radius} [--c2-slider__value--border-radius=6px]
+ * @cssproperty {padding} [--c2-slider__value--padding=4px 8px]
+ * @cssproperty {pixel} [--c2-slider__value--offset=8px] - Gap between the thumb and the bubble.
+ * @cssproperty {opacity} [--c2-slider__value--opacity=0] - Resting opacity of the bubble; it is fully visible while hovering, dragging or focused. `1` keeps it always on.
+ */
+export declare class Slider extends LitElement {
+    static styles: import("lit").CSSResult;
+    protected formElement: HTMLInputElement;
+    /** Current value, clamped to `min`/`max` and snapped to `step` by the inner input. */
+    value: number;
+    min: number;
+    max: number;
+    /** Increment between values; also the distance between `ticks`. */
+    step: number;
+    /** Disables the control: no interaction, rendered dimmed. */
+    disabled: boolean;
+    /** Form field name forwarded to the inner input. */
+    name: string;
+    /** Direction of the track. A vertical slider takes `--c2-slider__container--length` as its height. */
+    orientation: SliderOrientation;
+    /** Shows the value in a bubble above the thumb while hovering, dragging or focused. */
+    showValue: boolean;
+    /** Draws a mark on the track for every `step` between `min` and `max` (up to 200 marks). */
+    ticks: boolean;
+    /** Formats the value for the bubble and `aria-valuetext`, e.g. `(v) => \`${v}%\``. Property only. */
+    formatValue: (value: number) => string;
+    ariaLabel: string;
+    ariaLabelledBy: undefined | string;
+    focus(options?: FocusOptions): void;
+    /** Position of the value along the track, `0` at `min` and `1` at `max`. */
+    get fraction(): number;
+    protected update(changed: PropertyValues<this>): void;
+    private handleInput;
+    private handleChange;
+    private renderTicks;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-slider': Slider;
+    }
+}
+//# sourceMappingURL=slider.d.ts.map

package/types/src/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQ/E,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAA;AAIzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1B,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,sFAAsF;IAC3C,KAAK,SAAI;IAExB,GAAG,SAAI;IAEP,GAAG,SAAM;IAErC,mEAAmE;IACvC,IAAI,SAAI;IAEpC,6DAA6D;IACjB,QAAQ,UAAQ;IAE5D,oDAAoD;IACxC,IAAI,SAAK;IAErB,sGAAsG;IACzE,WAAW,EAAE,iBAAiB,CAAe;IAE1E,uFAAuF;IAClB,SAAS,UAAQ;IAEtF,4FAA4F;IAChD,KAAK,UAAQ;IAEzD,qGAAqG;IACrE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAA2B;IAGxF,SAAS,EAAG,MAAM,CAAA;IAG3B,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAE1B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,4EAA4E;IAC5E,IAAI,QAAQ,IAAI,MAAM,CAIrB;cAEkB,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKvD,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAiBV,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}