@florid-kit/components 0.3.43 → 0.4.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/components/button.d.ts +2 -4
- package/components/side-panel.d.ts +2 -0
- package/index.js +262 -235
- package/index.mjs +571 -534
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -2,29 +2,29 @@
|
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const
|
|
5
|
+
*/const X=globalThis,ht=X.ShadowRoot&&(X.ShadyCSS===void 0||X.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,dt=Symbol(),vt=new WeakMap;let Et=class{constructor(t,e,n){if(this._$cssResult$=!0,n!==dt)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(ht&&t===void 0){const n=e!==void 0&&e.length===1;n&&(t=vt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),n&&vt.set(e,t))}return t}toString(){return this.cssText}};const It=s=>new Et(typeof s=="string"?s:s+"",void 0,dt),A=(s,...t)=>{const e=s.length===1?s[0]:t.reduce((n,o,i)=>n+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+s[i+1],s[0]);return new Et(e,s,dt)},Bt=(s,t)=>{if(ht)s.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const n=document.createElement("style"),o=X.litNonce;o!==void 0&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n)}},bt=ht?s=>s:s=>s instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return It(e)})(s):s;/**
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright 2017 Google LLC
|
|
8
8
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
|
-
*/const{is:Ot,defineProperty:
|
|
9
|
+
*/const{is:Ot,defineProperty:Mt,getOwnPropertyDescriptor:Ht,getOwnPropertyNames:zt,getOwnPropertySymbols:Tt,getPrototypeOf:Dt}=Object,C=globalThis,gt=C.trustedTypes,Ut=gt?gt.emptyScript:"",nt=C.reactiveElementPolyfillSupport,R=(s,t)=>s,J={toAttribute(s,t){switch(t){case Boolean:s=s?Ut:null;break;case Object:case Array:s=s==null?s:JSON.stringify(s)}return s},fromAttribute(s,t){let e=s;switch(t){case Boolean:e=s!==null;break;case Number:e=s===null?null:Number(s);break;case Object:case Array:try{e=JSON.parse(s)}catch{e=null}}return e}},pt=(s,t)=>!Ot(s,t),yt={attribute:!0,type:String,converter:J,reflect:!1,useDefault:!1,hasChanged:pt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),C.litPropertyMetadata??(C.litPropertyMetadata=new WeakMap);let T=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=yt){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const n=Symbol(),o=this.getPropertyDescriptor(t,n,e);o!==void 0&&Mt(this.prototype,t,o)}}static getPropertyDescriptor(t,e,n){const{get:o,set:i}=Ht(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:o,set(r){const c=o==null?void 0:o.call(this);i==null||i.call(this,r),this.requestUpdate(t,c,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??yt}static _$Ei(){if(this.hasOwnProperty(R("elementProperties")))return;const t=Dt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(R("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(R("properties"))){const e=this.properties,n=[...zt(e),...Tt(e)];for(const o of n)this.createProperty(o,e[o])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[n,o]of e)this.elementProperties.set(n,o)}this._$Eh=new Map;for(const[e,n]of this.elementProperties){const o=this._$Eu(e,n);o!==void 0&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const n=new Set(t.flat(1/0).reverse());for(const o of n)e.unshift(bt(o))}else t!==void 0&&e.push(bt(t));return e}static _$Eu(t,e){const n=e.attribute;return n===!1?void 0:typeof n=="string"?n:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach(e=>e(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const n of e.keys())this.hasOwnProperty(n)&&(t.set(n,this[n]),delete this[n]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Bt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach(e=>{var n;return(n=e.hostConnected)==null?void 0:n.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var n;return(n=e.hostDisconnected)==null?void 0:n.call(e)})}attributeChangedCallback(t,e,n){this._$AK(t,n)}_$ET(t,e){var i;const n=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,n);if(o!==void 0&&n.reflect===!0){const r=(((i=n.converter)==null?void 0:i.toAttribute)!==void 0?n.converter:J).toAttribute(e,n.type);this._$Em=t,r==null?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){var i,r;const n=this.constructor,o=n._$Eh.get(t);if(o!==void 0&&this._$Em!==o){const c=n.getPropertyOptions(o),l=typeof c.converter=="function"?{fromAttribute:c.converter}:((i=c.converter)==null?void 0:i.fromAttribute)!==void 0?c.converter:J;this._$Em=o,this[o]=l.fromAttribute(e,c.type)??((r=this._$Ej)==null?void 0:r.get(o))??null,this._$Em=null}}requestUpdate(t,e,n){var o;if(t!==void 0){const i=this.constructor,r=this[t];if(n??(n=i.getPropertyOptions(t)),!((n.hasChanged??pt)(r,e)||n.useDefault&&n.reflect&&r===((o=this._$Ej)==null?void 0:o.get(t))&&!this.hasAttribute(i._$Eu(t,n))))return;this.C(t,e,n)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:n,reflect:o,wrapped:i},r){n&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),i!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||n||(e=void 0),this._$AL.set(t,e)),o===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var n;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[i,r]of this._$Ep)this[i]=r;this._$Ep=void 0}const o=this.constructor.elementProperties;if(o.size>0)for(const[i,r]of o){const{wrapped:c}=r,l=this[i];c!==!0||this._$AL.has(i)||l===void 0||this.C(i,void 0,r,l)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(n=this._$EO)==null||n.forEach(o=>{var i;return(i=o.hostUpdate)==null?void 0:i.call(o)}),this.update(e)):this._$EM()}catch(o){throw t=!1,this._$EM(),o}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(n=>{var o;return(o=n.hostUpdated)==null?void 0:o.call(n)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach(e=>this._$ET(e,this[e]))),this._$EM()}updated(t){}firstUpdated(t){}};T.elementStyles=[],T.shadowRootOptions={mode:"open"},T[R("elementProperties")]=new Map,T[R("finalized")]=new Map,nt==null||nt({ReactiveElement:T}),(C.reactiveElementVersions??(C.reactiveElementVersions=[])).push("2.1.0");/**
|
|
10
10
|
* @license
|
|
11
11
|
* Copyright 2017 Google LLC
|
|
12
12
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
13
|
-
*/const
|
|
14
|
-
\f\r]`,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$t=/-->/g,wt=/>/g,k=RegExp(`>|${
|
|
15
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),xt=/'/g,_t=/"/g,Pt=/^(?:script|style|textarea|title)$/i,Rt=s=>(t,...e)=>({_$litType$:s,strings:t,values:e}),d=Rt(1),
|
|
13
|
+
*/const V=globalThis,Q=V.trustedTypes,mt=Q?Q.createPolicy("lit-html",{createHTML:s=>s}):void 0,Ct="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,Lt="?"+E,Nt=`<${Lt}>`,O=document,F=()=>O.createComment(""),q=s=>s===null||typeof s!="object"&&typeof s!="function",ut=Array.isArray,jt=s=>ut(s)||typeof(s==null?void 0:s[Symbol.iterator])=="function",ot=`[
|
|
14
|
+
\f\r]`,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$t=/-->/g,wt=/>/g,k=RegExp(`>|${ot}(?:([^\\s"'>=/]+)(${ot}*=${ot}*(?:[^
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),xt=/'/g,_t=/"/g,Pt=/^(?:script|style|textarea|title)$/i,Rt=s=>(t,...e)=>({_$litType$:s,strings:t,values:e}),d=Rt(1),M=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),At=new WeakMap,I=O.createTreeWalker(O,129);function kt(s,t){if(!ut(s)||!s.hasOwnProperty("raw"))throw Error("invalid template strings array");return mt!==void 0?mt.createHTML(t):t}const Vt=(s,t)=>{const e=s.length-1,n=[];let o,i=t===2?"<svg>":t===3?"<math>":"",r=j;for(let c=0;c<e;c++){const l=s[c];let f,v,p=-1,x=0;for(;x<l.length&&(r.lastIndex=x,v=r.exec(l),v!==null);)x=r.lastIndex,r===j?v[1]==="!--"?r=$t:v[1]!==void 0?r=wt:v[2]!==void 0?(Pt.test(v[2])&&(o=RegExp("</"+v[2],"g")),r=k):v[3]!==void 0&&(r=k):r===k?v[0]===">"?(r=o??j,p=-1):v[1]===void 0?p=-2:(p=r.lastIndex-v[2].length,f=v[1],r=v[3]===void 0?k:v[3]==='"'?_t:xt):r===_t||r===xt?r=k:r===$t||r===wt?r=j:(r=k,o=void 0);const S=r===k&&s[c+1].startsWith("/>")?" ":"";i+=r===j?l+Nt:p>=0?(n.push(f),l.slice(0,p)+Ct+l.slice(p)+E+S):l+E+(p===-2?c:S)}return[kt(s,i+(s[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),n]};class Z{constructor({strings:t,_$litType$:e},n){let o;this.parts=[];let i=0,r=0;const c=t.length-1,l=this.parts,[f,v]=Vt(t,e);if(this.el=Z.createElement(f,n),I.currentNode=this.el.content,e===2||e===3){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(o=I.nextNode())!==null&&l.length<c;){if(o.nodeType===1){if(o.hasAttributes())for(const p of o.getAttributeNames())if(p.endsWith(Ct)){const x=v[r++],S=o.getAttribute(p).split(E),K=/([.?@])?(.*)/.exec(x);l.push({type:1,index:i,name:K[2],strings:S,ctor:K[1]==="."?qt:K[1]==="?"?Zt:K[1]==="@"?Wt:Y}),o.removeAttribute(p)}else p.startsWith(E)&&(l.push({type:6,index:i}),o.removeAttribute(p));if(Pt.test(o.tagName)){const p=o.textContent.split(E),x=p.length-1;if(x>0){o.textContent=Q?Q.emptyScript:"";for(let S=0;S<x;S++)o.append(p[S],F()),I.nextNode(),l.push({type:2,index:++i});o.append(p[x],F())}}}else if(o.nodeType===8)if(o.data===Lt)l.push({type:2,index:i});else{let p=-1;for(;(p=o.data.indexOf(E,p+1))!==-1;)l.push({type:7,index:i}),p+=E.length-1}i++}}static createElement(t,e){const n=O.createElement("template");return n.innerHTML=t,n}}function D(s,t,e=s,n){var r,c;if(t===M)return t;let o=n!==void 0?(r=e._$Co)==null?void 0:r[n]:e._$Cl;const i=q(t)?void 0:t._$litDirective$;return(o==null?void 0:o.constructor)!==i&&((c=o==null?void 0:o._$AO)==null||c.call(o,!1),i===void 0?o=void 0:(o=new i(s),o._$AT(s,e,n)),n!==void 0?(e._$Co??(e._$Co=[]))[n]=o:e._$Cl=o),o!==void 0&&(t=D(s,o._$AS(s,t.values),o,n)),t}class Ft{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:n}=this._$AD,o=((t==null?void 0:t.creationScope)??O).importNode(e,!0);I.currentNode=o;let i=I.nextNode(),r=0,c=0,l=n[0];for(;l!==void 0;){if(r===l.index){let f;l.type===2?f=new G(i,i.nextSibling,this,t):l.type===1?f=new l.ctor(i,l.name,l.strings,this,t):l.type===6&&(f=new Gt(i,this,t)),this._$AV.push(f),l=n[++c]}r!==(l==null?void 0:l.index)&&(i=I.nextNode(),r++)}return I.currentNode=O,o}p(t){let e=0;for(const n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(t,n,e),e+=n.strings.length-2):n._$AI(t[e])),e++}}class G{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,n,o){this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=n,this.options=o,this._$Cv=(o==null?void 0:o.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=D(this,t,e),q(t)?t===h||t==null||t===""?(this._$AH!==h&&this._$AR(),this._$AH=h):t!==this._$AH&&t!==M&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):jt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==h&&q(this._$AH)?this._$AA.nextSibling.data=t:this.T(O.createTextNode(t)),this._$AH=t}$(t){var i;const{values:e,_$litType$:n}=t,o=typeof n=="number"?this._$AC(t):(n.el===void 0&&(n.el=Z.createElement(kt(n.h,n.h[0]),this.options)),n);if(((i=this._$AH)==null?void 0:i._$AD)===o)this._$AH.p(e);else{const r=new Ft(o,this),c=r.u(this.options);r.p(e),this.T(c),this._$AH=r}}_$AC(t){let e=At.get(t.strings);return e===void 0&&At.set(t.strings,e=new Z(t)),e}k(t){ut(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let n,o=0;for(const i of t)o===e.length?e.push(n=new G(this.O(F()),this.O(F()),this,this.options)):n=e[o],n._$AI(i),o++;o<e.length&&(this._$AR(n&&n._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){var n;for((n=this._$AP)==null?void 0:n.call(this,!1,!0,e);t&&t!==this._$AB;){const o=t.nextSibling;t.remove(),t=o}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class Y{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,n,o,i){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=i,n.length>2||n[0]!==""||n[1]!==""?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=h}_$AI(t,e=this,n,o){const i=this.strings;let r=!1;if(i===void 0)t=D(this,t,e,0),r=!q(t)||t!==this._$AH&&t!==M,r&&(this._$AH=t);else{const c=t;let l,f;for(t=i[0],l=0;l<i.length-1;l++)f=D(this,c[n+l],e,l),f===M&&(f=this._$AH[l]),r||(r=!q(f)||f!==this._$AH[l]),f===h?t=h:t!==h&&(t+=(f??"")+i[l+1]),this._$AH[l]=f}r&&!o&&this.j(t)}j(t){t===h?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class qt extends Y{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===h?void 0:t}}class Zt extends Y{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==h)}}class Wt extends Y{constructor(t,e,n,o,i){super(t,e,n,o,i),this.type=5}_$AI(t,e=this){if((t=D(this,t,e,0)??h)===M)return;const n=this._$AH,o=t===h&&n!==h||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,i=t!==h&&(n===h||o);o&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Gt{constructor(t,e,n){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(t){D(this,t)}}const rt=V.litHtmlPolyfillSupport;rt==null||rt(Z,G),(V.litHtmlVersions??(V.litHtmlVersions=[])).push("3.3.0");const Kt=(s,t,e)=>{const n=(e==null?void 0:e.renderBefore)??t;let o=n._$litPart$;if(o===void 0){const i=(e==null?void 0:e.renderBefore)??null;n._$litPart$=o=new G(t.insertBefore(F(),i),i,void 0,e??{})}return o._$AI(s),o};/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
-
*/const
|
|
19
|
+
*/const B=globalThis;let m=class extends T{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Kt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return M}};var St;m._$litElement$=!0,m.finalized=!0,(St=B.litElementHydrateSupport)==null||St.call(B,{LitElement:m});const it=B.litElementPolyfillSupport;it==null||it({LitElement:m});(B.litElementVersions??(B.litElementVersions=[])).push("4.2.0");/**
|
|
20
20
|
* @license
|
|
21
21
|
* Copyright 2017 Google LLC
|
|
22
22
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
23
|
-
*/const
|
|
23
|
+
*/const H=s=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(s,t)}):customElements.define(s,t)};/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
-
*/const Xt={attribute:!0,type:String,converter:
|
|
27
|
+
*/const Xt={attribute:!0,type:String,converter:J,reflect:!1,hasChanged:pt},Jt=(s=Xt,t,e)=>{const{kind:n,metadata:o}=e;let i=globalThis.litPropertyMetadata.get(o);if(i===void 0&&globalThis.litPropertyMetadata.set(o,i=new Map),n==="setter"&&((s=Object.create(s)).wrapped=!0),i.set(e.name,s),n==="accessor"){const{name:r}=e;return{set(c){const l=t.get.call(this);t.set.call(this,c),this.requestUpdate(r,l,s)},init(c){return c!==void 0&&this.C(r,void 0,s,c),c}}}if(n==="setter"){const{name:r}=e;return function(c){const l=this[r];t.call(this,c),this.requestUpdate(r,l,s)}}throw Error("Unsupported decorator location: "+n)};function a(s){return(t,e)=>typeof e=="object"?Jt(s,t,e):((n,o,i)=>{const r=o.hasOwnProperty(i);return o.constructor.createProperty(i,n),r?Object.getOwnPropertyDescriptor(o,i):void 0})(s,t,e)}/**
|
|
28
28
|
* @license
|
|
29
29
|
* Copyright 2017 Google LLC
|
|
30
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -40,57 +40,45 @@
|
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2023 Google LLC
|
|
42
42
|
* SPDX-License-Identifier: Apache-2.0
|
|
43
|
-
*/const
|
|
43
|
+
*/const ft=Symbol("internals"),at=Symbol("privateInternals");function te(s){var t;class e extends s{get[(t=ft,t)](){return this[at]||(this[at]=this.attachInternals()),this[at]}}return e}/**
|
|
44
44
|
* @license
|
|
45
45
|
* Copyright 2023 Google LLC
|
|
46
46
|
* SPDX-License-Identifier: Apache-2.0
|
|
47
|
-
*/function ee(s){s.addInitializer(t=>{const e=t;e.addEventListener("click",async n=>{const{type:o,[
|
|
48
|
-
* @license
|
|
49
|
-
* Copyright 2017 Google LLC
|
|
50
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
51
|
-
*/const se={CHILD:2},ne=s=>(...t)=>({_$litDirective$:s,values:t});class oe{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,n){this._$Ct=t,this._$AM=e,this._$Ci=n}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
|
|
52
|
-
* @license
|
|
53
|
-
* Copyright 2017 Google LLC
|
|
54
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
55
|
-
*/class at extends oe{constructor(t){if(super(t),this.it=h,t.type!==se.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===h||t==null)return this._t=void 0,this.it=t;if(t===H)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}at.directiveName="unsafeHTML",at.resultType=1;/**
|
|
56
|
-
* @license
|
|
57
|
-
* Copyright 2017 Google LLC
|
|
58
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
|
-
*/class lt extends at{}lt.directiveName="unsafeSVG",lt.resultType=2;const Q=ne(lt),ie=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
47
|
+
*/function ee(s){s.addInitializer(t=>{const e=t;e.addEventListener("click",async n=>{const{type:o,[ft]:i}=e,{form:r}=i;if(!(!r||o==="button")&&(await new Promise(c=>{setTimeout(c)}),!n.defaultPrevented)){if(o==="reset"){r.reset();return}r.addEventListener("submit",c=>{Object.defineProperty(c,"submitter",{configurable:!0,enumerable:!0,get:()=>e})},{capture:!0,once:!0}),i.setFormValue(e.value),r.requestSubmit()}})})}const se=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
60
48
|
<path d="M8 3.6275C7.06799 0.971489 3.25399 -0.0226278 1.67414 2.30983C0.0877404 4.65197 1.67414 6.99412 2.62598 8.33249C3.0147 8.87905 8 14 8 14C8 14 12.9853 8.87905 13.374 8.33249C14.3259 6.99412 15.9123 4.65197 14.3259 2.30983C12.746 -0.0226277 8.97167 0.971489 8 3.6275Z" stroke="#3F2B2E" stroke-linecap="round"/>
|
|
61
49
|
</svg>
|
|
62
|
-
`,
|
|
50
|
+
`,ne=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
63
51
|
<path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
|
|
64
52
|
</svg>
|
|
65
|
-
`,
|
|
53
|
+
`,oe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
66
54
|
<path d="M12.2266 8.16162C11.0953 9.26599 8.72489 11.8788 5.11546 16L4.63062 15.7172C5.78886 13.4007 7.17607 10.8283 8.79223 8C7.17607 5.17172 5.78886 2.59933 4.63062 0.282827L5.11546 0C8.72489 4.12121 11.0953 6.73401 12.2266 7.83838V8.16162Z" fill="#3F2B2E"/>
|
|
67
55
|
</svg>
|
|
68
|
-
`,
|
|
56
|
+
`,re=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
69
57
|
<path d="M5 7.83838C6.02128 6.73401 8.16109 4.12121 11.4195 0L11.8571 0.282829C10.8116 2.59933 9.55927 5.17172 8.1003 8C9.55927 10.8283 10.8115 13.4007 11.8571 15.7172L11.4195 16C8.16109 11.8788 6.02128 9.266 5 8.16162L5 7.83838Z" fill="#3F2B2E"/>
|
|
70
58
|
</svg>
|
|
71
|
-
`,
|
|
59
|
+
`,ie=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
72
60
|
<path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834ZM7.98873 10.328L10.6602 12.2353L9.64573 9.15787L12.2721 7.28568H9.02576L8 4.17317L6.97424 7.28568H3.72786L6.35427 9.15787L5.33977 12.2353L8.01127 10.328H7.98873Z" fill="#3F2B2E"/>
|
|
73
61
|
</svg>
|
|
74
|
-
`,
|
|
62
|
+
`,ae=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
75
63
|
<path d="M15 6.43789H9.63446L8 1.5L6.36554 6.43789H1L5.33977 9.5387L3.69404 14.5L7.98873 11.4343L12.2834 14.5H12.306L10.6602 9.5387L15 6.43789ZM6.36554 11.5396V7.32718H6.97424L8 4.21467L9.02576 7.32718H12.2721L9.64573 9.19937L10.6602 12.2768L8 10.3812L6.36554 11.5513V11.5396Z" fill="#3F2B2E"/>
|
|
76
64
|
</svg>
|
|
77
|
-
`,
|
|
65
|
+
`,le=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
78
66
|
<path d="M15 6.39639H9.63446L8 1.4585L6.36554 6.39639H1L5.33977 9.4972L3.69404 14.4585L7.98873 11.3928L12.2834 14.4585L10.6377 9.4972L14.9775 6.39639H15ZM10.6715 12.2353L8.05636 10.3631V4.32528L9.03704 7.27398H12.2834L9.65701 9.14616L10.6715 12.2236V12.2353Z" fill="#3F2B2E"/>
|
|
79
67
|
</svg>
|
|
80
|
-
`,
|
|
68
|
+
`,ce=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
81
69
|
<path d="M15 6.43789H9.63446L8 1.5L6.36554 6.43789H1L5.33977 9.5387L3.69404 14.5L7.98873 11.4343L9.46538 12.4874L12.2834 14.5H12.306L10.6602 9.5387L15 6.43789ZM9.46538 11.4226V7.32718H12.2721L9.64573 9.19937L10.6602 12.2768L9.46538 11.4226Z" fill="#3F2B2E"/>
|
|
82
70
|
</svg>
|
|
83
|
-
`,
|
|
71
|
+
`,he=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
72
|
<path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834Z" fill="#3F2B2E"/>
|
|
85
73
|
</svg>
|
|
86
|
-
`,
|
|
74
|
+
`,de=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
87
75
|
<path d="M2 2L14 14" stroke="#3F2B2E"/>
|
|
88
76
|
<path d="M14 2L2 14" stroke="#3F2B2E"/>
|
|
89
77
|
</svg>
|
|
90
|
-
`,
|
|
78
|
+
`,pe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
91
79
|
<path d="M7.12506 1C10.5018 1 13.2509 3.74834 13.251 7.125C13.2511 8.59738 12.7172 10.0206 11.7491 11.1299L14.8731 14.2539C15.0433 14.4253 15.0435 14.7018 14.8731 14.873C14.7913 14.9555 14.6797 15.002 14.5635 15.002C14.4475 15.0019 14.3357 14.9554 14.254 14.873L11.1309 11.749C10.0555 12.6818 8.6564 13.251 7.12506 13.251C3.7484 13.2508 1.00006 10.5017 1.00006 7.125C1.00025 3.74846 3.74852 1.00019 7.12506 1ZM7.12506 1.875C4.22971 1.87522 1.87506 4.23058 1.87506 7.12598C1.87532 10.0212 4.22987 12.3758 7.12506 12.376C10.0204 12.376 12.3758 10.0213 12.376 7.12598C12.376 4.23044 10.0206 1.875 7.12506 1.875Z" fill="#3F2B2E"/>
|
|
92
80
|
</svg>
|
|
93
|
-
`,
|
|
81
|
+
`,ue=`<?xml version="1.0" encoding="utf-8"?>
|
|
94
82
|
<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
95
83
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
96
84
|
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
@@ -100,7 +88,7 @@
|
|
|
100
88
|
<path class="st0" d="M27.3,19.3h-6.7v-6.7c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7v6.7h-6.7c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7
|
|
101
89
|
h6.7v6.7c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7v-6.7h6.7c0.4,0,0.7-0.3,0.7-0.7S27.7,19.3,27.3,19.3z"/>
|
|
102
90
|
</svg>
|
|
103
|
-
`,
|
|
91
|
+
`,fe=`<?xml version="1.0" encoding="utf-8"?>
|
|
104
92
|
<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
105
93
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
106
94
|
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
@@ -109,193 +97,24 @@
|
|
|
109
97
|
</style>
|
|
110
98
|
<path class="st0" d="M27.3,20.7H12.7c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h14.7c0.4,0,0.7,0.3,0.7,0.7S27.7,20.7,27.3,20.7z"/>
|
|
111
99
|
</svg>
|
|
112
|
-
`,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
</button>
|
|
126
|
-
`}
|
|
127
|
-
`}};$.styles=A`
|
|
128
|
-
:host {
|
|
129
|
-
display: inline-flex;
|
|
130
|
-
justify-content: center;
|
|
131
|
-
align-items: center;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.icon-button {
|
|
135
|
-
display: flex;
|
|
136
|
-
justify-content: center;
|
|
137
|
-
align-items: center;
|
|
138
|
-
width: 32px;
|
|
139
|
-
height: 32px;
|
|
140
|
-
border: transparent;
|
|
141
|
-
border-radius: var(--radius-full);
|
|
142
|
-
cursor: pointer;
|
|
143
|
-
position: relative;
|
|
144
|
-
|
|
145
|
-
svg {
|
|
146
|
-
path {
|
|
147
|
-
stroke: var(--color-content-action-secondary);
|
|
148
|
-
stroke-width: var(--icon-stroke-width, 1);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.icon-button.filled svg {
|
|
154
|
-
fill: var(--color-content-action-secondary);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.icon-button.small {
|
|
158
|
-
width: 20px;
|
|
159
|
-
height: 20px;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.icon-button.medium {
|
|
163
|
-
width: 32px;
|
|
164
|
-
height: 32px;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.icon-button.large {
|
|
168
|
-
width: 40px;
|
|
169
|
-
height: 40px;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.icon-button.none-light, .icon-button.none-contrast {
|
|
173
|
-
background-color: transparent;
|
|
174
|
-
width: auto;
|
|
175
|
-
height: auto;
|
|
176
|
-
|
|
177
|
-
&.small {
|
|
178
|
-
svg {
|
|
179
|
-
width: 8px;
|
|
180
|
-
height: 8px;
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
&.medium {
|
|
185
|
-
svg {
|
|
186
|
-
width: 16px;
|
|
187
|
-
height: 16px;
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
&.large {
|
|
192
|
-
svg {
|
|
193
|
-
width: 24px;
|
|
194
|
-
height: 24px;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
&:disabled {
|
|
199
|
-
background-color: transparent;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.icon-button.none-light {
|
|
204
|
-
svg {
|
|
205
|
-
path {
|
|
206
|
-
stroke: var(--color-content-action-primary);
|
|
207
|
-
fill: var(--color-content-action-primary);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.icon-button.none-light.icon-wishlist svg path {
|
|
213
|
-
fill: none;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.icon-button.background-light {
|
|
217
|
-
background-color: var(--color-alpha-light-strong);
|
|
218
|
-
|
|
219
|
-
&:hover:not(:disabled) {
|
|
220
|
-
background-color: var(--color-alpha-light-stronger);
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
&:active:not(:disabled) {
|
|
224
|
-
background-color: var(--color-alpha-light-strongest);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.icon-button.background-contrast {
|
|
229
|
-
background-color: var(--color-container-action-tertiary-default);
|
|
230
|
-
|
|
231
|
-
&:hover:not(:disabled) {
|
|
232
|
-
background-color: var(--color-container-action-tertiary-hover);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
&:active:not(:disabled) {
|
|
236
|
-
background-color: var(--color-container-action-tertiary-pressed);
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.icon-button.ghost-light {
|
|
241
|
-
background-color: transparent;
|
|
242
|
-
|
|
243
|
-
svg {
|
|
244
|
-
path {
|
|
245
|
-
stroke: var(--color-content-action-primary);
|
|
246
|
-
fill: var(--color-content-action-primary);
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
&:hover:not(:disabled) {
|
|
251
|
-
background-color: var(--color-alpha-light-lightest);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
&:active:not(:disabled) {
|
|
255
|
-
background-color: var(--color-alpha-light-light);
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.icon-button.ghost-contrast {
|
|
260
|
-
background-color: transparent;
|
|
261
|
-
|
|
262
|
-
&:hover:not(:disabled) {
|
|
263
|
-
background-color: var(--color-alpha-light-medium);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
&:active:not(:disabled) {
|
|
267
|
-
background-color: var(--color-alpha-light-strongest);
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.icon-button:disabled {
|
|
272
|
-
background-color: var(--color-container-disabled);
|
|
273
|
-
|
|
274
|
-
svg {
|
|
275
|
-
fill: var(--color-content-disabled);
|
|
276
|
-
|
|
277
|
-
path {
|
|
278
|
-
stroke: var(--color-content-disabled);
|
|
279
|
-
fill: var(--color-content-disabled);
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
}
|
|
284
|
-
`;L([a({type:String,reflect:!0})],$.prototype,"bgstyle",2);L([a({type:String,reflect:!0})],$.prototype,"size",2);L([a({type:String,reflect:!0})],$.prototype,"status",2);L([a({type:String,reflect:!0})],$.prototype,"type",2);L([a({type:String})],$.prototype,"strokewidth",2);L([a({type:String})],$.prototype,"icon",2);L([a({type:Boolean,reflect:!0})],$.prototype,"disabled",2);$=L([T("o-icon-button")],$);var $e=Object.defineProperty,we=Object.getOwnPropertyDescriptor,v=(s,t,e,n)=>{for(var o=n>1?void 0:n?we(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(o=(n?i(t,e,o):i(o))||o);return n&&o&&$e(t,e,o),o};const xe=te(m);let u=class extends xe{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.text="",this.textsecond="",this.fullwidth=!1,this.disabled=!1,this.iconstrokewidth="1",this.icon="",this.startIcon=!1,this.endIcon=!1,this.iconSize="small",this.panelTarget="",this.href="",this.target=""}get name(){return this.getAttribute("name")??""}set name(s){this.setAttribute("name",s)}get form(){return this[ut].form}handleClick(){if(this.panelTarget){const s=document.getElementById(this.panelTarget);s!=null&&s.openPanel&&typeof s.openPanel=="function"?s.openPanel():console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`)}}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(s){return this.icon?d`<o-icon-button
|
|
285
|
-
class=${s==="start"?"icon-start":"icon-end"}
|
|
286
|
-
icon=${this.icon}
|
|
287
|
-
bgstyle="${this.variant==="primary"?"none-light":"none-contrast"}"
|
|
288
|
-
size="${this.iconSize}"
|
|
289
|
-
strokewidth="${this.iconstrokewidth||"1"}"
|
|
290
|
-
type="span"
|
|
291
|
-
aria-hidden="true"
|
|
292
|
-
?disabled=${this.disabled}
|
|
293
|
-
></o-icon-button>`:h}renderButton(){const s=this.text||this.textsecond;return d`
|
|
100
|
+
`,tt={wishlist:se,playerv:ne,chevronRight:oe,chevronLeft:re,icoPlus:ue,icoMinus:fe,"star-0":ie,"star-25":ae,"star-50":le,"star-75":ce,"star-100":he,cross:de,search:pe};/**
|
|
101
|
+
* @license
|
|
102
|
+
* Copyright 2017 Google LLC
|
|
103
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
104
|
+
*/const ve={CHILD:2},be=s=>(...t)=>({_$litDirective$:s,values:t});class ge{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,n){this._$Ct=t,this._$AM=e,this._$Ci=n}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
|
|
105
|
+
* @license
|
|
106
|
+
* Copyright 2017 Google LLC
|
|
107
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
108
|
+
*/class lt extends ge{constructor(t){if(super(t),this.it=h,t.type!==ve.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===h||t==null)return this._t=void 0,this.it=t;if(t===M)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}lt.directiveName="unsafeHTML",lt.resultType=1;/**
|
|
109
|
+
* @license
|
|
110
|
+
* Copyright 2017 Google LLC
|
|
111
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
112
|
+
*/class ct extends lt{}ct.directiveName="unsafeSVG",ct.resultType=2;const W=be(ct);var ye=Object.defineProperty,me=Object.getOwnPropertyDescriptor,g=(s,t,e,n)=>{for(var o=n>1?void 0:n?me(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&ye(t,e,o),o};const $e=te(m);let u=class extends $e{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.text="",this.textsecond="",this.fullwidth=!1,this.disabled=!1,this.startIconModel="search",this.endIconModel="chevronRight",this.startIcon=!1,this.endIcon=!1,this.panelTarget="",this.href="",this.target=""}get name(){return this.getAttribute("name")??""}set name(s){this.setAttribute("name",s)}get form(){return this[ft].form}handleClick(){if(this.panelTarget){const s=document.getElementById(this.panelTarget);s!=null&&s.openPanel&&typeof s.openPanel=="function"?s.openPanel():console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`)}}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(s){const t=s==="start"?this.startIconModel:this.endIconModel;if(!t)return h;const e=tt[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`<span class="${s==="start"?"icon-start":"icon-end"}">${W(e)}</span>`}renderButton(){const s=this.text||this.textsecond;return d`
|
|
294
113
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
295
114
|
${this.startIcon?this.renderIcon("start"):h}
|
|
296
115
|
${s?d`
|
|
297
|
-
${this.text?d`<span>${this.text}</span>`:h}
|
|
298
|
-
${this.textsecond?d`<span>${this.textsecond}</span>`:h}
|
|
116
|
+
${this.text?d`<span class="text">${this.text}</span>`:h}
|
|
117
|
+
${this.textsecond?d`<span class="text">${this.textsecond}</span>`:h}
|
|
299
118
|
`:d`<slot></slot>`}
|
|
300
119
|
${this.endIcon?this.renderIcon("end"):h}
|
|
301
120
|
</button>
|
|
@@ -332,6 +151,9 @@
|
|
|
332
151
|
--button-text-hover: var(--color-content-action-primary);
|
|
333
152
|
--button-border: transparent;
|
|
334
153
|
--button-border-width: var(--border-m);
|
|
154
|
+
--button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
|
|
155
|
+
--button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
|
|
156
|
+
--button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
|
|
335
157
|
}
|
|
336
158
|
|
|
337
159
|
:host([variant="secondary"]) {
|
|
@@ -342,6 +164,9 @@
|
|
|
342
164
|
--button-text-hover: var(--color-content-action-secondary);
|
|
343
165
|
--button-border: var(--color-border-secondary);
|
|
344
166
|
--button-border-width: var(--border-m);
|
|
167
|
+
--button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
|
|
168
|
+
--button-starticon-svg-width: 16px;
|
|
169
|
+
--button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
|
|
345
170
|
}
|
|
346
171
|
|
|
347
172
|
:host([variant="ghost"]) {
|
|
@@ -351,6 +176,9 @@
|
|
|
351
176
|
--button-text: var(--color-content-action-secondary);
|
|
352
177
|
--button-text-hover: var(--color-content-action-secondary);
|
|
353
178
|
--button-border-width: 0;
|
|
179
|
+
--button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);
|
|
180
|
+
--button-starticon-svg-width: 16px;
|
|
181
|
+
--button-endicon-svg-width: 12px;
|
|
354
182
|
}
|
|
355
183
|
|
|
356
184
|
:host([variant="tertiary"]) {
|
|
@@ -360,6 +188,9 @@
|
|
|
360
188
|
--button-text: var(--color-content-body);
|
|
361
189
|
--button-text-hover: var(--color-content-action-tertiary);
|
|
362
190
|
--button-border-width: 0;
|
|
191
|
+
--button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px);
|
|
192
|
+
--button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
|
|
193
|
+
--button-endicon-svg-width: 8px;
|
|
363
194
|
}
|
|
364
195
|
|
|
365
196
|
:host([disabled]),
|
|
@@ -390,11 +221,11 @@
|
|
|
390
221
|
font-weight: var(--font-weight-400);
|
|
391
222
|
line-height: var(--line-height-200);
|
|
392
223
|
min-width: 64px;
|
|
393
|
-
padding: var(--
|
|
224
|
+
padding: var(--button-padding);
|
|
394
225
|
cursor: inherit;
|
|
395
226
|
box-sizing: border-box;
|
|
396
227
|
|
|
397
|
-
span
|
|
228
|
+
span {
|
|
398
229
|
font-family: var(--font-family-loccitane-sans);
|
|
399
230
|
font-size: var(--font-size-150);
|
|
400
231
|
font-weight: var(--font-weight-400);
|
|
@@ -402,6 +233,11 @@
|
|
|
402
233
|
}
|
|
403
234
|
}
|
|
404
235
|
|
|
236
|
+
.button:hover:not([disabled]) {
|
|
237
|
+
background-color: var(--button-bg-hover);
|
|
238
|
+
color: var(--button-text-hover);
|
|
239
|
+
}
|
|
240
|
+
|
|
405
241
|
.button:active:not([disabled]) {
|
|
406
242
|
background-color: var(--button-bg-pressed);
|
|
407
243
|
}
|
|
@@ -410,7 +246,7 @@
|
|
|
410
246
|
${Yt};
|
|
411
247
|
}
|
|
412
248
|
|
|
413
|
-
span + span::before {
|
|
249
|
+
span.text + span.text::before {
|
|
414
250
|
content: "•";
|
|
415
251
|
margin-right: 8px;
|
|
416
252
|
}
|
|
@@ -421,11 +257,10 @@
|
|
|
421
257
|
align-items: center;
|
|
422
258
|
}
|
|
423
259
|
|
|
424
|
-
:host([variant="tertiary"][fullwidth][startIcon]) .button,
|
|
425
260
|
:host([variant="tertiary"][fullwidth][endIcon]) .button {
|
|
426
261
|
justify-content: space-between;
|
|
427
|
-
padding-left:
|
|
428
|
-
padding-right:
|
|
262
|
+
padding-left: 8px;
|
|
263
|
+
padding-right: 12px;
|
|
429
264
|
}
|
|
430
265
|
|
|
431
266
|
.button span {
|
|
@@ -439,10 +274,26 @@
|
|
|
439
274
|
display: inline-flex;
|
|
440
275
|
align-items: center;
|
|
441
276
|
}
|
|
442
|
-
|
|
277
|
+
|
|
278
|
+
:host([variant="tertiary"][endIcon]) .button .icon-end {
|
|
279
|
+
width: var(--button-endicon-svg-width, 8px);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
//Icon movment on hover
|
|
283
|
+
:host([variant="tertiary"][endIcon]) .icon-end {
|
|
284
|
+
display: inline-flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
:host([variant="tertiary"][endIcon]:hover) .icon-end {
|
|
289
|
+
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
290
|
+
transform: translateX(4px);
|
|
291
|
+
}
|
|
292
|
+
//End icon movment on hover
|
|
293
|
+
`;g([a()],u.prototype,"type",2);g([a({reflect:!0})],u.prototype,"value",2);g([a({type:String,reflect:!0})],u.prototype,"variant",2);g([a({type:String})],u.prototype,"text",2);g([a({type:String})],u.prototype,"textsecond",2);g([a({type:Boolean,reflect:!0})],u.prototype,"fullwidth",2);g([a({type:Boolean,reflect:!0})],u.prototype,"disabled",2);g([a({type:String,reflect:!0})],u.prototype,"startIconModel",2);g([a({type:String,reflect:!0})],u.prototype,"endIconModel",2);g([a({type:Boolean,reflect:!0,attribute:"starticon"})],u.prototype,"startIcon",2);g([a({type:Boolean,reflect:!0,attribute:"endicon"})],u.prototype,"endIcon",2);g([a({type:String,attribute:"paneltarget",reflect:!0})],u.prototype,"panelTarget",2);g([a({type:String})],u.prototype,"href",2);g([a({type:String})],u.prototype,"target",2);u=g([H("o-button")],u);var we=Object.defineProperty,xe=Object.getOwnPropertyDescriptor,et=(s,t,e,n)=>{for(var o=n>1?void 0:n?xe(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&we(t,e,o),o};let U=class extends m{constructor(){super(...arguments),this.status="empty",this.ariaDescribedBy="a-product-name",this.label="Add to wishlist",this.toggleStatus=()=>{this.status=this.status==="empty"?"filled":"empty",this.setAttribute("aria-pressed",String(this.status==="filled")),this.dispatchEvent(new CustomEvent("wishlist-toggle",{detail:{status:this.status},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.setAttribute("aria-pressed",String(this.status==="filled"))}firstUpdated(){this.addEventListener("click",this.toggleStatus),this.addEventListener("keydown",this.handleKeydown)}handleKeydown(s){(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.toggleStatus())}render(){const s=tt.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
443
294
|
<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
|
|
444
295
|
<span class="sr-only">${this.label}</span>
|
|
445
|
-
${
|
|
296
|
+
${W(s)}
|
|
446
297
|
</button>
|
|
447
298
|
`}setStatus(s){this.status=s,this.setAttribute("aria-pressed",String(this.status==="filled")),this.requestUpdate()}setAriaDescribedBy(s){this.ariaDescribedBy=s,this.requestUpdate()}setLabel(s){this.label=s,this.requestUpdate()}};U.styles=A`
|
|
448
299
|
:host {
|
|
@@ -503,7 +354,179 @@
|
|
|
503
354
|
width: 0.1rem !important;
|
|
504
355
|
white-space: nowrap !important;
|
|
505
356
|
}
|
|
506
|
-
`;
|
|
357
|
+
`;et([a({type:String,reflect:!0})],U.prototype,"status",2);et([a({type:String,reflect:!0})],U.prototype,"ariaDescribedBy",2);et([a({type:String,reflect:!0})],U.prototype,"label",2);U=et([H("o-wishlist-button")],U);var _e=Object.defineProperty,Ae=Object.getOwnPropertyDescriptor,L=(s,t,e,n)=>{for(var o=n>1?void 0:n?Ae(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&_e(t,e,o),o};let $=class extends m{constructor(){super(...arguments),this.bgstyle="background-light",this.size="medium",this.status="empty",this.type="button",this.strokewidth="1",this.icon="wishlist",this.disabled=!1}updated(s){super.updated(s),this.style.setProperty("--icon-stroke-width",this.strokewidth)}render(){const s=tt[this.icon]??"",t=`icon-${this.icon}`,e=s.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
358
|
+
${this.type==="span"?d`
|
|
359
|
+
<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">
|
|
360
|
+
${W(e)}
|
|
361
|
+
</span>
|
|
362
|
+
`:d`
|
|
363
|
+
<button
|
|
364
|
+
type="button"
|
|
365
|
+
aria-label="icon"
|
|
366
|
+
class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
|
|
367
|
+
?disabled="${this.disabled}"
|
|
368
|
+
>
|
|
369
|
+
${W(e)}
|
|
370
|
+
</button>
|
|
371
|
+
`}
|
|
372
|
+
`}};$.styles=A`
|
|
373
|
+
:host {
|
|
374
|
+
display: inline-flex;
|
|
375
|
+
justify-content: center;
|
|
376
|
+
align-items: center;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.icon-button {
|
|
380
|
+
display: flex;
|
|
381
|
+
justify-content: center;
|
|
382
|
+
align-items: center;
|
|
383
|
+
width: 32px;
|
|
384
|
+
height: 32px;
|
|
385
|
+
border: transparent;
|
|
386
|
+
border-radius: var(--radius-full);
|
|
387
|
+
cursor: pointer;
|
|
388
|
+
position: relative;
|
|
389
|
+
|
|
390
|
+
svg {
|
|
391
|
+
path {
|
|
392
|
+
stroke: var(--color-content-action-secondary);
|
|
393
|
+
stroke-width: var(--icon-stroke-width, 1);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.icon-button.filled svg {
|
|
399
|
+
fill: var(--color-content-action-secondary);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.icon-button.small {
|
|
403
|
+
width: 20px;
|
|
404
|
+
height: 20px;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.icon-button.medium {
|
|
408
|
+
width: 32px;
|
|
409
|
+
height: 32px;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.icon-button.large {
|
|
413
|
+
width: 40px;
|
|
414
|
+
height: 40px;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.icon-button.none-light, .icon-button.none-contrast {
|
|
418
|
+
background-color: transparent;
|
|
419
|
+
width: auto;
|
|
420
|
+
height: auto;
|
|
421
|
+
|
|
422
|
+
&.small {
|
|
423
|
+
svg {
|
|
424
|
+
width: 8px;
|
|
425
|
+
height: 8px;
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
&.medium {
|
|
430
|
+
svg {
|
|
431
|
+
width: 16px;
|
|
432
|
+
height: 16px;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
&.large {
|
|
437
|
+
svg {
|
|
438
|
+
width: 24px;
|
|
439
|
+
height: 24px;
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
&:disabled {
|
|
444
|
+
background-color: transparent;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.icon-button.none-light {
|
|
449
|
+
svg {
|
|
450
|
+
path {
|
|
451
|
+
stroke: var(--color-content-action-primary);
|
|
452
|
+
fill: var(--color-content-action-primary);
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.icon-button.none-light.icon-wishlist svg path {
|
|
458
|
+
fill: none;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.icon-button.background-light {
|
|
462
|
+
background-color: var(--color-alpha-light-strong);
|
|
463
|
+
|
|
464
|
+
&:hover:not(:disabled) {
|
|
465
|
+
background-color: var(--color-alpha-light-stronger);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
&:active:not(:disabled) {
|
|
469
|
+
background-color: var(--color-alpha-light-strongest);
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.icon-button.background-contrast {
|
|
474
|
+
background-color: var(--color-container-action-tertiary-default);
|
|
475
|
+
|
|
476
|
+
&:hover:not(:disabled) {
|
|
477
|
+
background-color: var(--color-container-action-tertiary-hover);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
&:active:not(:disabled) {
|
|
481
|
+
background-color: var(--color-container-action-tertiary-pressed);
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.icon-button.ghost-light {
|
|
486
|
+
background-color: transparent;
|
|
487
|
+
|
|
488
|
+
svg {
|
|
489
|
+
path {
|
|
490
|
+
stroke: var(--color-content-action-primary);
|
|
491
|
+
fill: var(--color-content-action-primary);
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
&:hover:not(:disabled) {
|
|
496
|
+
background-color: var(--color-alpha-light-lightest);
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
&:active:not(:disabled) {
|
|
500
|
+
background-color: var(--color-alpha-light-light);
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.icon-button.ghost-contrast {
|
|
505
|
+
background-color: transparent;
|
|
506
|
+
|
|
507
|
+
&:hover:not(:disabled) {
|
|
508
|
+
background-color: var(--color-alpha-light-medium);
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
&:active:not(:disabled) {
|
|
512
|
+
background-color: var(--color-alpha-light-strongest);
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.icon-button:disabled {
|
|
517
|
+
background-color: var(--color-container-disabled);
|
|
518
|
+
|
|
519
|
+
svg {
|
|
520
|
+
fill: var(--color-content-disabled);
|
|
521
|
+
|
|
522
|
+
path {
|
|
523
|
+
stroke: var(--color-content-disabled);
|
|
524
|
+
fill: var(--color-content-disabled);
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
}
|
|
529
|
+
`;L([a({type:String,reflect:!0})],$.prototype,"bgstyle",2);L([a({type:String,reflect:!0})],$.prototype,"size",2);L([a({type:String,reflect:!0})],$.prototype,"status",2);L([a({type:String,reflect:!0})],$.prototype,"type",2);L([a({type:String})],$.prototype,"strokewidth",2);L([a({type:String})],$.prototype,"icon",2);L([a({type:Boolean,reflect:!0})],$.prototype,"disabled",2);$=L([H("o-icon-button")],$);var Se=Object.defineProperty,Ee=Object.getOwnPropertyDescriptor,z=(s,t,e,n)=>{for(var o=n>1?void 0:n?Ee(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&Se(t,e,o),o};let _=class extends m{constructor(){super(...arguments),this.href="",this.target="",this.template="standard",this.inverse=!1,this.endIcon=!1,this.reverseEndIcon=!1}render(){return d`
|
|
507
530
|
<a href="${this.href}" target="${this.target}">
|
|
508
531
|
${this.endIcon&&this.reverseEndIcon?d`
|
|
509
532
|
<o-icon-button
|
|
@@ -612,10 +635,10 @@
|
|
|
612
635
|
height: 1px;
|
|
613
636
|
}
|
|
614
637
|
/* End of underline effect */
|
|
615
|
-
`;
|
|
638
|
+
`;z([a({type:String})],_.prototype,"href",2);z([a({type:String})],_.prototype,"target",2);z([a({type:String,reflect:!0})],_.prototype,"template",2);z([a({type:Boolean,reflect:!0})],_.prototype,"inverse",2);z([a({type:Boolean,reflect:!0})],_.prototype,"endIcon",2);z([a({type:Boolean,reflect:!0})],_.prototype,"reverseEndIcon",2);_=z([H("o-link")],_);var Ce=Object.defineProperty,Le=Object.getOwnPropertyDescriptor,st=(s,t,e,n)=>{for(var o=n>1?void 0:n?Le(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&Ce(t,e,o),o};let N=class extends m{constructor(){super(...arguments),this.rating=0}getStarKeys(){const s=[];for(let t=0;t<5;t++){const e=this.rating-t;let n;e>=1?n=100:e<=0?n=0:n=Math.round(e*100/25)*25,s.push(`star-${n}`)}return s}render(){const s=this.getStarKeys();return d`
|
|
616
639
|
<div class="rating">
|
|
617
640
|
<div class="stars">
|
|
618
|
-
${s.map(t=>d`<span class="star">${
|
|
641
|
+
${s.map(t=>d`<span class="star">${W(tt[t]??"")}</span>`)}
|
|
619
642
|
</div>
|
|
620
643
|
${this.reviewCount!=null&&this.href!=null?d`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
|
|
621
644
|
</div>
|
|
@@ -652,13 +675,14 @@
|
|
|
652
675
|
text-decoration: underline;
|
|
653
676
|
cursor: pointer;
|
|
654
677
|
}
|
|
655
|
-
`;
|
|
656
|
-
<div class="overlay" @click=${this.closePanel}></div>
|
|
678
|
+
`;st([a({type:Number})],N.prototype,"rating",2);st([a({type:String})],N.prototype,"reviewCount",2);st([a({type:String})],N.prototype,"href",2);N=st([H("o-rating")],N);var Pe=Object.defineProperty,ke=Object.getOwnPropertyDescriptor,y=(s,t,e,n)=>{for(var o=n>1?void 0:n?ke(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&Pe(t,e,o),o};let b=class extends m{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.headerTitle="",this.closeButtonLabel="Close the modal",this.firstButtonLabel="Close",this.firstButtonVariant="primary",this.secondaryButtonLabel="",this.secondaryButtonVariant="secondary",this.disablePortal=!1,this.zIndex=99,this.previousFocusedElement=null,this.handleKeyDown=s=>{this.open&&(s.key==="Escape"?this.closePanel():s.key==="Tab"&&this.trapFocus(s))}}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),window.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),window.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}trapFocus(s){const t=this.getFocusableElements();if(t.length===0)return;const e=t[0],n=t[t.length-1];s.shiftKey&&document.activeElement===e?(s.preventDefault(),n.focus()):!s.shiftKey&&document.activeElement===n&&(s.preventDefault(),e.focus())}getFocusableElements(){const s=this.renderRoot.querySelector(".panel");return s?Array.from(s.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(t=>!t.hasAttribute("disabled")):[]}openPanel(){this.previousFocusedElement=document.activeElement,this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open"),this.updateComplete.then(()=>{const s=this.getFocusableElements()[0];s==null||s.focus()})}closePanel(){var s;this.open=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),(s=this.previousFocusedElement)==null||s.focus(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleFirstClick(){typeof this.onFirstButtonClick=="function"&&this.onFirstButtonClick(),this.closePanel()}handleSecondaryClick(){typeof this.onSecondaryButtonClick=="function"&&this.onSecondaryButtonClick(),this.closePanel()}updated(){this.style.setProperty("--z-overlay",`${this.zIndex}`),this.style.setProperty("--z-panel",`${this.zIndex+1}`)}render(){return d`
|
|
679
|
+
<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.closePanel}></div>
|
|
657
680
|
<div
|
|
658
681
|
class="panel"
|
|
659
682
|
role="dialog"
|
|
660
683
|
aria-modal="true"
|
|
661
684
|
aria-labelledby="panel-title"
|
|
685
|
+
style="z-index: ${this.zIndex+1}"
|
|
662
686
|
>
|
|
663
687
|
<o-icon-button icon="cross" size="medium" class="close-btn" @click=${this.closePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
|
|
664
688
|
|
|
@@ -694,14 +718,15 @@
|
|
|
694
718
|
</div>
|
|
695
719
|
`:null}
|
|
696
720
|
</div>
|
|
697
|
-
`}};
|
|
721
|
+
`}};b.styles=A`
|
|
698
722
|
:host {
|
|
723
|
+
--z-overlay: 99;
|
|
724
|
+
--z-panel: 100;
|
|
699
725
|
position: fixed;
|
|
700
726
|
top: 0;
|
|
701
727
|
right: 0;
|
|
702
728
|
height: 100%;
|
|
703
729
|
width: 100%;
|
|
704
|
-
z-index: 2147483647;
|
|
705
730
|
pointer-events: none;
|
|
706
731
|
}
|
|
707
732
|
|
|
@@ -713,6 +738,7 @@
|
|
|
713
738
|
opacity: 0;
|
|
714
739
|
transition: opacity 0.3s ease;
|
|
715
740
|
pointer-events: none;
|
|
741
|
+
z-index: var(--z-overlay);
|
|
716
742
|
}
|
|
717
743
|
|
|
718
744
|
:host([open]) .overlay {
|
|
@@ -735,6 +761,7 @@
|
|
|
735
761
|
display: flex;
|
|
736
762
|
flex-direction: column;
|
|
737
763
|
pointer-events: auto;
|
|
764
|
+
z-index: var(--z-panel);
|
|
738
765
|
}
|
|
739
766
|
|
|
740
767
|
:host([open]) .panel {
|
|
@@ -787,7 +814,7 @@
|
|
|
787
814
|
max-width: none;
|
|
788
815
|
}
|
|
789
816
|
}
|
|
790
|
-
`;y([a({type:Boolean,reflect:!0})],
|
|
817
|
+
`;y([a({type:Boolean,reflect:!0})],b.prototype,"open",2);y([a({type:Boolean,reflect:!0})],b.prototype,"showHeader",2);y([a({type:Boolean,reflect:!0})],b.prototype,"showFooter",2);y([a({type:String,reflect:!0})],b.prototype,"headerTitle",2);y([a({type:String,reflect:!0})],b.prototype,"closeButtonLabel",2);y([a({type:String,reflect:!0})],b.prototype,"firstButtonLabel",2);y([a({type:String,reflect:!0})],b.prototype,"firstButtonVariant",2);y([a({type:Function})],b.prototype,"onFirstButtonClick",2);y([a({type:String,reflect:!0})],b.prototype,"secondaryButtonLabel",2);y([a({type:String,reflect:!0})],b.prototype,"secondaryButtonVariant",2);y([a({type:Function})],b.prototype,"onSecondaryButtonClick",2);y([a({type:Boolean,reflect:!0})],b.prototype,"disablePortal",2);y([a({type:Number,reflect:!0})],b.prototype,"zIndex",2);b=y([H("o-side-panel")],b);var Ie=Object.defineProperty,Be=Object.getOwnPropertyDescriptor,P=(s,t,e,n)=>{for(var o=n>1?void 0:n?Be(t,e):t,i=s.length-1,r;i>=0;i--)(r=s[i])&&(o=(n?r(t,e,o):r(o))||o);return n&&o&&Ie(t,e,o),o};let w=class extends m{constructor(){super(...arguments),this.thumbnails=[],this.activeIndex=0,this.disabledIndexes=[],this.maxWidth="100%",this.focusedIndex=0}handleKeyDown(s){s.key==="ArrowRight"?(s.preventDefault(),this.focusNext()):s.key==="ArrowLeft"?(s.preventDefault(),this.focusPrevious()):(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.selectThumbnail(this.focusedIndex))}focusNext(){let s=this.focusedIndex+1;for(;this.disabledIndexes.includes(s)&&s<this.thumbnails.length;)s++;s<this.thumbnails.length&&(this.focusedIndex=s,this.focusThumbnail(s))}focusPrevious(){let s=this.focusedIndex-1;for(;this.disabledIndexes.includes(s)&&s>=0;)s--;s>=0&&(this.focusedIndex=s,this.focusThumbnail(s))}focusThumbnail(s){const t=this.renderRoot.querySelector(`[data-index="${s}"]`);t==null||t.focus()}selectThumbnail(s){this.disabledIndexes.includes(s)||(this.activeIndex=s,this.swiperInstance&&typeof this.swiperInstance.slideTo=="function"&&this.swiperInstance.slideTo(s),this.dispatchEvent(new CustomEvent("thumbnail-select",{detail:{index:s}})))}render(){return d`
|
|
791
818
|
<div class="scroll-container" style="max-width: ${this.maxWidth};">
|
|
792
819
|
${this.thumbnails.map((s,t)=>{const e=this.disabledIndexes.includes(t),n=this.activeIndex===t,o=s.type==="video";return d`
|
|
793
820
|
<div class="thumb-wrapper">
|
|
@@ -878,4 +905,4 @@
|
|
|
878
905
|
background-color: var(--color-border-normal, #ccc);
|
|
879
906
|
border-radius: 3px;
|
|
880
907
|
}
|
|
881
|
-
`;P([a({type:Array})],w.prototype,"thumbnails",2);P([a({type:Number})],w.prototype,"activeIndex",2);P([a({type:Array})],w.prototype,"disabledIndexes",2);P([a({type:Object})],w.prototype,"playIcon",2);P([a({type:String})],w.prototype,"maxWidth",2);P([a({type:Object})],w.prototype,"swiperInstance",2);P([Qt()],w.prototype,"focusedIndex",2);w=P([
|
|
908
|
+
`;P([a({type:Array})],w.prototype,"thumbnails",2);P([a({type:Number})],w.prototype,"activeIndex",2);P([a({type:Array})],w.prototype,"disabledIndexes",2);P([a({type:Object})],w.prototype,"playIcon",2);P([a({type:String})],w.prototype,"maxWidth",2);P([a({type:Object})],w.prototype,"swiperInstance",2);P([Qt()],w.prototype,"focusedIndex",2);w=P([H("thumbnail-navigation")],w);
|