@florid-kit/components 0.3.13 → 0.3.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/button.d.ts +11 -26
- package/components/side-panel.d.ts +32 -0
- package/index.js +402 -216
- package/index.mjs +968 -694
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -2,33 +2,33 @@
|
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const
|
|
5
|
+
*/const W=globalThis,at=W.ShadowRoot&&(W.ShadyCSS===void 0||W.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,lt=Symbol(),ut=new WeakMap;let At=class{constructor(t,e,o){if(this._$cssResult$=!0,o!==lt)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(at&&t===void 0){const o=e!==void 0&&e.length===1;o&&(t=ut.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&ut.set(e,t))}return t}toString(){return this.cssText}};const Pt=n=>new At(typeof n=="string"?n:n+"",void 0,lt),S=(n,...t)=>{const e=n.length===1?n[0]:t.reduce((o,s,i)=>o+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+n[i+1],n[0]);return new At(e,n,lt)},Bt=(n,t)=>{if(at)n.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const o=document.createElement("style"),s=W.litNonce;s!==void 0&&o.setAttribute("nonce",s),o.textContent=e.cssText,n.appendChild(o)}},ft=at?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return Pt(e)})(n):n;/**
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright 2017 Google LLC
|
|
8
8
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
|
-
*/const{is:
|
|
9
|
+
*/const{is:kt,defineProperty:Ot,getOwnPropertyDescriptor:Ht,getOwnPropertyNames:Mt,getOwnPropertySymbols:It,getPrototypeOf:Ut}=Object,E=globalThis,gt=E.trustedTypes,Tt=gt?gt.emptyScript:"",tt=E.reactiveElementPolyfillSupport,N=(n,t)=>n,K={toAttribute(n,t){switch(t){case Boolean:n=n?Tt: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}},ct=(n,t)=>!kt(n,t),vt={attribute:!0,type:String,converter:K,reflect:!1,useDefault:!1,hasChanged:ct};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),E.litPropertyMetadata??(E.litPropertyMetadata=new WeakMap);let M=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=vt){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(),s=this.getPropertyDescriptor(t,o,e);s!==void 0&&Ot(this.prototype,t,s)}}static getPropertyDescriptor(t,e,o){const{get:s,set:i}=Ht(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:s,set(r){const c=s==null?void 0:s.call(this);i==null||i.call(this,r),this.requestUpdate(t,c,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??vt}static _$Ei(){if(this.hasOwnProperty(N("elementProperties")))return;const t=Ut(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(N("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(N("properties"))){const e=this.properties,o=[...Mt(e),...It(e)];for(const s of o)this.createProperty(s,e[s])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[o,s]of e)this.elementProperties.set(o,s)}this._$Eh=new Map;for(const[e,o]of this.elementProperties){const s=this._$Eu(e,o);s!==void 0&&this._$Eh.set(s,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 s of o)e.unshift(ft(s))}else t!==void 0&&e.push(ft(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 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 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 i;const o=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,o);if(s!==void 0&&o.reflect===!0){const r=(((i=o.converter)==null?void 0:i.toAttribute)!==void 0?o.converter:K).toAttribute(e,o.type);this._$Em=t,r==null?this.removeAttribute(s):this.setAttribute(s,r),this._$Em=null}}_$AK(t,e){var i,r;const o=this.constructor,s=o._$Eh.get(t);if(s!==void 0&&this._$Em!==s){const c=o.getPropertyOptions(s),a=typeof c.converter=="function"?{fromAttribute:c.converter}:((i=c.converter)==null?void 0:i.fromAttribute)!==void 0?c.converter:K;this._$Em=s,this[s]=a.fromAttribute(e,c.type)??((r=this._$Ej)==null?void 0:r.get(s))??null,this._$Em=null}}requestUpdate(t,e,o){var s;if(t!==void 0){const i=this.constructor,r=this[t];if(o??(o=i.getPropertyOptions(t)),!((o.hasChanged??ct)(r,e)||o.useDefault&&o.reflect&&r===((s=this._$Ej)==null?void 0:s.get(t))&&!this.hasAttribute(i._$Eu(t,o))))return;this.C(t,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:o,reflect:s,wrapped:i},r){o&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),i!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||o||(e=void 0),this._$AL.set(t,e)),s===!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[i,r]of this._$Ep)this[i]=r;this._$Ep=void 0}const s=this.constructor.elementProperties;if(s.size>0)for(const[i,r]of s){const{wrapped:c}=r,a=this[i];c!==!0||this._$AL.has(i)||a===void 0||this.C(i,void 0,r,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(o=this._$EO)==null||o.forEach(s=>{var i;return(i=s.hostUpdate)==null?void 0:i.call(s)}),this.update(e)):this._$EM()}catch(s){throw t=!1,this._$EM(),s}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(o=>{var s;return(s=o.hostUpdated)==null?void 0:s.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){}};M.elementStyles=[],M.shadowRootOptions={mode:"open"},M[N("elementProperties")]=new Map,M[N("finalized")]=new Map,tt==null||tt({ReactiveElement:M}),(E.reactiveElementVersions??(E.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 j=globalThis,X=j.trustedTypes,bt=X?X.createPolicy("lit-html",{createHTML:n=>n}):void 0,Et="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,St="?"+A,zt=`<${St}>`,k=document,R=()=>k.createComment(""),F=n=>n===null||typeof n!="object"&&typeof n!="function",ht=Array.isArray,Dt=n=>ht(n)||typeof(n==null?void 0:n[Symbol.iterator])=="function",et=`[
|
|
14
|
+
\f\r]`,D=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,yt=/-->/g,$t=/>/g,L=RegExp(`>|${et}(?:([^\\s"'>=/]+)(${et}*=${et}*(?:[^
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),mt=/'/g,wt=/"/g,Ct=/^(?:script|style|textarea|title)$/i,Nt=n=>(t,...e)=>({_$litType$:n,strings:t,values:e}),d=Nt(1),O=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),_t=new WeakMap,P=k.createTreeWalker(k,129);function Lt(n,t){if(!ht(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return bt!==void 0?bt.createHTML(t):t}const jt=(n,t)=>{const e=n.length-1,o=[];let s,i=t===2?"<svg>":t===3?"<math>":"",r=D;for(let c=0;c<e;c++){const a=n[c];let f,g,p=-1,w=0;for(;w<a.length&&(r.lastIndex=w,g=r.exec(a),g!==null);)w=r.lastIndex,r===D?g[1]==="!--"?r=yt:g[1]!==void 0?r=$t:g[2]!==void 0?(Ct.test(g[2])&&(s=RegExp("</"+g[2],"g")),r=L):g[3]!==void 0&&(r=L):r===L?g[0]===">"?(r=s??D,p=-1):g[1]===void 0?p=-2:(p=r.lastIndex-g[2].length,f=g[1],r=g[3]===void 0?L:g[3]==='"'?wt:mt):r===wt||r===mt?r=L:r===yt||r===$t?r=D:(r=L,s=void 0);const x=r===L&&n[c+1].startsWith("/>")?" ":"";i+=r===D?a+zt:p>=0?(o.push(f),a.slice(0,p)+Et+a.slice(p)+A+x):a+A+(p===-2?c:x)}return[Lt(n,i+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),o]};class V{constructor({strings:t,_$litType$:e},o){let s;this.parts=[];let i=0,r=0;const c=t.length-1,a=this.parts,[f,g]=jt(t,e);if(this.el=V.createElement(f,o),P.currentNode=this.el.content,e===2||e===3){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(s=P.nextNode())!==null&&a.length<c;){if(s.nodeType===1){if(s.hasAttributes())for(const p of s.getAttributeNames())if(p.endsWith(Et)){const w=g[r++],x=s.getAttribute(p).split(A),q=/([.?@])?(.*)/.exec(w);a.push({type:1,index:i,name:q[2],strings:x,ctor:q[1]==="."?Ft:q[1]==="?"?Vt:q[1]==="@"?Zt:G}),s.removeAttribute(p)}else p.startsWith(A)&&(a.push({type:6,index:i}),s.removeAttribute(p));if(Ct.test(s.tagName)){const p=s.textContent.split(A),w=p.length-1;if(w>0){s.textContent=X?X.emptyScript:"";for(let x=0;x<w;x++)s.append(p[x],R()),P.nextNode(),a.push({type:2,index:++i});s.append(p[w],R())}}}else if(s.nodeType===8)if(s.data===St)a.push({type:2,index:i});else{let p=-1;for(;(p=s.data.indexOf(A,p+1))!==-1;)a.push({type:7,index:i}),p+=A.length-1}i++}}static createElement(t,e){const o=k.createElement("template");return o.innerHTML=t,o}}function I(n,t,e=n,o){var r,c;if(t===O)return t;let s=o!==void 0?(r=e._$Co)==null?void 0:r[o]:e._$Cl;const i=F(t)?void 0:t._$litDirective$;return(s==null?void 0:s.constructor)!==i&&((c=s==null?void 0:s._$AO)==null||c.call(s,!1),i===void 0?s=void 0:(s=new i(n),s._$AT(n,e,o)),o!==void 0?(e._$Co??(e._$Co=[]))[o]=s:e._$Cl=s),s!==void 0&&(t=I(n,s._$AS(n,t.values),s,o)),t}class Rt{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,s=((t==null?void 0:t.creationScope)??k).importNode(e,!0);P.currentNode=s;let i=P.nextNode(),r=0,c=0,a=o[0];for(;a!==void 0;){if(r===a.index){let f;a.type===2?f=new Z(i,i.nextSibling,this,t):a.type===1?f=new a.ctor(i,a.name,a.strings,this,t):a.type===6&&(f=new qt(i,this,t)),this._$AV.push(f),a=o[++c]}r!==(a==null?void 0:a.index)&&(i=P.nextNode(),r++)}return P.currentNode=k,s}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 Z{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,o,s){this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=s,this._$Cv=(s==null?void 0:s.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=I(this,t,e),F(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):Dt(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&&F(this._$AH)?this._$AA.nextSibling.data=t:this.T(k.createTextNode(t)),this._$AH=t}$(t){var i;const{values:e,_$litType$:o}=t,s=typeof o=="number"?this._$AC(t):(o.el===void 0&&(o.el=V.createElement(Lt(o.h,o.h[0]),this.options)),o);if(((i=this._$AH)==null?void 0:i._$AD)===s)this._$AH.p(e);else{const r=new Rt(s,this),c=r.u(this.options);r.p(e),this.T(c),this._$AH=r}}_$AC(t){let e=_t.get(t.strings);return e===void 0&&_t.set(t.strings,e=new V(t)),e}k(t){ht(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,s=0;for(const i of t)s===e.length?e.push(o=new Z(this.O(R()),this.O(R()),this,this.options)):o=e[s],o._$AI(i),s++;s<e.length&&(this._$AR(o&&o._$AB.nextSibling,s),e.length=s)}_$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 s=t.nextSibling;t.remove(),t=s}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class G{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,o,s,i){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=i,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,s){const i=this.strings;let r=!1;if(i===void 0)t=I(this,t,e,0),r=!F(t)||t!==this._$AH&&t!==O,r&&(this._$AH=t);else{const c=t;let a,f;for(t=i[0],a=0;a<i.length-1;a++)f=I(this,c[o+a],e,a),f===O&&(f=this._$AH[a]),r||(r=!F(f)||f!==this._$AH[a]),f===h?t=h:t!==h&&(t+=(f??"")+i[a+1]),this._$AH[a]=f}r&&!s&&this.j(t)}j(t){t===h?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Ft extends G{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===h?void 0:t}}class Vt extends G{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==h)}}class Zt extends G{constructor(t,e,o,s,i){super(t,e,o,s,i),this.type=5}_$AI(t,e=this){if((t=I(this,t,e,0)??h)===O)return;const o=this._$AH,s=t===h&&o!==h||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,i=t!==h&&(o===h||s);s&&this.element.removeEventListener(this.name,this,o),i&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class qt{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){I(this,t)}}const ot=j.litHtmlPolyfillSupport;ot==null||ot(V,Z),(j.litHtmlVersions??(j.litHtmlVersions=[])).push("3.3.0");const Wt=(n,t,e)=>{const o=(e==null?void 0:e.renderBefore)??t;let s=o._$litPart$;if(s===void 0){const i=(e==null?void 0:e.renderBefore)??null;o._$litPart$=s=new Z(t.insertBefore(R(),i),i,void 0,e??{})}return s._$AI(n),s};/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
-
*/const
|
|
19
|
+
*/const B=globalThis;let $=class extends M{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=Wt(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 xt;$._$litElement$=!0,$.finalized=!0,(xt=B.litElementHydrateSupport)==null||xt.call(B,{LitElement:$});const st=B.litElementPolyfillSupport;st==null||st({LitElement:$});(B.litElementVersions??(B.litElementVersions=[])).push("4.2.0");/**
|
|
20
20
|
* @license
|
|
21
21
|
* Copyright 2017 Google LLC
|
|
22
22
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
23
|
-
*/const
|
|
23
|
+
*/const z=n=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(n,t)}):customElements.define(n,t)};/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
-
*/const
|
|
27
|
+
*/const Kt={attribute:!0,type:String,converter:K,reflect:!1,hasChanged:ct},Xt=(n=Kt,t,e)=>{const{kind:o,metadata:s}=e;let i=globalThis.litPropertyMetadata.get(s);if(i===void 0&&globalThis.litPropertyMetadata.set(s,i=new Map),o==="setter"&&((n=Object.create(n)).wrapped=!0),i.set(e.name,n),o==="accessor"){const{name:r}=e;return{set(c){const a=t.get.call(this);t.set.call(this,c),this.requestUpdate(r,a,n)},init(c){return c!==void 0&&this.C(r,void 0,n,c),c}}}if(o==="setter"){const{name:r}=e;return function(c){const a=this[r];t.call(this,c),this.requestUpdate(r,a,n)}}throw Error("Unsupported decorator location: "+o)};function l(n){return(t,e)=>typeof e=="object"?Xt(n,t,e):((o,s,i)=>{const r=s.hasOwnProperty(i);return s.constructor.createProperty(i,o),r?Object.getOwnPropertyDescriptor(s,i):void 0})(n,t,e)}const Jt=S`
|
|
28
28
|
outline: 1px dashed var(--button-border-color);
|
|
29
29
|
outline-offset: 2px;
|
|
30
30
|
outline: dashed black;
|
|
31
|
-
`;
|
|
31
|
+
`;S`
|
|
32
32
|
:host * {
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
}
|
|
@@ -36,244 +36,72 @@
|
|
|
36
36
|
* @license
|
|
37
37
|
* Copyright 2023 Google LLC
|
|
38
38
|
* SPDX-License-Identifier: Apache-2.0
|
|
39
|
-
*/const
|
|
39
|
+
*/const dt=Symbol("internals"),nt=Symbol("privateInternals");function Gt(n){var t;class e extends n{get[(t=dt,t)](){return this[nt]||(this[nt]=this.attachInternals()),this[nt]}}return e}/**
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2023 Google LLC
|
|
42
42
|
* SPDX-License-Identifier: Apache-2.0
|
|
43
|
-
*/function
|
|
44
|
-
--button-bg-disabled: var(--color-container-disabled);
|
|
45
|
-
--button-bg-pressed: var(--color-container-action-${i}-pressed);
|
|
46
|
-
--button-bg-hover: var(--color-container-action-${i}-hover);
|
|
47
|
-
--button-bg: var(--color-container-action-${i}-default);
|
|
48
|
-
--button-border-disabled: var(--color-border-${i});
|
|
49
|
-
--button-border-hover: var(--color-border-${i});
|
|
50
|
-
--button-border-width-disabled: var(--border-m);
|
|
51
|
-
--button-border-width: var(--border-m);
|
|
52
|
-
--button-border: var(--color-border-${i});
|
|
53
|
-
--button-text-disabled: var(--color-content-disabled);
|
|
54
|
-
--button-text-hover: var(--color-content-action-${i});
|
|
55
|
-
--button-text: var(--color-content-action-${i});
|
|
56
|
-
`;return At(t)},ee=["primary","secondary"];let f=class extends te{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.customclass="",this.text="",this.textsecond="",this.disabled=!1,this.href="",this.target=""}get name(){return this.getAttribute("name")??""}set name(i){this.setAttribute("name",i)}get form(){return this[ht].form}willUpdate(){const i=getComputedStyle(this).getPropertyValue("--button-variant");i&&ee.some(t=>t===i)&&(this.variant=i)}updated(){if(this.customclass){const i=this.customclass.split(" ").map(t=>t.trim()).filter(Boolean);this.classList.add(...i)}}render(){const i=this.href?this.renderLink():this.renderButton();return u`${i}`}renderLink(){return u`<a href=${this.href} target=${this.target||d} class="button" ?disabled=${this.disabled}>
|
|
57
|
-
<slot />
|
|
58
|
-
</a>`}renderButton(){const i=this.text||this.textsecond;return u`<button class="button ${i?"multipleText":""}" ?disabled=${this.disabled}>
|
|
59
|
-
${i?u`<slot>
|
|
60
|
-
${this.text?u`<span>${this.text}</span>`:d}
|
|
61
|
-
${this.textsecond?u`<span>${this.textsecond}</span>`:d}
|
|
62
|
-
</slot>`:u`<slot></slot>`}
|
|
63
|
-
</button>`}};Gt(f);f.formAssociated=!0;f.styles=O`
|
|
64
|
-
:host {
|
|
65
|
-
display: inline-flex;
|
|
66
|
-
cursor: pointer;
|
|
67
|
-
${_t("primary")};
|
|
68
|
-
--button-border: transparent;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:host(.full) {
|
|
72
|
-
width: 100%;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
:host([variant="secondary"]) {
|
|
76
|
-
${_t("secondary")};
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
:host([disabled]), :host([aria-disabled="true"]), :host([aria-disabled="true"]):hover {
|
|
80
|
-
--button-bg: var(--button-bg-disabled);
|
|
81
|
-
--button-text: var(--button-text-disabled);
|
|
82
|
-
--button-border: transparent;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
:host([disabled][variant="secondary"]) {
|
|
86
|
-
--button-bg: var(--button-bg-disabled);
|
|
87
|
-
--button-text: var(--button-text-disabled);
|
|
88
|
-
--button-border: var(--button-border);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
:host([aria-disabled="true"]) button:hover {
|
|
92
|
-
background-color: var(--button-bg-disabled);
|
|
93
|
-
color: var(--button-text-disabled);
|
|
94
|
-
border-color: transparent;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.button {
|
|
98
|
-
-webkit-appearance: none;
|
|
99
|
-
align-items: center;
|
|
100
|
-
background-color: var(--button-bg);
|
|
101
|
-
border-color: var(--button-border);
|
|
102
|
-
border-radius: var(--radius-m);
|
|
103
|
-
border-width: var(--border-m);
|
|
104
|
-
border-style: solid;
|
|
105
|
-
box-sizing: border-box;
|
|
106
|
-
color: var(--button-text);
|
|
107
|
-
cursor: inherit;
|
|
108
|
-
display: inline-flex;
|
|
109
|
-
font-family: var(--font-family-loccitane-sans);
|
|
110
|
-
font-size: var(--font-size-150);
|
|
111
|
-
font-weight: var(--font-weight-400);
|
|
112
|
-
gap: var(--spacing-s, 8px);
|
|
113
|
-
height: 100%;
|
|
114
|
-
justify-content: center;
|
|
115
|
-
line-height: var(--line-height-200);
|
|
116
|
-
min-width: 64px;
|
|
117
|
-
outline: none;
|
|
118
|
-
padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
|
|
119
|
-
text-decoration: none;
|
|
120
|
-
vertical-align: middle;
|
|
121
|
-
width: 100%;
|
|
122
|
-
|
|
123
|
-
&::-moz-focus-inner {
|
|
124
|
-
padding: 0;
|
|
125
|
-
border: 0;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.button.multipleText {
|
|
130
|
-
gap: 0;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.button:disabled {
|
|
134
|
-
cursor: initial;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.button:hover:not([disabled]) {
|
|
138
|
-
background-color: var(--button-bg-hover);
|
|
139
|
-
color: var(--button-text-hover);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.button:active:not([disabled]) {
|
|
143
|
-
background-color: var(--button-bg-pressed);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.button:focus-visible {
|
|
147
|
-
${Jt};
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.button span + span {
|
|
151
|
-
padding-left: 0.8rem;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.button span + span::before {
|
|
155
|
-
content: "•";
|
|
156
|
-
margin: 0 0.8rem 0 0;
|
|
157
|
-
}
|
|
158
|
-
`;b([h()],f.prototype,"type",2);b([h({reflect:!0})],f.prototype,"value",2);b([h({reflect:!0})],f.prototype,"variant",2);b([h({type:String})],f.prototype,"customclass",2);b([h({type:String})],f.prototype,"text",2);b([h({type:String})],f.prototype,"textsecond",2);b([h({converter:{fromAttribute:i=>i===""||i==="true"}})],f.prototype,"disabled",2);b([h()],f.prototype,"href",2);b([h()],f.prototype,"target",2);f=b([V("o-button")],f);/**
|
|
43
|
+
*/function Qt(n){n.addInitializer(t=>{const e=t;e.addEventListener("click",async o=>{const{type:s,[dt]:i}=e,{form:r}=i;if(!(!r||s==="button")&&(await new Promise(c=>{setTimeout(c)}),!o.defaultPrevented)){if(s==="reset"){r.reset();return}r.addEventListener("submit",c=>{Object.defineProperty(c,"submitter",{configurable:!0,enumerable:!0,get:()=>e})},{capture:!0,once:!0}),i.setFormValue(e.value),r.requestSubmit()}})})}/**
|
|
159
44
|
* @license
|
|
160
45
|
* Copyright 2017 Google LLC
|
|
161
46
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
162
|
-
*/const
|
|
47
|
+
*/const Yt={CHILD:2},te=n=>(...t)=>({_$litDirective$:n,values:t});class ee{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)}}/**
|
|
163
48
|
* @license
|
|
164
49
|
* Copyright 2017 Google LLC
|
|
165
50
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
166
|
-
*/class rt extends
|
|
51
|
+
*/class rt extends ee{constructor(t){if(super(t),this.it=h,t.type!==Yt.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:[]}}}rt.directiveName="unsafeHTML",rt.resultType=1;/**
|
|
167
52
|
* @license
|
|
168
53
|
* Copyright 2017 Google LLC
|
|
169
54
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
170
|
-
*/class it extends rt{}it.directiveName="unsafeSVG",it.resultType=2;const
|
|
55
|
+
*/class it extends rt{}it.directiveName="unsafeSVG",it.resultType=2;const J=te(it),oe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
171
56
|
<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"/>
|
|
172
57
|
</svg>
|
|
173
|
-
`,
|
|
58
|
+
`,se=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
174
59
|
<path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
|
|
175
60
|
</svg>
|
|
176
|
-
`,
|
|
61
|
+
`,ne=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
177
62
|
<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"/>
|
|
178
63
|
</svg>
|
|
179
|
-
`,
|
|
64
|
+
`,re=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
180
65
|
<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"/>
|
|
181
66
|
</svg>
|
|
182
|
-
`,
|
|
67
|
+
`,ie=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
183
68
|
<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"/>
|
|
184
69
|
</svg>
|
|
185
|
-
`,
|
|
70
|
+
`,ae=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
186
71
|
<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"/>
|
|
187
72
|
</svg>
|
|
188
|
-
`,
|
|
73
|
+
`,le=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
189
74
|
<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"/>
|
|
190
75
|
</svg>
|
|
191
|
-
`,
|
|
76
|
+
`,ce=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
192
77
|
<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"/>
|
|
193
78
|
</svg>
|
|
194
|
-
`,
|
|
79
|
+
`,he=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
195
80
|
<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"/>
|
|
196
81
|
</svg>
|
|
197
|
-
`,
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
</button>
|
|
207
|
-
`}handleClick(i){this.toggleStatus(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))}toggleStatus(){this.status=this.status=="empty"?"filled":"empty"}setStatus(i){this.status=i,this.requestUpdate()}setAriaDescribedBy(i){this.ariaDescribedBy=i,this.requestUpdate()}setLabel(i){this.label=i,this.requestUpdate()}};U.styles=O`
|
|
208
|
-
:host {
|
|
209
|
-
display: inline-flex;
|
|
210
|
-
justify-content: center;
|
|
211
|
-
align-items: center;
|
|
212
|
-
cursor: pointer;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.wishlist-button {
|
|
216
|
-
display: flex;
|
|
217
|
-
justify-content: center;
|
|
218
|
-
align-items: center;
|
|
219
|
-
width: 40px;
|
|
220
|
-
height: 40px;
|
|
221
|
-
border: transparent;
|
|
222
|
-
border-radius: var(--radius-full);
|
|
223
|
-
background-color: var(--color-alpha-light-strong);
|
|
224
|
-
position: relative;
|
|
225
|
-
cursor: pointer;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.sr-only {
|
|
229
|
-
border: 0 !important;
|
|
230
|
-
clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
|
|
231
|
-
-webkit-clip-path: inset(50%) !important;
|
|
232
|
-
clip-path: inset(50%) !important;
|
|
233
|
-
height: 0.1rem !important;
|
|
234
|
-
margin: -0.1rem !important;
|
|
235
|
-
overflow: hidden !important;
|
|
236
|
-
padding: 0 !important;
|
|
237
|
-
position: absolute !important;
|
|
238
|
-
width: 0.1rem !important;
|
|
239
|
-
white-space: nowrap !important;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.wishlist-button:hover {
|
|
243
|
-
background-color: var(--color-alpha-light-stronger);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
:host([status="filled"]) .wishlist-button {
|
|
247
|
-
background-color: var(--color-alpha-light-strongest);
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.wishlist-button:hover svg path {
|
|
251
|
-
fill: var(--color-content-action-secondary);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
:host([status="filled"]) .wishlist-button svg path {
|
|
255
|
-
fill: var(--color-content-action-secondary);
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
:host([status="filled"]) .wishlist-button:hover svg path {
|
|
259
|
-
fill: var(--color-alpha-light-strong);
|
|
260
|
-
}
|
|
261
|
-
`;X([h({type:String,reflect:!0})],U.prototype,"status",2);X([h({type:String,reflect:!0})],U.prototype,"ariaDescribedBy",2);X([h({type:String,reflect:!0})],U.prototype,"label",2);U=X([V("o-wishlist-button")],U);var ve=Object.defineProperty,be=Object.getOwnPropertyDescriptor,A=(i,t,e,s)=>{for(var r=s>1?void 0:s?be(t,e):t,n=i.length-1,o;n>=0;n--)(o=i[n])&&(r=(s?o(t,e,r):o(r))||r);return s&&r&&ve(t,e,r),r};let v=class extends y{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(i){super.updated(i),this.style.setProperty("--icon-stroke-width",this.strokewidth)}render(){const i=ct[this.icon]??"",t=`icon-${this.icon}`,e=i.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return u`
|
|
262
|
-
${this.type==="span"?u`
|
|
82
|
+
`,de=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
83
|
+
<path d="M2 2L14 14" stroke="#3F2B2E"/>
|
|
84
|
+
<path d="M14 2L2 14" stroke="#3F2B2E"/>
|
|
85
|
+
</svg>
|
|
86
|
+
`,pe=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
87
|
+
<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
|
+
</svg>
|
|
89
|
+
`,pt={wishlist:oe,playerv:se,chevronRight:ne,chevronLeft:re,"star-0":ie,"star-25":ae,"star-50":le,"star-75":ce,"star-100":he,cross:de,search:pe};var ue=Object.defineProperty,fe=Object.getOwnPropertyDescriptor,C=(n,t,e,o)=>{for(var s=o>1?void 0:o?fe(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&ue(t,e,s),s};let m=class extends ${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=pt[this.icon]??"",t=`icon-${this.icon}`,e=n.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
90
|
+
${this.type==="span"?d`
|
|
263
91
|
<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">
|
|
264
|
-
${
|
|
92
|
+
${J(e)}
|
|
265
93
|
</span>
|
|
266
|
-
`:
|
|
94
|
+
`:d`
|
|
267
95
|
<button
|
|
268
96
|
type="button"
|
|
269
97
|
aria-label="icon"
|
|
270
98
|
class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
|
|
271
99
|
?disabled="${this.disabled}"
|
|
272
100
|
>
|
|
273
|
-
${
|
|
101
|
+
${J(e)}
|
|
274
102
|
</button>
|
|
275
103
|
`}
|
|
276
|
-
`}};
|
|
104
|
+
`}};m.styles=S`
|
|
277
105
|
:host {
|
|
278
106
|
display: inline-flex;
|
|
279
107
|
justify-content: center;
|
|
@@ -430,9 +258,226 @@
|
|
|
430
258
|
}
|
|
431
259
|
|
|
432
260
|
}
|
|
433
|
-
`;
|
|
261
|
+
`;C([l({type:String,reflect:!0})],m.prototype,"bgstyle",2);C([l({type:String,reflect:!0})],m.prototype,"size",2);C([l({type:String,reflect:!0})],m.prototype,"status",2);C([l({type:String,reflect:!0})],m.prototype,"type",2);C([l({type:String})],m.prototype,"strokewidth",2);C([l({type:String})],m.prototype,"icon",2);C([l({type:Boolean,reflect:!0})],m.prototype,"disabled",2);m=C([z("o-icon-button")],m);var ge=Object.defineProperty,ve=Object.getOwnPropertyDescriptor,v=(n,t,e,o)=>{for(var s=o>1?void 0:o?ve(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&ge(t,e,s),s};const be=Gt($);let u=class extends be{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.startIcon=!1,this.endIcon=!1,this.iconSize="small",this.icon="",this.href="",this.target=""}get name(){return this.getAttribute("name")??""}set name(n){this.setAttribute("name",n)}get form(){return this[dt].form}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(n){return this.icon?d`<o-icon-button
|
|
262
|
+
class=${n==="start"?"icon-start":"icon-end"}
|
|
263
|
+
icon=${this.icon}
|
|
264
|
+
bgstyle="${this.variant==="primary"?"none-light":"none-contrast"}"
|
|
265
|
+
size="${this.iconSize}"
|
|
266
|
+
strokewidth="${this.iconstrokewidth||"1"}"
|
|
267
|
+
type="span"
|
|
268
|
+
aria-hidden="true"
|
|
269
|
+
?disabled=${this.disabled}
|
|
270
|
+
></o-icon-button>`:h}renderButton(){const n=this.text||this.textsecond;return d`
|
|
271
|
+
<button class="button" ?disabled=${this.disabled}>
|
|
272
|
+
${this.startIcon?this.renderIcon("start"):h}
|
|
273
|
+
${n?d`
|
|
274
|
+
${this.text?d`<span>${this.text}</span>`:h}
|
|
275
|
+
${this.textsecond?d`<span>${this.textsecond}</span>`:h}
|
|
276
|
+
`:d`<slot></slot>`}
|
|
277
|
+
${this.endIcon?this.renderIcon("end"):h}
|
|
278
|
+
</button>
|
|
279
|
+
`}renderLink(){const n=this.text||this.textsecond;return d`
|
|
280
|
+
<a
|
|
281
|
+
href=${this.href}
|
|
282
|
+
target=${this.target||h}
|
|
283
|
+
class="button"
|
|
284
|
+
?disabled=${this.disabled}
|
|
285
|
+
>
|
|
286
|
+
${this.startIcon?this.renderIcon("start"):h}
|
|
287
|
+
${n?d`
|
|
288
|
+
${this.text?d`<span>${this.text}</span>`:h}
|
|
289
|
+
${this.textsecond?d`<span>${this.textsecond}</span>`:h}
|
|
290
|
+
`:d`<slot></slot>`}
|
|
291
|
+
${this.endIcon?this.renderIcon("end"):h}
|
|
292
|
+
</a>
|
|
293
|
+
`}};Qt(u);u.formAssociated=!0;u.styles=S`
|
|
294
|
+
:host {
|
|
295
|
+
--button-border: transparent;
|
|
296
|
+
cursor: pointer;
|
|
297
|
+
display: inline-flex;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
:host([fullwidth]) {
|
|
301
|
+
display: block;
|
|
302
|
+
width: 100%;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
:host([variant="primary"]) {
|
|
306
|
+
--button-bg: var(--color-container-action-primary-default);
|
|
307
|
+
--button-bg-hover: var(--color-container-action-primary-hover);
|
|
308
|
+
--button-bg-pressed: var(--color-container-action-primary-pressed);
|
|
309
|
+
--button-text: var(--color-content-action-primary);
|
|
310
|
+
--button-text-hover: var(--color-content-action-primary);
|
|
311
|
+
--button-border: transparent;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
:host([variant="secondary"]) {
|
|
315
|
+
--button-bg: var(--color-container-action-secondary-default);
|
|
316
|
+
--button-bg-hover: var(--color-container-action-secondary-hover);
|
|
317
|
+
--button-bg-pressed: var(--color-container-action-secondary-pressed);
|
|
318
|
+
--button-text: var(--color-content-action-secondary);
|
|
319
|
+
--button-text-hover: var(--color-content-action-secondary);
|
|
320
|
+
--button-border: var(--color-border-secondary);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
:host([variant="ghost"]) {
|
|
324
|
+
--button-bg: transparent;
|
|
325
|
+
--button-bg-hover: var(--color-alpha-dark-lightest);
|
|
326
|
+
--button-bg-pressed: var(--color-alpha-dark-lighter);
|
|
327
|
+
--button-text: var(--color-content-action-secondary);
|
|
328
|
+
--button-text-hover: var(--color-content-action-secondary);
|
|
329
|
+
--button-border-width: 0;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
:host([variant="tertiary"]) {
|
|
333
|
+
--button-bg: var(--color-container-action-tertiary-default);
|
|
334
|
+
--button-bg-hover: var(--color-container-action-tertiary-hover);
|
|
335
|
+
--button-bg-pressed: var(--color-container-action-tertiary-pressed);
|
|
336
|
+
--button-text: var(--color-content-body);
|
|
337
|
+
--button-text-hover: var(--color-content-action-tertiary);
|
|
338
|
+
--button-border-width: 0;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
:host([disabled]),
|
|
342
|
+
:host([aria-disabled="true"]),
|
|
343
|
+
:host([aria-disabled="true"]:hover) {
|
|
344
|
+
--button-bg: var(--color-container-disabled);
|
|
345
|
+
--button-text: var(--color-content-disabled);
|
|
346
|
+
--button-border: transparent;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
:host([disabled][variant="secondary"]) {
|
|
350
|
+
--button-border: var(--color-border-secondary);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.button {
|
|
354
|
+
display: inline-flex;
|
|
355
|
+
align-items: center;
|
|
356
|
+
justify-content: center;
|
|
357
|
+
width: 100%;
|
|
358
|
+
gap: var(--spacing-s, 8px);
|
|
359
|
+
height: 100%;
|
|
360
|
+
background-color: var(--button-bg);
|
|
361
|
+
color: var(--button-text);
|
|
362
|
+
border: var(--button-border-width, var(--border-m)) solid var(--button-border);
|
|
363
|
+
border-radius: var(--radius-m);
|
|
364
|
+
|
|
365
|
+
min-width: 64px;
|
|
366
|
+
padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
|
|
367
|
+
cursor: inherit;
|
|
368
|
+
box-sizing: border-box;
|
|
369
|
+
|
|
370
|
+
span, o-icon-button {
|
|
371
|
+
font-family: var(--font-family-loccitane-sans);
|
|
372
|
+
font-size: var(--font-size-150);
|
|
373
|
+
font-weight: var(--font-weight-400);
|
|
374
|
+
line-height: var(--line-height-200);
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.button:hover:not([disabled]) {
|
|
379
|
+
background-color: var(--button-bg-hover);
|
|
380
|
+
color: var(--button-text-hover);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.button:active:not([disabled]) {
|
|
384
|
+
background-color: var(--button-bg-pressed);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.button:focus-visible {
|
|
388
|
+
${Jt};
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
span + span::before {
|
|
392
|
+
content: "•";
|
|
393
|
+
margin-right: 8px;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.icon-start,
|
|
397
|
+
.icon-end {
|
|
398
|
+
display: inline-flex;
|
|
399
|
+
align-items: center;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
:host([variant="tertiary"][fullwidth][startIcon]) .button,
|
|
403
|
+
:host([variant="tertiary"][fullwidth][endIcon]) .button {
|
|
404
|
+
justify-content: space-between;
|
|
405
|
+
padding-left: 12px;
|
|
406
|
+
padding-right: 8px;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.button span {
|
|
410
|
+
display: inline-flex;
|
|
411
|
+
align-items: center;
|
|
412
|
+
margin-top: 1px;
|
|
413
|
+
}
|
|
414
|
+
`;v([l()],u.prototype,"type",2);v([l({reflect:!0})],u.prototype,"value",2);v([l({reflect:!0})],u.prototype,"variant",2);v([l({type:String})],u.prototype,"text",2);v([l({type:String})],u.prototype,"textsecond",2);v([l({reflect:!0,type:Boolean})],u.prototype,"fullwidth",2);v([l({reflect:!0,type:Boolean})],u.prototype,"disabled",2);v([l({type:String})],u.prototype,"iconstrokewidth",2);v([l({type:Boolean,reflect:!0})],u.prototype,"startIcon",2);v([l({type:Boolean,reflect:!0})],u.prototype,"endIcon",2);v([l({type:String,reflect:!0})],u.prototype,"iconSize",2);v([l({type:String})],u.prototype,"icon",2);v([l()],u.prototype,"href",2);v([l()],u.prototype,"target",2);u=v([z("o-button")],u);var ye=Object.defineProperty,$e=Object.getOwnPropertyDescriptor,Q=(n,t,e,o)=>{for(var s=o>1?void 0:o?$e(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&ye(t,e,s),s};let U=class extends ${constructor(){super(...arguments),this.status="empty",this.ariaDescribedBy="a-product-name",this.label="Add to wishlist"}render(){const n=pt.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return d`
|
|
415
|
+
<button
|
|
416
|
+
type="button"
|
|
417
|
+
aria-describedby="${this.ariaDescribedBy}"
|
|
418
|
+
class="wishlist-button"
|
|
419
|
+
@click="${this.handleClick}"
|
|
420
|
+
>
|
|
421
|
+
<span class="sr-only">${this.label}</span>
|
|
422
|
+
${J(n)}
|
|
423
|
+
</button>
|
|
424
|
+
`}handleClick(n){this.toggleStatus(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))}toggleStatus(){this.status=this.status=="empty"?"filled":"empty"}setStatus(n){this.status=n,this.requestUpdate()}setAriaDescribedBy(n){this.ariaDescribedBy=n,this.requestUpdate()}setLabel(n){this.label=n,this.requestUpdate()}};U.styles=S`
|
|
425
|
+
:host {
|
|
426
|
+
display: inline-flex;
|
|
427
|
+
justify-content: center;
|
|
428
|
+
align-items: center;
|
|
429
|
+
cursor: pointer;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.wishlist-button {
|
|
433
|
+
display: flex;
|
|
434
|
+
justify-content: center;
|
|
435
|
+
align-items: center;
|
|
436
|
+
width: 40px;
|
|
437
|
+
height: 40px;
|
|
438
|
+
border: transparent;
|
|
439
|
+
border-radius: var(--radius-full);
|
|
440
|
+
background-color: var(--color-alpha-light-strong);
|
|
441
|
+
position: relative;
|
|
442
|
+
cursor: pointer;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.sr-only {
|
|
446
|
+
border: 0 !important;
|
|
447
|
+
clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
|
|
448
|
+
-webkit-clip-path: inset(50%) !important;
|
|
449
|
+
clip-path: inset(50%) !important;
|
|
450
|
+
height: 0.1rem !important;
|
|
451
|
+
margin: -0.1rem !important;
|
|
452
|
+
overflow: hidden !important;
|
|
453
|
+
padding: 0 !important;
|
|
454
|
+
position: absolute !important;
|
|
455
|
+
width: 0.1rem !important;
|
|
456
|
+
white-space: nowrap !important;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.wishlist-button:hover {
|
|
460
|
+
background-color: var(--color-alpha-light-stronger);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
:host([status="filled"]) .wishlist-button {
|
|
464
|
+
background-color: var(--color-alpha-light-strongest);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.wishlist-button:hover svg path {
|
|
468
|
+
fill: var(--color-content-action-secondary);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
:host([status="filled"]) .wishlist-button svg path {
|
|
472
|
+
fill: var(--color-content-action-secondary);
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
:host([status="filled"]) .wishlist-button:hover svg path {
|
|
476
|
+
fill: var(--color-alpha-light-strong);
|
|
477
|
+
}
|
|
478
|
+
`;Q([l({type:String,reflect:!0})],U.prototype,"status",2);Q([l({type:String,reflect:!0})],U.prototype,"ariaDescribedBy",2);Q([l({type:String,reflect:!0})],U.prototype,"label",2);U=Q([z("o-wishlist-button")],U);var me=Object.defineProperty,we=Object.getOwnPropertyDescriptor,H=(n,t,e,o)=>{for(var s=o>1?void 0:o?we(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&me(t,e,s),s};let _=class extends ${constructor(){super(...arguments),this.href="",this.target="",this.template="standard",this.inverse=!1,this.endIcon=!1,this.reverseEndIcon=!1}render(){return d`
|
|
434
479
|
<a href="${this.href}" target="${this.target}">
|
|
435
|
-
${this.endIcon&&this.reverseEndIcon?
|
|
480
|
+
${this.endIcon&&this.reverseEndIcon?d`
|
|
436
481
|
<o-icon-button
|
|
437
482
|
icon="chevronLeft"
|
|
438
483
|
bgstyle="${this.inverse?"none-light":"none-contrast"}"
|
|
@@ -442,7 +487,7 @@
|
|
|
442
487
|
></o-icon-button>
|
|
443
488
|
`:null}
|
|
444
489
|
<span class="link-text"><slot></slot></span>
|
|
445
|
-
${this.endIcon&&!this.reverseEndIcon?
|
|
490
|
+
${this.endIcon&&!this.reverseEndIcon?d`
|
|
446
491
|
<o-icon-button
|
|
447
492
|
icon="chevronRight"
|
|
448
493
|
bgstyle="${this.inverse?"none-light":"none-contrast"}"
|
|
@@ -452,7 +497,7 @@
|
|
|
452
497
|
></o-icon-button>
|
|
453
498
|
`:null}
|
|
454
499
|
</a>
|
|
455
|
-
`}};
|
|
500
|
+
`}};_.styles=S`
|
|
456
501
|
:host([template="standard"]) a {
|
|
457
502
|
color: var(--color-content-action-secondary);
|
|
458
503
|
font-size: var(--font-size-200);
|
|
@@ -549,14 +594,14 @@
|
|
|
549
594
|
opacity: 0;
|
|
550
595
|
}
|
|
551
596
|
/* End of underline effect */
|
|
552
|
-
`;H([
|
|
597
|
+
`;H([l({type:String})],_.prototype,"href",2);H([l({type:String})],_.prototype,"target",2);H([l({type:String,reflect:!0})],_.prototype,"template",2);H([l({type:Boolean,reflect:!0})],_.prototype,"inverse",2);H([l({type:Boolean,reflect:!0})],_.prototype,"endIcon",2);H([l({type:Boolean,reflect:!0})],_.prototype,"reverseEndIcon",2);_=H([z("o-link")],_);var _e=Object.defineProperty,xe=Object.getOwnPropertyDescriptor,Y=(n,t,e,o)=>{for(var s=o>1?void 0:o?xe(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&_e(t,e,s),s};let T=class extends ${constructor(){super(...arguments),this.rating=0}getStarKeys(){const n=[];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,n.push(`star-${o}`)}return n}render(){const n=this.getStarKeys();return d`
|
|
553
598
|
<div class="rating">
|
|
554
599
|
<div class="stars">
|
|
555
|
-
${
|
|
600
|
+
${n.map(t=>d`<span class="star">${J(pt[t]??"")}</span>`)}
|
|
556
601
|
</div>
|
|
557
|
-
${this.reviewCount!=null&&this.href!=null?
|
|
602
|
+
${this.reviewCount!=null&&this.href!=null?d`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
|
|
558
603
|
</div>
|
|
559
|
-
`}};
|
|
604
|
+
`}};T.styles=S`
|
|
560
605
|
svg {
|
|
561
606
|
width: 12px;
|
|
562
607
|
height: 12px;
|
|
@@ -589,4 +634,145 @@
|
|
|
589
634
|
text-decoration: underline;
|
|
590
635
|
cursor: pointer;
|
|
591
636
|
}
|
|
592
|
-
`;
|
|
637
|
+
`;Y([l({type:Number})],T.prototype,"rating",2);Y([l({type:String})],T.prototype,"reviewCount",2);Y([l({type:String})],T.prototype,"href",2);T=Y([z("o-rating")],T);var Ae=Object.defineProperty,Ee=Object.getOwnPropertyDescriptor,y=(n,t,e,o)=>{for(var s=o>1?void 0:o?Ee(t,e):t,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&Ae(t,e,s),s};let b=class extends ${constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!0,this.headerTitle="",this.closeButtonLabel="Close the modal",this.firstButtonLabel="First Button",this.firstButtonVariant="primary",this.secondaryButtonLabel="Second Button",this.secondaryButtonVariant="primary",this.previousFocusedElement=null,this.handleKeyDown=n=>{this.open&&(n.key==="Escape"?this.closePanel():n.key==="Tab"&&this.trapFocus(n))}}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){window.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}trapFocus(n){const t=this.getFocusableElements();if(t.length===0)return;const e=t[0],o=t[t.length-1];n.shiftKey&&document.activeElement===e?(n.preventDefault(),o.focus()):!n.shiftKey&&document.activeElement===o&&(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,this.updateComplete.then(()=>{const n=this.getFocusableElements()[0];n==null||n.focus()})}closePanel(){var n;this.open=!1,(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()}render(){return d`
|
|
638
|
+
<div class="overlay" @click=${this.closePanel}></div>
|
|
639
|
+
<div
|
|
640
|
+
class="panel"
|
|
641
|
+
role="dialog"
|
|
642
|
+
aria-modal="true"
|
|
643
|
+
aria-labelledby="panel-title"
|
|
644
|
+
>
|
|
645
|
+
<o-icon-button icon="cross" size="medium" class="close-btn" @click=${this.closePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
|
|
646
|
+
|
|
647
|
+
${this.showHeader?d`
|
|
648
|
+
<div class="header">
|
|
649
|
+
<span id="panel-title" class="panel-title">${this.headerTitle}</span>
|
|
650
|
+
</div>
|
|
651
|
+
`:null}
|
|
652
|
+
|
|
653
|
+
<div class="content">
|
|
654
|
+
<slot></slot>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
${this.showFooter&&this.firstButtonVariant&&this.firstButtonLabel||this.secondaryButtonVariant&&this.secondaryButtonLabel?d`
|
|
658
|
+
<div class="footer">
|
|
659
|
+
${this.firstButtonVariant&&this.firstButtonLabel?d`
|
|
660
|
+
<o-button
|
|
661
|
+
customclass="full"
|
|
662
|
+
variant="${this.firstButtonVariant}"
|
|
663
|
+
@click=${this.handleFirstClick}
|
|
664
|
+
>
|
|
665
|
+
${this.firstButtonLabel}
|
|
666
|
+
</o-button>
|
|
667
|
+
`:null}
|
|
668
|
+
|
|
669
|
+
${this.secondaryButtonVariant&&this.secondaryButtonLabel?d`
|
|
670
|
+
<o-button
|
|
671
|
+
customclass="full"
|
|
672
|
+
variant="${this.secondaryButtonVariant}"
|
|
673
|
+
@click=${this.handleSecondaryClick}
|
|
674
|
+
>
|
|
675
|
+
${this.secondaryButtonLabel}
|
|
676
|
+
</o-button>
|
|
677
|
+
`:null}
|
|
678
|
+
</div>
|
|
679
|
+
`:null}
|
|
680
|
+
</div>
|
|
681
|
+
`}};b.styles=S`
|
|
682
|
+
:host {
|
|
683
|
+
position: fixed;
|
|
684
|
+
top: 0;
|
|
685
|
+
right: 0;
|
|
686
|
+
height: 100%;
|
|
687
|
+
width: 100%;
|
|
688
|
+
z-index: 1000;
|
|
689
|
+
pointer-events: none;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.overlay {
|
|
693
|
+
position: absolute;
|
|
694
|
+
inset: 0;
|
|
695
|
+
backdrop-filter: blur(4px);
|
|
696
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
697
|
+
opacity: 0;
|
|
698
|
+
transition: opacity 0.3s ease;
|
|
699
|
+
pointer-events: none;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
:host([open]) .overlay {
|
|
703
|
+
opacity: 1;
|
|
704
|
+
pointer-events: auto;
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.panel {
|
|
708
|
+
position: absolute;
|
|
709
|
+
top: 0;
|
|
710
|
+
right: 0;
|
|
711
|
+
min-width: 375px;
|
|
712
|
+
width: 100%;
|
|
713
|
+
max-width: 416px;
|
|
714
|
+
height: 100%;
|
|
715
|
+
background: white;
|
|
716
|
+
box-shadow: var(--colors-alpha-dark-60);
|
|
717
|
+
transform: translateX(100%);
|
|
718
|
+
transition: transform 0.3s ease;
|
|
719
|
+
display: flex;
|
|
720
|
+
flex-direction: column;
|
|
721
|
+
pointer-events: auto;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
:host([open]) .panel {
|
|
725
|
+
transform: translateX(0%);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
.header {
|
|
729
|
+
flex: 0 0 auto;
|
|
730
|
+
padding: 16px 0 16px 12px;
|
|
731
|
+
border-bottom: var(--border-050) solid var(--color-border-tertiary);
|
|
732
|
+
|
|
733
|
+
.panel-title {
|
|
734
|
+
font-family: var(--font-family-loccitane-serif);
|
|
735
|
+
font-size: var(--font-size-300);
|
|
736
|
+
font-weight: var(--font-weight-400);
|
|
737
|
+
line-height: var(--line-height-240);
|
|
738
|
+
font-style: italic;
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.content {
|
|
743
|
+
flex: 1 1 auto;
|
|
744
|
+
overflow-y: auto;
|
|
745
|
+
padding: 16px;
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
.footer {
|
|
749
|
+
flex: 0 0 auto;
|
|
750
|
+
padding: 16px;
|
|
751
|
+
border-top: var(--border-050) solid var(--color-border-tertiary);
|
|
752
|
+
display: flex;
|
|
753
|
+
gap: 16px;
|
|
754
|
+
justify-content: flex-start;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.close-btn {
|
|
758
|
+
position: absolute;
|
|
759
|
+
top: 0.5rem;
|
|
760
|
+
right: 0.5rem;
|
|
761
|
+
background: none;
|
|
762
|
+
border: none;
|
|
763
|
+
font-size: 1.5rem;
|
|
764
|
+
cursor: pointer;
|
|
765
|
+
color: inherit;
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
.close-btn:focus {
|
|
769
|
+
outline: 2px solid #000;
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
@media (max-width: 640px) {
|
|
773
|
+
.panel {
|
|
774
|
+
width: 100%;
|
|
775
|
+
max-width: none;
|
|
776
|
+
}
|
|
777
|
+
}
|
|
778
|
+
`;y([l({type:Boolean,reflect:!0})],b.prototype,"open",2);y([l({type:Boolean})],b.prototype,"showHeader",2);y([l({type:Boolean})],b.prototype,"showFooter",2);y([l({type:String})],b.prototype,"headerTitle",2);y([l({type:String})],b.prototype,"closeButtonLabel",2);y([l({type:String})],b.prototype,"firstButtonLabel",2);y([l({type:String})],b.prototype,"firstButtonVariant",2);y([l({type:Function})],b.prototype,"onFirstButtonClick",2);y([l({type:String})],b.prototype,"secondaryButtonLabel",2);y([l({type:String})],b.prototype,"secondaryButtonVariant",2);y([l({type:Function})],b.prototype,"onSecondaryButtonClick",2);b=y([z("o-side-panel")],b);
|