@silexlabs/grapesjs-advanced-selector 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +9 -0
- package/README.md +148 -0
- package/babel.config.js +3 -0
- package/dist/StylableElement.d.ts +6 -0
- package/dist/StylableElement.d.ts.map +1 -0
- package/dist/components/complex-selector.d.ts +37 -0
- package/dist/components/complex-selector.d.ts.map +1 -0
- package/dist/components/compound-selector.d.ts +37 -0
- package/dist/components/compound-selector.d.ts.map +1 -0
- package/dist/components/current-selector-display.d.ts +23 -0
- package/dist/components/current-selector-display.d.ts.map +1 -0
- package/dist/components/inline-select.d.ts +29 -0
- package/dist/components/inline-select.d.ts.map +1 -0
- package/dist/components/resize-input.d.ts +5 -0
- package/dist/components/resize-input.d.ts.map +1 -0
- package/dist/components/simple-selector.d.ts +44 -0
- package/dist/components/simple-selector.d.ts.map +1 -0
- package/dist/i18n/en.d.ts +75 -0
- package/dist/i18n/en.d.ts.map +1 -0
- package/dist/i18n/fr.d.ts +75 -0
- package/dist/i18n/fr.d.ts.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +649 -0
- package/dist/index.js.map +1 -0
- package/dist/model/ComplexSelector.d.ts +34 -0
- package/dist/model/ComplexSelector.d.ts.map +1 -0
- package/dist/model/ComplexSelector.test.d.ts +2 -0
- package/dist/model/ComplexSelector.test.d.ts.map +1 -0
- package/dist/model/CompoundSelector.d.ts +25 -0
- package/dist/model/CompoundSelector.d.ts.map +1 -0
- package/dist/model/CompoundSelector.test.d.ts +2 -0
- package/dist/model/CompoundSelector.test.d.ts.map +1 -0
- package/dist/model/GrapesJsSelectors.d.ts +48 -0
- package/dist/model/GrapesJsSelectors.d.ts.map +1 -0
- package/dist/model/GrapesJsSelectors.test.d.ts +2 -0
- package/dist/model/GrapesJsSelectors.test.d.ts.map +1 -0
- package/dist/model/Operator.d.ts +28 -0
- package/dist/model/Operator.d.ts.map +1 -0
- package/dist/model/Operator.test.d.ts +2 -0
- package/dist/model/Operator.test.d.ts.map +1 -0
- package/dist/model/PseudoClass.d.ts +56 -0
- package/dist/model/PseudoClass.d.ts.map +1 -0
- package/dist/model/PseudoClass.test.d.ts +2 -0
- package/dist/model/PseudoClass.test.d.ts.map +1 -0
- package/dist/model/SimpleSelector.d.ts +104 -0
- package/dist/model/SimpleSelector.d.ts.map +1 -0
- package/dist/model/SimpleSelector.test.d.ts +2 -0
- package/dist/model/SimpleSelector.test.d.ts.map +1 -0
- package/dist/plugin.d.ts +16 -0
- package/dist/plugin.d.ts.map +1 -0
- package/dist/styles.d.ts +3 -0
- package/dist/styles.d.ts.map +1 -0
- package/eslint.config.mjs +20 -0
- package/jest.config.cjs +11 -0
- package/package.json +50 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,649 @@
|
|
|
1
|
+
/*! @silexlabs/grapesjs-advanced-selector - 1.0.1 */
|
|
2
|
+
!function(e,t){'object'==typeof exports&&'object'==typeof module?module.exports=t():'function'==typeof define&&define.amd?define([],t):'object'==typeof exports?exports["@silexlabs/grapesjs-advanced-selector"]=t():e["@silexlabs/grapesjs-advanced-selector"]=t()}('undefined'!=typeof globalThis?globalThis:'undefined'!=typeof window?window:this,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var s in o)e.o(o,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:o[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(e,'__esModule',{value:!0})}},t={};e.r(t),e.d(t,{default:()=>Jt});const o=globalThis,s=o.ShadowRoot&&(void 0===o.ShadyCSS||o.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap;class n{constructor(e,t,o){if(this._$cssResult$=!0,o!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(s&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=i.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&i.set(t,e))}return e}toString(){return this.cssText}}const l=(e,...t)=>{const o=1===e.length?e[0]:t.reduce(((t,o,s)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+e[s+1]),e[0]);return new n(o,e,r)},a=s?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new n("string"==typeof e?e:e+"",void 0,r))(t)})(e):e,{is:c,defineProperty:d,getOwnPropertyDescriptor:h,getOwnPropertyNames:p,getOwnPropertySymbols:u,getPrototypeOf:v}=Object,S=globalThis,m=S.trustedTypes,g=m?m.emptyScript:"",f=S.reactiveElementPolyfillSupport,b=(e,t)=>e,y={toAttribute(e,t){switch(t){case Boolean:e=e?g:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},C=(e,t)=>!c(e,t),$={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:C};Symbol.metadata??=Symbol("metadata"),S.litPropertyMetadata??=new WeakMap;class _ extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=$){if(t.state&&(t.attribute=!1),this._$Ei(),this.elementProperties.set(e,t),!t.noAccessor){const o=Symbol(),s=this.getPropertyDescriptor(e,o,t);void 0!==s&&d(this.prototype,e,s)}}static getPropertyDescriptor(e,t,o){const{get:s,set:r}=h(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get(){return s?.call(this)},set(t){const i=s?.call(this);r.call(this,t),this.requestUpdate(e,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??$}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const e=v(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const e=this.properties,t=[...p(e),...u(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(a(e))}else void 0!==e&&t.push(a(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{if(s)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const s of t){const t=document.createElement("style"),r=o.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=s.cssText,e.appendChild(t)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$EC(e,t){const o=this.constructor.elementProperties.get(e),s=this.constructor._$Eu(e,o);if(void 0!==s&&!0===o.reflect){const r=(void 0!==o.converter?.toAttribute?o.converter:y).toAttribute(t,o.type);this._$Em=e,null==r?this.removeAttribute(s):this.setAttribute(s,r),this._$Em=null}}_$AK(e,t){const o=this.constructor,s=o._$Eh.get(e);if(void 0!==s&&this._$Em!==s){const e=o.getPropertyOptions(s),r="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:y;this._$Em=s,this[s]=r.fromAttribute(t,e.type),this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){if(o??=this.constructor.getPropertyOptions(e),!(o.hasChanged??C)(this[e],t))return;this.P(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(e,t,o){this._$AL.has(e)||this._$AL.set(e,t),!0===o.reflect&&this._$Em!==e&&(this._$Ej??=new Set).add(e)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,o]of e)!0!==o.wrapped||this._$AL.has(t)||void 0===this[t]||this.P(t,this[t],o)}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Ej&&=this._$Ej.forEach((e=>this._$EC(e,this[e]))),this._$EU()}updated(e){}firstUpdated(e){}}_.elementStyles=[],_.shadowRootOptions={mode:"open"},_[b("elementProperties")]=new Map,_[b("finalized")]=new Map,f?.({ReactiveElement:_}),(S.reactiveElementVersions??=[]).push("2.0.4");const A=globalThis,E=A.trustedTypes,W=E?E.createPolicy("lit-html",{createHTML:e=>e}):void 0,U="$lit$",z=`lit$${Math.random().toFixed(9).slice(2)}$`,w="?"+z,R=`<${w}>`,P=document,T=()=>P.createComment(""),k=e=>null===e||"object"!=typeof e&&"function"!=typeof e,L=Array.isArray,I=e=>L(e)||"function"==typeof e?.[Symbol.iterator],O="[ \t\n\f\r]",N=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,x=/-->/g,j=/>/g,D=RegExp(`>|${O}(?:([^\\s"'>=/]+)(${O}*=${O}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),M=/'/g,H=/"/g,F=/^(?:script|style|textarea|title)$/i,V=e=>(t,...o)=>({_$litType$:e,strings:t,values:o}),B=V(1),q=(V(2),V(3),Symbol.for("lit-noChange")),G=Symbol.for("lit-nothing"),Y=new WeakMap,Z=P.createTreeWalker(P,129);function K(e,t){if(!L(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==W?W.createHTML(t):t}const J=(e,t)=>{const o=e.length-1,s=[];let r,i=2===t?"<svg>":3===t?"<math>":"",n=N;for(let t=0;t<o;t++){const o=e[t];let l,a,c=-1,d=0;for(;d<o.length&&(n.lastIndex=d,a=n.exec(o),null!==a);)d=n.lastIndex,n===N?"!--"===a[1]?n=x:void 0!==a[1]?n=j:void 0!==a[2]?(F.test(a[2])&&(r=RegExp("</"+a[2],"g")),n=D):void 0!==a[3]&&(n=D):n===D?">"===a[0]?(n=r??N,c=-1):void 0===a[1]?c=-2:(c=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?D:'"'===a[3]?H:M):n===H||n===M?n=D:n===x||n===j?n=N:(n=D,r=void 0);const h=n===D&&e[t+1].startsWith("/>")?" ":"";i+=n===N?o+R:c>=0?(s.push(l),o.slice(0,c)+U+o.slice(c)+z+h):o+z+(-2===c?t:h)}return[K(e,i+(e[o]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]};class Q{constructor({strings:e,_$litType$:t},o){let s;this.parts=[];let r=0,i=0;const n=e.length-1,l=this.parts,[a,c]=J(e,t);if(this.el=Q.createElement(a,o),Z.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=Z.nextNode())&&l.length<n;){if(1===s.nodeType){if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(U)){const t=c[i++],o=s.getAttribute(e).split(z),n=/([.?@])?(.*)/.exec(t);l.push({type:1,index:r,name:n[2],strings:o,ctor:"."===n[1]?se:"?"===n[1]?re:"@"===n[1]?ie:oe}),s.removeAttribute(e)}else e.startsWith(z)&&(l.push({type:6,index:r}),s.removeAttribute(e));if(F.test(s.tagName)){const e=s.textContent.split(z),t=e.length-1;if(t>0){s.textContent=E?E.emptyScript:"";for(let o=0;o<t;o++)s.append(e[o],T()),Z.nextNode(),l.push({type:2,index:++r});s.append(e[t],T())}}}else if(8===s.nodeType)if(s.data===w)l.push({type:2,index:r});else{let e=-1;for(;-1!==(e=s.data.indexOf(z,e+1));)l.push({type:7,index:r}),e+=z.length-1}r++}}static createElement(e,t){const o=P.createElement("template");return o.innerHTML=e,o}}function X(e,t,o=e,s){if(t===q)return t;let r=void 0!==s?o._$Co?.[s]:o._$Cl;const i=k(t)?void 0:t._$litDirective$;return r?.constructor!==i&&(r?._$AO?.(!1),void 0===i?r=void 0:(r=new i(e),r._$AT(e,o,s)),void 0!==s?(o._$Co??=[])[s]=r:o._$Cl=r),void 0!==r&&(t=X(e,r._$AS(e,t.values),r,s)),t}class ee{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:o}=this._$AD,s=(e?.creationScope??P).importNode(t,!0);Z.currentNode=s;let r=Z.nextNode(),i=0,n=0,l=o[0];for(;void 0!==l;){if(i===l.index){let t;2===l.type?t=new te(r,r.nextSibling,this,e):1===l.type?t=new l.ctor(r,l.name,l.strings,this,e):6===l.type&&(t=new ne(r,this,e)),this._$AV.push(t),l=o[++n]}i!==l?.index&&(r=Z.nextNode(),i++)}return Z.currentNode=P,s}p(e){let t=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(e,o,t),t+=o.strings.length-2):o._$AI(e[t])),t++}}class te{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,o,s){this.type=2,this._$AH=G,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=o,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=X(this,e,t),k(e)?e===G||null==e||""===e?(this._$AH!==G&&this._$AR(),this._$AH=G):e!==this._$AH&&e!==q&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):I(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==G&&k(this._$AH)?this._$AA.nextSibling.data=e:this.T(P.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:o}=e,s="number"==typeof o?this._$AC(e):(void 0===o.el&&(o.el=Q.createElement(K(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===s)this._$AH.p(t);else{const e=new ee(s,this),o=e.u(this.options);e.p(t),this.T(o),this._$AH=e}}_$AC(e){let t=Y.get(e.strings);return void 0===t&&Y.set(e.strings,t=new Q(e)),t}k(e){L(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let o,s=0;for(const r of e)s===t.length?t.push(o=new te(this.O(T()),this.O(T()),this,this.options)):o=t[s],o._$AI(r),s++;s<t.length&&(this._$AR(o&&o._$AB.nextSibling,s),t.length=s)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class oe{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,o,s,r){this.type=1,this._$AH=G,this._$AN=void 0,this.element=e,this.name=t,this._$AM=s,this.options=r,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=G}_$AI(e,t=this,o,s){const r=this.strings;let i=!1;if(void 0===r)e=X(this,e,t,0),i=!k(e)||e!==this._$AH&&e!==q,i&&(this._$AH=e);else{const s=e;let n,l;for(e=r[0],n=0;n<r.length-1;n++)l=X(this,s[o+n],t,n),l===q&&(l=this._$AH[n]),i||=!k(l)||l!==this._$AH[n],l===G?e=G:e!==G&&(e+=(l??"")+r[n+1]),this._$AH[n]=l}i&&!s&&this.j(e)}j(e){e===G?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class se extends oe{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===G?void 0:e}}class re extends oe{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==G)}}class ie extends oe{constructor(e,t,o,s,r){super(e,t,o,s,r),this.type=5}_$AI(e,t=this){if((e=X(this,e,t,0)??G)===q)return;const o=this._$AH,s=e===G&&o!==G||e.capture!==o.capture||e.once!==o.once||e.passive!==o.passive,r=e!==G&&(o===G||s);s&&this.element.removeEventListener(this.name,this,o),r&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ne{constructor(e,t,o){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(e){X(this,e)}}const le={M:U,P:z,A:w,C:1,L:J,R:ee,D:I,V:X,I:te,H:oe,N:re,U:ie,B:se,F:ne},ae=A.litHtmlPolyfillSupport;ae?.(Q,te),(A.litHtmlVersions??=[]).push("3.2.1");const ce=(e,t,o)=>{const s=o?.renderBefore??t;let r=s._$litPart$;if(void 0===r){const e=o?.renderBefore??null;s._$litPart$=r=new te(t.insertBefore(T(),e),e,void 0,o??{})}return r._$AI(e),r};class de extends _{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=ce(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return q}}de._$litElement$=!0,de["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:de});const he=globalThis.litElementPolyfillSupport;he?.({LitElement:de});(globalThis.litElementVersions??=[]).push("4.1.1");const pe={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:C},ue=(e=pe,t,o)=>{const{kind:s,metadata:r}=o;let i=globalThis.litPropertyMetadata.get(r);if(void 0===i&&globalThis.litPropertyMetadata.set(r,i=new Map),i.set(o.name,e),"accessor"===s){const{name:s}=o;return{set(o){const r=t.get.call(this);t.set.call(this,o),this.requestUpdate(s,r,e)},init(t){return void 0!==t&&this.P(s,void 0,e),t}}}if("setter"===s){const{name:s}=o;return function(o){const r=this[s];t.call(this,o),this.requestUpdate(s,r,e)}}throw Error("Unsupported decorator location: "+s)};function ve(e){return(t,o)=>"object"==typeof o?ue(e,t,o):((e,t,o)=>{const s=t.hasOwnProperty(o);return t.constructor.createProperty(o,s?{...e,wrapped:!0}:e),s?Object.getOwnPropertyDescriptor(t,o):void 0})(e,t,o)}const Se=1,me=2,ge=e=>(...t)=>({_$litDirective$:e,values:t});class fe{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,o){this._$Ct=e,this._$AM=t,this._$Ci=o}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}const be="important",ye=" !"+be,Ce=ge(class extends fe{constructor(e){if(super(e),e.type!==Se||"style"!==e.name||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce(((t,o)=>{const s=e[o];return null==s?t:t+`${o=o.includes("-")?o:o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[t]){const{style:o}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)null==t[e]&&(this.ft.delete(e),e.includes("-")?o.removeProperty(e):o[e]=null);for(const e in t){const s=t[e];if(null!=s){this.ft.add(e);const t="string"==typeof s&&s.endsWith(ye);e.includes("-")||t?o.setProperty(e,t?s.slice(0,-11):s,t?be:""):o[e]=s}}return q}});var $e,_e;!function(e){e["TAG"]="tag",e["CUSTOM_TAG"]="custom-tag",e["CLASS"]="class",e["ID"]="id",e["ATTRIBUTE"]="attribute",e["UNIVERSAL"]="universal",e["UNKNOWN"]="unknown"}($e||($e={})),function(e){e["EQUALS"]="=",e["INCLUDES"]="~=",e["DASH_MATCH"]="|=",e["PREFIX_MATCH"]="^=",e["SUFFIX_MATCH"]="$=",e["SUBSTRING_MATCH"]="*="}(_e||(_e={}));const Ae=['id','class','style','name','type','value','placeholder','href','src','alt','title','width','height','disabled','checked','selected','hidden','readonly','multiple','required','min','max','step','pattern','autocomplete','autofocus','spellcheck','contenteditable','dir','lang','tabindex','accesskey','role'],Ee=['a','abbr','address','area','article','aside','audio','b','base','bdi','bdo','blockquote','body','br','button','canvas','caption','cite','code','col','colgroup','data','datalist','dd','del','details','dfn','dialog','div','dl','dt','em','embed','fieldset','figcaption','figure','footer','form','h1','h2','h3','h4','h5','h6','head','header','hgroup','hr','html','i','iframe','img','input','ins','kbd','label','legend','li','link','main','map','mark','meta','meter','nav','noscript','object','ol','optgroup','option','output','p','param','picture','pre','progress','q','rb','rp','rt','rtc','ruby','s','samp','script','section','select','slot','small','source','span','strong','style','sub','summary','sup','table','tbody','td','template','textarea','tfoot','th','thead','time','title','tr','track','u','ul','var','video','wbr'],We=[' '],Ue={[$e.TAG]:'var(--gjs-color-blue, #3b97e3)',[$e.CUSTOM_TAG]:'var(--gjs-color-blue, #3b97e3)',[$e.CLASS]:'var(--gjs-color-green, #62c462)',[$e.ID]:'var(--gjs-color-yellow, #ffca6f)',[$e.ATTRIBUTE]:'var(--gjs-color-yellow, #ffca6f)',[$e.UNIVERSAL]:'var(--gjs-color-red, #dd3636)',[$e.UNKNOWN]:'var(--gjs-color-red, #dd3636)'},ze='•',we='#',Re='[ ]',Pe='*',Te='⚛',ke='⚛',Le='?';function Ie(e,t,o=!0){if(e.type!==t.type)return!1;if(!o&&e.active!==t.active)return!1;switch(e.type){case $e.TAG:case $e.CUSTOM_TAG:case $e.CLASS:case $e.ID:{const o=t;return e.value===o.value}case $e.ATTRIBUTE:{const o=e,s=t;return o.operator===s.operator&&((!o.operator||o.attributeValue===s.attributeValue)&&o.value===s.value)}case $e.UNIVERSAL:return!0;default:return!1}}function Oe(e){var t;switch(e.type){case $e.ATTRIBUTE:{const o=e;return`[${o.value||''}${o.operator?`${o.operator}"${null!==(t=o.attributeValue)&&void 0!==t?t:''}"`:''}]`}case $e.CLASS:return`.${e.value||''}`;case $e.ID:return`#${e.value||''}`;case $e.TAG:case $e.CUSTOM_TAG:return e.value||'';case $e.UNIVERSAL:return'*';default:return''}}function Ne(e){if(e.type===$e.ATTRIBUTE){return`[${e.value||''}]`}return Oe(e)}function xe(e){if(''===e)return e;if('*'===e)return e;const t=We.map((e=>`\\${e}`)).join('|'),o=e.toLowerCase().replace(new RegExp(t,'g'),'-');if(o.match(/^[0-9-]/))return!1;if(o.startsWith('-'))return!1;if(o.match(/^\[[a-z-]*\]?$/)&&Ae.includes(o.replace('[','').replace(']','')))return o.replace(']','')+']';const s=e.match(/^\[([\w-]+)\s*=\s*"([^"]*)"?\]?$/);if(s){const[,e,t]=s;if(Ae.includes(e))return`[${e}="${t}"]`}return o.match(/^\[data-[_a-zA-Z]+[_a-zA-Z0-9-]*\]?$/)?o.replace(']','')+']':o.match(/^[a-z-]*[a-z]$/)&&o.includes('-')||o.match(/^[a-z]*$/)&&Ee.includes(o)||o.match(/^\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/)||o.match(/^#-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/)?o:!!o.match(/^-?[_a-zA-Z]+[_a-zA-Z0-9-]*[_a-zA-Z0-9]$/)&&'.'+o}function je(e,t=!1){if(!t&&!e.active)return 0;switch(e.type){case $e.TAG:return 1;case $e.CLASS:case $e.ATTRIBUTE:case $e.CUSTOM_TAG:return 10;case $e.ID:return 100;case $e.UNIVERSAL:return 0;default:return console.warn(`Unknown selector type: ${e.type}`),0}}function De(e){switch(e.type){case $e.TAG:case $e.CUSTOM_TAG:return 1;case $e.ID:return 2;case $e.CLASS:return 3;case $e.ATTRIBUTE:return 4;case $e.UNIVERSAL:return 5;default:return 6}}var Me=void 0&&(void 0).__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};class He extends de{constructor(){super(...arguments),this.t=e=>e}connectedCallback(){super.connectedCallback();document.querySelectorAll('style, link[rel="stylesheet"]').forEach((e=>{var t;null===(t=this.shadowRoot)||void 0===t||t.appendChild(e.cloneNode(!0))}))}}Me([ve({type:Function})],He.prototype,"t",void 0);const{I:Fe}=le,Ve=(e,t)=>{const o=e._$AN;if(void 0===o)return!1;for(const e of o)e._$AO?.(t,!1),Ve(e,t);return!0},Be=e=>{let t,o;do{if(void 0===(t=e._$AM))break;o=t._$AN,o.delete(e),e=t}while(0===o?.size)},qe=e=>{for(let t;t=e._$AM;e=t){let o=t._$AN;if(void 0===o)t._$AN=o=new Set;else if(o.has(e))break;o.add(e),Ze(t)}};function Ge(e){void 0!==this._$AN?(Be(this),this._$AM=e,qe(this)):this._$AM=e}function Ye(e,t=!1,o=0){const s=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(t)if(Array.isArray(s))for(let e=o;e<s.length;e++)Ve(s[e],!1),Be(s[e]);else null!=s&&(Ve(s,!1),Be(s));else Ve(this,e)}const Ze=e=>{e.type==me&&(e._$AP??=Ye,e._$AQ??=Ge)};class Ke extends fe{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,t,o){super._$AT(e,t,o),qe(this),this.isConnected=e._$AU}_$AO(e,t=!0){e!==this.isConnected&&(this.isConnected=e,e?this.reconnected?.():this.disconnected?.()),t&&(Ve(this,e),Be(this))}setValue(e){if((e=>void 0===e.strings)(this._$Ct))this._$Ct._$AI(e,this);else{const t=[...this._$Ct._$AH];t[this._$Ci]=e,this._$Ct._$AI(t,this,0)}}disconnected(){}reconnected(){}}const Je=()=>new Qe;class Qe{}const Xe=new WeakMap,et=ge(class extends Ke{render(e){return G}update(e,[t]){const o=t!==this.Y;return o&&void 0!==this.Y&&this.rt(void 0),(o||this.lt!==this.ct)&&(this.Y=t,this.ht=e.options?.host,this.rt(this.ct=e.element)),G}rt(e){if(this.isConnected||(e=void 0),"function"==typeof this.Y){const t=this.ht??globalThis;let o=Xe.get(t);void 0===o&&(o=new WeakMap,Xe.set(t,o)),void 0!==o.get(this.Y)&&this.Y.call(this.ht,void 0),o.set(this.Y,e),void 0!==e&&this.Y.call(this.ht,e)}else this.Y.value=e}get lt(){return"function"==typeof this.Y?Xe.get(this.ht??globalThis)?.get(this.Y):this.Y?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),tt=l`
|
|
3
|
+
background: none;
|
|
4
|
+
border: none;
|
|
5
|
+
-webkit-appearance: none;
|
|
6
|
+
-moz-appearance: none;
|
|
7
|
+
appearance: none;
|
|
8
|
+
font-family: inherit;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
`,ot=l`
|
|
11
|
+
border: none;
|
|
12
|
+
border-bottom: 1px dashed;
|
|
13
|
+
background: none;
|
|
14
|
+
text-align: center;
|
|
15
|
+
font-family: inherit;
|
|
16
|
+
`;var st=void 0&&(void 0).__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};class rt extends He{constructor(){super(...arguments),this.suggestions=[],this._editing=!1,this.selectorInputRef=Je(),this.attributeOptionsAttrValueRef=Je(),this.mainRef=Je()}get value(){return this._value}set value(e){try{this._value='string'==typeof e?JSON.parse(e):e}catch(t){console.error('Error parsing value for selector',{sel:e,error:t})}this.requestUpdate()}get editing(){return this._editing}set editing(e){this._editing=e}focus(){var e;null===(e=this.selectorInputRef.value)||void 0===e||e.focus()}render(){return this.value?B`
|
|
17
|
+
<section
|
|
18
|
+
tabindex="0"
|
|
19
|
+
@keydown=${e=>{'Enter'!==e.key&&' '!==e.key||(this.value={...this.value,active:!this.value.active},this.dispatchEvent(new CustomEvent('change',{detail:this.value})))}}
|
|
20
|
+
@dblclick=${()=>this.edit()}
|
|
21
|
+
@click=${()=>{this.value={...this.value,active:!this.value.active},this.dispatchEvent(new CustomEvent('change',{detail:this.value}))}}
|
|
22
|
+
>
|
|
23
|
+
<header>
|
|
24
|
+
${this.editing?'':function(e){switch(e.type){case $e.ATTRIBUTE:return Re;case $e.CLASS:return ze;case $e.ID:return we;case $e.TAG:return ke;case $e.UNIVERSAL:return Pe;case $e.CUSTOM_TAG:return Te;default:return Le}}(this.value)}
|
|
25
|
+
</header>
|
|
26
|
+
${this.renderMain()}
|
|
27
|
+
<footer>
|
|
28
|
+
<button
|
|
29
|
+
.title=${this.t('Delete')}
|
|
30
|
+
class="gjs-btn-prim asm-simple-selector__delete-button"
|
|
31
|
+
@keydown=${e=>{'Enter'!==e.key&&' '!==e.key||e.stopPropagation()}}
|
|
32
|
+
@click=${e=>{this.dispatchEvent(new CustomEvent('delete',{detail:this.value})),e.stopPropagation()}}
|
|
33
|
+
>
|
|
34
|
+
×
|
|
35
|
+
</button>
|
|
36
|
+
<input
|
|
37
|
+
type="checkbox"
|
|
38
|
+
autocomplete="off"
|
|
39
|
+
class="asm-simple-selector__active"
|
|
40
|
+
.checked=${this.value.active}
|
|
41
|
+
/>
|
|
42
|
+
</footer>
|
|
43
|
+
</section>
|
|
44
|
+
`:B`<div>Initializing</div>`}dispatchEvent(e){return console.info('[SIMPLE] Dispatching event',e),super.dispatchEvent(e)}edit(){this.hasAttribute('readonly')?console.warn('Cannot edit a readonly selector'):(this.editing=!0,requestAnimationFrame((()=>this.focus())))}select(e){var t;const o={...e};delete o.createText,delete o.createValue,!e||e.keepEditing?requestAnimationFrame((()=>this.focus())):(this.editing=!1,null===(t=this.attributeOptionsAttrValueRef.value)||void 0===t||t.blur()),this.dispatchEvent(new CustomEvent('change',{detail:o}))}cancelEdit(){var e,t;null===(e=this.attributeOptionsAttrValueRef.value)||void 0===e||e.blur(),this.editing&&(this.editing=!1,(null===(t=this.value)||void 0===t?void 0:t.type)===$e.UNKNOWN?this.dispatchEvent(new CustomEvent('delete',{detail:this.value})):this.dispatchEvent(new CustomEvent('cancel',{detail:this.value})))}updated(e){var t,o;if(super.updated(e),this.value){const e=(null===(t=this.selectorInputRef.value)||void 0===t?void 0:t.value)||'';null===(o=this.selectorInputRef.value)||void 0===o||o.setCustomValidity(!1===xe(e)?'Invalid selector':'')}}renderMain(){var e,t,o;const s=(null===(e=this.selectorInputRef.value)||void 0===e?void 0:e.value)||'',r=xe(s),i=function(e){const t=[];if(e){const o=!0;if('*'===e)t.push({createText:'Select everything: *',type:$e.UNIVERSAL,active:o});else if(e.startsWith('.'))t.push({createText:`Select class ${e}`,type:$e.CLASS,value:e.slice(1),active:o});else if(e.startsWith('[')){const[s,r]=e.substring(1,e.length-1).split('=');r?t.push({createText:`Select custom attribute ${s} with value ${r}`,type:$e.ATTRIBUTE,value:s,operator:'=',attributeValue:r.replace(/"/g,''),active:o}):t.push({createText:`Select custom attribute ${e}`,type:$e.ATTRIBUTE,value:s,active:o})}else e.match(/^[a-z-]*-[a-z]*$/)&&t.push({createText:`Select custom tag ${e}`,type:$e.CUSTOM_TAG,value:e,active:o})}return t}(r).concat(function(e,t){return'*'===e?[]:(t.forEach((e=>{if(!e.type)throw new Error('Invalid suggestion')})),t.filter((t=>Ne(t).toLowerCase().includes(e.toLowerCase()))))}(s,this.suggestions));return B`
|
|
45
|
+
${this.renderLayout(B`
|
|
46
|
+
${this.editing?this.renderSelectorInput({suggestions:i,valid:!1!==r}):''}
|
|
47
|
+
${this.editing&&(null===(t=this.value)||void 0===t?void 0:t.type)===$e.ATTRIBUTE?this.renderOptionsEditor():B``}
|
|
48
|
+
${this.editing?'':this.renderSelector(B`
|
|
49
|
+
${(null===(o=this.value)||void 0===o?void 0:o.type)===$e.ATTRIBUTE?this.renderOptionsEditor():B``}
|
|
50
|
+
`)}
|
|
51
|
+
${this.editing?this.renderSuggestionList(i,s):''}
|
|
52
|
+
`,{valid:!1!==r,suggestions:i})}
|
|
53
|
+
`}renderLayout(e,{valid:t,suggestions:o}){return B`
|
|
54
|
+
<main
|
|
55
|
+
style=${Ce({color:Ue[this.value.type]})}
|
|
56
|
+
tabindex="0"
|
|
57
|
+
${et(this.mainRef)}
|
|
58
|
+
@keydown=${e=>{this.editing||e.target!==this.mainRef.value||'Enter'!==e.key||(this.edit(),e.stopPropagation())}}
|
|
59
|
+
@focusout=${e=>{if(!this.editing)return;const s=e.relatedTarget;this.renderRoot.querySelector('main').contains(s)||(t?this.select(o[0]):requestAnimationFrame((()=>this.focus())),e.stopPropagation())}}
|
|
60
|
+
>
|
|
61
|
+
${e}
|
|
62
|
+
</main>
|
|
63
|
+
`}renderSelector(e){return B`
|
|
64
|
+
<span
|
|
65
|
+
class="asm-simple-selector__name"
|
|
66
|
+
>
|
|
67
|
+
${this.value?B`
|
|
68
|
+
${function(e){switch(e.type){case $e.CLASS:case $e.ID:case $e.TAG:case $e.ATTRIBUTE:case $e.CUSTOM_TAG:return e.value;case $e.UNIVERSAL:return'*';default:return''}}(this.value)}
|
|
69
|
+
${e}
|
|
70
|
+
`:'No selector'}
|
|
71
|
+
</span>
|
|
72
|
+
`}renderSelectorInput({suggestions:e,valid:t}){return B`
|
|
73
|
+
<input
|
|
74
|
+
${et(this.selectorInputRef)}
|
|
75
|
+
list="suggestions"
|
|
76
|
+
is="resize-input"
|
|
77
|
+
type="text"
|
|
78
|
+
autocomplete="off"
|
|
79
|
+
.value=${Ne(this.value)}
|
|
80
|
+
.disabled=${!this.editing}
|
|
81
|
+
class="asm-simple-selector__like-text asm-simple-selector__selector"
|
|
82
|
+
@keydown=${o=>{this.value&&('Escape'===o.key?(this.cancelEdit(),o.stopPropagation()):'Enter'===o.key&&(t&&this.select(e[0]),o.stopPropagation()))}}
|
|
83
|
+
@keyup=${()=>{this.requestUpdate()}}
|
|
84
|
+
@click=${e=>{e.stopPropagation()}}
|
|
85
|
+
.valid=${t}
|
|
86
|
+
/>
|
|
87
|
+
`}renderSuggestionList(e,t){return B`
|
|
88
|
+
<datalist
|
|
89
|
+
id="suggestions"
|
|
90
|
+
>
|
|
91
|
+
${e.sort(((e,o)=>Oe(e)===t?-1:Oe(o)===t?1:0)).map((e=>{var t,o;return B`
|
|
92
|
+
<option
|
|
93
|
+
value=${null!==(t=e.createValue)&&void 0!==t?t:Oe(e)}
|
|
94
|
+
>${null!==(o=e.createText)&&void 0!==o?o:Oe(e)}</option>
|
|
95
|
+
`}))}
|
|
96
|
+
</datalist>
|
|
97
|
+
`}renderOptionsEditor(){var e,t;if((null===(e=this.value)||void 0===e?void 0:e.type)!==$e.ATTRIBUTE)throw new Error('Invalid selector type, only attribute selectors have options');const o=this.value;return B`
|
|
98
|
+
<select
|
|
99
|
+
class="asm-simple-selector__options-select"
|
|
100
|
+
id="operator"
|
|
101
|
+
@click=${e=>{e.stopPropagation()}}
|
|
102
|
+
@change=${e=>{var t;const s=e.target.value;o.operator=s,o.attributeValue=s?null===(t=this.attributeOptionsAttrValueRef.value)||void 0===t?void 0:t.value:'',this.dispatchEvent(new CustomEvent('change',{detail:this.value}))}}
|
|
103
|
+
@keydown=${e=>{' '===e.key&&e.stopPropagation()}}
|
|
104
|
+
>
|
|
105
|
+
<option value="">...</option>
|
|
106
|
+
<option value="=" .selected=${'='===o.operator}>=</option>
|
|
107
|
+
<option value="~=" .selected=${'~='===o.operator}>~=</option>
|
|
108
|
+
<option value="|=" .selected=${'|='===o.operator}>|=</option>
|
|
109
|
+
<option value="^=" .selected=${'^='===o.operator}>^=</option>
|
|
110
|
+
<option value="$=" .selected=${'$='===o.operator}>$=</option>
|
|
111
|
+
<option value="*=" .selected=${'*='===o.operator}>*=</option>
|
|
112
|
+
</select>
|
|
113
|
+
${o.operator?B`
|
|
114
|
+
"
|
|
115
|
+
<input
|
|
116
|
+
is="resize-input"
|
|
117
|
+
type="text"
|
|
118
|
+
${et(this.attributeOptionsAttrValueRef)}
|
|
119
|
+
autocomplete="off"
|
|
120
|
+
class="asm-simple-selector__like-text"
|
|
121
|
+
.value=${null!==(t=o.attributeValue)&&void 0!==t?t:''}
|
|
122
|
+
@click=${e=>{e.stopPropagation()}}
|
|
123
|
+
@keydown=${e=>{var t;'Enter'===e.key?(o.attributeValue=e.target.value,this.select(this.value),e.stopPropagation()):'Escape'===e.key&&(e.target.value=null!==(t=o.attributeValue)&&void 0!==t?t:'',this.cancelEdit(),e.stopPropagation())}}
|
|
124
|
+
@focusout=${e=>{o.attributeValue=e.target.value,this.select(this.value)}}
|
|
125
|
+
/>
|
|
126
|
+
"
|
|
127
|
+
`:''}
|
|
128
|
+
`}}rt.styles=l`
|
|
129
|
+
select:focus-visible,
|
|
130
|
+
input:focus-visible,
|
|
131
|
+
button:focus-visible,
|
|
132
|
+
a:focus-visible {
|
|
133
|
+
outline: initial !important;
|
|
134
|
+
box-shadow: revert !important;
|
|
135
|
+
}
|
|
136
|
+
section {
|
|
137
|
+
display: flex;
|
|
138
|
+
justify-content: space-between;
|
|
139
|
+
align-items: center;
|
|
140
|
+
gap: 0.25rem;
|
|
141
|
+
padding: 0.10rem;
|
|
142
|
+
border-radius: 0.2rem;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
background-color: var(--gjs-main-light-color, #f9f9f9);
|
|
145
|
+
}
|
|
146
|
+
section:has(:invalid) {
|
|
147
|
+
background: rgba(255, 0, 0, 0.1) !important;
|
|
148
|
+
}
|
|
149
|
+
header {
|
|
150
|
+
width: 12px;
|
|
151
|
+
text-wrap: nowrap;
|
|
152
|
+
transition: all .2s ease-out;
|
|
153
|
+
overflow: hidden;
|
|
154
|
+
text-align: center;
|
|
155
|
+
line-height: 1;
|
|
156
|
+
}
|
|
157
|
+
section:focus-within header,
|
|
158
|
+
section:hover header {
|
|
159
|
+
width: 0;
|
|
160
|
+
}
|
|
161
|
+
footer {
|
|
162
|
+
width: 0;
|
|
163
|
+
transition: all .2s ease-out;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
}
|
|
166
|
+
section:focus-within footer,
|
|
167
|
+
section:hover footer {
|
|
168
|
+
width: 12px;
|
|
169
|
+
}
|
|
170
|
+
select {
|
|
171
|
+
text-align: center;
|
|
172
|
+
}
|
|
173
|
+
section:not(:has(.asm-simple-selector__active:checked)):not(:has(.asm-simple-selector__selector)) {
|
|
174
|
+
opacity: 0.5;
|
|
175
|
+
}
|
|
176
|
+
input, select, button {
|
|
177
|
+
font-family: inherit;
|
|
178
|
+
font-size: inherit;
|
|
179
|
+
color: var(--gjs-secondary-color, #333);
|
|
180
|
+
}
|
|
181
|
+
.asm-simple-selector__delete-button {
|
|
182
|
+
padding: 0;
|
|
183
|
+
line-height: 1;
|
|
184
|
+
margin: 1px;
|
|
185
|
+
background: transparent;
|
|
186
|
+
color: var(--gjs-color-warn, #f00);
|
|
187
|
+
font-size: 1.1rem;
|
|
188
|
+
}
|
|
189
|
+
/*
|
|
190
|
+
.asm-simple-selector__delete-button:hover {
|
|
191
|
+
color: var(--gjs-color-warn, #f00);
|
|
192
|
+
transform: scale(2) translateY(-1px);
|
|
193
|
+
}
|
|
194
|
+
*/
|
|
195
|
+
.asm-simple-selector__active {
|
|
196
|
+
display: none;
|
|
197
|
+
}
|
|
198
|
+
.asm-simple-selector__like-text {
|
|
199
|
+
${ot}
|
|
200
|
+
padding: .25rem;
|
|
201
|
+
}
|
|
202
|
+
.asm-simple-selector__options-select {
|
|
203
|
+
${tt}
|
|
204
|
+
}
|
|
205
|
+
.asm-simple-selector__name {
|
|
206
|
+
display: inline-flex;
|
|
207
|
+
text-wrap: wrap;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
align-items: center;
|
|
210
|
+
min-height: 20px;
|
|
211
|
+
line-height: 1;
|
|
212
|
+
user-select: none;
|
|
213
|
+
}
|
|
214
|
+
.asm-simple-selector__selector {
|
|
215
|
+
cursor: text;
|
|
216
|
+
}
|
|
217
|
+
`;st([ve({type:Object,attribute:!0,reflect:!1})],rt.prototype,"value",null),st([ve({type:Object,attribute:!0,reflect:!1})],rt.prototype,"suggestions",void 0),st([ve({type:Boolean,attribute:!0,reflect:!1,state:!0})],rt.prototype,"editing",null),customElements.get('simple-selector')||customElements.define('simple-selector',rt);const it=5;class nt extends HTMLInputElement{constructor(){super(),this.addEventListener('input',(()=>this.adjustWidth())),this.adjustWidth(),requestAnimationFrame((()=>this.adjustWidth()))}adjustWidth(){var e;this.style.width=`${Math.max(null===(e=this.value)||void 0===e?void 0:e.length,it)}ch`}}customElements.get('resize-input')||customElements.define('resize-input',nt,{extends:'input'});var lt=void 0&&(void 0).__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};class at extends He{constructor(){super(...arguments),this.options=[],this.placeholder='Select an option',this.paramRef=Je()}render(){var e;return this.value?B`
|
|
218
|
+
<section>
|
|
219
|
+
<main>
|
|
220
|
+
${this.t(this.value.sentencePre)}
|
|
221
|
+
<span class="unbreakable">
|
|
222
|
+
${this.renderList()}
|
|
223
|
+
${null!==(e=this.value.sentencePost)&&void 0!==e?e:''}
|
|
224
|
+
${this.renderParam()}
|
|
225
|
+
</span>
|
|
226
|
+
</main>
|
|
227
|
+
<aside>
|
|
228
|
+
${this.renderButtons()}
|
|
229
|
+
</aside>
|
|
230
|
+
</section>
|
|
231
|
+
`:B`
|
|
232
|
+
${this.renderList()}
|
|
233
|
+
`}select(e){this.value=e,this.dispatchEvent(new CustomEvent('change',{bubbles:!0,composed:!0,detail:e})),requestAnimationFrame((()=>{var e;return null===(e=this.paramRef.value)||void 0===e?void 0:e.focus()}))}renderList(){return B`
|
|
234
|
+
<select
|
|
235
|
+
class="asm-inline-select__select"
|
|
236
|
+
@change=${e=>{const t=this.options[e.target.selectedIndex-1];this.select(t)}}
|
|
237
|
+
>
|
|
238
|
+
<option
|
|
239
|
+
.selected=${!this.value}
|
|
240
|
+
>${this.placeholder}</option>
|
|
241
|
+
${this.options.map((e=>{var t,o;return B`
|
|
242
|
+
<option
|
|
243
|
+
.selected=${(null===(t=this.value)||void 0===t?void 0:t.type)===e.type}
|
|
244
|
+
>${this.t(null!==(o=e.displayName)&&void 0!==o?o:e.type)}</option>
|
|
245
|
+
`}))}
|
|
246
|
+
</select>
|
|
247
|
+
`}renderButtons(){var e;return B`
|
|
248
|
+
${(null===(e=this.value)||void 0===e?void 0:e.helpLink)?B`
|
|
249
|
+
<a
|
|
250
|
+
.title=${this.t('Help')}
|
|
251
|
+
class="asm-inline-select__btn"
|
|
252
|
+
href=${this.t(this.value.helpLink)}
|
|
253
|
+
target="_blank"
|
|
254
|
+
>?</a>`:B``}<a
|
|
255
|
+
href="#"
|
|
256
|
+
.title=${this.t('Remove')}
|
|
257
|
+
class="asm-inline-select__btn"
|
|
258
|
+
@click=${e=>{this.select(),e.preventDefault()}}
|
|
259
|
+
>\u2715</a>
|
|
260
|
+
`}renderParam(){var e,t;return(null===(e=this.value)||void 0===e?void 0:e.hasParam)?B`
|
|
261
|
+
( <input
|
|
262
|
+
is="resize-input"
|
|
263
|
+
id="resize-input"
|
|
264
|
+
${et(this.paramRef)}
|
|
265
|
+
type="text"
|
|
266
|
+
autocomplete="off"
|
|
267
|
+
.value=${null!==(t=this.value.param)&&void 0!==t?t:''} // It may not be a pseudo class, in which case param will be undefined
|
|
268
|
+
placeholder=""
|
|
269
|
+
@input=${e=>{this.select({...this.value,param:e.target.value})}}
|
|
270
|
+
/> )
|
|
271
|
+
`:B``}}at.styles=l`
|
|
272
|
+
select:focus-visible,
|
|
273
|
+
input:focus-visible,
|
|
274
|
+
button:focus-visible,
|
|
275
|
+
a:focus-visible {
|
|
276
|
+
outline: initial !important;
|
|
277
|
+
box-shadow: revert !important;
|
|
278
|
+
border: 1px solid !important;
|
|
279
|
+
}
|
|
280
|
+
button:hover, a:hover {
|
|
281
|
+
transform: translateY(1px);
|
|
282
|
+
color: var(--gjs-primary-color, #333);
|
|
283
|
+
}
|
|
284
|
+
input, select, button, inline-select {
|
|
285
|
+
font-family: inherit;
|
|
286
|
+
font-size: inherit;
|
|
287
|
+
color: var(--gjs-secondary-color, #333);
|
|
288
|
+
margin: 0;
|
|
289
|
+
padding: 0;
|
|
290
|
+
}
|
|
291
|
+
:host {
|
|
292
|
+
display: block;
|
|
293
|
+
text-align: left;
|
|
294
|
+
padding: 0 0.5rem;
|
|
295
|
+
margin: 0.5rem 0;
|
|
296
|
+
}
|
|
297
|
+
section {
|
|
298
|
+
display: flex;
|
|
299
|
+
justify-content: space-between;
|
|
300
|
+
}
|
|
301
|
+
select {
|
|
302
|
+
${tt}
|
|
303
|
+
text-align: center;
|
|
304
|
+
border-bottom: 1px dashed;
|
|
305
|
+
}
|
|
306
|
+
aside {
|
|
307
|
+
flex: 0 0 auto;
|
|
308
|
+
}
|
|
309
|
+
input {
|
|
310
|
+
${ot}
|
|
311
|
+
text-align: center;
|
|
312
|
+
}
|
|
313
|
+
.asm-inline-select__btn {
|
|
314
|
+
font-size: 0.8rem;
|
|
315
|
+
text-decoration: none;
|
|
316
|
+
border-radius: 50%;
|
|
317
|
+
color: var(--gjs-secondary-color, #333);
|
|
318
|
+
/* make the link a circle */
|
|
319
|
+
display: inline-block;
|
|
320
|
+
width: .5rem;
|
|
321
|
+
height: .5rem;
|
|
322
|
+
text-align: center;
|
|
323
|
+
line-height: .7rem;
|
|
324
|
+
font-size: .7rem;
|
|
325
|
+
padding: 4px;
|
|
326
|
+
&:hover {
|
|
327
|
+
background-color: var(--gjs-secondary-color, #fff);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
.unbreakable {
|
|
331
|
+
white-space: nowrap;
|
|
332
|
+
}
|
|
333
|
+
`;var ct;lt([ve({type:Object,reflect:!1})],at.prototype,"value",void 0),lt([ve({type:Array,reflect:!1})],at.prototype,"options",void 0),lt([ve({type:String,reflect:!1})],at.prototype,"placeholder",void 0),customElements.get('inline-select')||customElements.define('inline-select',at),function(e){e["HOVER"]="hover",e["ACTIVE"]="active",e["FOCUS"]="focus",e["FOCUS_WITHIN"]="focus-within",e["FOCUS_VISIBLE"]="focus-visible",e["VISITED"]="visited",e["LINK"]="link",e["ANY_LINK"]="any-link",e["FIRST_CHILD"]="first-child",e["LAST_CHILD"]="last-child",e["NTH_CHILD"]="nth-child",e["NTH_LAST_CHILD"]="nth-last-child",e["ONLY_CHILD"]="only-child",e["FIRST_OF_TYPE"]="first-of-type",e["LAST_OF_TYPE"]="last-of-type",e["NTH_OF_TYPE"]="nth-of-type",e["NTH_LAST_OF_TYPE"]="nth-last-of-type",e["ONLY_OF_TYPE"]="only-of-type",e["EMPTY"]="empty",e["ROOT"]="root",e["SCOPE"]="scope",e["TARGET"]="target",e["ENABLED"]="enabled",e["DISABLED"]="disabled",e["CHECKED"]="checked",e["INDETERMINATE"]="indeterminate",e["DEFAULT"]="default",e["VALID"]="valid",e["INVALID"]="invalid",e["IN_RANGE"]="in-range",e["OUT_OF_RANGE"]="out-of-range",e["REQUIRED"]="required",e["OPTIONAL"]="optional",e["READ_ONLY"]="read-only",e["READ_WRITE"]="read-write",e["LANG"]="lang",e["DIR"]="dir"}(ct||(ct={}));const dt=[{type:ct.HOVER,hasParam:!1,sentencePre:'On mouse',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:hover'},{type:ct.ACTIVE,hasParam:!1,sentencePre:'When',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:active'},{type:ct.FOCUS,hasParam:!1,sentencePre:'When it has the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus'},{type:ct.FOCUS_WITHIN,hasParam:!1,sentencePre:'When the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within'},{type:ct.FOCUS_VISIBLE,hasParam:!1,sentencePre:'When the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible'},{type:ct.VISITED,hasParam:!1,sentencePre:'When',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:visited'},{type:ct.LINK,hasParam:!1,sentencePre:'When it is a',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:link'},{type:ct.ANY_LINK,hasParam:!1,sentencePre:'When it is a',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link'},{type:ct.FIRST_CHILD,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child'},{type:ct.LAST_CHILD,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child'},{type:ct.NTH_CHILD,hasParam:!0,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child'},{type:ct.NTH_LAST_CHILD,hasParam:!0,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child'},{type:ct.ONLY_CHILD,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child'},{type:ct.FIRST_OF_TYPE,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type'},{type:ct.LAST_OF_TYPE,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type'},{type:ct.NTH_OF_TYPE,hasParam:!0,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type'},{type:ct.NTH_LAST_OF_TYPE,hasParam:!0,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type'},{type:ct.ONLY_OF_TYPE,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type'},{type:ct.EMPTY,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:empty'},{type:ct.ROOT,hasParam:!1,sentencePre:'When it is the',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:root'},{type:ct.SCOPE,hasParam:!1,sentencePre:'When it is within',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:scope'},{type:ct.TARGET,hasParam:!1,sentencePre:'When URL matches',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:target'},{type:ct.ENABLED,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled'},{type:ct.DISABLED,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled'},{type:ct.CHECKED,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:checked'},{type:ct.INDETERMINATE,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate'},{type:ct.REQUIRED,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:required'},{type:ct.OPTIONAL,hasParam:!1,sentencePre:'When it is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:optional'},{type:ct.LANG,hasParam:!0,sentencePre:'When it matches',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:lang'},{type:ct.DIR,hasParam:!0,sentencePre:'When the text direction is',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:dir'}];function ht(e){if(e.selectors.length>1&&e.selectors.some((e=>'universal'===e.type)))throw new Error('The universal selector can only be used alone');return`${e.selectors.filter((e=>e.active)).sort(((e,t)=>De(e)-De(t))).map(Oe).join('')}${e.pseudoClass?(t=e.pseudoClass,t.hasParam?`:${t.type}(${null!==(o=t.param)&&void 0!==o?o:''})`:`:${t.type}`):''}`;var t,o}function pt(e){return e.selectors.filter((e=>e.active)).reduce(((e,t)=>e+je(t)),0)+(e.pseudoClass?10:0)}function ut(e){const t=e.match(/(#[-\w]+)|(\.[-\w]+)|(\*)|([a-zA-Z][-a-zA-Z0-9]*)|(\[([a-zA-Z][-a-zA-Z0-9]*)\s*([~|^$*]?=)?\s*"?([^"\]]*)"?\])|(:[-\w]+(\([^)]*\))?)/g);if(!t)throw new Error(`Invalid selector: ${e}`);const o=[];let s;return t.forEach((e=>{if(e.startsWith('#'))o.push({type:$e.ID,value:e.slice(1),active:!0});else if(e.startsWith('.'))o.push({type:$e.CLASS,value:e.slice(1),active:!0});else if(e.startsWith('[')){const t=e.match(/^\[([a-zA-Z][-a-zA-Z0-9]*)\s*([~|^$*]?=)?\s*"?([^"\]]*)"?\]$/);if(t){const e={type:$e.ATTRIBUTE,value:t[1],attributeValue:t[3]||'',active:!0};t[2]&&(e.operator=t[2]),o.push(e)}}else if('*'===e)o.push({type:$e.UNIVERSAL,active:!0});else if(e.match(/^[a-zA-Z][-a-zA-Z0-9]*$/))o.push({type:$e.TAG,value:e,active:!0});else if(e.startsWith(':')){const t=e.match(/:([-\w]+)(\([^)]*\))?/);if(t){if(s={...dt.find((e=>e.type===t[1]))},!s)throw new Error(`Pseudo-class not found: ${t[1]}`);s.hasParam&&t[2]&&(s={...s,param:t[2].slice(1,-1)})}}})),s?{selectors:o,pseudoClass:s}:{selectors:o}}function vt(e,t){const o=[...e.selectors];return t.selectors.forEach((e=>{o.some((t=>t.type===e.type&&t.value===e.value))||o.push(e)})),{selectors:o,pseudoClass:e.pseudoClass||t.pseudoClass||null}}function St(e,t){return e.map((e=>{const o=t.find((t=>t.type===e.type&&t.value===e.value));return{...e,active:!!o&&o.active}}))}var mt=void 0&&(void 0).__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};class gt extends He{constructor(){super(...arguments),this.suggestions=[],this.disablePseudoClass=!1}get value(){return this._value}set value(e){try{this._value='string'==typeof e?JSON.parse(e):e}catch(t){console.error('Error parsing value for selector',{value:e,error:t})}this.requestUpdate()}dispatchEvent(e){return console.info('[COMPOUND] Dispatching event',e),super.dispatchEvent(e)}toString(){return ht(this.value)}render(){var e,t,o;return B`
|
|
334
|
+
<section>
|
|
335
|
+
<div
|
|
336
|
+
class="asm-compound__selectors"
|
|
337
|
+
>
|
|
338
|
+
${null===(e=this.value)||void 0===e?void 0:e.selectors.sort(((e,t)=>je(t,!0)-je(e,!0))).map(((e,t)=>B`
|
|
339
|
+
<simple-selector
|
|
340
|
+
.t=${this.t}
|
|
341
|
+
.value=${e}
|
|
342
|
+
.suggestions=${this.suggestions}
|
|
343
|
+
?readonly=${![$e.CLASS,$e.UNKNOWN].includes(e.type)}
|
|
344
|
+
@change=${e=>this.changeSelector(e,t)}
|
|
345
|
+
@delete=${e=>this.deleteSelector(e,t)}
|
|
346
|
+
></simple-selector>
|
|
347
|
+
`))}
|
|
348
|
+
<button
|
|
349
|
+
id="gjs-clm-add-tag"
|
|
350
|
+
class="gjs-clm-tags-btn gjs-clm-tags-btn__add asm-compound__add"
|
|
351
|
+
.title=${this.t('Add a new selector')}
|
|
352
|
+
@click=${this.addSelector}
|
|
353
|
+
>
|
|
354
|
+
<svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
|
|
355
|
+
</button>
|
|
356
|
+
</div>
|
|
357
|
+
${this.disablePseudoClass?'':B`
|
|
358
|
+
${(null===(t=this.value)||void 0===t?void 0:t.pseudoClass)?B`
|
|
359
|
+
<div>
|
|
360
|
+
<inline-select
|
|
361
|
+
.t=${this.t}
|
|
362
|
+
.value=${null===(o=this.value)||void 0===o?void 0:o.pseudoClass}
|
|
363
|
+
.options=${dt}
|
|
364
|
+
@change=${this.changePseudoClass}
|
|
365
|
+
placeholder=""
|
|
366
|
+
></inline-select>
|
|
367
|
+
<div>
|
|
368
|
+
`:B`
|
|
369
|
+
<button
|
|
370
|
+
class="gjs-btn-prim asm__add-inline"
|
|
371
|
+
@click=${this.addPseudoClass}
|
|
372
|
+
>\u2192 ${this.t('Pseudo Class')}</button>
|
|
373
|
+
`}
|
|
374
|
+
`}
|
|
375
|
+
</section>
|
|
376
|
+
`}changeSelector(e,t){const o=this.value.selectors[t],s=e.detail.type===$e.ID&&e.detail.active;this.value={...this.value,selectors:this.value.selectors.map(((o,s)=>s===t?e.detail:o)).map((e=>s&&e.type!==$e.ID?{...e,active:!1}:e))},Ie(o,e.detail,!1)||(this.dispatchEvent(new CustomEvent('rename',{detail:{oldValue:o,value:e.detail}})),this.dispatchEvent(new CustomEvent('change',{detail:this.value}))),e.stopPropagation(),this.requestUpdate()}addSelector(e){var t;this.value=null!==(t=this.value)&&void 0!==t?t:{selectors:[]},this.value.selectors.push({type:$e.UNKNOWN,active:!0}),e.stopPropagation(),this.requestUpdate(),requestAnimationFrame((()=>this.focusLastSelector()))}focusLastSelector(){if(!this.value)return;const e=this.shadowRoot.querySelectorAll('simple-selector')[this.value.selectors.length-1];e.editing=!0,requestAnimationFrame((()=>{e.focus()}))}deleteSelector(e,t){var o;null===(o=this.value)||void 0===o||o.selectors.splice(t,1),this.dispatchEvent(new CustomEvent('change',{detail:this.value})),e.stopPropagation(),this.requestUpdate()}addPseudoClass(e){this.value={...this.value,pseudoClass:dt[0]},this.dispatchEvent(new CustomEvent('change',{detail:this.value})),e.stopPropagation()}changePseudoClass(e){this.value={...this.value,pseudoClass:e.detail},this.dispatchEvent(new CustomEvent('change',{detail:this.value})),e.stopPropagation()}}gt.styles=l`
|
|
377
|
+
select:focus-visible,
|
|
378
|
+
input:focus-visible,
|
|
379
|
+
button:focus-visible,
|
|
380
|
+
a:focus-visible {
|
|
381
|
+
outline: initial !important;
|
|
382
|
+
box-shadow: revert !important;
|
|
383
|
+
border: 1px solid !important;
|
|
384
|
+
}
|
|
385
|
+
button:hover, a:hover {
|
|
386
|
+
transform: translateX(1px);
|
|
387
|
+
font-weight: bold;
|
|
388
|
+
}
|
|
389
|
+
.asm-compound__selectors {
|
|
390
|
+
display: flex;
|
|
391
|
+
gap: 0.5rem;
|
|
392
|
+
align-items: center;
|
|
393
|
+
flex-wrap: wrap;
|
|
394
|
+
/* material design card style */
|
|
395
|
+
padding: 0.5rem;
|
|
396
|
+
background-color: var(--gjs-main-dark-color);
|
|
397
|
+
}
|
|
398
|
+
.asm-compound__add {
|
|
399
|
+
color: var(--gjs-secondary-color, #b9a5a6);
|
|
400
|
+
}
|
|
401
|
+
.asm__add-inline {
|
|
402
|
+
font-size: 0.8rem;
|
|
403
|
+
background: transparent;
|
|
404
|
+
}
|
|
405
|
+
`;var ft;mt([ve({type:Object,attribute:!0,reflect:!1})],gt.prototype,"value",null),mt([ve({type:Object,attribute:!0,reflect:!1})],gt.prototype,"suggestions",void 0),mt([ve({type:Boolean,attribute:'disable-pseudo-class'})],gt.prototype,"disablePseudoClass",void 0),customElements.get('compound-selector')||customElements.define('compound-selector',gt),function(e){e["HAS"]="has",e["NOT"]="not",e["IS"]="is",e["WHERE"]="where",e["CHILD"]=">",e["DESCENDANT"]=" ",e["ADJACENT"]="+",e["GENERAL_SIBLING"]="~"}(ft||(ft={}));const bt=[{type:ft.DESCENDANT,hasParam:!1,sentencePre:'When it is',displayName:'inside of',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator',isCombinator:!0,stringRepresentation:' '},{type:ft.CHILD,hasParam:!1,sentencePre:'When it is a',displayName:'direct child of',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator',isCombinator:!0,stringRepresentation:' > '},{type:ft.ADJACENT,hasParam:!1,sentencePre:'When it is',displayName:'adjacent to',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator',isCombinator:!0,stringRepresentation:' + '},{type:ft.GENERAL_SIBLING,hasParam:!1,sentencePre:'When it is',displayName:'after',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator',isCombinator:!0,stringRepresentation:' ~ '},{type:ft.HAS,hasParam:!1,sentencePre:'When it',displayName:'contains',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:has',isCombinator:!1,stringRepresentation:':has'},{type:ft.NOT,hasParam:!1,sentencePre:'When it',displayName:'does not match',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:not',isCombinator:!1,stringRepresentation:':not'},{type:ft.IS,hasParam:!1,sentencePre:'When it',displayName:'matches',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:is',isCombinator:!1,stringRepresentation:':is'},{type:ft.WHERE,hasParam:!1,sentencePre:'When it',displayName:'matches (no spec)',helpLink:'https://developer.mozilla.org/en-US/docs/Web/CSS/:where',isCombinator:!1,stringRepresentation:':where'}];function yt(e,t){const o=t?ht(t):'';if(!o)return'';switch(e.type){case ft.HAS:case ft.NOT:case ft.IS:case ft.WHERE:return`${e.stringRepresentation}(${o})`;case ft.CHILD:case ft.ADJACENT:case ft.GENERAL_SIBLING:case ft.DESCENDANT:return`${e.stringRepresentation}${o}`;default:throw new Error(`Unknown operator type: ${e.type}`)}}function Ct(e){const t=bt.find((t=>e===t.stringRepresentation));if(!t)throw new Error(`Operator not found: ${e}`);return{...t}}const $t={mainSelector:{selectors:[]}};function _t(e){var t;return(e.operator?yt(e.operator,e.relatedSelector):'')?!0===(null===(t=e.operator)||void 0===t?void 0:t.isCombinator)?`${e.relatedSelector?ht(e.relatedSelector):''}${yt(e.operator,e.mainSelector)}`:`${ht(e.mainSelector)}${yt(e.operator,e.relatedSelector)}`:ht(e.mainSelector)}function At(e){let t=0;return e.mainSelector&&(t+=pt(e.mainSelector)),e.relatedSelector&&(t+=pt(e.relatedSelector)),t}function Et(e,t){const o=t?{atRule:t}:{},s=e.match(/:(\w+)\((.+)\)$/);if(s){const[,t,r]=s,i=e.replace(s[0],'');return{mainSelector:i?ut(i):{selectors:[]},operator:Ct(`:${t}`),relatedSelector:ut(r),...o}}const r=e.replace(/ ([>+~]) /,'$1').split(/([>+~ ])/),i=r.shift(),n=r.shift(),l=n&&' '!==n?` ${n} `:n;if(l&&i){const e=r.join('');return{mainSelector:e?ut(e):{selectors:[]},operator:Ct(l),relatedSelector:ut(i),...o}}return{mainSelector:i?ut(i):{selectors:[]},...o}}function Wt(e,t){return{mainSelector:vt(e.mainSelector,t.mainSelector),relatedSelector:e.relatedSelector&&t.relatedSelector?vt(e.relatedSelector,t.relatedSelector):e.relatedSelector||t.relatedSelector,operator:e.operator||t.operator,atRule:e.atRule||t.atRule}}function Ut(e){if(0===e.length)return!1;if(1===e.length)return e[0];const[t,...o]=e;for(const e of o){if(t.atRule!==e.atRule)return!1;if(t.mainSelector!==e.mainSelector)return!1;if(t.operator!==e.operator)return!1;if(t.relatedSelector!==e.relatedSelector)return!1}return{mainSelector:t.mainSelector,operator:t.operator,relatedSelector:t.relatedSelector,atRule:t.atRule}}var zt=void 0&&(void 0).__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};class wt extends He{constructor(){super(...arguments),this.suggestions=[],this.relations=[]}get value(){return this._value}set value(e){try{this._value='string'==typeof e?JSON.parse(e):e}catch(t){console.error('Error parsing value for selector',{value:e,error:t})}this.requestUpdate()}dispatchEvent(e){return console.info('[COMPLEX] Dispatching event',e),super.dispatchEvent(e)}render(){var e,t,o,s,r,i;return B`
|
|
406
|
+
<compound-selector
|
|
407
|
+
.t=${this.t}
|
|
408
|
+
.value=${null===(e=this.value)||void 0===e?void 0:e.mainSelector}
|
|
409
|
+
.suggestions=${this.suggestions}
|
|
410
|
+
@change=${e=>{const t=e.target;this.value={...this.value,mainSelector:t.value},e.stopPropagation(),this.dispatchEvent(new CustomEvent('change',{detail:this.value}))}}
|
|
411
|
+
@rename=${e=>this.dispatchEvent(new CustomEvent('rename',{detail:e.detail}))}
|
|
412
|
+
></compound-selector>
|
|
413
|
+
${(null===(t=this.value)||void 0===t?void 0:t.operator)?B`
|
|
414
|
+
<inline-select
|
|
415
|
+
.t=${this.t}
|
|
416
|
+
.value=${null===(o=this.value)||void 0===o?void 0:o.operator}
|
|
417
|
+
.options=${bt}
|
|
418
|
+
placeholder=""
|
|
419
|
+
@change=${this.changeOperator}
|
|
420
|
+
></inline-select>
|
|
421
|
+
`:B`
|
|
422
|
+
<button
|
|
423
|
+
class="gjs-btn-prim asm__add-inline"
|
|
424
|
+
@click=${this.addOperator}
|
|
425
|
+
>\u2192 ${this.t('Relation')}</button>
|
|
426
|
+
`}
|
|
427
|
+
${(null===(s=this.value)||void 0===s?void 0:s.operator)?B`
|
|
428
|
+
<compound-selector
|
|
429
|
+
.t=${this.t}
|
|
430
|
+
.value=${null===(r=this.value)||void 0===r?void 0:r.relatedSelector}
|
|
431
|
+
.suggestions=${this.relations}
|
|
432
|
+
?disable-pseudo-class=${!1===(null===(i=this.value)||void 0===i?void 0:i.operator.isCombinator)}
|
|
433
|
+
@change=${this.changeRelatedSelector}
|
|
434
|
+
></compound-selector>
|
|
435
|
+
`:''}
|
|
436
|
+
`}changeOperator(e){var t,o,s,r,i;const n=e.target;!1===(null===(t=n.value)||void 0===t?void 0:t.isCombinator)&&(null===(s=null===(o=this.value)||void 0===o?void 0:o.relatedSelector)||void 0===s||delete s.pseudoClass),this.value={...this.value,operator:n.value},n.value||(null===(r=this.value)||void 0===r||delete r.relatedSelector,null===(i=this.value)||void 0===i||delete i.operator),e.stopPropagation(),this.dispatchEvent(new CustomEvent('change',{detail:this.value}))}addOperator(){this.requestUpdate(),this.value={...this.value,operator:bt[0],relatedSelector:{selectors:[]}},this.dispatchEvent(new CustomEvent('change',{detail:this.value}))}changeRelatedSelector(e){const t=e.target;this.value={...this.value,relatedSelector:t.value},e.stopPropagation(),this.dispatchEvent(new CustomEvent('change',{detail:this.value}))}toString(){return _t(this.value)}}wt.styles=l`
|
|
437
|
+
select:focus-visible,
|
|
438
|
+
input:focus-visible,
|
|
439
|
+
button:focus-visible,
|
|
440
|
+
a:focus-visible {
|
|
441
|
+
outline: initial !important;
|
|
442
|
+
box-shadow: revert !important;
|
|
443
|
+
border: 1px solid !important;
|
|
444
|
+
}
|
|
445
|
+
button:hover, a:hover {
|
|
446
|
+
transform: translateX(1px);
|
|
447
|
+
font-weight: bold;
|
|
448
|
+
}
|
|
449
|
+
:host {
|
|
450
|
+
display: block;
|
|
451
|
+
text-align: left;
|
|
452
|
+
padding: 0.5rem 0;
|
|
453
|
+
}
|
|
454
|
+
button.asm__add-inline {
|
|
455
|
+
font-size: 0.8rem;
|
|
456
|
+
background: transparent;
|
|
457
|
+
}
|
|
458
|
+
`;zt([ve({type:Object,attribute:!0,reflect:!1})],wt.prototype,"value",null),zt([ve({type:Object,attribute:!0,reflect:!1})],wt.prototype,"suggestions",void 0),zt([ve({type:Object,attribute:!0,reflect:!1})],wt.prototype,"relations",void 0),customElements.get('complex-selector')||customElements.define('complex-selector',wt);var Rt=void 0&&(void 0).__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};class Pt extends He{constructor(){super(...arguments),this.placeholder='Select an option',this.selectors=[],this.helpLink='',this.error='',this.warning='',this.specificity=0,this.selectRef=Je()}get value(){return this._value}set value(e){try{this._value='string'==typeof e?JSON.parse(e):e,this.specificity=At(this._value)}catch(t){console.error('Error parsing value for selector',{value:e,error:t})}}render(){if(!this.value)return B``;const e=[this.value,...this.selectors.filter((e=>!Ut([e,this.value]))).sort(((e,t)=>At(t)-At(e)))],t=e.map((e=>({string:_t(e),atRule:e.atRule}))).map((({string:e,atRule:t})=>B`
|
|
459
|
+
${t?t.replace(/@media \(max-width: (.+)\)/,'@$1'):''}
|
|
460
|
+
${e}
|
|
461
|
+
`));return requestAnimationFrame((()=>this.selectRef.value?this.selectRef.value.selectedIndex=0:'')),B`
|
|
462
|
+
<footer>
|
|
463
|
+
${this.error?B`
|
|
464
|
+
<p class="asm-display__error">\u26A0 ${this.error}</p>
|
|
465
|
+
`:''}
|
|
466
|
+
${this.warning?B`
|
|
467
|
+
<p class="asm-display__warning">\u26A0 ${this.warning}</p>
|
|
468
|
+
`:''}
|
|
469
|
+
</footer>
|
|
470
|
+
<main id="pre" class="selection">
|
|
471
|
+
<select
|
|
472
|
+
${et(this.selectRef)}
|
|
473
|
+
class="value"
|
|
474
|
+
@change=${t=>{t.stopPropagation();const o=t.target,s=e[parseInt(o.value)];this.changeSelector(s)}}
|
|
475
|
+
>
|
|
476
|
+
${t.map(((e,t)=>B`
|
|
477
|
+
<option
|
|
478
|
+
value=${t}
|
|
479
|
+
?selected=${0===t}
|
|
480
|
+
>
|
|
481
|
+
${e}
|
|
482
|
+
</option>`))}
|
|
483
|
+
</select>
|
|
484
|
+
<sidebar>
|
|
485
|
+
<ul>
|
|
486
|
+
<li
|
|
487
|
+
.title=${this.t('Specificity')}
|
|
488
|
+
class="specificity"
|
|
489
|
+
>
|
|
490
|
+
${this.specificity}
|
|
491
|
+
</li>
|
|
492
|
+
<li>
|
|
493
|
+
<button
|
|
494
|
+
.title=${this.t('Edit selector')}
|
|
495
|
+
@click=${()=>{var e;const t=prompt(this.t('Edit selector'),_t(this.value));this.changeSelector(t?Et(t,null!==(e=this.value.atRule)&&void 0!==e?e:''):this.value)}}
|
|
496
|
+
>✏️</button>
|
|
497
|
+
</li>
|
|
498
|
+
<li>
|
|
499
|
+
<button
|
|
500
|
+
.title=${this.t('Copy style')}
|
|
501
|
+
@click=${()=>this.dispatchEvent(new CustomEvent('copy'))}
|
|
502
|
+
>📋</button>
|
|
503
|
+
</li>
|
|
504
|
+
<li>
|
|
505
|
+
<button
|
|
506
|
+
.title=${this.t('Paste style')}
|
|
507
|
+
@click=${()=>this.dispatchEvent(new CustomEvent('paste'))}
|
|
508
|
+
>📥</button>
|
|
509
|
+
</li>
|
|
510
|
+
<li>
|
|
511
|
+
<button
|
|
512
|
+
.title=${this.t('Clear style for this selector')}
|
|
513
|
+
@click=${()=>{this.clearStyle()}}
|
|
514
|
+
>️🧹</button>
|
|
515
|
+
</li>
|
|
516
|
+
${this.helpLink?B`
|
|
517
|
+
<li>
|
|
518
|
+
<a
|
|
519
|
+
class="asm-display__help"
|
|
520
|
+
.title=${this.t('Help')}
|
|
521
|
+
.href=${this.helpLink}
|
|
522
|
+
target="_blank"
|
|
523
|
+
>?</a>
|
|
524
|
+
</li>
|
|
525
|
+
`:''}
|
|
526
|
+
</ul>
|
|
527
|
+
</sidebar>
|
|
528
|
+
</main>
|
|
529
|
+
`}changeSelector(e){this.value=e,this.dispatchEvent(new CustomEvent('change',{detail:e}))}clearStyle(){this.dispatchEvent(new CustomEvent('delete',{detail:this.value}))}}Pt.styles=l`
|
|
530
|
+
select:focus-visible,
|
|
531
|
+
input:focus-visible,
|
|
532
|
+
button:focus-visible,
|
|
533
|
+
a:focus-visible {
|
|
534
|
+
outline: initial !important;
|
|
535
|
+
box-shadow: revert !important;
|
|
536
|
+
border: 1px solid !important;
|
|
537
|
+
}
|
|
538
|
+
:host {
|
|
539
|
+
font-size: 0.65rem;
|
|
540
|
+
padding: 0.5rem 0;
|
|
541
|
+
}
|
|
542
|
+
.selection {
|
|
543
|
+
display: flex;
|
|
544
|
+
border-top: 1px solid var(--gjs-primary-color, #333);
|
|
545
|
+
background-color: var(--gjs-main-dark-color, #222);
|
|
546
|
+
select.value {
|
|
547
|
+
background-color: transparent;
|
|
548
|
+
border: none;
|
|
549
|
+
color: var(--gjs-font-color-active, #f8f8f8);
|
|
550
|
+
color: var(--gjs-color-highlight, #71b7f1);
|
|
551
|
+
font-size: inherit;
|
|
552
|
+
font-family: monospace;
|
|
553
|
+
text-align: center;
|
|
554
|
+
padding: .5rem;
|
|
555
|
+
margin: 0;
|
|
556
|
+
text-align: center;
|
|
557
|
+
text-wrap: wrap;
|
|
558
|
+
width: 100%;
|
|
559
|
+
cursor: pointer;
|
|
560
|
+
background-color: var(--gjs-main-dark-color, #333);
|
|
561
|
+
color: var(--gjs-secondary-color);
|
|
562
|
+
}
|
|
563
|
+
ul {
|
|
564
|
+
list-style-type: none;
|
|
565
|
+
padding: 0;
|
|
566
|
+
margin: 0;
|
|
567
|
+
& > li {
|
|
568
|
+
display: inline;
|
|
569
|
+
margin: 0 0.25rem;
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
sidebar {
|
|
573
|
+
ul {
|
|
574
|
+
display: flex;
|
|
575
|
+
align-items: center;
|
|
576
|
+
height: 100%;
|
|
577
|
+
}
|
|
578
|
+
button {
|
|
579
|
+
background-color: transparent;
|
|
580
|
+
color: var(--gjs-font-color-active, #f8f8f8);
|
|
581
|
+
cursor: pointer;
|
|
582
|
+
padding: 0;
|
|
583
|
+
margin: 0;
|
|
584
|
+
border: 1px solid transparent;
|
|
585
|
+
&:hover {
|
|
586
|
+
border-color: var(--gjs-secondary-color, #fff);
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
button:hover {
|
|
590
|
+
color: var(--gjs-color-highlight, #71b7f1);
|
|
591
|
+
}
|
|
592
|
+
.specificity {
|
|
593
|
+
font-size: small;
|
|
594
|
+
padding-top: 2px;
|
|
595
|
+
cursor: default;
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
.asm-display__help {
|
|
600
|
+
text-decoration: none;
|
|
601
|
+
border-radius: 50%;
|
|
602
|
+
color: var(--gjs-secondary-color, #333);
|
|
603
|
+
display: inline-block;
|
|
604
|
+
width: 0.5rem;
|
|
605
|
+
height: 0.5rem;
|
|
606
|
+
text-align: center;
|
|
607
|
+
line-height: 0.7rem;
|
|
608
|
+
font-size: 0.7rem;
|
|
609
|
+
padding: 4px;
|
|
610
|
+
&:hover {
|
|
611
|
+
background-color: var(--gjs-secondary-color, #fff);
|
|
612
|
+
color: var(--gjs-main-dark-color, #333);
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.asm-display__error {
|
|
617
|
+
color: var(--gjs-warning-color, #f90);
|
|
618
|
+
margin: 0;
|
|
619
|
+
}
|
|
620
|
+
.asm-display__warning {
|
|
621
|
+
color: var(--gjs-warning-color, #f90);
|
|
622
|
+
margin: 0;
|
|
623
|
+
}
|
|
624
|
+
`,Rt([ve({type:Object,attribute:!0,reflect:!1})],Pt.prototype,"value",null),Rt([ve({type:String,attribute:!0,reflect:!1})],Pt.prototype,"placeholder",void 0),Rt([ve({type:Array,attribute:!0,reflect:!1})],Pt.prototype,"selectors",void 0),Rt([ve({type:String,attribute:!0,reflect:!1})],Pt.prototype,"helpLink",void 0),Rt([ve({type:String,attribute:!0,reflect:!1})],Pt.prototype,"error",void 0),Rt([ve({type:String,attribute:!0,reflect:!1})],Pt.prototype,"warning",void 0),customElements.get('current-selector-display')||customElements.define('current-selector-display',Pt);const Tt=new Set;function kt(e,t){var o;const s=null===(o=null==e?void 0:e.I18n)||void 0===o?void 0:o.t(t);return s||(Tt.add(t),console.log('Untranslated key, call editor.runCommand("i18n:info") to see all untranslated keys')),s||t}function Lt(e,t){var o;const s=null===(o=e.DeviceManager.getSelected())||void 0===o?void 0:o.get('width'),r={atRuleType:s?'media':'',atRuleParams:s?`(max-width: ${s})`:''},i=e.CssComposer.getRule(t,r),n=e.CssComposer.setRule(t,null==i?void 0:i.getStyle(),{addStyles:!!(null==i?void 0:i.getStyle()),...r});e.StyleManager.select(n)}function It(e,t,o){if(t.type===o.type)if(Ie(t,o))console.warn('No change',t,o);else switch(t.type){case $e.ID:throw new Error('Cannot rename ID selector');case $e.CLASS:!function(e,t,o){if(!t||!o||t===o)return void console.warn('Invalid class names or same names provided.');const s=e.SelectorManager,r=s.get(t);if(!r)return void console.warn(`Class "${t}" not found.`);const i=e.Pages.getAll().flatMap((e=>e.getMainComponent().find(`.${t}`)));r.set('name',o),i.forEach((e=>{const o=Nt(e);Ot(e,{...o,mainSelector:{...o.mainSelector,selectors:o.mainSelector.selectors.filter((e=>e.type!==$e.CLASS||e.value!==t))}})}))}(e,t.value,o.value);break;case $e.TAG:throw new Error('Cannot rename ID selector');default:console.error('Cannot rename selector: Unknown Type',{oldSelector:t,newSelector:o})}else console.warn('Cannot rename to a different types',t,o)}function Ot(e,t){e.set('selector',{...t});const o=[];t.mainSelector.selectors.forEach((t=>{switch(t.type){case'id':e.setId(t.value);break;case'class':o.push(t.value);break;default:console.info('Unhandled selector type',t)}})),e.setClass(o)}function Nt(e){var t;const o=null!==(t=e.get('selector'))&&void 0!==t?t:$t,s=e.getClasses(),r=s.filter((e=>!o.mainSelector.selectors.some((t=>'class'===t.type&&t.value===e)))),i=o.mainSelector.selectors.filter((e=>'class'===e.type&&!s.includes(e.value)));if(i.length>0&&e.addClass(i.map((e=>e.value))),r.length>0){const t={...o,mainSelector:{...o.mainSelector,selectors:[...o.mainSelector.selectors,...r.map((e=>({type:$e.CLASS,value:e,active:!1})))]}};return Ot(e,t),t}return{...o}}function xt(e,t,o){var s;if(!o.operator)return[];const r=[];switch(null===(s=o.operator)||void 0===s?void 0:s.type){case ft.HAS:t.forEach((e=>{r.push(...jt(Ht(e),o.relatedSelector||{selectors:[]}))}));break;case ft.NOT:r.push(...Ee.map((e=>({type:$e.TAG,value:e,active:!0})))),t.forEach((t=>{const s=t.getClasses();e.CssComposer.getAll().forEach((e=>{e.getSelectors().forEach((e=>{if(!e.get('private'))if(1!==e.get('type')||s.includes(e.get('name'))){if(2===e.get('type')){const t={type:$e.ID,value:e.get('name'),active:!0};Mt(t,o.relatedSelector,r)&&r.push(t)}}else{const t={type:$e.CLASS,value:e.get('name'),active:!0};Mt(t,o.relatedSelector,r)&&r.push(t)}}))}))}));break;case ft.IS:case ft.WHERE:r.push(...jt(t,o.relatedSelector||{selectors:[]}));break;case ft.CHILD:t.forEach((e=>{const t=e.parent();t&&r.push(...jt([t],o.relatedSelector||{selectors:[]}))}));break;case ft.DESCENDANT:t.forEach((e=>{r.push(...jt(function(e){const t=[];let o=e.parent();for(;o;)t.push(o),o=o.parent();return t}(e),o.relatedSelector||{selectors:[]}))}));break;case ft.ADJACENT:const s=t.map((e=>Ft(e)[0])).filter((e=>!!e));r.push(...jt(s,o.relatedSelector||{selectors:[]}));break;case ft.GENERAL_SIBLING:const i=t.flatMap(Ft).filter((e=>!!e));r.push(...jt(i,o.relatedSelector||{selectors:[]}));break;default:throw console.error('Unhandled operator',o.operator),new Error(`Unhandled operator: ${o.operator}`)}return r}function jt(e,t){const o=[];return e.forEach((e=>{Dt(e,o,t)})),e.flatMap((e=>e.getClasses())).forEach((e=>{o.some((t=>t.type===$e.CLASS&&t.value===e))||t.selectors.some((t=>t.active&&t.type===$e.CLASS&&t.value===e))||o.push({type:$e.CLASS,value:e,active:!0})})),o}function Dt(e,t,o){const s=e.tagName,r={type:$e.TAG,value:s,active:!0};Mt(r,o,t)&&t.push(r)}function Mt(e,t,o){return!t.selectors.some((t=>Ie(t,e)))&&!o.some((t=>Ie(t,e)))}function Ht(e){return e.components().reduce(((e,t)=>[...e,t,...Ht(t)]),[])}function Ft(e){var t,o;return null!==(o=null===(t=e.parent())||void 0===t?void 0:t.components().filter((t=>t!==e)))&&void 0!==o?o:[]}const Vt=document.createElement('div');function Bt(e,t){e.Commands.add('i18n:info',(()=>{console.log('i18n',Array.from(Tt))})),e.on('undo redo',(()=>{requestAnimationFrame((()=>Gt(e,t)))}))}function qt(e,t,o){o&&o.container?(o.container.appendChild(Vt),e.on('selector:custom',(()=>Gt(e,t)))):e.once('selector:custom',(o=>qt(e,t,o)))}function Gt(e,t){const o=e.getSelectedAll(),s=Yt(o);if(s){const[r,i]=function(e,t){if(!function(e,t){try{return t.some((t=>{var o;return null===(o=t.view)||void 0===o?void 0:o.el.matches(e)}))}catch{return!1}}(_t(e),t))return['Current selector does not match the selected components',null];if(!function(e,t){try{return t.every((t=>{var o;return null===(o=t.view)||void 0===o?void 0:o.el.matches(e)}))}catch{return!1}}(_t(e),t))return[null,'Current selector does not match all the selected components'];return[null,null]}(s,o);requestAnimationFrame((()=>Lt(e,_t(s)))),ce(B`
|
|
625
|
+
<complex-selector
|
|
626
|
+
.t=${t=>kt(e,t)}
|
|
627
|
+
.value=${s}
|
|
628
|
+
.suggestions=${function(e,t,o){const s=[];return t.forEach((t=>{Dt(t,s,o.mainSelector);const r=t.getClasses();e.CssComposer.getAll().forEach((e=>{e.getSelectors().forEach((e=>{const t={type:$e.CLASS,value:e.get('name'),active:!0};1!==e.get('type')||e.get('private')||r.includes(e.get('name'))||!Mt(t,o.mainSelector,s)||s.push(t)}))}));const i=t.getAttributes({noStyle:!0,noClass:!0});Object.keys(i).forEach((e=>{const t={type:$e.ATTRIBUTE,value:e,active:!0};i[e]&&(t.operator=_e.EQUALS,t.attributeValue=i[e]),Mt(t,o.mainSelector,s)&&s.push(t)}))})),s}(e,o,s)}
|
|
629
|
+
.relations=${xt(e,o,s)}
|
|
630
|
+
@change=${t=>function(e,t,o){o.forEach((t=>{Ot(t,e)})),Lt(t,_t(e))}(t.detail,e,o)}
|
|
631
|
+
@rename=${t=>It(e,t.detail.oldValue,t.detail.value)}
|
|
632
|
+
></complex-selector>
|
|
633
|
+
|
|
634
|
+
<current-selector-display
|
|
635
|
+
.t=${t=>kt(e,t)}
|
|
636
|
+
.value=${Yt(o)}
|
|
637
|
+
.selectors=${function(e){return e.getSelectedAll().flatMap((t=>e.CssComposer.getRules().reduce(((e,o)=>{var s;const r=o.clone();if(0===Object.keys(r.getStyle()).length)return e;r.unset('state');const i=r.getSelectorsString();if(!i)return console.warn('Empty selector for rule',r),e;try{(null===(s=t.view)||void 0===s?void 0:s.el.matches(i))&&e.push(Et(o.getSelectorsString(),o.getAtRule()))}catch(e){console.error('Error matching selector',i,e)}return e}),[])))}(e)}
|
|
638
|
+
.helpLink=${t.helpLinks.actionBar}
|
|
639
|
+
.error=${kt(e,r||'')}
|
|
640
|
+
.warning=${kt(e,i||'')}
|
|
641
|
+
@change=${t=>function(e,t,o){var s;if(o.forEach((t=>{const o=Wt(Nt(t)||$t,e),s=(i=e,{mainSelector:{selectors:St((r=o).mainSelector.selectors,i.mainSelector.selectors),pseudoClass:r.mainSelector.pseudoClass},relatedSelector:r.relatedSelector?{selectors:i.relatedSelector?St(r.relatedSelector.selectors,i.relatedSelector.selectors):r.relatedSelector.selectors.map((e=>({...e,active:!1}))),pseudoClass:r.relatedSelector.pseudoClass}:void 0,operator:r.operator,atRule:r.atRule});var r,i;s.atRule=e.atRule,s.mainSelector.pseudoClass=e.mainSelector.pseudoClass,Ot(t,s)})),e.atRule){const o=null===(s=t.DeviceManager.getAll().find((t=>{const o=t.get('width');return!!o&&e.atRule.includes(o)})))||void 0===s?void 0:s.get('id');o&&t.DeviceManager.select(o)}else t.DeviceManager.select(t.DeviceManager.getAll().first());Lt(t,_t(e))}(t.detail,e,o)}
|
|
642
|
+
@delete=${()=>function(e,t){(function(e){const t=e.StyleManager.getSelected();t?e.CssComposer.remove(t):console.warn('No rule selected')})(e),Lt(e,_t(t))}(e,s)}
|
|
643
|
+
@copy=${()=>function(e){null===localStorage||void 0===localStorage||localStorage.setItem('asm:clipboard',JSON.stringify(function(e){var t;return null===(t=e.StyleManager.getSelected())||void 0===t?void 0:t.getStyle()}(e)))}(e)}
|
|
644
|
+
@paste=${()=>function(e){const t=null===localStorage||void 0===localStorage?void 0:localStorage.getItem('asm:clipboard');if(t){!function(e,t){var o;null===(o=e.StyleManager.getSelected())||void 0===o||o.setStyle(t)}(e,JSON.parse(t))}}(e)}
|
|
645
|
+
></current-selector-display>
|
|
646
|
+
`,Vt)}else ce(B`
|
|
647
|
+
<p>Select a component to edit its selector</p>
|
|
648
|
+
`,Vt)}function Yt(e){if(0===e.length)return null;const t=Ut(e.map((e=>Nt(e)||$t)));if(!t)return null;const o={type:$e.ID,value:e[0].getId(),active:!1},s={type:$e.ID,value:e[0].getId(),active:!0},r=Wt(t,{mainSelector:{selectors:[o]}});return r.mainSelector.selectors.filter((e=>e.type!==$e.ID&&e.active)).length>0&&(r.mainSelector.selectors=r.mainSelector.selectors.map((e=>e.type===$e.ID?o:e))),_t(r)||(r.mainSelector.selectors=r.mainSelector.selectors.map((e=>e.type===$e.ID?s:e))),r}Vt.id='asm-container';const Zt={Remove:'Remove',Specificity:'Specificity','Edit selector':'Edit selector','Copy style':'Copy style','Paste style':'Paste style','Clear style for this selector':'Clear style for this selector',Help:'Help',Relation:'Relation','Add a new selector':'Add a new selector','Pseudo Class':'Pseudo Class',Delete:'Delete','When it is':'When it is','When it is a':'When it is a','When it':'When it','inside of':'inside of','direct child of':'direct child of ( > )','adjacent to':'adjacent to ( + )',after:'after ( ~ )',contains:'contains ( :has )','does not match':'does not match ( :not )',matches:'matches ( :is )','matches (no spec)':'matches ( :where )','https://developer.mozilla.org/en-US/docs/Web/CSS/:where':'https://developer.mozilla.org/en-US/docs/Web/CSS/:where','https://developer.mozilla.org/en-US/docs/Web/CSS/:is':'https://developer.mozilla.org/en-US/docs/Web/CSS/:is','https://developer.mozilla.org/en-US/docs/Web/CSS/:not':'https://developer.mozilla.org/en-US/docs/Web/CSS/:not','https://developer.mozilla.org/en-US/docs/Web/CSS/:has':'https://developer.mozilla.org/en-US/docs/Web/CSS/:has','https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator':'https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator','https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator':'https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator','https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator':'https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator','https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator':'https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator','On mouse':'On mouse',When:'When','When it has the':'When it has the','When the':'When the','When it is the':'When it is the','When it is within':'When it is within','When URL matches':'When URL matches','When it matches':'When it matches','When the text direction is':'When the text direction is','https://developer.mozilla.org/en-US/docs/Web/CSS/:dir':'https://developer.mozilla.org/en-US/docs/Web/CSS/:dir','https://developer.mozilla.org/en-US/docs/Web/CSS/:lang':'https://developer.mozilla.org/en-US/docs/Web/CSS/:lang','https://developer.mozilla.org/en-US/docs/Web/CSS/:optional':'https://developer.mozilla.org/en-US/docs/Web/CSS/:optional','https://developer.mozilla.org/en-US/docs/Web/CSS/:required':'https://developer.mozilla.org/en-US/docs/Web/CSS/:required','https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate':'https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate','https://developer.mozilla.org/en-US/docs/Web/CSS/:checked':'https://developer.mozilla.org/en-US/docs/Web/CSS/:checked','https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled':'https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled','https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled':'https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled','https://developer.mozilla.org/en-US/docs/Web/CSS/:target':'https://developer.mozilla.org/en-US/docs/Web/CSS/:target','https://developer.mozilla.org/en-US/docs/Web/CSS/:scope':'https://developer.mozilla.org/en-US/docs/Web/CSS/:scope','https://developer.mozilla.org/en-US/docs/Web/CSS/:root':'https://developer.mozilla.org/en-US/docs/Web/CSS/:root','https://developer.mozilla.org/en-US/docs/Web/CSS/:empty':'https://developer.mozilla.org/en-US/docs/Web/CSS/:empty','https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type':'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type':'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type':'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type':'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type':'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child':'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child':'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child':'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child':'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child':'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link':'https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link','https://developer.mozilla.org/en-US/docs/Web/CSS/:link':'https://developer.mozilla.org/en-US/docs/Web/CSS/:link','https://developer.mozilla.org/en-US/docs/Web/CSS/:visited':'https://developer.mozilla.org/en-US/docs/Web/CSS/:visited','https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible':'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible','https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within':'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within','https://developer.mozilla.org/en-US/docs/Web/CSS/:focus':'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus','https://developer.mozilla.org/en-US/docs/Web/CSS/:active':'https://developer.mozilla.org/en-US/docs/Web/CSS/:active','https://developer.mozilla.org/en-US/docs/Web/CSS/:hover':'https://developer.mozilla.org/en-US/docs/Web/CSS/:hover','Current selector does not match the selected components':'Current selector does not match the selected components','Current selector does not match all the selected components':'Current selector does not match all the selected components'},Kt={Remove:'Supprimer',Specificity:'Spécificité','Edit selector':'Modifier le sélecteur','Copy style':'Copier le style','Paste style':'Coller le style','Clear style for this selector':'Effacer le style pour ce sélecteur',Help:'Aide',Relation:'Relation','Add a new selector':'Ajouter un nouveau sélecteur','Pseudo Class':'Pseudo-classe',Delete:'Supprimer','When it is':'Lorsqu\'il est','When it is a':'Lorsqu\'il est un','When it':'Lorsqu\'il','inside of':'à l\'intérieur de','direct child of':'enfant direct de ( > )','adjacent to':'adjacent à ( + )',after:'après ( ~ )',contains:'contient ( :has )','does not match':'ne correspond pas ( :not )',matches:'correspond à ( :is )','matches (no spec)':'correspond à ( :where )','https://developer.mozilla.org/en-US/docs/Web/CSS/:where':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:where','https://developer.mozilla.org/en-US/docs/Web/CSS/:is':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:is','https://developer.mozilla.org/en-US/docs/Web/CSS/:not':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:not','https://developer.mozilla.org/en-US/docs/Web/CSS/:has':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:has','https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/General_sibling_combinator','https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/Adjacent_sibling_combinator','https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/Child_combinator','https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/Descendant_combinator','On mouse':'Au ',When:'Lorsqu\'il est','When it has the':'Lorsqu\'il a','When the':'Lorsqu\'il a','When it is the':'Lorsqu\'il est le','When it is within':'Lorsqu\'il est dans le','When URL matches':'Lorsque l\'URL est sa','When it matches':'Lorsqu\'il a','When the text direction is':'Lorsqu\'il a','https://developer.mozilla.org/en-US/docs/Web/CSS/:dir':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:dir','https://developer.mozilla.org/en-US/docs/Web/CSS/:lang':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:lang','https://developer.mozilla.org/en-US/docs/Web/CSS/:optional':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:optional','https://developer.mozilla.org/en-US/docs/Web/CSS/:required':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:required','https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:indeterminate','https://developer.mozilla.org/en-US/docs/Web/CSS/:checked':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:checked','https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:disabled','https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:enabled','https://developer.mozilla.org/en-US/docs/Web/CSS/:target':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:target','https://developer.mozilla.org/en-US/docs/Web/CSS/:scope':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:scope','https://developer.mozilla.org/en-US/docs/Web/CSS/:root':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:root','https://developer.mozilla.org/en-US/docs/Web/CSS/:empty':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:empty','https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:only-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:nth-last-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:nth-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:last-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:first-of-type','https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:only-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:nth-last-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:nth-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:last-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:first-child','https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:any-link','https://developer.mozilla.org/en-US/docs/Web/CSS/:link':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:link','https://developer.mozilla.org/en-US/docs/Web/CSS/:visited':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:visited','https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:focus-visible','https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:focus-within','https://developer.mozilla.org/en-US/docs/Web/CSS/:focus':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:focus','https://developer.mozilla.org/en-US/docs/Web/CSS/:active':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:active','https://developer.mozilla.org/en-US/docs/Web/CSS/:hover':'https://developer.mozilla.org/fr-FR/docs/Web/CSS/:hover','Current selector does not match the selected components':'Le sélecteur actuel ne correspond pas aux composants sélectionnés','Current selector does not match all the selected components':'Le sélecteur actuel ne correspond pas à tous les composants sélectionnés'},Jt=(e,t={})=>{const o={...t,i18n:{},helpLinks:{actionBar:'https://docs.silex.me/en/user/selectors',...t.helpLinks}};e.config.selectorManager={...e.config.selectorManager},e.I18n&&e.I18n.addMessages({en:Zt,fr:Kt,...o.i18n}),qt(e,o),Bt(e,o)};return t})()));
|
|
649
|
+
//# sourceMappingURL=index.js.map
|