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

package/README.md

@@ -11,7 +11,13 @@ Before: GrapesJs default Selector Manager
 
 After:
 
-[GrapesJs Advanced Selector Manager](https://github.com/silexlabs/grapesjs-advanced-selector)
+[GrapesJs Advanced Selector Manager](https://github.com/user-attachments/assets/14417ce8-004c-4657-a5a0-26d1969d06be)
+
+With `body h1.btn` selected:
+
+![Advanced Selector Manager with complex selector](https://github.com/user-attachments/assets/8628cdf5-d19e-4838-9584-b94a20b12434)
+
+
 
 ### Links
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silexlabs/grapesjs-advanced-selector",
-  "version": "1.0.8-0",
+  "version": "1.0.8-2",
   "description": "A GrapesJS plugin for managing advanced CSS selectors with a visual interface",
   "keywords": [
     "grapesjs",
@@ -53,6 +53,7 @@
     "@types/jest": "^29.5.14",
     "babel-jest": "^29.7.0",
     "eslint": "^9.25.1",
+    "grapesjs-cli": "^4.1.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "jest": "^29.7.0",

package/dist/StylableElement.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-export default class StylableElement extends LitElement {
-    t: (key: string) => string;
-    connectedCallback(): void;
-}
-//# sourceMappingURL=StylableElement.d.ts.map

package/dist/StylableElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StylableElement.d.ts","sourceRoot":"","sources":["../src/StylableElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAGhC,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IAEnD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAe;IAElC,iBAAiB;CAO3B"}

package/dist/StylableElement.js

@@ -1,26 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,38 +0,0 @@
-import StylableElement from '../StylableElement';
-import { TemplateResult } from 'lit';
-import './resize-input';
-import { SimpleSelector } from '../model/SimpleSelector';
-import { ComplexSelector } from '../model/ComplexSelector';
-import './inline-select';
-import './compound-selector';
-/**
- * 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)
- */
-export default class ComplexSelectorComponent extends StylableElement {
-    /**
-     * The selector to display
-     */
-    get value(): ComplexSelector | undefined;
-    set value(value: ComplexSelector | string | undefined);
-    private _value;
-    /**
-     * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
-     * that are available in the document, applicable to the current selection
-     */
-    suggestions: SimpleSelector[];
-    /**
-     * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
-     * that are available to the related selector
-     */
-    relations: SimpleSelector[];
-    static styles: import("lit").CSSResult;
-    render(): TemplateResult;
-    private changeOperator;
-    private addOperator;
-    private changeRelatedSelector;
-    toString(): string;
-}
-//# sourceMappingURL=complex-selector.d.ts.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,177 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,38 +0,0 @@
-import StylableElement from '../StylableElement';
-import { CompoundSelector } from '../model/CompoundSelector';
-import { SimpleSelector } from '../model/SimpleSelector';
-import { TemplateResult } from 'lit';
-import './inline-select';
-import './simple-selector';
-/**
- * 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
- */
-export default class CompoundSelectorComponent extends StylableElement {
-    /**
-     * The selector to display
-     */
-    get value(): CompoundSelector | undefined;
-    set value(value: CompoundSelector | string | undefined);
-    private _value;
-    /**
-     * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
-     * that are available in the document, applicable to the current selection
-     */
-    suggestions: SimpleSelector[];
-    disablePseudoClass: boolean;
-    static styles: import("lit").CSSResult;
-    toString(): string;
-    render(): TemplateResult;
-    private changeSelector;
-    private addSelector;
-    private focusLastSelector;
-    private deleteSelector;
-    private addPseudoClass;
-    private changePseudoClass;
-}
-//# sourceMappingURL=compound-selector.d.ts.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,205 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"compound-selector.js","sourceRoot":"","sources":["../../src/components/compound-selector.ts"],"names":[],"mappings":"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","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"]}

package/dist/components/current-selector-display.d.ts

@@ -1,23 +0,0 @@
-import { TemplateResult } from 'lit';
-import StylableElement from '../StylableElement';
-import { ComplexSelector } from '../model/ComplexSelector';
-export declare class CurrentSelectorDisplay extends StylableElement {
-    /**
-     * The selector to display
-     */
-    get value(): ComplexSelector | undefined;
-    set value(value: ComplexSelector | string | undefined);
-    private _value;
-    placeholder: string;
-    selectors: ComplexSelector[];
-    helpLink: string;
-    error: string;
-    warning: string;
-    specificity: number;
-    private selectRef;
-    static styles: import("lit").CSSResult;
-    render(): TemplateResult;
-    private changeSelector;
-    private clearStyle;
-}
-//# sourceMappingURL=current-selector-display.d.ts.map

package/dist/components/current-selector-display.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"current-selector-display.d.ts","sourceRoot":"","sources":["../../src/components/current-selector-display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,eAAe,EAA2C,MAAM,0BAA0B,CAAA;AAInG,qBAAa,sBAAuB,SAAQ,eAAe;IACzD;;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;IAGpC,WAAW,SAAqB;IAGhC,SAAS,EAAE,eAAe,EAAE,CAAK;IAGjC,QAAQ,SAAK;IAGb,KAAK,SAAK;IAGV,OAAO,SAAK;IAGZ,WAAW,SAAI;IACtB,OAAO,CAAC,SAAS,CAAiC;IAElD,OAAgB,MAAM,0BA0FrB;IAEQ,MAAM,IAAI,cAAc;IA2GjC,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,UAAU;CAGnB"}