@florid-kit/components 0.4.0 → 0.4.2
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/side-panel.d.ts +2 -0
- package/index.js +68 -44
- package/index.mjs +298 -268
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ export declare class OccitaneSidePanel extends LitElement {
|
|
|
13
13
|
secondaryButtonVariant: string;
|
|
14
14
|
onSecondaryButtonClick?: () => void;
|
|
15
15
|
disablePortal: boolean;
|
|
16
|
+
zIndex: number;
|
|
16
17
|
private previousFocusedElement;
|
|
17
18
|
static styles: import('lit').CSSResult;
|
|
18
19
|
connectedCallback(): void;
|
|
@@ -24,6 +25,7 @@ export declare class OccitaneSidePanel extends LitElement {
|
|
|
24
25
|
closePanel(): void;
|
|
25
26
|
private handleFirstClick;
|
|
26
27
|
private handleSecondaryClick;
|
|
28
|
+
protected updated(): void;
|
|
27
29
|
protected render(): import('lit').TemplateResult<1>;
|
|
28
30
|
}
|
|
29
31
|
declare global {
|
package/index.js
CHANGED
|
@@ -2,33 +2,33 @@
|
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
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,
|
|
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,s){if(this._$cssResult$=!0,s!==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 s=e!==void 0&&e.length===1;s&&(t=vt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&vt.set(e,t))}return t}toString(){return this.cssText}};const It=n=>new Et(typeof n=="string"?n:n+"",void 0,dt),A=(n,...t)=>{const e=n.length===1?n[0]:t.reduce((s,o,i)=>s+(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)+n[i+1],n[0]);return new Et(e,n,dt)},Bt=(n,t)=>{if(ht)n.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const s=document.createElement("style"),o=X.litNonce;o!==void 0&&s.setAttribute("nonce",o),s.textContent=e.cssText,n.appendChild(s)}},bt=ht?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return It(e)})(n):n;/**
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright 2017 Google LLC
|
|
8
8
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
|
-
*/const{is:Ot,defineProperty:Mt,getOwnPropertyDescriptor:
|
|
9
|
+
*/const{is:Ot,defineProperty:Mt,getOwnPropertyDescriptor:zt,getOwnPropertyNames:Ht,getOwnPropertySymbols:Tt,getPrototypeOf:Dt}=Object,C=globalThis,gt=C.trustedTypes,Ut=gt?gt.emptyScript:"",st=C.reactiveElementPolyfillSupport,R=(n,t)=>n,J={toAttribute(n,t){switch(t){case Boolean:n=n?Ut:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch{e=null}}return e}},pt=(n,t)=>!Ot(n,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 s=Symbol(),o=this.getPropertyDescriptor(t,s,e);o!==void 0&&Mt(this.prototype,t,o)}}static getPropertyDescriptor(t,e,s){const{get:o,set:i}=zt(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,s)},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,s=[...Ht(e),...Tt(e)];for(const o of s)this.createProperty(o,e[o])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,o]of e)this.elementProperties.set(s,o)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const o=this._$Eu(e,s);o!==void 0&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const o of s)e.unshift(bt(o))}else t!==void 0&&e.push(bt(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s: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 s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);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 s;return(s=e.hostConnected)==null?void 0:s.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)})}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var i;const s=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,s);if(o!==void 0&&s.reflect===!0){const r=(((i=s.converter)==null?void 0:i.toAttribute)!==void 0?s.converter:J).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){var i,r;const s=this.constructor,o=s._$Eh.get(t);if(o!==void 0&&this._$Em!==o){const c=s.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,s){var o;if(t!==void 0){const i=this.constructor,r=this[t];if(s??(s=i.getPropertyOptions(t)),!((s.hasChanged??pt)(r,e)||s.useDefault&&s.reflect&&r===((o=this._$Ej)==null?void 0:o.get(t))&&!this.hasAttribute(i._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:o,wrapped:i},r){s&&!(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||s||(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 s;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),(s=this._$EO)==null||s.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(s=>{var o;return(o=s.hostUpdated)==null?void 0:o.call(s)}),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,st==null||st({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 V=globalThis,Q=V.trustedTypes,mt=Q?Q.createPolicy("lit-html",{createHTML:
|
|
13
|
+
*/const V=globalThis,Q=V.trustedTypes,mt=Q?Q.createPolicy("lit-html",{createHTML:n=>n}):void 0,Ct="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,Lt="?"+E,Nt=`<${Lt}>`,O=document,F=()=>O.createComment(""),q=n=>n===null||typeof n!="object"&&typeof n!="function",ut=Array.isArray,jt=n=>ut(n)||typeof(n==null?void 0:n[Symbol.iterator])=="function",ot=`[
|
|
14
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=
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),xt=/'/g,_t=/"/g,Pt=/^(?:script|style|textarea|title)$/i,Rt=n=>(t,...e)=>({_$litType$:n,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(n,t){if(!ut(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return mt!==void 0?mt.createHTML(t):t}const Vt=(n,t)=>{const e=n.length-1,s=[];let o,i=t===2?"<svg>":t===3?"<math>":"",r=j;for(let c=0;c<e;c++){const l=n[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&&n[c+1].startsWith("/>")?" ":"";i+=r===j?l+Nt:p>=0?(s.push(f),l.slice(0,p)+Ct+l.slice(p)+E+S):l+E+(p===-2?c:S)}return[kt(n,i+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class Z{constructor({strings:t,_$litType$:e},s){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,s),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 s=O.createElement("template");return s.innerHTML=t,s}}function D(n,t,e=n,s){var r,c;if(t===M)return t;let o=s!==void 0?(r=e._$Co)==null?void 0:r[s]: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(n),o._$AT(n,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=o:e._$Cl=o),o!==void 0&&(t=D(n,o._$AS(n,t.values),o,s)),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:s}=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=s[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=s[++c]}r!==(l==null?void 0:l.index)&&(i=I.nextNode(),r++)}return I.currentNode=O,o}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class G{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,o){this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,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$:s}=t,o=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=Z.createElement(kt(s.h,s.h[0]),this.options)),s);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 s,o=0;for(const i of t)o===e.length?e.push(s=new G(this.O(F()),this.O(F()),this,this.options)):s=e[o],s._$AI(i),o++;o<e.length&&(this._$AR(s&&s._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.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,s,o,i){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=i,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=h}_$AI(t,e=this,s,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[s+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,s,o,i){super(t,e,s,o,i),this.type=5}_$AI(t,e=this){if((t=D(this,t,e,0)??h)===M)return;const s=this._$AH,o=t===h&&s!==h||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,i=t!==h&&(s===h||o);o&&this.element.removeEventListener(this.name,this,s),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,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}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=(n,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let o=s._$litPart$;if(o===void 0){const i=(e==null?void 0:e.renderBefore)??null;s._$litPart$=o=new G(t.insertBefore(F(),i),i,void 0,e??{})}return o._$AI(n),o};/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
-
*/const B=globalThis;let m=class extends
|
|
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 z=n=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(n,t)}):customElements.define(n,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:J,reflect:!1,hasChanged:pt},Jt=(
|
|
27
|
+
*/const Xt={attribute:!0,type:String,converter:J,reflect:!1,hasChanged:pt},Jt=(n=Xt,t,e)=>{const{kind:s,metadata:o}=e;let i=globalThis.litPropertyMetadata.get(o);if(i===void 0&&globalThis.litPropertyMetadata.set(o,i=new Map),s==="setter"&&((n=Object.create(n)).wrapped=!0),i.set(e.name,n),s==="accessor"){const{name:r}=e;return{set(c){const l=t.get.call(this);t.set.call(this,c),this.requestUpdate(r,l,n)},init(c){return c!==void 0&&this.C(r,void 0,n,c),c}}}if(s==="setter"){const{name:r}=e;return function(c){const l=this[r];t.call(this,c),this.requestUpdate(r,l,n)}}throw Error("Unsupported decorator location: "+s)};function a(n){return(t,e)=>typeof e=="object"?Jt(n,t,e):((s,o,i)=>{const r=o.hasOwnProperty(i);return o.constructor.createProperty(i,s),r?Object.getOwnPropertyDescriptor(o,i):void 0})(n,t,e)}/**
|
|
28
28
|
* @license
|
|
29
29
|
* Copyright 2017 Google LLC
|
|
30
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
-
*/function Qt(
|
|
31
|
+
*/function Qt(n){return a({...n,state:!0,attribute:!1})}const Yt=A`
|
|
32
32
|
outline: 1px dashed var(--button-border-color);
|
|
33
33
|
outline-offset: 2px;
|
|
34
34
|
outline: dashed black;
|
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2023 Google LLC
|
|
42
42
|
* SPDX-License-Identifier: Apache-2.0
|
|
43
|
-
*/const ft=Symbol("internals"),at=Symbol("privateInternals");function te(
|
|
43
|
+
*/const ft=Symbol("internals"),at=Symbol("privateInternals");function te(n){var t;class e extends n{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(
|
|
47
|
+
*/function ee(n){n.addInitializer(t=>{const e=t;e.addEventListener("click",async s=>{const{type:o,[ft]:i}=e,{form:r}=i;if(!(!r||o==="button")&&(await new Promise(c=>{setTimeout(c)}),!s.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 ne=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
48
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"/>
|
|
49
49
|
</svg>
|
|
50
|
-
`,
|
|
50
|
+
`,se=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
51
51
|
<path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
|
|
52
52
|
</svg>
|
|
53
53
|
`,oe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -97,11 +97,11 @@
|
|
|
97
97
|
</style>
|
|
98
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"/>
|
|
99
99
|
</svg>
|
|
100
|
-
`,tt={wishlist:
|
|
100
|
+
`,tt={wishlist:ne,playerv:se,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
101
|
* @license
|
|
102
102
|
* Copyright 2017 Google LLC
|
|
103
103
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
104
|
-
*/const ve={CHILD:2},be=
|
|
104
|
+
*/const ve={CHILD:2},be=n=>(...t)=>({_$litDirective$:n,values:t});class ge{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
|
|
105
105
|
* @license
|
|
106
106
|
* Copyright 2017 Google LLC
|
|
107
107
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -109,16 +109,16 @@
|
|
|
109
109
|
* @license
|
|
110
110
|
* Copyright 2017 Google LLC
|
|
111
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=(
|
|
112
|
+
*/class ct extends lt{}ct.directiveName="unsafeSVG",ct.resultType=2;const W=be(ct);var ye=Object.defineProperty,me=Object.getOwnPropertyDescriptor,g=(n,t,e,s)=>{for(var o=s>1?void 0:s?me(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&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(n){this.setAttribute("name",n)}get form(){return this[ft].form}handleClick(){if(this.panelTarget){const n=document.getElementById(this.panelTarget);n!=null&&n.openPanel&&typeof n.openPanel=="function"?n.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(n){const t=n==="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="${n==="start"?"icon-start":"icon-end"}">${W(e)}</span>`}renderButton(){const n=this.text||this.textsecond;return d`
|
|
113
113
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
114
114
|
${this.startIcon?this.renderIcon("start"):h}
|
|
115
|
-
${
|
|
115
|
+
${n?d`
|
|
116
116
|
${this.text?d`<span class="text">${this.text}</span>`:h}
|
|
117
117
|
${this.textsecond?d`<span class="text">${this.textsecond}</span>`:h}
|
|
118
118
|
`:d`<slot></slot>`}
|
|
119
119
|
${this.endIcon?this.renderIcon("end"):h}
|
|
120
120
|
</button>
|
|
121
|
-
`}renderLink(){const
|
|
121
|
+
`}renderLink(){const n=this.text||this.textsecond;return d`
|
|
122
122
|
<a
|
|
123
123
|
href=${this.href}
|
|
124
124
|
target=${this.target||h}
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
?disabled=${this.disabled}
|
|
127
127
|
>
|
|
128
128
|
${this.startIcon?this.renderIcon("start"):h}
|
|
129
|
-
${
|
|
129
|
+
${n?d`
|
|
130
130
|
${this.text?d`<span>${this.text}</span>`:h}
|
|
131
131
|
${this.textsecond?d`<span>${this.textsecond}</span>`:h}
|
|
132
132
|
`:d`<slot></slot>`}
|
|
@@ -152,8 +152,8 @@
|
|
|
152
152
|
--button-border: transparent;
|
|
153
153
|
--button-border-width: var(--border-m);
|
|
154
154
|
--button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
|
|
155
|
-
--button-starticon-svg-width: 0px; /* No SVG for primary button */
|
|
156
|
-
--button-endicon-svg-width: 0px; /* No SVG for primary button */
|
|
155
|
+
--button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
|
|
156
|
+
--button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
:host([variant="secondary"]) {
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
--button-border-width: var(--border-m);
|
|
167
167
|
--button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
|
|
168
168
|
--button-starticon-svg-width: 16px;
|
|
169
|
-
--button-endicon-svg-width: 0px; /* No SVG for
|
|
169
|
+
--button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
:host([variant="ghost"]) {
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
--button-border-width: 0;
|
|
179
179
|
--button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);
|
|
180
180
|
--button-starticon-svg-width: 16px;
|
|
181
|
-
--button-endicon-svg-width: 12px;
|
|
181
|
+
--button-endicon-svg-width: 12px;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
:host([variant="tertiary"]) {
|
|
@@ -189,8 +189,8 @@
|
|
|
189
189
|
--button-text-hover: var(--color-content-action-tertiary);
|
|
190
190
|
--button-border-width: 0;
|
|
191
191
|
--button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px);
|
|
192
|
-
--button-starticon-svg-width: 0px;
|
|
193
|
-
--button-endicon-svg-width: 8px;
|
|
192
|
+
--button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
|
|
193
|
+
--button-endicon-svg-width: 8px;
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
:host([disabled]),
|
|
@@ -290,12 +290,12 @@
|
|
|
290
290
|
transform: translateX(4px);
|
|
291
291
|
}
|
|
292
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([
|
|
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([z("o-button")],u);var we=Object.defineProperty,xe=Object.getOwnPropertyDescriptor,et=(n,t,e,s)=>{for(var o=s>1?void 0:s?xe(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&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(n){(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.toggleStatus())}render(){const n=tt.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
294
294
|
<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
|
|
295
295
|
<span class="sr-only">${this.label}</span>
|
|
296
|
-
${W(
|
|
296
|
+
${W(n)}
|
|
297
297
|
</button>
|
|
298
|
-
`}setStatus(
|
|
298
|
+
`}setStatus(n){this.status=n,this.setAttribute("aria-pressed",String(this.status==="filled")),this.requestUpdate()}setAriaDescribedBy(n){this.ariaDescribedBy=n,this.requestUpdate()}setLabel(n){this.label=n,this.requestUpdate()}};U.styles=A`
|
|
299
299
|
:host {
|
|
300
300
|
display: inline-flex;
|
|
301
301
|
justify-content: center;
|
|
@@ -354,7 +354,7 @@
|
|
|
354
354
|
width: 0.1rem !important;
|
|
355
355
|
white-space: nowrap !important;
|
|
356
356
|
}
|
|
357
|
-
`;et([a({type:String,reflect:!0})],
|
|
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([z("o-wishlist-button")],U);var _e=Object.defineProperty,Ae=Object.getOwnPropertyDescriptor,L=(n,t,e,s)=>{for(var o=s>1?void 0:s?Ae(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&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(n){super.updated(n),this.style.setProperty("--icon-stroke-width",this.strokewidth)}render(){const n=tt[this.icon]??"",t=`icon-${this.icon}`,e=n.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
358
358
|
${this.type==="span"?d`
|
|
359
359
|
<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">
|
|
360
360
|
${W(e)}
|
|
@@ -526,7 +526,7 @@
|
|
|
526
526
|
}
|
|
527
527
|
|
|
528
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([
|
|
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([z("o-icon-button")],$);var Se=Object.defineProperty,Ee=Object.getOwnPropertyDescriptor,H=(n,t,e,s)=>{for(var o=s>1?void 0:s?Ee(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&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`
|
|
530
530
|
<a href="${this.href}" target="${this.target}">
|
|
531
531
|
${this.endIcon&&this.reverseEndIcon?d`
|
|
532
532
|
<o-icon-button
|
|
@@ -635,10 +635,10 @@
|
|
|
635
635
|
height: 1px;
|
|
636
636
|
}
|
|
637
637
|
/* End of underline effect */
|
|
638
|
-
`;
|
|
638
|
+
`;H([a({type:String})],_.prototype,"href",2);H([a({type:String})],_.prototype,"target",2);H([a({type:String,reflect:!0})],_.prototype,"template",2);H([a({type:Boolean,reflect:!0})],_.prototype,"inverse",2);H([a({type:Boolean,reflect:!0})],_.prototype,"endIcon",2);H([a({type:Boolean,reflect:!0})],_.prototype,"reverseEndIcon",2);_=H([z("o-link")],_);var Ce=Object.defineProperty,Le=Object.getOwnPropertyDescriptor,nt=(n,t,e,s)=>{for(var o=s>1?void 0:s?Le(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&o&&Ce(t,e,o),o};let N=class extends m{constructor(){super(...arguments),this.rating=0}getStarKeys(){const n=[];for(let t=0;t<5;t++){const e=this.rating-t;let s;e>=1?s=100:e<=0?s=0:s=Math.round(e*100/25)*25,n.push(`star-${s}`)}return n}render(){const n=this.getStarKeys();return d`
|
|
639
639
|
<div class="rating">
|
|
640
640
|
<div class="stars">
|
|
641
|
-
${
|
|
641
|
+
${n.map(t=>d`<span class="star">${W(tt[t]??"")}</span>`)}
|
|
642
642
|
</div>
|
|
643
643
|
${this.reviewCount!=null&&this.href!=null?d`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
|
|
644
644
|
</div>
|
|
@@ -675,13 +675,14 @@
|
|
|
675
675
|
text-decoration: underline;
|
|
676
676
|
cursor: pointer;
|
|
677
677
|
}
|
|
678
|
-
`;
|
|
679
|
-
<div class="overlay" @click=${this.closePanel}></div>
|
|
678
|
+
`;nt([a({type:Number})],N.prototype,"rating",2);nt([a({type:String})],N.prototype,"reviewCount",2);nt([a({type:String})],N.prototype,"href",2);N=nt([z("o-rating")],N);var Pe=Object.defineProperty,ke=Object.getOwnPropertyDescriptor,y=(n,t,e,s)=>{for(var o=s>1?void 0:s?ke(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&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=n=>{this.open&&(n.key==="Escape"?this.closePanel():n.key==="Tab"&&this.trapFocus(n))}}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(n){const t=this.getFocusableElements();if(t.length===0)return;const e=t[0],s=t[t.length-1];n.shiftKey&&document.activeElement===e?(n.preventDefault(),s.focus()):!n.shiftKey&&document.activeElement===s&&(n.preventDefault(),e.focus())}getFocusableElements(){const n=this.renderRoot.querySelector(".panel");return n?Array.from(n.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 n=this.getFocusableElements()[0];n==null||n.focus()})}closePanel(){var n;this.open=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),(n=this.previousFocusedElement)==null||n.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>
|
|
680
680
|
<div
|
|
681
681
|
class="panel"
|
|
682
682
|
role="dialog"
|
|
683
683
|
aria-modal="true"
|
|
684
684
|
aria-labelledby="panel-title"
|
|
685
|
+
style="z-index: ${this.zIndex+1}"
|
|
685
686
|
>
|
|
686
687
|
<o-icon-button icon="cross" size="medium" class="close-btn" @click=${this.closePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
|
|
687
688
|
|
|
@@ -719,12 +720,13 @@
|
|
|
719
720
|
</div>
|
|
720
721
|
`}};b.styles=A`
|
|
721
722
|
:host {
|
|
723
|
+
--z-overlay: 99;
|
|
724
|
+
--z-panel: 100;
|
|
722
725
|
position: fixed;
|
|
723
726
|
top: 0;
|
|
724
727
|
right: 0;
|
|
725
728
|
height: 100%;
|
|
726
729
|
width: 100%;
|
|
727
|
-
z-index: 2147483647;
|
|
728
730
|
pointer-events: none;
|
|
729
731
|
}
|
|
730
732
|
|
|
@@ -736,6 +738,7 @@
|
|
|
736
738
|
opacity: 0;
|
|
737
739
|
transition: opacity 0.3s ease;
|
|
738
740
|
pointer-events: none;
|
|
741
|
+
z-index: var(--z-overlay);
|
|
739
742
|
}
|
|
740
743
|
|
|
741
744
|
:host([open]) .overlay {
|
|
@@ -758,6 +761,7 @@
|
|
|
758
761
|
display: flex;
|
|
759
762
|
flex-direction: column;
|
|
760
763
|
pointer-events: auto;
|
|
764
|
+
z-index: var(--z-panel);
|
|
761
765
|
}
|
|
762
766
|
|
|
763
767
|
:host([open]) .panel {
|
|
@@ -810,20 +814,20 @@
|
|
|
810
814
|
max-width: none;
|
|
811
815
|
}
|
|
812
816
|
}
|
|
813
|
-
`;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);b=y([
|
|
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([z("o-side-panel")],b);var Ie=Object.defineProperty,Be=Object.getOwnPropertyDescriptor,P=(n,t,e,s)=>{for(var o=s>1?void 0:s?Be(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(o=(s?r(t,e,o):r(o))||o);return s&&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(n){n.key==="ArrowRight"?(n.preventDefault(),this.focusNext()):n.key==="ArrowLeft"?(n.preventDefault(),this.focusPrevious()):(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.selectThumbnail(this.focusedIndex))}focusNext(){let n=this.focusedIndex+1;for(;this.disabledIndexes.includes(n)&&n<this.thumbnails.length;)n++;n<this.thumbnails.length&&(this.focusedIndex=n,this.focusThumbnail(n))}focusPrevious(){let n=this.focusedIndex-1;for(;this.disabledIndexes.includes(n)&&n>=0;)n--;n>=0&&(this.focusedIndex=n,this.focusThumbnail(n))}focusThumbnail(n){const t=this.renderRoot.querySelector(`[data-index="${n}"]`);t==null||t.focus()}selectThumbnail(n){this.disabledIndexes.includes(n)||(this.activeIndex=n,this.swiperInstance&&typeof this.swiperInstance.slideTo=="function"&&this.swiperInstance.slideTo(n),this.dispatchEvent(new CustomEvent("thumbnail-select",{detail:{index:n}})))}render(){return d`
|
|
814
818
|
<div class="scroll-container" style="max-width: ${this.maxWidth};">
|
|
815
|
-
${this.thumbnails.map((
|
|
819
|
+
${this.thumbnails.map((n,t)=>{const e=this.disabledIndexes.includes(t),s=this.activeIndex===t,o=n.type==="video";return d`
|
|
816
820
|
<div class="thumb-wrapper">
|
|
817
821
|
<button
|
|
818
822
|
class="thumb"
|
|
819
823
|
data-index="${t}"
|
|
820
824
|
?disabled=${e}
|
|
821
|
-
aria-selected=${
|
|
825
|
+
aria-selected=${s}
|
|
822
826
|
tabindex="${this.focusedIndex===t?0:-1}"
|
|
823
827
|
@click=${()=>this.selectThumbnail(t)}
|
|
824
828
|
@keydown=${this.handleKeyDown}
|
|
825
829
|
>
|
|
826
|
-
<img src="${
|
|
830
|
+
<img src="${n.src}" />
|
|
827
831
|
</button>
|
|
828
832
|
${o?d`<div class="play-icon-wrapper">${this.playIcon}</div>`:null}
|
|
829
833
|
</div>
|
|
@@ -832,7 +836,7 @@
|
|
|
832
836
|
`}};w.styles=A`
|
|
833
837
|
:host {
|
|
834
838
|
display: flex;
|
|
835
|
-
gap:
|
|
839
|
+
gap: 5px;
|
|
836
840
|
}
|
|
837
841
|
|
|
838
842
|
.thumb-wrapper {
|
|
@@ -845,21 +849,26 @@
|
|
|
845
849
|
height: 70px;
|
|
846
850
|
background-size: cover;
|
|
847
851
|
background-position: center;
|
|
848
|
-
border: 1px solid var(--color-border-
|
|
852
|
+
border: 1px solid var(--color-border-secondary);
|
|
849
853
|
opacity: 1;
|
|
850
854
|
cursor: pointer;
|
|
851
855
|
outline: none;
|
|
852
856
|
transition: border 0.2s, opacity 0.2s;
|
|
853
857
|
padding: 0;
|
|
854
858
|
margin: 0;
|
|
859
|
+
box-sizing: content-box;
|
|
855
860
|
|
|
856
861
|
img {
|
|
857
862
|
width: 100%;
|
|
863
|
+
height: auto;
|
|
864
|
+
max-width: 100%;
|
|
865
|
+
border: 1px solid var(--color-container-white);
|
|
866
|
+
box-sizing: border-box;
|
|
858
867
|
}
|
|
859
868
|
}
|
|
860
869
|
|
|
861
870
|
.thumb[aria-selected="true"] {
|
|
862
|
-
border:
|
|
871
|
+
border: 1px solid var(--color-border-primary);
|
|
863
872
|
}
|
|
864
873
|
|
|
865
874
|
.thumb[disabled] {
|
|
@@ -869,7 +878,7 @@
|
|
|
869
878
|
}
|
|
870
879
|
|
|
871
880
|
.thumb:focus-visible {
|
|
872
|
-
outline: 2px solid
|
|
881
|
+
outline: 2px solid var(--color-border-secondary);
|
|
873
882
|
}
|
|
874
883
|
|
|
875
884
|
.play-icon-wrapper {
|
|
@@ -890,7 +899,7 @@
|
|
|
890
899
|
}
|
|
891
900
|
|
|
892
901
|
.scroll-container::-webkit-scrollbar {
|
|
893
|
-
height:
|
|
902
|
+
height: 2px;
|
|
894
903
|
}
|
|
895
904
|
|
|
896
905
|
.scroll-container::-webkit-scrollbar-track {
|
|
@@ -898,7 +907,22 @@
|
|
|
898
907
|
}
|
|
899
908
|
|
|
900
909
|
.scroll-container::-webkit-scrollbar-thumb {
|
|
901
|
-
background-color: var(--color-
|
|
910
|
+
background-color: var(--color-neutral-grey);
|
|
902
911
|
border-radius: 3px;
|
|
903
912
|
}
|
|
904
|
-
|
|
913
|
+
|
|
914
|
+
::slotted(.scroll-container) {
|
|
915
|
+
scrollbar-width: none;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
::slotted(.scroll-container)::-webkit-scrollbar {
|
|
919
|
+
height: 2px;
|
|
920
|
+
background: transparent;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
::slotted(.scroll-container)::-webkit-scrollbar-button {
|
|
924
|
+
display: none;
|
|
925
|
+
height: 0;
|
|
926
|
+
width: 0;
|
|
927
|
+
}
|
|
928
|
+
`;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([z("thumbnail-navigation")],w);
|