@florid-kit/components 0.3.33 → 0.3.36
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/thumbnail-navigation.d.ts +27 -0
- package/index.js +144 -49
- package/index.mjs +583 -424
- package/package.json +1 -1
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
+
|
|
3
|
+
type ThumbnailItem = {
|
|
4
|
+
src: string;
|
|
5
|
+
type?: "image" | "video";
|
|
6
|
+
};
|
|
7
|
+
export declare class ThumbnailNavigation extends LitElement {
|
|
8
|
+
thumbnails: ThumbnailItem[];
|
|
9
|
+
activeIndex: number;
|
|
10
|
+
disabledIndexes: number[];
|
|
11
|
+
playIcon?: TemplateResult;
|
|
12
|
+
maxWidth: string;
|
|
13
|
+
private focusedIndex;
|
|
14
|
+
static styles: import('lit').CSSResult;
|
|
15
|
+
private handleKeyDown;
|
|
16
|
+
private focusNext;
|
|
17
|
+
private focusPrevious;
|
|
18
|
+
private focusThumbnail;
|
|
19
|
+
private selectThumbnail;
|
|
20
|
+
protected render(): TemplateResult<1>;
|
|
21
|
+
}
|
|
22
|
+
declare global {
|
|
23
|
+
interface HTMLElementTagNameMap {
|
|
24
|
+
"thumbnail-navigation": ThumbnailNavigation;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export {};
|
package/index.js
CHANGED
|
@@ -2,33 +2,37 @@
|
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const
|
|
5
|
+
*/const G=globalThis,ct=G.ShadowRoot&&(G.ShadyCSS===void 0||G.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ht=Symbol(),bt=new WeakMap;let Et=class{constructor(t,e,o){if(this._$cssResult$=!0,o!==ht)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(ct&&t===void 0){const o=e!==void 0&&e.length===1;o&&(t=bt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&bt.set(e,t))}return t}toString(){return this.cssText}};const Bt=s=>new Et(typeof s=="string"?s:s+"",void 0,ht),A=(s,...t)=>{const e=s.length===1?s[0]:t.reduce((o,n,r)=>o+(i=>{if(i._$cssResult$===!0)return i.cssText;if(typeof i=="number")return i;throw Error("Value passed to 'css' function must be a 'css' function result: "+i+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+s[r+1],s[0]);return new Et(e,s,ht)},It=(s,t)=>{if(ct)s.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const o=document.createElement("style"),n=G.litNonce;n!==void 0&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o)}},vt=ct?s=>s:s=>s instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return Bt(e)})(s):s;/**
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright 2017 Google LLC
|
|
8
8
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
|
-
*/const{is:
|
|
9
|
+
*/const{is:Ot,defineProperty:Ht,getOwnPropertyDescriptor:Mt,getOwnPropertyNames:Tt,getOwnPropertySymbols:zt,getPrototypeOf:Dt}=Object,C=globalThis,gt=C.trustedTypes,Ut=gt?gt.emptyScript:"",st=C.reactiveElementPolyfillSupport,R=(s,t)=>s,X={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}},dt=(s,t)=>!Ot(s,t),yt={attribute:!0,type:String,converter:X,reflect:!1,useDefault:!1,hasChanged:dt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),C.litPropertyMetadata??(C.litPropertyMetadata=new WeakMap);let z=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 o=Symbol(),n=this.getPropertyDescriptor(t,o,e);n!==void 0&&Ht(this.prototype,t,n)}}static getPropertyDescriptor(t,e,o){const{get:n,set:r}=Mt(this.prototype,t)??{get(){return this[e]},set(i){this[e]=i}};return{get:n,set(i){const c=n==null?void 0:n.call(this);r==null||r.call(this,i),this.requestUpdate(t,c,o)},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,o=[...Tt(e),...zt(e)];for(const n of o)this.createProperty(n,e[n])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[o,n]of e)this.elementProperties.set(o,n)}this._$Eh=new Map;for(const[e,o]of this.elementProperties){const n=this._$Eu(e,o);n!==void 0&&this._$Eh.set(n,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const n of o)e.unshift(vt(n))}else t!==void 0&&e.push(vt(t));return e}static _$Eu(t,e){const o=e.attribute;return o===!1?void 0:typeof o=="string"?o: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 o of e.keys())this.hasOwnProperty(o)&&(t.set(o,this[o]),delete this[o]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return It(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 o;return(o=e.hostConnected)==null?void 0:o.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var o;return(o=e.hostDisconnected)==null?void 0:o.call(e)})}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$ET(t,e){var r;const o=this.constructor.elementProperties.get(t),n=this.constructor._$Eu(t,o);if(n!==void 0&&o.reflect===!0){const i=(((r=o.converter)==null?void 0:r.toAttribute)!==void 0?o.converter:X).toAttribute(e,o.type);this._$Em=t,i==null?this.removeAttribute(n):this.setAttribute(n,i),this._$Em=null}}_$AK(t,e){var r,i;const o=this.constructor,n=o._$Eh.get(t);if(n!==void 0&&this._$Em!==n){const c=o.getPropertyOptions(n),l=typeof c.converter=="function"?{fromAttribute:c.converter}:((r=c.converter)==null?void 0:r.fromAttribute)!==void 0?c.converter:X;this._$Em=n,this[n]=l.fromAttribute(e,c.type)??((i=this._$Ej)==null?void 0:i.get(n))??null,this._$Em=null}}requestUpdate(t,e,o){var n;if(t!==void 0){const r=this.constructor,i=this[t];if(o??(o=r.getPropertyOptions(t)),!((o.hasChanged??dt)(i,e)||o.useDefault&&o.reflect&&i===((n=this._$Ej)==null?void 0:n.get(t))&&!this.hasAttribute(r._$Eu(t,o))))return;this.C(t,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:o,reflect:n,wrapped:r},i){o&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,i??e??this[t]),r!==!0||i!==void 0)||(this._$AL.has(t)||(this.hasUpdated||o||(e=void 0),this._$AL.set(t,e)),n===!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 o;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[r,i]of this._$Ep)this[r]=i;this._$Ep=void 0}const n=this.constructor.elementProperties;if(n.size>0)for(const[r,i]of n){const{wrapped:c}=i,l=this[r];c!==!0||this._$AL.has(r)||l===void 0||this.C(r,void 0,i,l)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(o=this._$EO)==null||o.forEach(n=>{var r;return(r=n.hostUpdate)==null?void 0:r.call(n)}),this.update(e)):this._$EM()}catch(n){throw t=!1,this._$EM(),n}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(o=>{var n;return(n=o.hostUpdated)==null?void 0:n.call(o)}),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){}};z.elementStyles=[],z.shadowRootOptions={mode:"open"},z[R("elementProperties")]=new Map,z[R("finalized")]=new Map,st==null||st({ReactiveElement:z}),(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]`,
|
|
15
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g")
|
|
13
|
+
*/const F=globalThis,J=F.trustedTypes,mt=J?J.createPolicy("lit-html",{createHTML:s=>s}):void 0,Ct="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,Lt="?"+E,Nt=`<${Lt}>`,I=document,V=()=>I.createComment(""),q=s=>s===null||typeof s!="object"&&typeof s!="function",pt=Array.isArray,jt=s=>pt(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,kt=/^(?:script|style|textarea|title)$/i,Rt=s=>(t,...e)=>({_$litType$:s,strings:t,values:e}),d=Rt(1),O=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),At=new WeakMap,P=I.createTreeWalker(I,129);function Pt(s,t){if(!pt(s)||!s.hasOwnProperty("raw"))throw Error("invalid template strings array");return mt!==void 0?mt.createHTML(t):t}const Ft=(s,t)=>{const e=s.length-1,o=[];let n,r=t===2?"<svg>":t===3?"<math>":"",i=j;for(let c=0;c<e;c++){const l=s[c];let f,b,p=-1,w=0;for(;w<l.length&&(i.lastIndex=w,b=i.exec(l),b!==null);)w=i.lastIndex,i===j?b[1]==="!--"?i=$t:b[1]!==void 0?i=wt:b[2]!==void 0?(kt.test(b[2])&&(n=RegExp("</"+b[2],"g")),i=k):b[3]!==void 0&&(i=k):i===k?b[0]===">"?(i=n??j,p=-1):b[1]===void 0?p=-2:(p=i.lastIndex-b[2].length,f=b[1],i=b[3]===void 0?k:b[3]==='"'?_t:xt):i===_t||i===xt?i=k:i===$t||i===wt?i=j:(i=k,n=void 0);const S=i===k&&s[c+1].startsWith("/>")?" ":"";r+=i===j?l+Nt:p>=0?(o.push(f),l.slice(0,p)+Ct+l.slice(p)+E+S):l+E+(p===-2?c:S)}return[Pt(s,r+(s[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),o]};class Z{constructor({strings:t,_$litType$:e},o){let n;this.parts=[];let r=0,i=0;const c=t.length-1,l=this.parts,[f,b]=Ft(t,e);if(this.el=Z.createElement(f,o),P.currentNode=this.el.content,e===2||e===3){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(n=P.nextNode())!==null&&l.length<c;){if(n.nodeType===1){if(n.hasAttributes())for(const p of n.getAttributeNames())if(p.endsWith(Ct)){const w=b[i++],S=n.getAttribute(p).split(E),K=/([.?@])?(.*)/.exec(w);l.push({type:1,index:r,name:K[2],strings:S,ctor:K[1]==="."?qt:K[1]==="?"?Zt:K[1]==="@"?Wt:Y}),n.removeAttribute(p)}else p.startsWith(E)&&(l.push({type:6,index:r}),n.removeAttribute(p));if(kt.test(n.tagName)){const p=n.textContent.split(E),w=p.length-1;if(w>0){n.textContent=J?J.emptyScript:"";for(let S=0;S<w;S++)n.append(p[S],V()),P.nextNode(),l.push({type:2,index:++r});n.append(p[w],V())}}}else if(n.nodeType===8)if(n.data===Lt)l.push({type:2,index:r});else{let p=-1;for(;(p=n.data.indexOf(E,p+1))!==-1;)l.push({type:7,index:r}),p+=E.length-1}r++}}static createElement(t,e){const o=I.createElement("template");return o.innerHTML=t,o}}function D(s,t,e=s,o){var i,c;if(t===O)return t;let n=o!==void 0?(i=e._$Co)==null?void 0:i[o]:e._$Cl;const r=q(t)?void 0:t._$litDirective$;return(n==null?void 0:n.constructor)!==r&&((c=n==null?void 0:n._$AO)==null||c.call(n,!1),r===void 0?n=void 0:(n=new r(s),n._$AT(s,e,o)),o!==void 0?(e._$Co??(e._$Co=[]))[o]=n:e._$Cl=n),n!==void 0&&(t=D(s,n._$AS(s,t.values),n,o)),t}class Vt{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:o}=this._$AD,n=((t==null?void 0:t.creationScope)??I).importNode(e,!0);P.currentNode=n;let r=P.nextNode(),i=0,c=0,l=o[0];for(;l!==void 0;){if(i===l.index){let f;l.type===2?f=new W(r,r.nextSibling,this,t):l.type===1?f=new l.ctor(r,l.name,l.strings,this,t):l.type===6&&(f=new Kt(r,this,t)),this._$AV.push(f),l=o[++c]}i!==(l==null?void 0:l.index)&&(r=P.nextNode(),i++)}return P.currentNode=I,n}p(t){let e=0;for(const o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++}}class W{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,o,n){this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=n,this._$Cv=(n==null?void 0:n.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!==O&&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(I.createTextNode(t)),this._$AH=t}$(t){var r;const{values:e,_$litType$:o}=t,n=typeof o=="number"?this._$AC(t):(o.el===void 0&&(o.el=Z.createElement(Pt(o.h,o.h[0]),this.options)),o);if(((r=this._$AH)==null?void 0:r._$AD)===n)this._$AH.p(e);else{const i=new Vt(n,this),c=i.u(this.options);i.p(e),this.T(c),this._$AH=i}}_$AC(t){let e=At.get(t.strings);return e===void 0&&At.set(t.strings,e=new Z(t)),e}k(t){pt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,n=0;for(const r of t)n===e.length?e.push(o=new W(this.O(V()),this.O(V()),this,this.options)):o=e[n],o._$AI(r),n++;n<e.length&&(this._$AR(o&&o._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){var o;for((o=this._$AP)==null?void 0:o.call(this,!1,!0,e);t&&t!==this._$AB;){const n=t.nextSibling;t.remove(),t=n}}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,o,n,r){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=r,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=h}_$AI(t,e=this,o,n){const r=this.strings;let i=!1;if(r===void 0)t=D(this,t,e,0),i=!q(t)||t!==this._$AH&&t!==O,i&&(this._$AH=t);else{const c=t;let l,f;for(t=r[0],l=0;l<r.length-1;l++)f=D(this,c[o+l],e,l),f===O&&(f=this._$AH[l]),i||(i=!q(f)||f!==this._$AH[l]),f===h?t=h:t!==h&&(t+=(f??"")+r[l+1]),this._$AH[l]=f}i&&!n&&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,o,n,r){super(t,e,o,n,r),this.type=5}_$AI(t,e=this){if((t=D(this,t,e,0)??h)===O)return;const o=this._$AH,n=t===h&&o!==h||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,r=t!==h&&(o===h||n);n&&this.element.removeEventListener(this.name,this,o),r&&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 Kt{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){D(this,t)}}const nt=F.litHtmlPolyfillSupport;nt==null||nt(Z,W),(F.litHtmlVersions??(F.litHtmlVersions=[])).push("3.3.0");const Gt=(s,t,e)=>{const o=(e==null?void 0:e.renderBefore)??t;let n=o._$litPart$;if(n===void 0){const r=(e==null?void 0:e.renderBefore)??null;o._$litPart$=n=new W(t.insertBefore(V(),r),r,void 0,e??{})}return n._$AI(s),n};/**
|
|
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 z{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=Gt(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 O}};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
|
|
27
|
+
*/const Xt={attribute:!0,type:String,converter:X,reflect:!1,hasChanged:dt},Jt=(s=Xt,t,e)=>{const{kind:o,metadata:n}=e;let r=globalThis.litPropertyMetadata.get(n);if(r===void 0&&globalThis.litPropertyMetadata.set(n,r=new Map),o==="setter"&&((s=Object.create(s)).wrapped=!0),r.set(e.name,s),o==="accessor"){const{name:i}=e;return{set(c){const l=t.get.call(this);t.set.call(this,c),this.requestUpdate(i,l,s)},init(c){return c!==void 0&&this.C(i,void 0,s,c),c}}}if(o==="setter"){const{name:i}=e;return function(c){const l=this[i];t.call(this,c),this.requestUpdate(i,l,s)}}throw Error("Unsupported decorator location: "+o)};function a(s){return(t,e)=>typeof e=="object"?Jt(s,t,e):((o,n,r)=>{const i=n.hasOwnProperty(r);return n.constructor.createProperty(r,o),i?Object.getOwnPropertyDescriptor(n,r):void 0})(s,t,e)}/**
|
|
28
|
+
* @license
|
|
29
|
+
* Copyright 2017 Google LLC
|
|
30
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
+
*/function Qt(s){return a({...s,state:!0,attribute:!1})}const Yt=A`
|
|
28
32
|
outline: 1px dashed var(--button-border-color);
|
|
29
33
|
outline-offset: 2px;
|
|
30
34
|
outline: dashed black;
|
|
31
|
-
`;
|
|
35
|
+
`;A`
|
|
32
36
|
:host * {
|
|
33
37
|
box-sizing: border-box;
|
|
34
38
|
}
|
|
@@ -36,57 +40,57 @@
|
|
|
36
40
|
* @license
|
|
37
41
|
* Copyright 2023 Google LLC
|
|
38
42
|
* SPDX-License-Identifier: Apache-2.0
|
|
39
|
-
*/const
|
|
43
|
+
*/const ut=Symbol("internals"),rt=Symbol("privateInternals");function te(s){var t;class e extends s{get[(t=ut,t)](){return this[rt]||(this[rt]=this.attachInternals()),this[rt]}}return e}/**
|
|
40
44
|
* @license
|
|
41
45
|
* Copyright 2023 Google LLC
|
|
42
46
|
* SPDX-License-Identifier: Apache-2.0
|
|
43
|
-
*/function
|
|
47
|
+
*/function ee(s){s.addInitializer(t=>{const e=t;e.addEventListener("click",async o=>{const{type:n,[ut]:r}=e,{form:i}=r;if(!(!i||n==="button")&&(await new Promise(c=>{setTimeout(c)}),!o.defaultPrevented)){if(n==="reset"){i.reset();return}i.addEventListener("submit",c=>{Object.defineProperty(c,"submitter",{configurable:!0,enumerable:!0,get:()=>e})},{capture:!0,once:!0}),r.setFormValue(e.value),i.requestSubmit()}})})}/**
|
|
44
48
|
* @license
|
|
45
49
|
* Copyright 2017 Google LLC
|
|
46
50
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
47
|
-
*/const
|
|
51
|
+
*/const se={CHILD:2},oe=s=>(...t)=>({_$litDirective$:s,values:t});class ne{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,o){this._$Ct=t,this._$AM=e,this._$Ci=o}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
|
|
48
52
|
* @license
|
|
49
53
|
* Copyright 2017 Google LLC
|
|
50
54
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
51
|
-
*/class
|
|
55
|
+
*/class at extends ne{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===O)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;/**
|
|
52
56
|
* @license
|
|
53
57
|
* Copyright 2017 Google LLC
|
|
54
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
55
|
-
*/class
|
|
59
|
+
*/class lt extends at{}lt.directiveName="unsafeSVG",lt.resultType=2;const Q=oe(lt),ie=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
56
60
|
<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"/>
|
|
57
61
|
</svg>
|
|
58
|
-
`,
|
|
62
|
+
`,re=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
59
63
|
<path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
|
|
60
64
|
</svg>
|
|
61
|
-
`,
|
|
65
|
+
`,ae=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
62
66
|
<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"/>
|
|
63
67
|
</svg>
|
|
64
|
-
`,
|
|
68
|
+
`,le=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
65
69
|
<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"/>
|
|
66
70
|
</svg>
|
|
67
|
-
`,
|
|
71
|
+
`,ce=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
68
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.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"/>
|
|
69
73
|
</svg>
|
|
70
|
-
`,
|
|
74
|
+
`,he=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
71
75
|
<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"/>
|
|
72
76
|
</svg>
|
|
73
|
-
`,
|
|
77
|
+
`,de=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
74
78
|
<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"/>
|
|
75
79
|
</svg>
|
|
76
|
-
`,
|
|
80
|
+
`,pe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
77
81
|
<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"/>
|
|
78
82
|
</svg>
|
|
79
|
-
`,
|
|
83
|
+
`,ue=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
80
84
|
<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"/>
|
|
81
85
|
</svg>
|
|
82
|
-
`,
|
|
86
|
+
`,fe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
83
87
|
<path d="M2 2L14 14" stroke="#3F2B2E"/>
|
|
84
88
|
<path d="M14 2L2 14" stroke="#3F2B2E"/>
|
|
85
89
|
</svg>
|
|
86
|
-
`,
|
|
90
|
+
`,be=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
87
91
|
<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"/>
|
|
88
92
|
</svg>
|
|
89
|
-
`,
|
|
93
|
+
`,ve=`<?xml version="1.0" encoding="utf-8"?>
|
|
90
94
|
<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
91
95
|
<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"
|
|
92
96
|
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
@@ -96,7 +100,7 @@
|
|
|
96
100
|
<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
|
|
97
101
|
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"/>
|
|
98
102
|
</svg>
|
|
99
|
-
`,
|
|
103
|
+
`,ge=`<?xml version="1.0" encoding="utf-8"?>
|
|
100
104
|
<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
101
105
|
<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"
|
|
102
106
|
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
@@ -105,10 +109,10 @@
|
|
|
105
109
|
</style>
|
|
106
110
|
<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"/>
|
|
107
111
|
</svg>
|
|
108
|
-
`,
|
|
112
|
+
`,ft={wishlist:ie,playerv:re,chevronRight:ae,chevronLeft:le,icoPlus:ve,icoMinus:ge,"star-0":ce,"star-25":he,"star-50":de,"star-75":pe,"star-100":ue,cross:fe,search:be};var ye=Object.defineProperty,me=Object.getOwnPropertyDescriptor,L=(s,t,e,o)=>{for(var n=o>1?void 0:o?me(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&ye(t,e,n),n};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=ft[this.icon]??"",t=`icon-${this.icon}`,e=s.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
109
113
|
${this.type==="span"?d`
|
|
110
114
|
<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">
|
|
111
|
-
${
|
|
115
|
+
${Q(e)}
|
|
112
116
|
</span>
|
|
113
117
|
`:d`
|
|
114
118
|
<button
|
|
@@ -117,10 +121,10 @@
|
|
|
117
121
|
class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
|
|
118
122
|
?disabled="${this.disabled}"
|
|
119
123
|
>
|
|
120
|
-
${
|
|
124
|
+
${Q(e)}
|
|
121
125
|
</button>
|
|
122
126
|
`}
|
|
123
|
-
`}};$.styles=
|
|
127
|
+
`}};$.styles=A`
|
|
124
128
|
:host {
|
|
125
129
|
display: inline-flex;
|
|
126
130
|
justify-content: center;
|
|
@@ -277,8 +281,8 @@
|
|
|
277
281
|
}
|
|
278
282
|
|
|
279
283
|
}
|
|
280
|
-
`;
|
|
281
|
-
class=${
|
|
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([H("o-icon-button")],$);var $e=Object.defineProperty,we=Object.getOwnPropertyDescriptor,v=(s,t,e,o)=>{for(var n=o>1?void 0:o?we(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&$e(t,e,n),n};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"}
|
|
282
286
|
icon=${this.icon}
|
|
283
287
|
bgstyle="${this.variant==="primary"?"none-light":"none-contrast"}"
|
|
284
288
|
size="${this.iconSize}"
|
|
@@ -286,16 +290,16 @@
|
|
|
286
290
|
type="span"
|
|
287
291
|
aria-hidden="true"
|
|
288
292
|
?disabled=${this.disabled}
|
|
289
|
-
></o-icon-button>`:h}renderButton(){const
|
|
293
|
+
></o-icon-button>`:h}renderButton(){const s=this.text||this.textsecond;return d`
|
|
290
294
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
291
295
|
${this.startIcon?this.renderIcon("start"):h}
|
|
292
|
-
${
|
|
296
|
+
${s?d`
|
|
293
297
|
${this.text?d`<span>${this.text}</span>`:h}
|
|
294
298
|
${this.textsecond?d`<span>${this.textsecond}</span>`:h}
|
|
295
299
|
`:d`<slot></slot>`}
|
|
296
300
|
${this.endIcon?this.renderIcon("end"):h}
|
|
297
301
|
</button>
|
|
298
|
-
`}renderLink(){const
|
|
302
|
+
`}renderLink(){const s=this.text||this.textsecond;return d`
|
|
299
303
|
<a
|
|
300
304
|
href=${this.href}
|
|
301
305
|
target=${this.target||h}
|
|
@@ -303,13 +307,13 @@
|
|
|
303
307
|
?disabled=${this.disabled}
|
|
304
308
|
>
|
|
305
309
|
${this.startIcon?this.renderIcon("start"):h}
|
|
306
|
-
${
|
|
310
|
+
${s?d`
|
|
307
311
|
${this.text?d`<span>${this.text}</span>`:h}
|
|
308
312
|
${this.textsecond?d`<span>${this.textsecond}</span>`:h}
|
|
309
313
|
`:d`<slot></slot>`}
|
|
310
314
|
${this.endIcon?this.renderIcon("end"):h}
|
|
311
315
|
</a>
|
|
312
|
-
`}};
|
|
316
|
+
`}};ee(u);u.formAssociated=!0;u.styles=A`
|
|
313
317
|
:host {
|
|
314
318
|
--button-border: transparent;
|
|
315
319
|
cursor: pointer;
|
|
@@ -408,7 +412,7 @@
|
|
|
408
412
|
}
|
|
409
413
|
|
|
410
414
|
.button:focus-visible {
|
|
411
|
-
${
|
|
415
|
+
${Yt};
|
|
412
416
|
}
|
|
413
417
|
|
|
414
418
|
span + span::before {
|
|
@@ -440,12 +444,12 @@
|
|
|
440
444
|
display: inline-flex;
|
|
441
445
|
align-items: center;
|
|
442
446
|
}
|
|
443
|
-
`;v([a()],u.prototype,"type",2);v([a({reflect:!0})],u.prototype,"value",2);v([a({type:String,reflect:!0})],u.prototype,"variant",2);v([a({type:String})],u.prototype,"text",2);v([a({type:String})],u.prototype,"textsecond",2);v([a({type:Boolean,reflect:!0})],u.prototype,"fullwidth",2);v([a({type:Boolean,reflect:!0})],u.prototype,"disabled",2);v([a({type:String,attribute:"iconstrokewidth"})],u.prototype,"iconstrokewidth",2);v([a({type:String})],u.prototype,"icon",2);v([a({type:Boolean,reflect:!0,attribute:"starticon"})],u.prototype,"startIcon",2);v([a({type:Boolean,reflect:!0,attribute:"endicon"})],u.prototype,"endIcon",2);v([a({type:String,reflect:!0,attribute:"iconsize"})],u.prototype,"iconSize",2);v([a({type:String,attribute:"paneltarget",reflect:!0})],u.prototype,"panelTarget",2);v([a({type:String})],u.prototype,"href",2);v([a({type:String})],u.prototype,"target",2);u=v([
|
|
447
|
+
`;v([a()],u.prototype,"type",2);v([a({reflect:!0})],u.prototype,"value",2);v([a({type:String,reflect:!0})],u.prototype,"variant",2);v([a({type:String})],u.prototype,"text",2);v([a({type:String})],u.prototype,"textsecond",2);v([a({type:Boolean,reflect:!0})],u.prototype,"fullwidth",2);v([a({type:Boolean,reflect:!0})],u.prototype,"disabled",2);v([a({type:String,attribute:"iconstrokewidth"})],u.prototype,"iconstrokewidth",2);v([a({type:String})],u.prototype,"icon",2);v([a({type:Boolean,reflect:!0,attribute:"starticon"})],u.prototype,"startIcon",2);v([a({type:Boolean,reflect:!0,attribute:"endicon"})],u.prototype,"endIcon",2);v([a({type:String,reflect:!0,attribute:"iconsize"})],u.prototype,"iconSize",2);v([a({type:String,attribute:"paneltarget",reflect:!0})],u.prototype,"panelTarget",2);v([a({type:String})],u.prototype,"href",2);v([a({type:String})],u.prototype,"target",2);u=v([H("o-button")],u);var _e=Object.defineProperty,Ae=Object.getOwnPropertyDescriptor,tt=(s,t,e,o)=>{for(var n=o>1?void 0:o?Ae(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&_e(t,e,n),n};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=ft.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
444
448
|
<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
|
|
445
449
|
<span class="sr-only">${this.label}</span>
|
|
446
|
-
${
|
|
450
|
+
${Q(s)}
|
|
447
451
|
</button>
|
|
448
|
-
`}setStatus(
|
|
452
|
+
`}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`
|
|
449
453
|
:host {
|
|
450
454
|
display: inline-flex;
|
|
451
455
|
justify-content: center;
|
|
@@ -504,7 +508,7 @@
|
|
|
504
508
|
width: 0.1rem !important;
|
|
505
509
|
white-space: nowrap !important;
|
|
506
510
|
}
|
|
507
|
-
`;
|
|
511
|
+
`;tt([a({type:String,reflect:!0})],U.prototype,"status",2);tt([a({type:String,reflect:!0})],U.prototype,"ariaDescribedBy",2);tt([a({type:String,reflect:!0})],U.prototype,"label",2);U=tt([H("o-wishlist-button")],U);var Se=Object.defineProperty,Ee=Object.getOwnPropertyDescriptor,M=(s,t,e,o)=>{for(var n=o>1?void 0:o?Ee(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&Se(t,e,n),n};let x=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`
|
|
508
512
|
<a href="${this.href}" target="${this.target}">
|
|
509
513
|
${this.endIcon&&this.reverseEndIcon?d`
|
|
510
514
|
<o-icon-button
|
|
@@ -526,7 +530,7 @@
|
|
|
526
530
|
></o-icon-button>
|
|
527
531
|
`:null}
|
|
528
532
|
</a>
|
|
529
|
-
`}};
|
|
533
|
+
`}};x.styles=A`
|
|
530
534
|
:host([template="standard"]) a {
|
|
531
535
|
color: var(--color-content-action-secondary);
|
|
532
536
|
font-size: var(--font-size-200);
|
|
@@ -613,14 +617,14 @@
|
|
|
613
617
|
height: 1px;
|
|
614
618
|
}
|
|
615
619
|
/* End of underline effect */
|
|
616
|
-
`;
|
|
620
|
+
`;M([a({type:String})],x.prototype,"href",2);M([a({type:String})],x.prototype,"target",2);M([a({type:String,reflect:!0})],x.prototype,"template",2);M([a({type:Boolean,reflect:!0})],x.prototype,"inverse",2);M([a({type:Boolean,reflect:!0})],x.prototype,"endIcon",2);M([a({type:Boolean,reflect:!0})],x.prototype,"reverseEndIcon",2);x=M([H("o-link")],x);var Ce=Object.defineProperty,Le=Object.getOwnPropertyDescriptor,et=(s,t,e,o)=>{for(var n=o>1?void 0:o?Le(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&Ce(t,e,n),n};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 o;e>=1?o=100:e<=0?o=0:o=Math.round(e*100/25)*25,s.push(`star-${o}`)}return s}render(){const s=this.getStarKeys();return d`
|
|
617
621
|
<div class="rating">
|
|
618
622
|
<div class="stars">
|
|
619
|
-
${
|
|
623
|
+
${s.map(t=>d`<span class="star">${Q(ft[t]??"")}</span>`)}
|
|
620
624
|
</div>
|
|
621
625
|
${this.reviewCount!=null&&this.href!=null?d`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
|
|
622
626
|
</div>
|
|
623
|
-
`}};
|
|
627
|
+
`}};N.styles=A`
|
|
624
628
|
svg {
|
|
625
629
|
width: 12px;
|
|
626
630
|
height: 12px;
|
|
@@ -653,7 +657,7 @@
|
|
|
653
657
|
text-decoration: underline;
|
|
654
658
|
cursor: pointer;
|
|
655
659
|
}
|
|
656
|
-
`;
|
|
660
|
+
`;et([a({type:Number})],N.prototype,"rating",2);et([a({type:String})],N.prototype,"reviewCount",2);et([a({type:String})],N.prototype,"href",2);N=et([H("o-rating")],N);var ke=Object.defineProperty,Pe=Object.getOwnPropertyDescriptor,y=(s,t,e,o)=>{for(var n=o>1?void 0:o?Pe(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&ke(t,e,n),n};let g=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.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],o=t[t.length-1];s.shiftKey&&document.activeElement===e?(s.preventDefault(),o.focus()):!s.shiftKey&&document.activeElement===o&&(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()}render(){return d`
|
|
657
661
|
<div class="overlay" @click=${this.closePanel}></div>
|
|
658
662
|
<div
|
|
659
663
|
class="panel"
|
|
@@ -695,7 +699,7 @@
|
|
|
695
699
|
</div>
|
|
696
700
|
`:null}
|
|
697
701
|
</div>
|
|
698
|
-
`}};
|
|
702
|
+
`}};g.styles=A`
|
|
699
703
|
:host {
|
|
700
704
|
position: fixed;
|
|
701
705
|
top: 0;
|
|
@@ -793,4 +797,95 @@
|
|
|
793
797
|
max-width: none;
|
|
794
798
|
}
|
|
795
799
|
}
|
|
796
|
-
`;y([a({type:Boolean,reflect:!0})],
|
|
800
|
+
`;y([a({type:Boolean,reflect:!0})],g.prototype,"open",2);y([a({type:Boolean,reflect:!0})],g.prototype,"showHeader",2);y([a({type:Boolean,reflect:!0})],g.prototype,"showFooter",2);y([a({type:String,reflect:!0})],g.prototype,"headerTitle",2);y([a({type:String,reflect:!0})],g.prototype,"closeButtonLabel",2);y([a({type:String,reflect:!0})],g.prototype,"firstButtonLabel",2);y([a({type:String,reflect:!0})],g.prototype,"firstButtonVariant",2);y([a({type:Function})],g.prototype,"onFirstButtonClick",2);y([a({type:String,reflect:!0})],g.prototype,"secondaryButtonLabel",2);y([a({type:String,reflect:!0})],g.prototype,"secondaryButtonVariant",2);y([a({type:Function})],g.prototype,"onSecondaryButtonClick",2);y([a({type:Boolean,reflect:!0})],g.prototype,"disablePortal",2);g=y([H("o-side-panel")],g);var Be=Object.defineProperty,Ie=Object.getOwnPropertyDescriptor,T=(s,t,e,o)=>{for(var n=o>1?void 0:o?Ie(t,e):t,r=s.length-1,i;r>=0;r--)(i=s[r])&&(n=(o?i(t,e,n):i(n))||n);return o&&n&&Be(t,e,n),n};let _=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.dispatchEvent(new CustomEvent("thumbnail-select",{detail:{index:s}})))}render(){return d`
|
|
801
|
+
<div class="scroll-container" style="max-width: ${this.maxWidth};">
|
|
802
|
+
${this.thumbnails.map((s,t)=>{const e=this.disabledIndexes.includes(t),o=this.activeIndex===t,n=s.type==="video";return d`
|
|
803
|
+
<div class="thumb-wrapper">
|
|
804
|
+
<button
|
|
805
|
+
class="thumb"
|
|
806
|
+
data-index="${t}"
|
|
807
|
+
?disabled=${e}
|
|
808
|
+
aria-selected=${o}
|
|
809
|
+
tabindex="${this.focusedIndex===t?0:-1}"
|
|
810
|
+
@click=${()=>this.selectThumbnail(t)}
|
|
811
|
+
@keydown=${this.handleKeyDown}
|
|
812
|
+
>
|
|
813
|
+
<img src="${s.src}" />
|
|
814
|
+
</button>
|
|
815
|
+
${n&&this.playIcon?d`<div class="play-icon-wrapper">${this.playIcon}</div>`:null}
|
|
816
|
+
</div>
|
|
817
|
+
`})}
|
|
818
|
+
</div>
|
|
819
|
+
`}};_.styles=A`
|
|
820
|
+
:host {
|
|
821
|
+
display: flex;
|
|
822
|
+
gap: 8px;
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
.thumb-wrapper {
|
|
826
|
+
position: relative;
|
|
827
|
+
display: inline-block;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.thumb {
|
|
831
|
+
width: 56px;
|
|
832
|
+
height: 70px;
|
|
833
|
+
background-size: cover;
|
|
834
|
+
background-position: center;
|
|
835
|
+
border: 1px solid var(--color-border-normal, #ccc);
|
|
836
|
+
opacity: 1;
|
|
837
|
+
cursor: pointer;
|
|
838
|
+
outline: none;
|
|
839
|
+
transition: border 0.2s, opacity 0.2s;
|
|
840
|
+
padding: 0;
|
|
841
|
+
margin: 0;
|
|
842
|
+
|
|
843
|
+
img {
|
|
844
|
+
width: 100%;
|
|
845
|
+
}
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.thumb[aria-selected="true"] {
|
|
849
|
+
border: 2px solid black;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.thumb[disabled] {
|
|
853
|
+
border: 1px solid var(--color-border-disabled, #eee);
|
|
854
|
+
opacity: 0.4;
|
|
855
|
+
pointer-events: none;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
.thumb:focus-visible {
|
|
859
|
+
outline: 2px solid black;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
.play-icon-wrapper {
|
|
863
|
+
position: absolute;
|
|
864
|
+
left: 50%;
|
|
865
|
+
top: 50%;
|
|
866
|
+
transform: translate(-50%, -50%);
|
|
867
|
+
pointer-events: none;
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
.scroll-container {
|
|
871
|
+
display: flex;
|
|
872
|
+
gap: 8px;
|
|
873
|
+
overflow-x: auto;
|
|
874
|
+
padding-bottom: 4px;
|
|
875
|
+
scrollbar-width: thin;
|
|
876
|
+
scrollbar-color: var(--color-border-normal, #ccc) transparent;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.scroll-container::-webkit-scrollbar {
|
|
880
|
+
height: 6px;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
.scroll-container::-webkit-scrollbar-track {
|
|
884
|
+
background: transparent;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
.scroll-container::-webkit-scrollbar-thumb {
|
|
888
|
+
background-color: var(--color-border-normal, #ccc);
|
|
889
|
+
border-radius: 3px;
|
|
890
|
+
}
|
|
891
|
+
`;T([a({type:Array})],_.prototype,"thumbnails",2);T([a({type:Number})],_.prototype,"activeIndex",2);T([a({type:Array})],_.prototype,"disabledIndexes",2);T([a({type:Object})],_.prototype,"playIcon",2);T([a({type:String})],_.prototype,"maxWidth",2);T([Qt()],_.prototype,"focusedIndex",2);_=T([H("thumbnail-navigation")],_);
|