@florid-kit/components 0.8.52 → 0.8.53
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 +1 -0
- package/index.js +35 -21
- package/index.mjs +77 -60
- package/package.json +1 -1
package/components/button.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export declare class OccitaneButton extends buttonBaseClass implements FormSubmi
|
|
|
25
25
|
href: string;
|
|
26
26
|
target: "_blank" | "_self" | "_top" | "_parent" | "";
|
|
27
27
|
underlined: boolean;
|
|
28
|
+
withbadge: boolean;
|
|
28
29
|
private handleClick;
|
|
29
30
|
protected render(): import('lit').TemplateResult<1>;
|
|
30
31
|
private renderIcon;
|
package/index.js
CHANGED
|
@@ -142,11 +142,11 @@
|
|
|
142
142
|
* @license
|
|
143
143
|
* Copyright 2017 Google LLC
|
|
144
144
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
145
|
-
*/class Lt extends St{}Lt.directiveName="unsafeSVG",Lt.resultType=2;const I=Tt(Lt);var no=Object.defineProperty,ro=Object.getOwnPropertyDescriptor,x=(o,t,e,n)=>{for(var i=n>1?void 0:n?ro(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&no(t,e,i),i};const so=Ht(v);let
|
|
145
|
+
*/class Lt extends St{}Lt.directiveName="unsafeSVG",Lt.resultType=2;const I=Tt(Lt);var no=Object.defineProperty,ro=Object.getOwnPropertyDescriptor,x=(o,t,e,n)=>{for(var i=n>1?void 0:n?ro(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&no(t,e,i),i};const so=Ht(v);let b=class extends so{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.text="",this.textsecond="",this.fullwidth=!1,this.disabled=!1,this.startIconModel="",this.endIconModel="",this.startIcon=!1,this.endIcon=!1,this.panelTarget="",this.href="",this.target="",this.underlined=!1,this.withbadge=!1}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Dt].form}handleClick(){if(this.panelTarget){const o=document.getElementById(this.panelTarget);o!=null&&o.openPanel&&typeof o.openPanel=="function"?o.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(o){const t=o==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const e=G[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${I(e)}</span>`}renderButton(){const o=this.text||this.textsecond;return l`
|
|
146
146
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
147
147
|
${this.startIcon?this.renderIcon("start"):d}
|
|
148
148
|
${o?l`
|
|
149
|
-
${this.text?l`<span class="text">${this.text}</span>`:d}
|
|
149
|
+
${this.text?l`<span class="text">${this.text}${this.withbadge?l`<slot></slot>`:d}</span>`:d}
|
|
150
150
|
${this.textsecond?l`<span class="text">${this.textsecond}</span>`:d}
|
|
151
151
|
`:l`<slot></slot>`}
|
|
152
152
|
${this.endIcon?this.renderIcon("end"):d}
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
`:l`<slot></slot>`}
|
|
166
166
|
${this.endIcon?this.renderIcon("end"):d}
|
|
167
167
|
</a>
|
|
168
|
-
`}};Oe(
|
|
168
|
+
`}};Oe(b);b.formAssociated=!0;b.styles=y`
|
|
169
169
|
:host {
|
|
170
170
|
--button-border: transparent;
|
|
171
171
|
cursor: pointer;
|
|
@@ -342,6 +342,14 @@
|
|
|
342
342
|
}
|
|
343
343
|
}
|
|
344
344
|
|
|
345
|
+
:host([withbadge]) {
|
|
346
|
+
--badge-width: 19px;
|
|
347
|
+
position: relative;
|
|
348
|
+
}
|
|
349
|
+
:host([withbadge]) .button {
|
|
350
|
+
padding-right: calc(var(--badge-width) + var(--spacing-l, 12px) + var(--spacing-s, 8px));
|
|
351
|
+
}
|
|
352
|
+
|
|
345
353
|
//Icon movement on hover
|
|
346
354
|
:host([variant="tertiary"][endIcon]) .icon-end {
|
|
347
355
|
display: inline-flex;
|
|
@@ -353,7 +361,7 @@
|
|
|
353
361
|
transform: translateX(4px);
|
|
354
362
|
}
|
|
355
363
|
//End icon movment on hover
|
|
356
|
-
`;x([a()],
|
|
364
|
+
`;x([a()],b.prototype,"type",2);x([a({reflect:!0})],b.prototype,"value",2);x([a({type:String,reflect:!0})],b.prototype,"variant",2);x([a({type:String})],b.prototype,"text",2);x([a({type:String})],b.prototype,"textsecond",2);x([a({type:Boolean,reflect:!0})],b.prototype,"fullwidth",2);x([a({type:Boolean,reflect:!0})],b.prototype,"disabled",2);x([a({type:String,reflect:!0})],b.prototype,"startIconModel",2);x([a({type:String,reflect:!0})],b.prototype,"endIconModel",2);x([a({type:Boolean,reflect:!0,attribute:"starticon"})],b.prototype,"startIcon",2);x([a({type:Boolean,reflect:!0,attribute:"endicon"})],b.prototype,"endIcon",2);x([a({type:String,attribute:"paneltarget",reflect:!0})],b.prototype,"panelTarget",2);x([a({type:String})],b.prototype,"href",2);x([a({type:String})],b.prototype,"target",2);x([a({type:Boolean,reflect:!0})],b.prototype,"underlined",2);x([a({type:Boolean,reflect:!0})],b.prototype,"withbadge",2);b=x([w("o-button")],b);var ao=Object.defineProperty,lo=Object.getOwnPropertyDescriptor,xt=(o,t,e,n)=>{for(var i=n>1?void 0:n?lo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&ao(t,e,i),i};let Y=class extends v{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(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this.toggleStatus())}render(){const o=G.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`
|
|
357
365
|
<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
|
|
358
366
|
<span class="sr-only">${this.label}</span>
|
|
359
367
|
${I(o)}
|
|
@@ -815,7 +823,7 @@
|
|
|
815
823
|
* @license
|
|
816
824
|
* Copyright 2017 Google LLC
|
|
817
825
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
818
|
-
*/const nt=(o,t)=>{var n;const e=o._$AN;if(e===void 0)return!1;for(const i of e)(n=i._$AO)==null||n.call(i,t,!1),nt(i,t);return!0},mt=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},ce=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),mo(t)}};function go(o){this._$AN!==void 0?(mt(this),this._$AM=o,ce(this)):this._$AM=o}function yo(o,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let r=e;r<n.length;r++)nt(n[r],!1),mt(n[r]);else n!=null&&(nt(n,!1),mt(n));else nt(this,o)}const mo=o=>{o.type==Mt.CHILD&&(o._$AP??(o._$AP=yo),o._$AQ??(o._$AQ=go))};class wo extends jt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),ce(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(nt(this,t),mt(this))}setValue(t){if(bo(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class xo extends wo{constructor(){super(...arguments),this.prevData={}}render(t){return d}update(t,[e]){var n;this.element!==t.element&&(this.element=t.element),this.host=((n=t.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(e),this.groom(e),this.prevData={...e}}apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];r!==e[i]&&(n[i]=r)}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&(n[i]=void 0)}}class $o extends xo{constructor(){super(...arguments),this.eventData={}}apply(t){if(t)for(const e in t){const n=t[e];n!==this.eventData[e]&&this.applyEvent(e,n)}}applyEvent(t,e){const{prevData:n,element:i}=this;this.eventData[t]=e,n[t]&&i.removeEventListener(t,this,e),i.addEventListener(t,this,e)}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&this.groomEvent(i,e[i])}groomEvent(t,e){const{element:n}=this;delete this.eventData[t],n.removeEventListener(t,this,e)}handleEvent(t){const e=this.eventData[t.type];typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}disconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.removeEventListener(i,this,r)}}reconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.addEventListener(i,this,r)}}}class _o extends $o{apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];if(r===e[i])continue;const s=i.slice(1);switch(i[0]){case"@":this.eventData[s]=r,this.applyEvent(s,r);break;case".":n[s]=r;break;case"?":r?n.setAttribute(s,""):n.removeAttribute(s);break;default:r!=null?n.setAttribute(i,String(r)):n.removeAttribute(i);break}}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e){const r=i.slice(1);if(!t||!(i in t)&&n[r]===e[i])switch(i[0]){case"@":this.groomEvent(r,e[i]);break;case".":n[r]=void 0;break;case"?":n.removeAttribute(r);break;default:n.removeAttribute(i);break}}}}const oe=Tt(_o);var Co=Object.defineProperty,ko=Object.getOwnPropertyDescriptor,
|
|
826
|
+
*/const nt=(o,t)=>{var n;const e=o._$AN;if(e===void 0)return!1;for(const i of e)(n=i._$AO)==null||n.call(i,t,!1),nt(i,t);return!0},mt=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},ce=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),mo(t)}};function go(o){this._$AN!==void 0?(mt(this),this._$AM=o,ce(this)):this._$AM=o}function yo(o,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let r=e;r<n.length;r++)nt(n[r],!1),mt(n[r]);else n!=null&&(nt(n,!1),mt(n));else nt(this,o)}const mo=o=>{o.type==Mt.CHILD&&(o._$AP??(o._$AP=yo),o._$AQ??(o._$AQ=go))};class wo extends jt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),ce(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(nt(this,t),mt(this))}setValue(t){if(bo(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class xo extends wo{constructor(){super(...arguments),this.prevData={}}render(t){return d}update(t,[e]){var n;this.element!==t.element&&(this.element=t.element),this.host=((n=t.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(e),this.groom(e),this.prevData={...e}}apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];r!==e[i]&&(n[i]=r)}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&(n[i]=void 0)}}class $o extends xo{constructor(){super(...arguments),this.eventData={}}apply(t){if(t)for(const e in t){const n=t[e];n!==this.eventData[e]&&this.applyEvent(e,n)}}applyEvent(t,e){const{prevData:n,element:i}=this;this.eventData[t]=e,n[t]&&i.removeEventListener(t,this,e),i.addEventListener(t,this,e)}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&this.groomEvent(i,e[i])}groomEvent(t,e){const{element:n}=this;delete this.eventData[t],n.removeEventListener(t,this,e)}handleEvent(t){const e=this.eventData[t.type];typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}disconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.removeEventListener(i,this,r)}}reconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.addEventListener(i,this,r)}}}class _o extends $o{apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];if(r===e[i])continue;const s=i.slice(1);switch(i[0]){case"@":this.eventData[s]=r,this.applyEvent(s,r);break;case".":n[s]=r;break;case"?":r?n.setAttribute(s,""):n.removeAttribute(s);break;default:r!=null?n.setAttribute(i,String(r)):n.removeAttribute(i);break}}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e){const r=i.slice(1);if(!t||!(i in t)&&n[r]===e[i])switch(i[0]){case"@":this.groomEvent(r,e[i]);break;case".":n[r]=void 0;break;case"?":n.removeAttribute(r);break;default:n.removeAttribute(i);break}}}}const oe=Tt(_o);var Co=Object.defineProperty,ko=Object.getOwnPropertyDescriptor,g=(o,t,e,n)=>{for(var i=n>1?void 0:n?ko(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Co(t,e,i),i};let u=class extends v{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.closeButtonLabel="Close the modal",this.firstButtonLabel="Close",this.firstButtonVariant="primary",this.firstButtonProps={},this.onFirstButtonClickClose=!1,this.secondButtonLabel="",this.secondButtonVariant="secondary",this.secondButtonProps={},this.onSecondButtonClickClose=!1,this.disablePortal=!1,this.zIndex=99,this.initialized=!1,this.showDetail=!1,this.isHidingDetail=!1,this.previousFocusedElement=null,this.innerFocusedElement=null,this._onOpenDetail=()=>{this.showDetail=!0,this.showHeaderStartIcon=!0},this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;o.preventDefault(),o.stopPropagation();const t=o.currentTarget,e=(t==null?void 0:t.getAttribute("data-role"))==="back";if(this.showDetail&&e){this.isHidingDetail=!0;const n=this.renderRoot.querySelector(".content");if(n){const i=()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,n.removeEventListener("animationend",i)};n.addEventListener("animationend",i)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}this.closePanel()}}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),this.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0}),this.addEventListener("open-detail",this._onOpenDetail)}disconnectedCallback(){document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.removeEventListener("open-detail",this._onOpenDetail)}trapFocus(o){var i,r,s,h,c,f,m,p,$,S;this.innerFocusedElement=document.activeElement||null,this.innerFocusedElement=((r=(i=this.innerFocusedElement)==null?void 0:i.shadowRoot)==null?void 0:r.activeElement)||this.innerFocusedElement;const t=this.getFocusableElements();if(t.length===0)return;const e=t[0],n=t[t.length-1];o.shiftKey&&this.innerFocusedElement===e?(o.preventDefault(),n.shadowRoot?(c=(h=(s=n.shadowRoot)==null?void 0:s.querySelector(u.focusablesSelector))==null?void 0:h.focus)==null||c.call(h):(f=n.focus)==null||f.call(n)):!o.shiftKey&&this.innerFocusedElement===n&&(o.preventDefault(),e.shadowRoot?($=(p=(m=e.shadowRoot)==null?void 0:m.querySelector(u.focusablesSelector))==null?void 0:p.focus)==null||$.call(p):(S=e.focus)==null||S.call(e))}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");if(!o)return[];function t(i){return!(i.disabled||i.hasAttribute("disabled")||i.hasAttribute("tabindex")&&i.getAttribute("tabindex")==="-1")}function e(i){var s;const r=[i.matches(u.focusablesSelector)?i:[]];if(!["o-icon-button","o-button"].includes(i.tagName.toLowerCase())){const h=Array.from(i instanceof HTMLSlotElement?i.assignedElements({flatten:!0}):[]).filter(t).flatMap(e),c=Array.from(((s=i.shadowRoot)==null?void 0:s.querySelectorAll("*"))||[]).filter(t).flatMap(e);r.push(...h,...c)}return r.flat()}return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e)}openPanel(){this.previousFocusedElement=document.activeElement,this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open"),this.updateComplete.then(()=>{var o,t,e,n;if(this.showHeader){const i=((o=this.shadowRoot)==null?void 0:o.querySelector(".panel .close-btn"))||null,r=((t=i==null?void 0:i.shadowRoot)==null?void 0:t.querySelector("button"))||null;r&&((e=r.focus)==null||e.call(r))}else{const i=this.getFocusableElements()[0];(n=i==null?void 0:i.focus)==null||n.call(i)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var o,t,e,n,i;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),((o=this.previousFocusedElement)==null?void 0:o.tagName.toLowerCase())==="o-button"?(n=(e=(t=this.previousFocusedElement.shadowRoot)==null?void 0:t.querySelector(".button"))==null?void 0:e.focus)==null||n.call(e):(i=this.previousFocusedElement)==null||i.focus(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleFirstClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onFirstButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("firstbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"first",target:o.target}})))}handleSecondClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onSecondButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("secondbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"second",target:o.target}})))}updated(){this.style.setProperty("--z-overlay",`${this.zIndex||99}`),this.style.setProperty("--z-panel",`${this.zIndex?this.zIndex+1:99}`)}render(){const o=this.showHeader?l`
|
|
819
827
|
<div class="header">
|
|
820
828
|
${this.showHeaderStartIcon?l`
|
|
821
829
|
<o-icon-button
|
|
@@ -1081,7 +1089,7 @@
|
|
|
1081
1089
|
.detail-content {
|
|
1082
1090
|
padding: var(--spacing-xl);
|
|
1083
1091
|
}
|
|
1084
|
-
`;u.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';u.focusablesCustomElementsSelector="o-icon-button, o-button";
|
|
1092
|
+
`;u.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';u.focusablesCustomElementsSelector="o-icon-button, o-button";g([a({type:Boolean,reflect:!0})],u.prototype,"open",2);g([a({type:Boolean,reflect:!0})],u.prototype,"showHeader",2);g([a({type:Boolean,reflect:!0})],u.prototype,"showFooter",2);g([a({type:Boolean,reflect:!0})],u.prototype,"showHeaderStartIcon",2);g([a({type:String,reflect:!0})],u.prototype,"headerTitle",2);g([a({type:String,reflect:!0})],u.prototype,"headerTitleClassName",2);g([a({type:String,reflect:!0})],u.prototype,"closeButtonLabel",2);g([a({type:String,reflect:!0})],u.prototype,"firstButtonLabel",2);g([a({type:String,reflect:!0})],u.prototype,"firstButtonVariant",2);g([a({type:Object,reflect:!0})],u.prototype,"firstButtonProps",2);g([a({type:Boolean,reflect:!0})],u.prototype,"onFirstButtonClickClose",2);g([a({type:String,reflect:!0})],u.prototype,"secondButtonLabel",2);g([a({type:String,reflect:!0})],u.prototype,"secondButtonVariant",2);g([a({type:Object,reflect:!0})],u.prototype,"secondButtonProps",2);g([a({type:Boolean,reflect:!0})],u.prototype,"onSecondButtonClickClose",2);g([a({type:Boolean,reflect:!0})],u.prototype,"disablePortal",2);g([a({type:Number,reflect:!0})],u.prototype,"zIndex",2);g([a({type:Boolean,reflect:!0})],u.prototype,"initialized",2);g([a({type:Boolean})],u.prototype,"showDetail",2);g([a({type:Boolean})],u.prototype,"isHidingDetail",2);u=g([w("o-side-panel")],u);var Ao=Object.defineProperty,Eo=Object.getOwnPropertyDescriptor,N=(o,t,e,n)=>{for(var i=n>1?void 0:n?Eo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ao(t,e,i),i};let O=class extends v{constructor(){super(...arguments),this.thumbnails=[],this.activeIndex=0,this.disabledIndexes=[],this.maxWidth="100%",this.altressource="visual",this.focusedIndex=0,this.playerIconTemplate=l`
|
|
1085
1093
|
<o-icon-button
|
|
1086
1094
|
icon="playerv"
|
|
1087
1095
|
size="xsmall"
|
|
@@ -2312,34 +2320,40 @@
|
|
|
2312
2320
|
</span>
|
|
2313
2321
|
`}};pt.styles=y`
|
|
2314
2322
|
:host([variant]) {
|
|
2323
|
+
--badge-width: 19px;
|
|
2315
2324
|
display: inline-block;
|
|
2316
|
-
--background-color: var(--color-container-brand-accent);
|
|
2317
|
-
--border-color: var(--color-border-primary);
|
|
2318
|
-
--text-color: var(--color-content-body);
|
|
2325
|
+
--background-color: var(--color-container-brand-accent, #ffc700);
|
|
2326
|
+
--border-color: var(--color-border-primary, #3f2b2e);
|
|
2327
|
+
--text-color: var(--color-content-body, #3f2b2e);
|
|
2319
2328
|
}
|
|
2320
2329
|
|
|
2321
2330
|
:host([variant="filter"]) {
|
|
2322
|
-
--background-color: var(--color-container-filter-default);
|
|
2323
|
-
--border-color: var(--color-container-filter-default);
|
|
2324
|
-
--text-color: var(--color-content-filter);
|
|
2331
|
+
--background-color: var(--color-container-filter-default, #7F4E61);
|
|
2332
|
+
--border-color: var(--color-container-filter-default, #7F4E61);
|
|
2333
|
+
--text-color: var(--color-content-filter, #f6f0e7);
|
|
2334
|
+
}
|
|
2335
|
+
|
|
2336
|
+
:host([withinbutton]) {
|
|
2337
|
+
position: absolute;
|
|
2338
|
+
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
2325
2339
|
}
|
|
2326
2340
|
|
|
2327
2341
|
.badge {
|
|
2328
2342
|
display: block;
|
|
2329
|
-
padding: 1px var(--spacing-4-xs) var(--spacing-4-xs) 1px;
|
|
2343
|
+
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|
|
2330
2344
|
box-sizing: content-box;
|
|
2331
|
-
font-family: var(--font-family-loccitane-sans);
|
|
2332
|
-
font-weight: var(--font-weight-400);
|
|
2333
|
-
height: var(--line-height-160);
|
|
2334
|
-
width: var(--line-height-160);
|
|
2345
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
2346
|
+
font-weight: var(--font-weight-400, 400);
|
|
2347
|
+
height: var(--line-height-160, 16px);
|
|
2348
|
+
width: var(--line-height-160, 16px);
|
|
2335
2349
|
text-align: center;
|
|
2336
2350
|
overflow: hidden;
|
|
2337
2351
|
background: var(--background-color);
|
|
2338
|
-
border: var(--border-s) solid var(--border-color);
|
|
2352
|
+
border: var(--border-s, 0.5px) solid var(--border-color);
|
|
2339
2353
|
border-radius: 100%;
|
|
2340
|
-
font-size: var(--font-size-100);
|
|
2341
|
-
letter-spacing: var(--letter-spacing-400);
|
|
2342
|
-
line-height: var(--line-height-160);
|
|
2354
|
+
font-size: var(--font-size-100, 12px);
|
|
2355
|
+
letter-spacing: var(--letter-spacing-400, 0.04em);
|
|
2356
|
+
line-height: var(--line-height-160, 16px);
|
|
2343
2357
|
color: var(--text-color);
|
|
2344
2358
|
}
|
|
2345
2359
|
|
package/index.mjs
CHANGED
|
@@ -826,9 +826,9 @@ var no = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, x = (o, t,
|
|
|
826
826
|
return n && i && no(t, e, i), i;
|
|
827
827
|
};
|
|
828
828
|
const so = Ht(v);
|
|
829
|
-
let
|
|
829
|
+
let b = class extends so {
|
|
830
830
|
constructor() {
|
|
831
|
-
super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1;
|
|
831
|
+
super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1, this.withbadge = !1;
|
|
832
832
|
}
|
|
833
833
|
get name() {
|
|
834
834
|
return this.getAttribute("name") ?? "";
|
|
@@ -863,7 +863,7 @@ let g = class extends so {
|
|
|
863
863
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
864
864
|
${this.startIcon ? this.renderIcon("start") : d}
|
|
865
865
|
${o ? l`
|
|
866
|
-
${this.text ? l`<span class="text">${this.text}</span>` : d}
|
|
866
|
+
${this.text ? l`<span class="text">${this.text}${this.withbadge ? l`<slot></slot>` : d}</span>` : d}
|
|
867
867
|
${this.textsecond ? l`<span class="text">${this.textsecond}</span>` : d}
|
|
868
868
|
` : l`<slot></slot>`}
|
|
869
869
|
${this.endIcon ? this.renderIcon("end") : d}
|
|
@@ -889,9 +889,9 @@ let g = class extends so {
|
|
|
889
889
|
`;
|
|
890
890
|
}
|
|
891
891
|
};
|
|
892
|
-
Oe(
|
|
893
|
-
|
|
894
|
-
|
|
892
|
+
Oe(b);
|
|
893
|
+
b.formAssociated = !0;
|
|
894
|
+
b.styles = y`
|
|
895
895
|
:host {
|
|
896
896
|
--button-border: transparent;
|
|
897
897
|
cursor: pointer;
|
|
@@ -1068,6 +1068,14 @@ g.styles = y`
|
|
|
1068
1068
|
}
|
|
1069
1069
|
}
|
|
1070
1070
|
|
|
1071
|
+
:host([withbadge]) {
|
|
1072
|
+
--badge-width: 19px;
|
|
1073
|
+
position: relative;
|
|
1074
|
+
}
|
|
1075
|
+
:host([withbadge]) .button {
|
|
1076
|
+
padding-right: calc(var(--badge-width) + var(--spacing-l, 12px) + var(--spacing-s, 8px));
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1071
1079
|
//Icon movement on hover
|
|
1072
1080
|
:host([variant="tertiary"][endIcon]) .icon-end {
|
|
1073
1081
|
display: inline-flex;
|
|
@@ -1082,52 +1090,55 @@ g.styles = y`
|
|
|
1082
1090
|
`;
|
|
1083
1091
|
x([
|
|
1084
1092
|
a()
|
|
1085
|
-
],
|
|
1093
|
+
], b.prototype, "type", 2);
|
|
1086
1094
|
x([
|
|
1087
1095
|
a({ reflect: !0 })
|
|
1088
|
-
],
|
|
1096
|
+
], b.prototype, "value", 2);
|
|
1089
1097
|
x([
|
|
1090
1098
|
a({ type: String, reflect: !0 })
|
|
1091
|
-
],
|
|
1099
|
+
], b.prototype, "variant", 2);
|
|
1092
1100
|
x([
|
|
1093
1101
|
a({ type: String })
|
|
1094
|
-
],
|
|
1102
|
+
], b.prototype, "text", 2);
|
|
1095
1103
|
x([
|
|
1096
1104
|
a({ type: String })
|
|
1097
|
-
],
|
|
1105
|
+
], b.prototype, "textsecond", 2);
|
|
1098
1106
|
x([
|
|
1099
1107
|
a({ type: Boolean, reflect: !0 })
|
|
1100
|
-
],
|
|
1108
|
+
], b.prototype, "fullwidth", 2);
|
|
1101
1109
|
x([
|
|
1102
1110
|
a({ type: Boolean, reflect: !0 })
|
|
1103
|
-
],
|
|
1111
|
+
], b.prototype, "disabled", 2);
|
|
1104
1112
|
x([
|
|
1105
1113
|
a({ type: String, reflect: !0 })
|
|
1106
|
-
],
|
|
1114
|
+
], b.prototype, "startIconModel", 2);
|
|
1107
1115
|
x([
|
|
1108
1116
|
a({ type: String, reflect: !0 })
|
|
1109
|
-
],
|
|
1117
|
+
], b.prototype, "endIconModel", 2);
|
|
1110
1118
|
x([
|
|
1111
1119
|
a({ type: Boolean, reflect: !0, attribute: "starticon" })
|
|
1112
|
-
],
|
|
1120
|
+
], b.prototype, "startIcon", 2);
|
|
1113
1121
|
x([
|
|
1114
1122
|
a({ type: Boolean, reflect: !0, attribute: "endicon" })
|
|
1115
|
-
],
|
|
1123
|
+
], b.prototype, "endIcon", 2);
|
|
1116
1124
|
x([
|
|
1117
1125
|
a({ type: String, attribute: "paneltarget", reflect: !0 })
|
|
1118
|
-
],
|
|
1126
|
+
], b.prototype, "panelTarget", 2);
|
|
1119
1127
|
x([
|
|
1120
1128
|
a({ type: String })
|
|
1121
|
-
],
|
|
1129
|
+
], b.prototype, "href", 2);
|
|
1122
1130
|
x([
|
|
1123
1131
|
a({ type: String })
|
|
1124
|
-
],
|
|
1132
|
+
], b.prototype, "target", 2);
|
|
1125
1133
|
x([
|
|
1126
1134
|
a({ type: Boolean, reflect: !0 })
|
|
1127
|
-
],
|
|
1128
|
-
|
|
1135
|
+
], b.prototype, "underlined", 2);
|
|
1136
|
+
x([
|
|
1137
|
+
a({ type: Boolean, reflect: !0 })
|
|
1138
|
+
], b.prototype, "withbadge", 2);
|
|
1139
|
+
b = x([
|
|
1129
1140
|
w("o-button")
|
|
1130
|
-
],
|
|
1141
|
+
], b);
|
|
1131
1142
|
var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, xt = (o, t, e, n) => {
|
|
1132
1143
|
for (var i = n > 1 ? void 0 : n ? lo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
|
|
1133
1144
|
(s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
|
|
@@ -1953,7 +1964,7 @@ class _o extends $o {
|
|
|
1953
1964
|
}
|
|
1954
1965
|
}
|
|
1955
1966
|
const oe = Tt(_o);
|
|
1956
|
-
var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor,
|
|
1967
|
+
var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, g = (o, t, e, n) => {
|
|
1957
1968
|
for (var i = n > 1 ? void 0 : n ? ko(t, e) : t, r = o.length - 1, s; r >= 0; r--)
|
|
1958
1969
|
(s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
|
|
1959
1970
|
return n && i && Co(t, e, i), i;
|
|
@@ -2344,67 +2355,67 @@ u.styles = y`
|
|
|
2344
2355
|
`;
|
|
2345
2356
|
u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
|
|
2346
2357
|
u.focusablesCustomElementsSelector = "o-icon-button, o-button";
|
|
2347
|
-
|
|
2358
|
+
g([
|
|
2348
2359
|
a({ type: Boolean, reflect: !0 })
|
|
2349
2360
|
], u.prototype, "open", 2);
|
|
2350
|
-
|
|
2361
|
+
g([
|
|
2351
2362
|
a({ type: Boolean, reflect: !0 })
|
|
2352
2363
|
], u.prototype, "showHeader", 2);
|
|
2353
|
-
|
|
2364
|
+
g([
|
|
2354
2365
|
a({ type: Boolean, reflect: !0 })
|
|
2355
2366
|
], u.prototype, "showFooter", 2);
|
|
2356
|
-
|
|
2367
|
+
g([
|
|
2357
2368
|
a({ type: Boolean, reflect: !0 })
|
|
2358
2369
|
], u.prototype, "showHeaderStartIcon", 2);
|
|
2359
|
-
|
|
2370
|
+
g([
|
|
2360
2371
|
a({ type: String, reflect: !0 })
|
|
2361
2372
|
], u.prototype, "headerTitle", 2);
|
|
2362
|
-
|
|
2373
|
+
g([
|
|
2363
2374
|
a({ type: String, reflect: !0 })
|
|
2364
2375
|
], u.prototype, "headerTitleClassName", 2);
|
|
2365
|
-
|
|
2376
|
+
g([
|
|
2366
2377
|
a({ type: String, reflect: !0 })
|
|
2367
2378
|
], u.prototype, "closeButtonLabel", 2);
|
|
2368
|
-
|
|
2379
|
+
g([
|
|
2369
2380
|
a({ type: String, reflect: !0 })
|
|
2370
2381
|
], u.prototype, "firstButtonLabel", 2);
|
|
2371
|
-
|
|
2382
|
+
g([
|
|
2372
2383
|
a({ type: String, reflect: !0 })
|
|
2373
2384
|
], u.prototype, "firstButtonVariant", 2);
|
|
2374
|
-
|
|
2385
|
+
g([
|
|
2375
2386
|
a({ type: Object, reflect: !0 })
|
|
2376
2387
|
], u.prototype, "firstButtonProps", 2);
|
|
2377
|
-
|
|
2388
|
+
g([
|
|
2378
2389
|
a({ type: Boolean, reflect: !0 })
|
|
2379
2390
|
], u.prototype, "onFirstButtonClickClose", 2);
|
|
2380
|
-
|
|
2391
|
+
g([
|
|
2381
2392
|
a({ type: String, reflect: !0 })
|
|
2382
2393
|
], u.prototype, "secondButtonLabel", 2);
|
|
2383
|
-
|
|
2394
|
+
g([
|
|
2384
2395
|
a({ type: String, reflect: !0 })
|
|
2385
2396
|
], u.prototype, "secondButtonVariant", 2);
|
|
2386
|
-
|
|
2397
|
+
g([
|
|
2387
2398
|
a({ type: Object, reflect: !0 })
|
|
2388
2399
|
], u.prototype, "secondButtonProps", 2);
|
|
2389
|
-
|
|
2400
|
+
g([
|
|
2390
2401
|
a({ type: Boolean, reflect: !0 })
|
|
2391
2402
|
], u.prototype, "onSecondButtonClickClose", 2);
|
|
2392
|
-
|
|
2403
|
+
g([
|
|
2393
2404
|
a({ type: Boolean, reflect: !0 })
|
|
2394
2405
|
], u.prototype, "disablePortal", 2);
|
|
2395
|
-
|
|
2406
|
+
g([
|
|
2396
2407
|
a({ type: Number, reflect: !0 })
|
|
2397
2408
|
], u.prototype, "zIndex", 2);
|
|
2398
|
-
|
|
2409
|
+
g([
|
|
2399
2410
|
a({ type: Boolean, reflect: !0 })
|
|
2400
2411
|
], u.prototype, "initialized", 2);
|
|
2401
|
-
|
|
2412
|
+
g([
|
|
2402
2413
|
a({ type: Boolean })
|
|
2403
2414
|
], u.prototype, "showDetail", 2);
|
|
2404
|
-
|
|
2415
|
+
g([
|
|
2405
2416
|
a({ type: Boolean })
|
|
2406
2417
|
], u.prototype, "isHidingDetail", 2);
|
|
2407
|
-
u =
|
|
2418
|
+
u = g([
|
|
2408
2419
|
w("o-side-panel")
|
|
2409
2420
|
], u);
|
|
2410
2421
|
var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
|
|
@@ -4250,34 +4261,40 @@ let pt = class extends v {
|
|
|
4250
4261
|
};
|
|
4251
4262
|
pt.styles = y`
|
|
4252
4263
|
:host([variant]) {
|
|
4264
|
+
--badge-width: 19px;
|
|
4253
4265
|
display: inline-block;
|
|
4254
|
-
--background-color: var(--color-container-brand-accent);
|
|
4255
|
-
--border-color: var(--color-border-primary);
|
|
4256
|
-
--text-color: var(--color-content-body);
|
|
4266
|
+
--background-color: var(--color-container-brand-accent, #ffc700);
|
|
4267
|
+
--border-color: var(--color-border-primary, #3f2b2e);
|
|
4268
|
+
--text-color: var(--color-content-body, #3f2b2e);
|
|
4257
4269
|
}
|
|
4258
4270
|
|
|
4259
4271
|
:host([variant="filter"]) {
|
|
4260
|
-
--background-color: var(--color-container-filter-default);
|
|
4261
|
-
--border-color: var(--color-container-filter-default);
|
|
4262
|
-
--text-color: var(--color-content-filter);
|
|
4272
|
+
--background-color: var(--color-container-filter-default, #7F4E61);
|
|
4273
|
+
--border-color: var(--color-container-filter-default, #7F4E61);
|
|
4274
|
+
--text-color: var(--color-content-filter, #f6f0e7);
|
|
4275
|
+
}
|
|
4276
|
+
|
|
4277
|
+
:host([withinbutton]) {
|
|
4278
|
+
position: absolute;
|
|
4279
|
+
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
4263
4280
|
}
|
|
4264
4281
|
|
|
4265
4282
|
.badge {
|
|
4266
4283
|
display: block;
|
|
4267
|
-
padding: 1px var(--spacing-4-xs) var(--spacing-4-xs) 1px;
|
|
4284
|
+
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|
|
4268
4285
|
box-sizing: content-box;
|
|
4269
|
-
font-family: var(--font-family-loccitane-sans);
|
|
4270
|
-
font-weight: var(--font-weight-400);
|
|
4271
|
-
height: var(--line-height-160);
|
|
4272
|
-
width: var(--line-height-160);
|
|
4286
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
4287
|
+
font-weight: var(--font-weight-400, 400);
|
|
4288
|
+
height: var(--line-height-160, 16px);
|
|
4289
|
+
width: var(--line-height-160, 16px);
|
|
4273
4290
|
text-align: center;
|
|
4274
4291
|
overflow: hidden;
|
|
4275
4292
|
background: var(--background-color);
|
|
4276
|
-
border: var(--border-s) solid var(--border-color);
|
|
4293
|
+
border: var(--border-s, 0.5px) solid var(--border-color);
|
|
4277
4294
|
border-radius: 100%;
|
|
4278
|
-
font-size: var(--font-size-100);
|
|
4279
|
-
letter-spacing: var(--letter-spacing-400);
|
|
4280
|
-
line-height: var(--line-height-160);
|
|
4295
|
+
font-size: var(--font-size-100, 12px);
|
|
4296
|
+
letter-spacing: var(--letter-spacing-400, 0.04em);
|
|
4297
|
+
line-height: var(--line-height-160, 16px);
|
|
4281
4298
|
color: var(--text-color);
|
|
4282
4299
|
}
|
|
4283
4300
|
|