@silexlabs/grapesjs-advanced-selector 1.0.7 → 1.0.8-0

package/dist/StylableElement.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+export default class StylableElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.t = (key) => key;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
+        styles.forEach(style => {
+            var _a;
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(style.cloneNode(true));
+        });
+    }
+}
+__decorate([
+    property()
+], StylableElement.prototype, "t", void 0);
+//# sourceMappingURL=StylableElement.js.map

package/dist/StylableElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylableElement.js","sourceRoot":"","sources":["../src/StylableElement.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IAAvD;;QAEI,MAAC,GAA4B,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAA;IAS7C,CAAC;IAPU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,+BAA+B,CAAC,CAAA;QACzE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;YACrB,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;QACrD,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AATG;IADD,QAAQ,EAAE;0CACgC","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport default class StylableElement extends LitElement {\n  @property()\n    t: (key: string) => string = (key) => key\n\n  override connectedCallback() {\n    super.connectedCallback()\n    const styles = document.querySelectorAll('style, link[rel=\"stylesheet\"]')\n    styles.forEach(style => {\n      this.shadowRoot?.appendChild(style.cloneNode(true))\n    })\n  }\n}\n"]}

package/dist/components/complex-selector.d.ts

@@ -29,7 +29,6 @@ export default class ComplexSelectorComponent extends StylableElement {
      */
     relations: SimpleSelector[];
     static styles: import("lit").CSSResult;
-    dispatchEvent(event: Event): boolean;
     render(): TemplateResult;
     private changeOperator;
     private addOperator;

package/dist/components/complex-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"complex-selector.d.ts","sourceRoot":"","sources":["../../src/components/complex-selector.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,gBAAgB,CAAA;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAY,MAAM,0BAA0B,CAAA;AAMpE,OAAO,iBAAiB,CAAA;AACxB,OAAO,qBAAqB,CAAA;AAE5B;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,eAAe;IAGnE;;OAEG;IACH,IACW,KAAK,IAAI,eAAe,GAAG,SAAS,CAE9C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,SAAS,EAO3D;IACD,OAAO,CAAC,MAAM,CAA6B;IAE3C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAGzC;;;OAGG;IAEI,SAAS,EAAE,cAAc,EAAE,CAAK;IAQvC,OAAgB,MAAM,0BAiBrB;IAEQ,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAKpC,MAAM,IAAI,cAAc;IA6CjC,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,qBAAqB;IAUpB,QAAQ,IAAI,MAAM;CAG5B"}
+{"version":3,"file":"complex-selector.d.ts","sourceRoot":"","sources":["../../src/components/complex-selector.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,gBAAgB,CAAA;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAY,MAAM,0BAA0B,CAAA;AAMpE,OAAO,iBAAiB,CAAA;AACxB,OAAO,qBAAqB,CAAA;AAE5B;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,eAAe;IAGnE;;OAEG;IACH,IACW,KAAK,IAAI,eAAe,GAAG,SAAS,CAE9C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,SAAS,EAO3D;IACD,OAAO,CAAC,MAAM,CAA6B;IAE3C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAGzC;;;OAGG;IAEI,SAAS,EAAE,cAAc,EAAE,CAAK;IAQvC,OAAgB,MAAM,0BAiBrB;IAOQ,MAAM,IAAI,cAAc;IA6CjC,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,qBAAqB;IAUpB,QAAQ,IAAI,MAAM;CAG5B"}

package/dist/components/complex-selector.js

@@ -0,0 +1,177 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { property } from 'lit/decorators.js';
+import StylableElement from '../StylableElement';
+import { css, html } from 'lit';
+import './resize-input';
+import { toString } from '../model/ComplexSelector';
+import { OPERATORS } from '../model/Operator';
+import { FOCUS_VISIBLE } from '../styles';
+/**
+ * A component to display and edit a complex selector
+ * A complex selector is a main selector, an operator, and a related selector
+ * @emits change
+ * @emits rename (when a simple selector in the main compound selector is renamed)
+ */
+class ComplexSelectorComponent extends StylableElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
+         * that are available in the document, applicable to the current selection
+         */
+        this.suggestions = [];
+        /**
+         * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
+         * that are available to the related selector
+         */
+        this.relations = [];
+    }
+    // /////////////////
+    // Attributes
+    /**
+     * The selector to display
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        try {
+            this._value = typeof value === 'string' ? JSON.parse(value) : value;
+        }
+        catch (error) {
+            console.error('Error parsing value for selector', { value, error });
+        }
+        this.requestUpdate();
+    }
+    dispatchEvent(event) {
+        console.info('[COMPLEX] Dispatching event', event);
+        return super.dispatchEvent(event);
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return html `
+      <compound-selector
+        .t=${this.t}
+        .value=${(_a = this.value) === null || _a === void 0 ? void 0 : _a.mainSelector}
+        .suggestions=${this.suggestions}
+        @change=${(event) => {
+            const target = event.target;
+            this.value = {
+                ...this.value,
+                mainSelector: target.value,
+            };
+            event.stopPropagation();
+            this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+        }}
+        @rename=${(event) => this.dispatchEvent(new CustomEvent('rename', { detail: event.detail }))}
+      ></compound-selector>
+      ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.operator) ? html `
+        <inline-select
+          .t=${this.t}
+          .value=${(_c = this.value) === null || _c === void 0 ? void 0 : _c.operator}
+          .options=${OPERATORS}
+          placeholder=""
+          @change=${this.changeOperator}
+        ></inline-select>
+      ` : html `
+        <button
+          class="gjs-btn-prim asm__add-inline"
+          @click=${this.addOperator}
+        >\u2192 ${this.t('Relation')}</button>
+      `}
+      ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.operator) ? html `
+        <compound-selector
+          .t=${this.t}
+          .value=${(_e = this.value) === null || _e === void 0 ? void 0 : _e.relatedSelector}
+          .suggestions=${this.relations}
+          ?disable-pseudo-class=${((_f = this.value) === null || _f === void 0 ? void 0 : _f.operator.isCombinator) === false}
+          @change=${this.changeRelatedSelector}
+        ></compound-selector>
+      ` : ''}
+    `;
+    }
+    // /////////////////
+    // Methods
+    changeOperator(event) {
+        var _a, _b, _c, _d, _e;
+        const target = event.target;
+        if (((_a = target.value) === null || _a === void 0 ? void 0 : _a.isCombinator) === false) {
+            // Make sure we don't have a pseudo class as a param of a pseudo class
+            (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.relatedSelector) === null || _c === void 0 ? true : delete _c.pseudoClass;
+        }
+        this.value = {
+            ...this.value,
+            operator: target.value,
+        };
+        if (!target.value) {
+            (_d = this.value) === null || _d === void 0 ? true : delete _d.relatedSelector;
+            (_e = this.value) === null || _e === void 0 ? true : delete _e.operator;
+        }
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+    }
+    addOperator() {
+        this.requestUpdate();
+        this.value = {
+            ...this.value,
+            operator: OPERATORS[0],
+            relatedSelector: {
+                selectors: [],
+            },
+        };
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+    }
+    changeRelatedSelector(event) {
+        const target = event.target;
+        this.value = {
+            ...this.value,
+            relatedSelector: target.value,
+        };
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+    }
+    toString() {
+        return toString(this.value);
+    }
+}
+// /////////////////
+// Properties
+// /////////////////
+// Element overrides
+ComplexSelectorComponent.styles = css `
+  :host {
+    ${FOCUS_VISIBLE}
+    & {
+      display: block;
+      text-align: left;
+      padding: 0.5rem 0;
+    }
+    button:hover, a:hover {
+      transform: translateX(1px);
+      font-weight: bold;
+    }
+    button.asm__add-inline {
+      font-size: 0.8rem;
+      background: transparent;
+    }
+  }
+  `;
+export default ComplexSelectorComponent;
+__decorate([
+    property({ type: Object, attribute: true, reflect: false })
+], ComplexSelectorComponent.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: true, reflect: false })
+], ComplexSelectorComponent.prototype, "suggestions", void 0);
+__decorate([
+    property({ type: Array, attribute: true, reflect: false })
+], ComplexSelectorComponent.prototype, "relations", void 0);
+if (!customElements.get('complex-selector')) {
+    customElements.define('complex-selector', ComplexSelectorComponent);
+}
+//# sourceMappingURL=complex-selector.js.map

package/dist/components/complex-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"complex-selector.js","sourceRoot":"","sources":["../../src/components/complex-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js'\nimport StylableElement from '../StylableElement'\nimport { css, html, TemplateResult } from 'lit'\nimport './resize-input'\nimport { SimpleSelector } from '../model/SimpleSelector'\nimport { ComplexSelector, toString } from '../model/ComplexSelector'\nimport { Operator, OPERATORS } from '../model/Operator'\nimport InlineSelectComponent from './inline-select'\nimport CompoundSelectorComponent from './compound-selector'\nimport { CompoundSelector } from '../model/CompoundSelector'\nimport { FOCUS_VISIBLE } from '../styles'\n\n/**\n * A component to display and edit a complex selector\n * A complex selector is a main selector, an operator, and a related selector\n * @emits change\n * @emits rename (when a simple selector in the main compound selector is renamed)\n */\nexport default class ComplexSelectorComponent extends StylableElement {\n  // /////////////////\n  // Attributes\n  /**\n   * The selector to display\n   */\n  @property({ type: Object, attribute: true, reflect: false })\n  public get value(): ComplexSelector | undefined {\n    return this._value\n  }\n  public set value(value: ComplexSelector | string | undefined) {\n    try {\n      this._value = typeof value === 'string' ? JSON.parse(value) : value\n    } catch (error) {\n      console.error('Error parsing value for selector', { value, error })\n    }\n    this.requestUpdate()\n  }\n  private _value: ComplexSelector | undefined\n\n  /**\n   * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes\n   * that are available in the document, applicable to the current selection\n   */\n  @property({ type: Array, attribute: true, reflect: false })\n  public suggestions: SimpleSelector[] = []\n\n\n  /**\n   * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes\n   * that are available to the related selector\n   */\n  @property({ type: Array, attribute: true, reflect: false })\n  public relations: SimpleSelector[] = []\n\n\n  // /////////////////\n  // Properties\n\n  // /////////////////\n  // Element overrides\n  static override styles = css`\n  :host {\n    ${ FOCUS_VISIBLE }\n    & {\n      display: block;\n      text-align: left;\n      padding: 0.5rem 0;\n    }\n    button:hover, a:hover {\n      transform: translateX(1px);\n      font-weight: bold;\n    }\n    button.asm__add-inline {\n      font-size: 0.8rem;\n      background: transparent;\n    }\n  }\n  `\n\n  override dispatchEvent(event: Event): boolean {\n    console.info('[COMPLEX] Dispatching event', event)\n    return super.dispatchEvent(event)\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <compound-selector\n        .t=${ this.t }\n        .value=${ this.value?.mainSelector }\n        .suggestions=${ this.suggestions }\n        @change=${ (event: CustomEvent) => {\n    const target = event.target as CompoundSelectorComponent\n    this.value = {\n      ...this.value!,\n      mainSelector: target.value as CompoundSelector,\n    }\n    event.stopPropagation()\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n  }}\n        @rename=${ (event: CustomEvent) => this.dispatchEvent(new CustomEvent('rename', { detail: event.detail })) }\n      ></compound-selector>\n      ${ this.value?.operator ? html`\n        <inline-select\n          .t=${ this.t }\n          .value=${ this.value?.operator }\n          .options=${ OPERATORS }\n          placeholder=\"\"\n          @change=${ this.changeOperator }\n        ></inline-select>\n      ` : html`\n        <button\n          class=\"gjs-btn-prim asm__add-inline\"\n          @click=${ this.addOperator }\n        >\\u2192 ${ this.t('Relation') }</button>\n      `}\n      ${ this.value?.operator ? html`\n        <compound-selector\n          .t=${ this.t }\n          .value=${ this.value?.relatedSelector }\n          .suggestions=${ this.relations }\n          ?disable-pseudo-class=${ this.value?.operator.isCombinator === false }\n          @change=${ this.changeRelatedSelector }\n        ></compound-selector>\n      ` : ''}\n    `\n  }\n\n  // /////////////////\n  // Methods\n  private changeOperator(event: CustomEvent<Operator>) {\n    const target = event.target as InlineSelectComponent\n    if ((target.value as Operator)?.isCombinator === false) {\n      // Make sure we don't have a pseudo class as a param of a pseudo class\n      delete this.value?.relatedSelector?.pseudoClass\n    }\n    this.value = {\n      ...this.value!,\n      operator: target.value as Operator,\n    }\n    if (!target.value) {\n      delete this.value?.relatedSelector\n      delete this.value?.operator\n    }\n    event.stopPropagation()\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n  }\n\n  private addOperator() {\n    this.requestUpdate()\n    this.value = {\n      ...this.value!,\n      operator: OPERATORS[0],\n      relatedSelector: {\n        selectors: [],\n      },\n    } as ComplexSelector\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n  }\n\n  private changeRelatedSelector(event: CustomEvent<CompoundSelector>) {\n    const target = event.target as CompoundSelectorComponent\n    this.value = {\n      ...this.value!,\n      relatedSelector: target.value as CompoundSelector,\n    }\n    event.stopPropagation()\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n  }\n\n  override toString(): string {\n    return toString(this.value!)\n  }\n}\n\nif (!customElements.get('complex-selector')) {\n  customElements.define('complex-selector', ComplexSelectorComponent)\n}\n"]}

package/dist/components/compound-selector.d.ts

@@ -26,7 +26,6 @@ export default class CompoundSelectorComponent extends StylableElement {
     suggestions: SimpleSelector[];
     disablePseudoClass: boolean;
     static styles: import("lit").CSSResult;
-    dispatchEvent(event: Event): boolean;
     toString(): string;
     render(): TemplateResult;
     private changeSelector;

package/dist/components/compound-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compound-selector.d.ts","sourceRoot":"","sources":["../../src/components/compound-selector.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAY,MAAM,2BAA2B,CAAA;AACtE,OAAO,EAAkB,cAAc,EAAmC,MAAM,yBAAyB,CAAA;AACzG,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/C,OAAO,iBAAiB,CAAA;AACxB,OAAO,mBAAmB,CAAA;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,eAAe;IAIpE;;OAEG;IACH,IACW,KAAK,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,EAO5D;IACD,OAAO,CAAC,MAAM,CAA8B;IAE5C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAGlC,kBAAkB,EAAE,OAAO,CAAQ;IAO1C,OAAgB,MAAM,0BAwBrB;IAEQ,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAKpC,QAAQ,IAAI,MAAM;IAGlB,MAAM,IAAI,cAAc;IAmDjC,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;CAK1B"}
+{"version":3,"file":"compound-selector.d.ts","sourceRoot":"","sources":["../../src/components/compound-selector.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAY,MAAM,2BAA2B,CAAA;AACtE,OAAO,EAAkB,cAAc,EAAmC,MAAM,yBAAyB,CAAA;AACzG,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/C,OAAO,iBAAiB,CAAA;AACxB,OAAO,mBAAmB,CAAA;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,eAAe;IAIpE;;OAEG;IACH,IACW,KAAK,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,EAO5D;IACD,OAAO,CAAC,MAAM,CAA8B;IAE5C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAGlC,kBAAkB,EAAE,OAAO,CAAQ;IAO1C,OAAgB,MAAM,0BAwBrB;IAOQ,QAAQ,IAAI,MAAM;IAGlB,MAAM,IAAI,cAAc;IAmDjC,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;CAK1B"}

package/dist/components/compound-selector.js

@@ -0,0 +1,205 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { property } from 'lit/decorators.js';
+import StylableElement from '../StylableElement';
+import { toString } from '../model/CompoundSelector';
+import { isSameSelector, SimpleSelectorType, specificity } from '../model/SimpleSelector';
+import { css, html } from 'lit';
+import { PSEUDO_CLASSES } from '../model/PseudoClass';
+import { FOCUS_VISIBLE } from '../styles';
+import './inline-select';
+/**
+ * A component to display and edit a compound selector
+ * A compound selector is a list of simple selectors and a pseudo class
+ * @emits change
+ * @emits rename (when a simple selector in the selector is renamed)
+ * @emits delete
+ * @emits add
+ */
+class CompoundSelectorComponent extends StylableElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
+         * that are available in the document, applicable to the current selection
+         */
+        this.suggestions = [];
+        this.disablePseudoClass = false;
+    }
+    // /////////////////
+    // Attributes
+    /**
+     * The selector to display
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        try {
+            this._value = typeof value === 'string' ? JSON.parse(value) : value;
+        }
+        catch (error) {
+            console.error('Error parsing value for selector', { value, error });
+        }
+        this.requestUpdate();
+    }
+    dispatchEvent(event) {
+        console.info('[COMPOUND] Dispatching event', event);
+        return super.dispatchEvent(event);
+    }
+    toString() {
+        return toString(this.value);
+    }
+    render() {
+        var _a, _b, _c;
+        return html `
+      <section>
+        <div
+          class="asm-compound__selectors"
+        >
+          ${(_a = this.value) === null || _a === void 0 ? void 0 : _a.selectors.sort((a, b) => specificity(b, true) - specificity(a, true)).map((selector, idx) => html `
+            <simple-selector
+              .t=${this.t}
+              .value=${selector}
+              .suggestions=${this.suggestions}
+              ?readonly=${![SimpleSelectorType.CLASS, SimpleSelectorType.UNKNOWN].includes(selector.type)}
+              @change=${(event) => this.changeSelector(event, idx)}
+              @delete=${(event) => this.deleteSelector(event, idx)}
+            ></simple-selector>
+          `)}
+          <button
+            id="gjs-clm-add-tag"
+            class="gjs-clm-tags-btn gjs-clm-tags-btn__add asm-compound__add"
+            .title=${this.t('Add a new selector')}
+            @click=${this.addSelector}
+            >
+            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
+          </button>
+        </div>
+        ${this.disablePseudoClass ? '' : html `
+          ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.pseudoClass) ? html `
+            <div>
+              <inline-select
+                .t=${this.t}
+                .value=${(_c = this.value) === null || _c === void 0 ? void 0 : _c.pseudoClass}
+                .options=${PSEUDO_CLASSES}
+                @change=${this.changePseudoClass}
+                placeholder=""
+              ></inline-select>
+            </div>
+          ` : html `
+            <button
+              class="gjs-btn-prim asm__add-inline"
+              @click=${this.addPseudoClass}
+              >\u2192 ${this.t('Pseudo Class')}</button>
+          `}
+        `}
+      </section>
+    `;
+    }
+    // /////////////////
+    // Methods
+    changeSelector(event, idx) {
+        const oldValue = this.value.selectors[idx];
+        const onlyId = event.detail.type === SimpleSelectorType.ID && event.detail.active;
+        this.value = {
+            ...this.value,
+            selectors: this.value.selectors
+                // Replace the old value with the new one
+                .map((selector, i) => i === idx ? event.detail : selector)
+                .map(selector => onlyId && selector.type !== SimpleSelectorType.ID ? { ...selector, active: false } : selector),
+        };
+        if (!isSameSelector(oldValue, event.detail, false)) {
+            this.dispatchEvent(new CustomEvent('rename', { detail: {
+                    oldValue,
+                    value: event.detail,
+                } }));
+            this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+        }
+        event.stopPropagation();
+        this.requestUpdate();
+    }
+    addSelector(event) {
+        var _a;
+        this.value = (_a = this.value) !== null && _a !== void 0 ? _a : { selectors: [] };
+        this.value.selectors.push({ type: SimpleSelectorType.UNKNOWN, active: true });
+        event.stopPropagation();
+        this.requestUpdate();
+        // Make the last selector editable
+        requestAnimationFrame(() => this.focusLastSelector());
+    }
+    focusLastSelector() {
+        if (!this.value) {
+            return;
+        }
+        const selector = this.shadowRoot.querySelectorAll('simple-selector')[this.value.selectors.length - 1];
+        selector.editing = true;
+        requestAnimationFrame(() => {
+            selector.focus();
+        });
+    }
+    deleteSelector(event, idx) {
+        var _a;
+        (_a = this.value) === null || _a === void 0 ? void 0 : _a.selectors.splice(idx, 1);
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+        event.stopPropagation();
+        this.requestUpdate();
+    }
+    addPseudoClass(event) {
+        this.value = { ...this.value, pseudoClass: PSEUDO_CLASSES[0] };
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+        event.stopPropagation();
+    }
+    changePseudoClass(event) {
+        this.value = { ...this.value, pseudoClass: event.detail };
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
+        event.stopPropagation();
+    }
+}
+// /////////////////
+// Properties
+// /////////////////
+// Element overrides
+CompoundSelectorComponent.styles = css `
+  :host {
+    ${FOCUS_VISIBLE}
+    button:hover, a:hover {
+      transform: translateX(1px);
+      font-weight: bold;
+    }
+    .asm-compound__selectors {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      flex-wrap: wrap;
+      /* material design card style */
+      padding: 0.5rem;
+      background-color: var(--gjs-main-dark-color);
+    }
+    .asm-compound__add {
+      color: var(--gjs-secondary-color, #b9a5a6);
+    }
+    .asm__add-inline {
+      font-size: 0.8rem;
+      background: transparent;
+    }
+  }
+  `;
+export default CompoundSelectorComponent;
+__decorate([
+    property({ type: Object, attribute: true, reflect: false })
+], CompoundSelectorComponent.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: true, reflect: false })
+], CompoundSelectorComponent.prototype, "suggestions", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-pseudo-class' })
+], CompoundSelectorComponent.prototype, "disablePseudoClass", void 0);
+if (!customElements.get('compound-selector')) {
+    customElements.define('compound-selector', CompoundSelectorComponent);
+}
+//# sourceMappingURL=compound-selector.js.map

package/dist/components/compound-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound-selector.js","sourceRoot":"","sources":["../../src/components/compound-selector.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAoB,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACtE,OAAO,EAAE,cAAc,EAAkB,kBAAkB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACzG,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,iBAAiB,CAAA;AAExB;;;;;;;GAOG;AACH,MAAqB,yBAA0B,SAAQ,eAAe;IAAtE;;QAqBE;;;WAGG;QAEI,gBAAW,GAAqB,EAAE,CAAA;QAGlC,uBAAkB,GAAY,KAAK,CAAA;IAkJ5C,CAAC;IA7KC,oBAAoB;IACpB,aAAa;IACb;;OAEG;IAEH,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IACD,IAAW,KAAK,CAAC,KAA4C;QAC3D,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;QACrE,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,kCAAkC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;QACrE,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IA4CQ,aAAa,CAAC,KAAY;QACjC,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAA;QACnD,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACnC,CAAC;IAEQ,QAAQ;QACf,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAM,CAAC,CAAA;IAC9B,CAAC;IACQ,MAAM;;QACb,OAAO,IAAI,CAAA;;;;;YAKF,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAC7B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,EAC1D,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEZ,IAAI,CAAC,CAAE;uBACH,QAAS;6BACH,IAAI,CAAC,WAAY;0BACpB,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAE;wBAClF,CAAC,KAAkC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAE;wBACxE,CAAC,KAAkB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAE;;WAEtE,CAAE;;;;qBAIS,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAE;qBAC7B,IAAI,CAAC,WAAY;;;;;UAK5B,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;YACjC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAC,CAAC,CAAC,IAAI,CAAA;;;qBAGrB,IAAI,CAAC,CAAE;yBACH,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAY;2BACtB,cAAe;0BAChB,IAAI,CAAC,iBAAkB;;;;WAIvC,CAAC,CAAC,CAAC,IAAI,CAAA;;;uBAGM,IAAI,CAAC,cAAe;wBACnB,IAAI,CAAC,CAAC,CAAC,cAAc,CAAE;WACpC;SACH;;KAEJ,CAAA;IACH,CAAC;IAED,oBAAoB;IACpB,UAAU;IACF,cAAc,CAAC,KAAkC,EAAE,GAAW;QACpE,MAAM,QAAQ,GAAmB,IAAI,CAAC,KAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,kBAAkB,CAAC,EAAE,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAA;QACjF,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAM;YACd,SAAS,EAAE,IAAI,CAAC,KAAM,CAAC,SAAS;gBAC9B,yCAAyC;iBACxC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;iBACzD,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,QAAQ,CAAC,IAAI,KAAK,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;SAClH,CAAA;QACD,IAAG,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE;oBACrD,QAAQ;oBACR,KAAK,EAAE,KAAK,CAAC,MAAM;iBACpB,EAAE,CAAC,CAAC,CAAA;YACL,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACvE,CAAC;QACD,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IACO,WAAW,CAAC,KAAiB;;QACnC,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAA;QAC5C,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;QAC7E,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,kCAAkC;QAClC,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAA;IACvD,CAAC;IACO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAW,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,KAAM,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAA4B,CAAA;QAClI,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;QACvB,qBAAqB,CAAC,GAAG,EAAE;YACzB,QAAQ,CAAC,KAAK,EAAE,CAAA;QAClB,CAAC,CAAC,CAAA;IACJ,CAAC;IACO,cAAc,CAAC,KAAkB,EAAE,GAAW;;QACpD,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACrE,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IACO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAM,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;QAC/D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACrE,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC;IACO,iBAAiB,CAAC,KAAkB;QAC1C,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAM,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE,CAAA;QAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACrE,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC;;AA/ID,oBAAoB;AACpB,aAAa;AAEb,oBAAoB;AACpB,oBAAoB;AACJ,gCAAM,GAAG,GAAG,CAAA;;MAEvB,aAAc;;;;;;;;;;;;;;;;;;;;;;GAsBlB,AAxBqB,CAwBrB;eA5DkB,yBAAyB;AAQ5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;sDAG3D;AAgBM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;8DAClB;AAGlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;qEACrB;AAoJ5C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAC7C,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,yBAAyB,CAAC,CAAA;AACvE,CAAC","sourcesContent":["import { property } from 'lit/decorators.js'\nimport StylableElement from '../StylableElement'\nimport { CompoundSelector, toString } from '../model/CompoundSelector'\nimport { isSameSelector, SimpleSelector, SimpleSelectorType, specificity } from '../model/SimpleSelector'\nimport { css, html, TemplateResult } from 'lit'\nimport SimpleSelectorComponent from './simple-selector'\nimport { PSEUDO_CLASSES } from '../model/PseudoClass'\nimport { FOCUS_VISIBLE } from '../styles'\nimport './inline-select'\n\n/**\n * A component to display and edit a compound selector\n * A compound selector is a list of simple selectors and a pseudo class\n * @emits change\n * @emits rename (when a simple selector in the selector is renamed)\n * @emits delete\n * @emits add\n */\nexport default class CompoundSelectorComponent extends StylableElement {\n\n  // /////////////////\n  // Attributes\n  /**\n   * The selector to display\n   */\n  @property({ type: Object, attribute: true, reflect: false })\n  public get value(): CompoundSelector | undefined {\n    return this._value\n  }\n  public set value(value: CompoundSelector | string | undefined) {\n    try {\n      this._value = typeof value === 'string' ? JSON.parse(value) : value\n    } catch (error) {\n      console.error('Error parsing value for selector', { value, error })\n    }\n    this.requestUpdate()\n  }\n  private _value: CompoundSelector | undefined\n\n  /**\n   * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes\n   * that are available in the document, applicable to the current selection\n   */\n  @property({ type: Array, attribute: true, reflect: false })\n  public suggestions: SimpleSelector[] = []\n\n  @property({ type: Boolean, attribute: 'disable-pseudo-class' })\n  public disablePseudoClass: boolean = false\n\n  // /////////////////\n  // Properties\n\n  // /////////////////\n  // Element overrides\n  static override styles = css`\n  :host {\n    ${ FOCUS_VISIBLE }\n    button:hover, a:hover {\n      transform: translateX(1px);\n      font-weight: bold;\n    }\n    .asm-compound__selectors {\n      display: flex;\n      gap: 0.5rem;\n      align-items: center;\n      flex-wrap: wrap;\n      /* material design card style */\n      padding: 0.5rem;\n      background-color: var(--gjs-main-dark-color);\n    }\n    .asm-compound__add {\n      color: var(--gjs-secondary-color, #b9a5a6);\n    }\n    .asm__add-inline {\n      font-size: 0.8rem;\n      background: transparent;\n    }\n  }\n  `\n\n  override dispatchEvent(event: Event): boolean {\n    console.info('[COMPOUND] Dispatching event', event)\n    return super.dispatchEvent(event)\n  }\n\n  override toString(): string {\n    return toString(this.value!)\n  }\n  override render(): TemplateResult {\n    return html`\n      <section>\n        <div\n          class=\"asm-compound__selectors\"\n        >\n          ${ this.value?.selectors\n    .sort((a, b) => specificity(b, true) - specificity(a, true))\n    .map((selector, idx) => html`\n            <simple-selector\n              .t=${ this.t }\n              .value=${ selector }\n              .suggestions=${ this.suggestions }\n              ?readonly=${ ![SimpleSelectorType.CLASS, SimpleSelectorType.UNKNOWN].includes(selector.type) }\n              @change=${ (event: CustomEvent<SimpleSelector>) => this.changeSelector(event, idx) }\n              @delete=${ (event: CustomEvent) => this.deleteSelector(event, idx) }\n            ></simple-selector>\n          `) }\n          <button\n            id=\"gjs-clm-add-tag\"\n            class=\"gjs-clm-tags-btn gjs-clm-tags-btn__add asm-compound__add\"\n            .title=${ this.t('Add a new selector') }\n            @click=${ this.addSelector }\n            >\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg>\n          </button>\n        </div>\n        ${ this.disablePseudoClass ? '' : html`\n          ${ this.value?.pseudoClass ? html`\n            <div>\n              <inline-select\n                .t=${ this.t }\n                .value=${ this.value?.pseudoClass }\n                .options=${ PSEUDO_CLASSES }\n                @change=${ this.changePseudoClass }\n                placeholder=\"\"\n              ></inline-select>\n            </div>\n          ` : html`\n            <button\n              class=\"gjs-btn-prim asm__add-inline\"\n              @click=${ this.addPseudoClass }\n              >\\u2192 ${ this.t('Pseudo Class') }</button>\n          ` }\n        `}\n      </section>\n    `\n  }\n\n  // /////////////////\n  // Methods\n  private changeSelector(event: CustomEvent<SimpleSelector>, idx: number) {\n    const oldValue: SimpleSelector = this.value!.selectors[idx]\n    const onlyId = event.detail.type === SimpleSelectorType.ID && event.detail.active\n    this.value = {\n      ...this.value!,\n      selectors: this.value!.selectors\n        // Replace the old value with the new one\n        .map((selector, i) => i === idx ? event.detail : selector)\n        .map(selector => onlyId && selector.type !== SimpleSelectorType.ID ? { ...selector, active: false } : selector),\n    }\n    if(!isSameSelector(oldValue, event.detail, false)) {\n      this.dispatchEvent(new CustomEvent('rename', { detail: {\n        oldValue,\n        value: event.detail,\n      } }))\n      this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n    }\n    event.stopPropagation()\n    this.requestUpdate()\n  }\n  private addSelector(event: MouseEvent) {\n    this.value = this.value ?? { selectors: [] }\n    this.value.selectors.push({ type: SimpleSelectorType.UNKNOWN, active: true })\n    event.stopPropagation()\n    this.requestUpdate()\n    // Make the last selector editable\n    requestAnimationFrame(() => this.focusLastSelector())\n  }\n  private focusLastSelector() {\n    if (!this.value) {\n      return\n    }\n    const selector = this.shadowRoot!.querySelectorAll('simple-selector')[this.value!.selectors.length - 1] as SimpleSelectorComponent\n    selector.editing = true\n    requestAnimationFrame(() => {\n      selector.focus()\n    })\n  }\n  private deleteSelector(event: CustomEvent, idx: number) {\n    this.value?.selectors.splice(idx, 1)\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n    event.stopPropagation()\n    this.requestUpdate()\n  }\n  private addPseudoClass(event: MouseEvent) {\n    this.value = { ...this.value!, pseudoClass: PSEUDO_CLASSES[0] }\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n    event.stopPropagation()\n  }\n  private changePseudoClass(event: CustomEvent) {\n    this.value = { ...this.value!, pseudoClass: event.detail }\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))\n    event.stopPropagation()\n  }\n}\n\nif (!customElements.get('compound-selector')) {\n  customElements.define('compound-selector', CompoundSelectorComponent)\n}\n"]}