@florid-kit/components 0.4.6 → 0.4.8
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/icon-button.d.ts +1 -1
- package/components/thumbnail-navigation.d.ts +3 -3
- package/index.js +120 -73
- package/index.mjs +388 -344
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
|
|
3
3
|
type bgstyle = "background-light" | "background-contrast" | "ghost-light" | "ghost-contrast" | "none-light" | "none-contrast";
|
|
4
|
-
type size = "small" | "medium" | "large";
|
|
4
|
+
type size = "smallxs" | "small" | "medium" | "large";
|
|
5
5
|
type status = "empty" | "filled";
|
|
6
6
|
type type = "button" | "span";
|
|
7
7
|
export declare class OccitaneIconButton extends LitElement {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
2
|
|
|
3
3
|
type ThumbnailItem = {
|
|
4
4
|
src: string;
|
|
@@ -8,19 +8,19 @@ export declare class ThumbnailNavigation extends LitElement {
|
|
|
8
8
|
thumbnails: ThumbnailItem[];
|
|
9
9
|
activeIndex: number;
|
|
10
10
|
disabledIndexes: number[];
|
|
11
|
-
playIcon?: TemplateResult;
|
|
12
11
|
maxWidth: string;
|
|
13
12
|
swiperInstance?: {
|
|
14
13
|
slideTo: (index: number) => void;
|
|
15
14
|
};
|
|
16
15
|
private focusedIndex;
|
|
16
|
+
private readonly playerIconTemplate;
|
|
17
17
|
static styles: import('lit').CSSResult;
|
|
18
18
|
private handleKeyDown;
|
|
19
19
|
private focusNext;
|
|
20
20
|
private focusPrevious;
|
|
21
21
|
private focusThumbnail;
|
|
22
22
|
private selectThumbnail;
|
|
23
|
-
protected render(): TemplateResult<1>;
|
|
23
|
+
protected render(): import('lit').TemplateResult<1>;
|
|
24
24
|
}
|
|
25
25
|
declare global {
|
|
26
26
|
interface HTMLElementTagNameMap {
|
package/index.js
CHANGED
|
@@ -2,29 +2,29 @@
|
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const X=globalThis,ht=X.ShadowRoot&&(X.ShadyCSS===void 0||X.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,dt=Symbol(),
|
|
5
|
+
*/const X=globalThis,ht=X.ShadowRoot&&(X.ShadyCSS===void 0||X.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,dt=Symbol(),ft=new WeakMap;let St=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=ft.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&ft.set(e,t))}return t}toString(){return this.cssText}};const It=n=>new St(typeof n=="string"?n:n+"",void 0,dt),A=(n,...t)=>{const e=n.length===1?n[0]:t.reduce((s,o,r)=>s+(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.")})(o)+n[r+1],n[0]);return new St(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:zt,getOwnPropertyDescriptor:Mt,getOwnPropertyNames:Ht,getOwnPropertySymbols:Tt,getPrototypeOf:Dt}=Object,C=globalThis,gt=C.trustedTypes,Ut=gt?gt.emptyScript:"",
|
|
9
|
+
*/const{is:Ot,defineProperty:zt,getOwnPropertyDescriptor:Mt,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&&zt(this.prototype,t,o)}}static getPropertyDescriptor(t,e,s){const{get:o,set:r}=Mt(this.prototype,t)??{get(){return this[e]},set(i){this[e]=i}};return{get:o,set(i){const c=o==null?void 0:o.call(this);r==null||r.call(this,i),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 r;const s=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,s);if(o!==void 0&&s.reflect===!0){const i=(((r=s.converter)==null?void 0:r.toAttribute)!==void 0?s.converter:J).toAttribute(e,s.type);this._$Em=t,i==null?this.removeAttribute(o):this.setAttribute(o,i),this._$Em=null}}_$AK(t,e){var r,i;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}:((r=c.converter)==null?void 0:r.fromAttribute)!==void 0?c.converter:J;this._$Em=o,this[o]=l.fromAttribute(e,c.type)??((i=this._$Ej)==null?void 0:i.get(o))??null,this._$Em=null}}requestUpdate(t,e,s){var o;if(t!==void 0){const r=this.constructor,i=this[t];if(s??(s=r.getPropertyOptions(t)),!((s.hasChanged??pt)(i,e)||s.useDefault&&s.reflect&&i===((o=this._$Ej)==null?void 0:o.get(t))&&!this.hasAttribute(r._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:o,wrapped:r},i){s&&!(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||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[r,i]of this._$Ep)this[r]=i;this._$Ep=void 0}const o=this.constructor.elementProperties;if(o.size>0)for(const[r,i]of o){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),(s=this._$EO)==null||s.forEach(o=>{var r;return(r=o.hostUpdate)==null?void 0:r.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:n=>n}):void 0,Ct="$lit$",
|
|
14
|
-
\f\r]`,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$t=/-->/g,wt=/>/g,
|
|
15
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),xt=/'/g,_t=/"/g,Pt=/^(?:script|style|textarea|title)$/i,Rt=n=>(t,...e)=>({_$litType$:n,strings:t,values:e}),
|
|
13
|
+
*/const V=globalThis,Q=V.trustedTypes,mt=Q?Q.createPolicy("lit-html",{createHTML:n=>n}):void 0,Ct="$lit$",S=`lit$${Math.random().toFixed(9).slice(2)}$`,Lt="?"+S,Nt=`<${Lt}>`,B=document,F=()=>B.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
|
+
\f\r]`,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$t=/-->/g,wt=/>/g,P=RegExp(`>|${ot}(?:([^\\s"'>=/]+)(${ot}*=${ot}*(?:[^
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),xt=/'/g,_t=/"/g,Pt=/^(?:script|style|textarea|title)$/i,Rt=n=>(t,...e)=>({_$litType$:n,strings:t,values:e}),h=Rt(1),O=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),At=new WeakMap,k=B.createTreeWalker(B,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,r=t===2?"<svg>":t===3?"<math>":"",i=j;for(let c=0;c<e;c++){const l=n[c];let v,f,p=-1,w=0;for(;w<l.length&&(i.lastIndex=w,f=i.exec(l),f!==null);)w=i.lastIndex,i===j?f[1]==="!--"?i=$t:f[1]!==void 0?i=wt:f[2]!==void 0?(Pt.test(f[2])&&(o=RegExp("</"+f[2],"g")),i=P):f[3]!==void 0&&(i=P):i===P?f[0]===">"?(i=o??j,p=-1):f[1]===void 0?p=-2:(p=i.lastIndex-f[2].length,v=f[1],i=f[3]===void 0?P:f[3]==='"'?_t:xt):i===_t||i===xt?i=P:i===$t||i===wt?i=j:(i=P,o=void 0);const E=i===P&&n[c+1].startsWith("/>")?" ":"";r+=i===j?l+Nt:p>=0?(s.push(v),l.slice(0,p)+Ct+l.slice(p)+S+E):l+S+(p===-2?c:E)}return[kt(n,r+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class Z{constructor({strings:t,_$litType$:e},s){let o;this.parts=[];let r=0,i=0;const c=t.length-1,l=this.parts,[v,f]=Vt(t,e);if(this.el=Z.createElement(v,s),k.currentNode=this.el.content,e===2||e===3){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(o=k.nextNode())!==null&&l.length<c;){if(o.nodeType===1){if(o.hasAttributes())for(const p of o.getAttributeNames())if(p.endsWith(Ct)){const w=f[i++],E=o.getAttribute(p).split(S),K=/([.?@])?(.*)/.exec(w);l.push({type:1,index:r,name:K[2],strings:E,ctor:K[1]==="."?qt:K[1]==="?"?Zt:K[1]==="@"?Wt:Y}),o.removeAttribute(p)}else p.startsWith(S)&&(l.push({type:6,index:r}),o.removeAttribute(p));if(Pt.test(o.tagName)){const p=o.textContent.split(S),w=p.length-1;if(w>0){o.textContent=Q?Q.emptyScript:"";for(let E=0;E<w;E++)o.append(p[E],F()),k.nextNode(),l.push({type:2,index:++r});o.append(p[w],F())}}}else if(o.nodeType===8)if(o.data===Lt)l.push({type:2,index:r});else{let p=-1;for(;(p=o.data.indexOf(S,p+1))!==-1;)l.push({type:7,index:r}),p+=S.length-1}r++}}static createElement(t,e){const s=B.createElement("template");return s.innerHTML=t,s}}function D(n,t,e=n,s){var i,c;if(t===O)return t;let o=s!==void 0?(i=e._$Co)==null?void 0:i[s]:e._$Cl;const r=q(t)?void 0:t._$litDirective$;return(o==null?void 0:o.constructor)!==r&&((c=o==null?void 0:o._$AO)==null||c.call(o,!1),r===void 0?o=void 0:(o=new r(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)??B).importNode(e,!0);k.currentNode=o;let r=k.nextNode(),i=0,c=0,l=s[0];for(;l!==void 0;){if(i===l.index){let v;l.type===2?v=new G(r,r.nextSibling,this,t):l.type===1?v=new l.ctor(r,l.name,l.strings,this,t):l.type===6&&(v=new Gt(r,this,t)),this._$AV.push(v),l=s[++c]}i!==(l==null?void 0:l.index)&&(r=k.nextNode(),i++)}return k.currentNode=B,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=d,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===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):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!==d&&q(this._$AH)?this._$AA.nextSibling.data=t:this.T(B.createTextNode(t)),this._$AH=t}$(t){var r;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(((r=this._$AH)==null?void 0:r._$AD)===o)this._$AH.p(e);else{const i=new Ft(o,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){ut(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,o=0;for(const r of t)o===e.length?e.push(s=new G(this.O(F()),this.O(F()),this,this.options)):s=e[o],s._$AI(r),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,r){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=r,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d}_$AI(t,e=this,s,o){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,v;for(t=r[0],l=0;l<r.length-1;l++)v=D(this,c[s+l],e,l),v===O&&(v=this._$AH[l]),i||(i=!q(v)||v!==this._$AH[l]),v===d?t=d:t!==d&&(t+=(v??"")+r[l+1]),this._$AH[l]=v}i&&!o&&this.j(t)}j(t){t===d?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===d?void 0:t}}class Zt extends Y{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d)}}class Wt extends Y{constructor(t,e,s,o,r){super(t,e,s,o,r),this.type=5}_$AI(t,e=this){if((t=D(this,t,e,0)??d)===O)return;const s=this._$AH,o=t===d&&s!==d||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==d&&(s===d||o);o&&this.element.removeEventListener(this.name,this,s),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 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 it=V.litHtmlPolyfillSupport;it==null||it(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 r=(e==null?void 0:e.renderBefore)??null;s._$litPart$=o=new G(t.insertBefore(F(),r),r,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
|
|
19
|
+
*/const I=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 O}};var Et;m._$litElement$=!0,m.finalized=!0,(Et=I.litElementHydrateSupport)==null||Et.call(I,{LitElement:m});const rt=I.litElementPolyfillSupport;rt==null||rt({LitElement:m});(I.litElementVersions??(I.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=(n=Xt,t,e)=>{const{kind:
|
|
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 r=globalThis.litPropertyMetadata.get(o);if(r===void 0&&globalThis.litPropertyMetadata.set(o,r=new Map),s==="setter"&&((n=Object.create(n)).wrapped=!0),r.set(e.name,n),s==="accessor"){const{name:i}=e;return{set(c){const l=t.get.call(this);t.set.call(this,c),this.requestUpdate(i,l,n)},init(c){return c!==void 0&&this.C(i,void 0,n,c),c}}}if(s==="setter"){const{name:i}=e;return function(c){const l=this[i];t.call(this,c),this.requestUpdate(i,l,n)}}throw Error("Unsupported decorator location: "+s)};function a(n){return(t,e)=>typeof e=="object"?Jt(n,t,e):((s,o,r)=>{const i=o.hasOwnProperty(r);return o.constructor.createProperty(r,s),i?Object.getOwnPropertyDescriptor(o,r):void 0})(n,t,e)}/**
|
|
28
28
|
* @license
|
|
29
29
|
* Copyright 2017 Google LLC
|
|
30
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -40,23 +40,23 @@
|
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2023 Google LLC
|
|
42
42
|
* SPDX-License-Identifier: Apache-2.0
|
|
43
|
-
*/const
|
|
43
|
+
*/const vt=Symbol("internals"),at=Symbol("privateInternals");function te(n){var t;class e extends n{get[(t=vt,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(n){n.addInitializer(t=>{const e=t;e.addEventListener("click",async
|
|
47
|
+
*/function ee(n){n.addInitializer(t=>{const e=t;e.addEventListener("click",async s=>{const{type:o,[vt]:r}=e,{form:i}=r;if(!(!i||o==="button")&&(await new Promise(c=>{setTimeout(c)}),!s.defaultPrevented)){if(o==="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()}})})}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">
|
|
54
54
|
<path d="M12.2266 8.16162C11.0953 9.26599 8.72489 11.8788 5.11546 16L4.63062 15.7172C5.78886 13.4007 7.17607 10.8283 8.79223 8C7.17607 5.17172 5.78886 2.59933 4.63062 0.282827L5.11546 0C8.72489 4.12121 11.0953 6.73401 12.2266 7.83838V8.16162Z" fill="#3F2B2E"/>
|
|
55
55
|
</svg>
|
|
56
|
-
`,
|
|
56
|
+
`,ie=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
57
57
|
<path d="M5 7.83838C6.02128 6.73401 8.16109 4.12121 11.4195 0L11.8571 0.282829C10.8116 2.59933 9.55927 5.17172 8.1003 8C9.55927 10.8283 10.8115 13.4007 11.8571 15.7172L11.4195 16C8.16109 11.8788 6.02128 9.266 5 8.16162L5 7.83838Z" fill="#3F2B2E"/>
|
|
58
58
|
</svg>
|
|
59
|
-
`,
|
|
59
|
+
`,re=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
60
60
|
<path d="M12.2834 14.4585L7.98873 11.3928L3.69404 14.4585L5.33977 9.4972L1 6.39639H6.36554L8 1.4585L9.63446 6.39639H15L10.6602 9.4972L12.306 14.4585H12.2834ZM7.98873 10.328L10.6602 12.2353L9.64573 9.15787L12.2721 7.28568H9.02576L8 4.17317L6.97424 7.28568H3.72786L6.35427 9.15787L5.33977 12.2353L8.01127 10.328H7.98873Z" fill="#3F2B2E"/>
|
|
61
61
|
</svg>
|
|
62
62
|
`,ae=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -83,54 +83,54 @@
|
|
|
83
83
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
84
84
|
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
85
85
|
<style type="text/css">
|
|
86
|
-
.st0{fill:#
|
|
86
|
+
.st0{fill:#3F2B2E;}
|
|
87
87
|
</style>
|
|
88
|
-
<path class="st0" d="
|
|
89
|
-
|
|
88
|
+
<path class="st0" d="M40,20c0,0.7-0.6,1.2-1.2,1.2H21.2v17.5c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2V21.2H1.2C0.6,21.2,0,20.7,0,20
|
|
89
|
+
s0.6-1.2,1.2-1.2h17.5V1.2C18.8,0.6,19.3,0,20,0s1.2,0.6,1.2,1.2v17.5h17.5C39.4,18.8,40,19.3,40,20z"/>
|
|
90
90
|
</svg>
|
|
91
|
-
`,
|
|
91
|
+
`,ve=`<?xml version="1.0" encoding="utf-8"?>
|
|
92
92
|
<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
93
93
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
94
94
|
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
95
95
|
<style type="text/css">
|
|
96
|
-
.st0{fill:#
|
|
96
|
+
.st0{fill:#3F2B2E;}
|
|
97
97
|
</style>
|
|
98
|
-
<path class="st0" d="
|
|
98
|
+
<path class="st0" d="M38.8,20.5H1.2c-0.7,0-1.2-0.6-1.2-1.2S0.6,18,1.2,18h37.5c0.7,0,1.2,0.6,1.2,1.2S39.4,20.5,38.8,20.5z"/>
|
|
99
99
|
</svg>
|
|
100
|
-
`,tt={wishlist:ne,playerv:
|
|
100
|
+
`,tt={wishlist:ne,playerv:se,chevronRight:oe,chevronLeft:ie,icoPlus:ue,icoMinus:ve,"star-0":re,"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
|
|
104
|
+
*/const fe={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
|
|
108
|
-
*/class lt extends ge{constructor(t){if(super(t),this.it=
|
|
108
|
+
*/class lt extends ge{constructor(t){if(super(t),this.it=d,t.type!==fe.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===d||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:[]}}}lt.directiveName="unsafeHTML",lt.resultType=1;/**
|
|
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=(n,t,e,
|
|
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,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(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[vt].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 d;const e=tt[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return h`<span class="${n==="start"?"icon-start":"icon-end"}">${W(e)}</span>`}renderButton(){const n=this.text||this.textsecond;return h`
|
|
113
113
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
114
|
-
${this.startIcon?this.renderIcon("start"):
|
|
115
|
-
${n?
|
|
116
|
-
${this.text?
|
|
117
|
-
${this.textsecond?
|
|
118
|
-
`:
|
|
119
|
-
${this.endIcon?this.renderIcon("end"):
|
|
114
|
+
${this.startIcon?this.renderIcon("start"):d}
|
|
115
|
+
${n?h`
|
|
116
|
+
${this.text?h`<span class="text">${this.text}</span>`:d}
|
|
117
|
+
${this.textsecond?h`<span class="text">${this.textsecond}</span>`:d}
|
|
118
|
+
`:h`<slot></slot>`}
|
|
119
|
+
${this.endIcon?this.renderIcon("end"):d}
|
|
120
120
|
</button>
|
|
121
|
-
`}renderLink(){const n=this.text||this.textsecond;return
|
|
121
|
+
`}renderLink(){const n=this.text||this.textsecond;return h`
|
|
122
122
|
<a
|
|
123
123
|
href=${this.href}
|
|
124
|
-
target=${this.target||
|
|
124
|
+
target=${this.target||d}
|
|
125
125
|
class="button"
|
|
126
126
|
?disabled=${this.disabled}
|
|
127
127
|
>
|
|
128
|
-
${this.startIcon?this.renderIcon("start"):
|
|
129
|
-
${n?
|
|
130
|
-
${this.text?
|
|
131
|
-
${this.textsecond?
|
|
132
|
-
`:
|
|
133
|
-
${this.endIcon?this.renderIcon("end"):
|
|
128
|
+
${this.startIcon?this.renderIcon("start"):d}
|
|
129
|
+
${n?h`
|
|
130
|
+
${this.text?h`<span>${this.text}</span>`:d}
|
|
131
|
+
${this.textsecond?h`<span>${this.textsecond}</span>`:d}
|
|
132
|
+
`:h`<slot></slot>`}
|
|
133
|
+
${this.endIcon?this.renderIcon("end"):d}
|
|
134
134
|
</a>
|
|
135
135
|
`}};ee(u);u.formAssociated=!0;u.styles=A`
|
|
136
136
|
:host {
|
|
@@ -289,7 +289,7 @@
|
|
|
289
289
|
transform: translateX(4px);
|
|
290
290
|
}
|
|
291
291
|
//End icon movment on hover
|
|
292
|
-
`;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([
|
|
292
|
+
`;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,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(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 h`
|
|
293
293
|
<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
|
|
294
294
|
<span class="sr-only">${this.label}</span>
|
|
295
295
|
${W(n)}
|
|
@@ -324,7 +324,7 @@
|
|
|
324
324
|
background-color: var(--color-alpha-light-stronger);
|
|
325
325
|
}
|
|
326
326
|
|
|
327
|
-
|
|
327
|
+
.wishlist-button:active {
|
|
328
328
|
background-color: var(--color-alpha-light-strongest);
|
|
329
329
|
}
|
|
330
330
|
|
|
@@ -336,10 +336,6 @@
|
|
|
336
336
|
fill: var(--color-content-action-secondary);
|
|
337
337
|
}
|
|
338
338
|
|
|
339
|
-
:host([status="filled"]) .wishlist-button:hover svg path {
|
|
340
|
-
fill: var(--color-alpha-light-strong);
|
|
341
|
-
}
|
|
342
|
-
|
|
343
339
|
.sr-only {
|
|
344
340
|
border: 0 !important;
|
|
345
341
|
clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
|
|
@@ -353,12 +349,12 @@
|
|
|
353
349
|
width: 0.1rem !important;
|
|
354
350
|
white-space: nowrap !important;
|
|
355
351
|
}
|
|
356
|
-
`;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([
|
|
357
|
-
${this.type==="span"?
|
|
352
|
+
`;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,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(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 h`
|
|
353
|
+
${this.type==="span"?h`
|
|
358
354
|
<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">
|
|
359
355
|
${W(e)}
|
|
360
356
|
</span>
|
|
361
|
-
`:
|
|
357
|
+
`:h`
|
|
362
358
|
<button
|
|
363
359
|
type="button"
|
|
364
360
|
aria-label="icon"
|
|
@@ -386,10 +382,12 @@
|
|
|
386
382
|
cursor: pointer;
|
|
387
383
|
position: relative;
|
|
388
384
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
385
|
+
&[icon="wishlist"] {
|
|
386
|
+
svg {
|
|
387
|
+
path {
|
|
388
|
+
stroke: var(--color-content-action-secondary);
|
|
389
|
+
stroke-width: var(--icon-stroke-width, 1);
|
|
390
|
+
}
|
|
393
391
|
}
|
|
394
392
|
}
|
|
395
393
|
}
|
|
@@ -398,19 +396,52 @@
|
|
|
398
396
|
fill: var(--color-content-action-secondary);
|
|
399
397
|
}
|
|
400
398
|
|
|
401
|
-
.icon-button.
|
|
399
|
+
.icon-button.smallxs {
|
|
402
400
|
width: 20px;
|
|
403
401
|
height: 20px;
|
|
402
|
+
|
|
403
|
+
&:not(.icon-wishlist) {
|
|
404
|
+
svg {
|
|
405
|
+
width: 8px;
|
|
406
|
+
height: 8px;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
404
409
|
}
|
|
405
410
|
|
|
406
|
-
.icon-button.
|
|
411
|
+
.icon-button.small {
|
|
407
412
|
width: 32px;
|
|
408
413
|
height: 32px;
|
|
414
|
+
|
|
415
|
+
&:not(.icon-wishlist) {
|
|
416
|
+
svg {
|
|
417
|
+
width: 16px;
|
|
418
|
+
height: 16px;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.icon-button.medium {
|
|
424
|
+
width: 40px;
|
|
425
|
+
height: 40px;
|
|
426
|
+
|
|
427
|
+
&:not(.icon-wishlist) {
|
|
428
|
+
svg {
|
|
429
|
+
width: 16px;
|
|
430
|
+
height: 16px;
|
|
431
|
+
}
|
|
432
|
+
}
|
|
409
433
|
}
|
|
410
434
|
|
|
411
435
|
.icon-button.large {
|
|
412
436
|
width: 40px;
|
|
413
437
|
height: 40px;
|
|
438
|
+
|
|
439
|
+
&:not(.icon-wishlist) {
|
|
440
|
+
svg {
|
|
441
|
+
width: 24px;
|
|
442
|
+
height: 24px;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
414
445
|
}
|
|
415
446
|
|
|
416
447
|
.icon-button.none-light, .icon-button.none-contrast {
|
|
@@ -418,13 +449,20 @@
|
|
|
418
449
|
width: auto;
|
|
419
450
|
height: auto;
|
|
420
451
|
|
|
421
|
-
&.
|
|
452
|
+
&.smallxs {
|
|
422
453
|
svg {
|
|
423
454
|
width: 8px;
|
|
424
455
|
height: 8px;
|
|
425
456
|
}
|
|
426
457
|
}
|
|
427
458
|
|
|
459
|
+
&.small {
|
|
460
|
+
svg {
|
|
461
|
+
width: 16px;
|
|
462
|
+
height: 16px;
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
|
|
428
466
|
&.medium {
|
|
429
467
|
svg {
|
|
430
468
|
width: 16px;
|
|
@@ -525,9 +563,9 @@
|
|
|
525
563
|
}
|
|
526
564
|
|
|
527
565
|
}
|
|
528
|
-
`;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([
|
|
566
|
+
`;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 Ee=Object.defineProperty,Se=Object.getOwnPropertyDescriptor,M=(n,t,e,s)=>{for(var o=s>1?void 0:s?Se(t,e):t,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(o))||o);return s&&o&&Ee(t,e,o),o};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 h`
|
|
529
567
|
<a href="${this.href}" target="${this.target}">
|
|
530
|
-
${this.endIcon&&this.reverseEndIcon?
|
|
568
|
+
${this.endIcon&&this.reverseEndIcon?h`
|
|
531
569
|
<o-icon-button
|
|
532
570
|
icon="chevronLeft"
|
|
533
571
|
bgstyle="${this.inverse?"none-light":"none-contrast"}"
|
|
@@ -537,7 +575,7 @@
|
|
|
537
575
|
></o-icon-button>
|
|
538
576
|
`:null}
|
|
539
577
|
<span class="link-text"><slot></slot></span>
|
|
540
|
-
${this.endIcon&&!this.reverseEndIcon?
|
|
578
|
+
${this.endIcon&&!this.reverseEndIcon?h`
|
|
541
579
|
<o-icon-button
|
|
542
580
|
icon="chevronRight"
|
|
543
581
|
bgstyle="${this.inverse?"none-light":"none-contrast"}"
|
|
@@ -547,7 +585,7 @@
|
|
|
547
585
|
></o-icon-button>
|
|
548
586
|
`:null}
|
|
549
587
|
</a>
|
|
550
|
-
`}};
|
|
588
|
+
`}};x.styles=A`
|
|
551
589
|
:host([template="standard"]) a {
|
|
552
590
|
color: var(--color-content-action-secondary);
|
|
553
591
|
font-size: var(--font-size-200);
|
|
@@ -634,12 +672,12 @@
|
|
|
634
672
|
height: 1px;
|
|
635
673
|
}
|
|
636
674
|
/* End of underline effect */
|
|
637
|
-
`;
|
|
675
|
+
`;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([z("o-link")],x);var Ce=Object.defineProperty,Le=Object.getOwnPropertyDescriptor,nt=(n,t,e,s)=>{for(var o=s>1?void 0:s?Le(t,e):t,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(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 h`
|
|
638
676
|
<div class="rating">
|
|
639
677
|
<div class="stars">
|
|
640
|
-
${n.map(t=>
|
|
678
|
+
${n.map(t=>h`<span class="star">${W(tt[t]??"")}</span>`)}
|
|
641
679
|
</div>
|
|
642
|
-
${this.reviewCount!=null&&this.href!=null?
|
|
680
|
+
${this.reviewCount!=null&&this.href!=null?h`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
|
|
643
681
|
</div>
|
|
644
682
|
`}};N.styles=A`
|
|
645
683
|
svg {
|
|
@@ -674,7 +712,7 @@
|
|
|
674
712
|
text-decoration: underline;
|
|
675
713
|
cursor: pointer;
|
|
676
714
|
}
|
|
677
|
-
`;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([
|
|
715
|
+
`;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,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(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 h`
|
|
678
716
|
<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.closePanel}></div>
|
|
679
717
|
<div
|
|
680
718
|
class="panel"
|
|
@@ -685,7 +723,7 @@
|
|
|
685
723
|
>
|
|
686
724
|
<o-icon-button icon="cross" size="medium" class="close-btn" @click=${this.closePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
|
|
687
725
|
|
|
688
|
-
${this.showHeader?
|
|
726
|
+
${this.showHeader?h`
|
|
689
727
|
<div class="header">
|
|
690
728
|
<span id="panel-title" class="panel-title">${this.headerTitle}</span>
|
|
691
729
|
</div>
|
|
@@ -695,9 +733,9 @@
|
|
|
695
733
|
<slot></slot>
|
|
696
734
|
</div>
|
|
697
735
|
|
|
698
|
-
${this.showFooter?
|
|
736
|
+
${this.showFooter?h`
|
|
699
737
|
<div class="footer">
|
|
700
|
-
${this.firstButtonVariant&&this.firstButtonLabel?
|
|
738
|
+
${this.firstButtonVariant&&this.firstButtonLabel?h`
|
|
701
739
|
<o-button
|
|
702
740
|
variant="${this.firstButtonVariant}"
|
|
703
741
|
@click=${this.handleFirstClick}
|
|
@@ -706,7 +744,7 @@
|
|
|
706
744
|
</o-button>
|
|
707
745
|
`:null}
|
|
708
746
|
|
|
709
|
-
${this.secondaryButtonVariant&&this.secondaryButtonLabel?
|
|
747
|
+
${this.secondaryButtonVariant&&this.secondaryButtonLabel?h`
|
|
710
748
|
<o-button
|
|
711
749
|
variant="${this.secondaryButtonVariant}"
|
|
712
750
|
@click=${this.handleSecondaryClick}
|
|
@@ -770,7 +808,7 @@
|
|
|
770
808
|
|
|
771
809
|
.header {
|
|
772
810
|
flex: 0 0 auto;
|
|
773
|
-
padding: 16px 0 16px
|
|
811
|
+
padding: 16px 0 16px 16px;
|
|
774
812
|
border-bottom: var(--border-050) solid var(--color-border-tertiary);
|
|
775
813
|
|
|
776
814
|
.panel-title {
|
|
@@ -814,26 +852,35 @@
|
|
|
814
852
|
max-width: none;
|
|
815
853
|
}
|
|
816
854
|
}
|
|
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([
|
|
855
|
+
`;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,H=(n,t,e,s)=>{for(var o=s>1?void 0:s?Be(t,e):t,r=n.length-1,i;r>=0;r--)(i=n[r])&&(o=(s?i(t,e,o):i(o))||o);return s&&o&&Ie(t,e,o),o};let _=class extends m{constructor(){super(...arguments),this.thumbnails=[],this.activeIndex=0,this.disabledIndexes=[],this.maxWidth="100%",this.focusedIndex=0,this.playerIconTemplate=h`
|
|
856
|
+
<o-icon-button
|
|
857
|
+
icon="playerv"
|
|
858
|
+
size="medium"
|
|
859
|
+
bgstyle="background-light"
|
|
860
|
+
type="span"
|
|
861
|
+
status="filled"
|
|
862
|
+
strokewidth="1.5"
|
|
863
|
+
></o-icon-button>
|
|
864
|
+
`}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 h`
|
|
818
865
|
<div class="scroll-container" style="max-width: ${this.maxWidth};">
|
|
819
|
-
${this.thumbnails.map((n,t)=>{const e=this.disabledIndexes.includes(t),
|
|
866
|
+
${this.thumbnails.map((n,t)=>{const e=this.disabledIndexes.includes(t),s=this.activeIndex===t,o=n.type==="video";return h`
|
|
820
867
|
<div class="thumb-wrapper">
|
|
821
868
|
<button
|
|
822
869
|
class="thumb"
|
|
823
870
|
data-index="${t}"
|
|
824
871
|
?disabled=${e}
|
|
825
|
-
aria-selected=${
|
|
872
|
+
aria-selected=${s}
|
|
826
873
|
tabindex="${this.focusedIndex===t?0:-1}"
|
|
827
874
|
@click=${()=>this.selectThumbnail(t)}
|
|
828
875
|
@keydown=${this.handleKeyDown}
|
|
829
876
|
>
|
|
830
877
|
<img src="${n.src}" />
|
|
831
878
|
</button>
|
|
832
|
-
${
|
|
879
|
+
${o?h`<div class="play-icon-wrapper">${this.playerIconTemplate}</div>`:null}
|
|
833
880
|
</div>
|
|
834
881
|
`})}
|
|
835
882
|
</div>
|
|
836
|
-
`}};
|
|
883
|
+
`}};_.styles=A`
|
|
837
884
|
:host {
|
|
838
885
|
display: flex;
|
|
839
886
|
gap: 5px;
|
|
@@ -936,4 +983,4 @@
|
|
|
936
983
|
height: 0;
|
|
937
984
|
width: 0;
|
|
938
985
|
}
|
|
939
|
-
`;
|
|
986
|
+
`;H([a({type:Array})],_.prototype,"thumbnails",2);H([a({type:Number})],_.prototype,"activeIndex",2);H([a({type:Array})],_.prototype,"disabledIndexes",2);H([a({type:String})],_.prototype,"maxWidth",2);H([a({type:Object})],_.prototype,"swiperInstance",2);H([Qt()],_.prototype,"focusedIndex",2);_=H([z("thumbnail-navigation")],_);
|