@florid-kit/components 0.8.52 → 0.8.54
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 +36 -21
- package/index.mjs +78 -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
|
|
@@ -840,6 +848,7 @@
|
|
|
840
848
|
@click=${this.handleClosePanel}
|
|
841
849
|
@keydown=${this.handleClosePanel}
|
|
842
850
|
aria-label="${this.closeButtonLabel}"
|
|
851
|
+
aria-describedby="panel-title"
|
|
843
852
|
></o-icon-button>
|
|
844
853
|
</div>
|
|
845
854
|
`:null;return l`
|
|
@@ -1081,7 +1090,7 @@
|
|
|
1081
1090
|
.detail-content {
|
|
1082
1091
|
padding: var(--spacing-xl);
|
|
1083
1092
|
}
|
|
1084
|
-
`;u.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';u.focusablesCustomElementsSelector="o-icon-button, o-button";
|
|
1093
|
+
`;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
1094
|
<o-icon-button
|
|
1086
1095
|
icon="playerv"
|
|
1087
1096
|
size="xsmall"
|
|
@@ -2312,34 +2321,40 @@
|
|
|
2312
2321
|
</span>
|
|
2313
2322
|
`}};pt.styles=y`
|
|
2314
2323
|
:host([variant]) {
|
|
2324
|
+
--badge-width: 19px;
|
|
2315
2325
|
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);
|
|
2326
|
+
--background-color: var(--color-container-brand-accent, #ffc700);
|
|
2327
|
+
--border-color: var(--color-border-primary, #3f2b2e);
|
|
2328
|
+
--text-color: var(--color-content-body, #3f2b2e);
|
|
2319
2329
|
}
|
|
2320
2330
|
|
|
2321
2331
|
: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);
|
|
2332
|
+
--background-color: var(--color-container-filter-default, #7F4E61);
|
|
2333
|
+
--border-color: var(--color-container-filter-default, #7F4E61);
|
|
2334
|
+
--text-color: var(--color-content-filter, #f6f0e7);
|
|
2335
|
+
}
|
|
2336
|
+
|
|
2337
|
+
:host([withinbutton]) {
|
|
2338
|
+
position: absolute;
|
|
2339
|
+
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
2325
2340
|
}
|
|
2326
2341
|
|
|
2327
2342
|
.badge {
|
|
2328
2343
|
display: block;
|
|
2329
|
-
padding: 1px var(--spacing-4-xs) var(--spacing-4-xs) 1px;
|
|
2344
|
+
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|
|
2330
2345
|
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);
|
|
2346
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
2347
|
+
font-weight: var(--font-weight-400, 400);
|
|
2348
|
+
height: var(--line-height-160, 16px);
|
|
2349
|
+
width: var(--line-height-160, 16px);
|
|
2335
2350
|
text-align: center;
|
|
2336
2351
|
overflow: hidden;
|
|
2337
2352
|
background: var(--background-color);
|
|
2338
|
-
border: var(--border-s) solid var(--border-color);
|
|
2353
|
+
border: var(--border-s, 0.5px) solid var(--border-color);
|
|
2339
2354
|
border-radius: 100%;
|
|
2340
|
-
font-size: var(--font-size-100);
|
|
2341
|
-
letter-spacing: var(--letter-spacing-400);
|
|
2342
|
-
line-height: var(--line-height-160);
|
|
2355
|
+
font-size: var(--font-size-100, 12px);
|
|
2356
|
+
letter-spacing: var(--letter-spacing-400, 0.04em);
|
|
2357
|
+
line-height: var(--line-height-160, 16px);
|
|
2343
2358
|
color: var(--text-color);
|
|
2344
2359
|
}
|
|
2345
2360
|
|
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;
|
|
@@ -2096,6 +2107,7 @@ let u = class extends v {
|
|
|
2096
2107
|
@click=${this.handleClosePanel}
|
|
2097
2108
|
@keydown=${this.handleClosePanel}
|
|
2098
2109
|
aria-label="${this.closeButtonLabel}"
|
|
2110
|
+
aria-describedby="panel-title"
|
|
2099
2111
|
></o-icon-button>
|
|
2100
2112
|
</div>
|
|
2101
2113
|
` : null;
|
|
@@ -2344,67 +2356,67 @@ u.styles = y`
|
|
|
2344
2356
|
`;
|
|
2345
2357
|
u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
|
|
2346
2358
|
u.focusablesCustomElementsSelector = "o-icon-button, o-button";
|
|
2347
|
-
|
|
2359
|
+
g([
|
|
2348
2360
|
a({ type: Boolean, reflect: !0 })
|
|
2349
2361
|
], u.prototype, "open", 2);
|
|
2350
|
-
|
|
2362
|
+
g([
|
|
2351
2363
|
a({ type: Boolean, reflect: !0 })
|
|
2352
2364
|
], u.prototype, "showHeader", 2);
|
|
2353
|
-
|
|
2365
|
+
g([
|
|
2354
2366
|
a({ type: Boolean, reflect: !0 })
|
|
2355
2367
|
], u.prototype, "showFooter", 2);
|
|
2356
|
-
|
|
2368
|
+
g([
|
|
2357
2369
|
a({ type: Boolean, reflect: !0 })
|
|
2358
2370
|
], u.prototype, "showHeaderStartIcon", 2);
|
|
2359
|
-
|
|
2371
|
+
g([
|
|
2360
2372
|
a({ type: String, reflect: !0 })
|
|
2361
2373
|
], u.prototype, "headerTitle", 2);
|
|
2362
|
-
|
|
2374
|
+
g([
|
|
2363
2375
|
a({ type: String, reflect: !0 })
|
|
2364
2376
|
], u.prototype, "headerTitleClassName", 2);
|
|
2365
|
-
|
|
2377
|
+
g([
|
|
2366
2378
|
a({ type: String, reflect: !0 })
|
|
2367
2379
|
], u.prototype, "closeButtonLabel", 2);
|
|
2368
|
-
|
|
2380
|
+
g([
|
|
2369
2381
|
a({ type: String, reflect: !0 })
|
|
2370
2382
|
], u.prototype, "firstButtonLabel", 2);
|
|
2371
|
-
|
|
2383
|
+
g([
|
|
2372
2384
|
a({ type: String, reflect: !0 })
|
|
2373
2385
|
], u.prototype, "firstButtonVariant", 2);
|
|
2374
|
-
|
|
2386
|
+
g([
|
|
2375
2387
|
a({ type: Object, reflect: !0 })
|
|
2376
2388
|
], u.prototype, "firstButtonProps", 2);
|
|
2377
|
-
|
|
2389
|
+
g([
|
|
2378
2390
|
a({ type: Boolean, reflect: !0 })
|
|
2379
2391
|
], u.prototype, "onFirstButtonClickClose", 2);
|
|
2380
|
-
|
|
2392
|
+
g([
|
|
2381
2393
|
a({ type: String, reflect: !0 })
|
|
2382
2394
|
], u.prototype, "secondButtonLabel", 2);
|
|
2383
|
-
|
|
2395
|
+
g([
|
|
2384
2396
|
a({ type: String, reflect: !0 })
|
|
2385
2397
|
], u.prototype, "secondButtonVariant", 2);
|
|
2386
|
-
|
|
2398
|
+
g([
|
|
2387
2399
|
a({ type: Object, reflect: !0 })
|
|
2388
2400
|
], u.prototype, "secondButtonProps", 2);
|
|
2389
|
-
|
|
2401
|
+
g([
|
|
2390
2402
|
a({ type: Boolean, reflect: !0 })
|
|
2391
2403
|
], u.prototype, "onSecondButtonClickClose", 2);
|
|
2392
|
-
|
|
2404
|
+
g([
|
|
2393
2405
|
a({ type: Boolean, reflect: !0 })
|
|
2394
2406
|
], u.prototype, "disablePortal", 2);
|
|
2395
|
-
|
|
2407
|
+
g([
|
|
2396
2408
|
a({ type: Number, reflect: !0 })
|
|
2397
2409
|
], u.prototype, "zIndex", 2);
|
|
2398
|
-
|
|
2410
|
+
g([
|
|
2399
2411
|
a({ type: Boolean, reflect: !0 })
|
|
2400
2412
|
], u.prototype, "initialized", 2);
|
|
2401
|
-
|
|
2413
|
+
g([
|
|
2402
2414
|
a({ type: Boolean })
|
|
2403
2415
|
], u.prototype, "showDetail", 2);
|
|
2404
|
-
|
|
2416
|
+
g([
|
|
2405
2417
|
a({ type: Boolean })
|
|
2406
2418
|
], u.prototype, "isHidingDetail", 2);
|
|
2407
|
-
u =
|
|
2419
|
+
u = g([
|
|
2408
2420
|
w("o-side-panel")
|
|
2409
2421
|
], u);
|
|
2410
2422
|
var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
|
|
@@ -4250,34 +4262,40 @@ let pt = class extends v {
|
|
|
4250
4262
|
};
|
|
4251
4263
|
pt.styles = y`
|
|
4252
4264
|
:host([variant]) {
|
|
4265
|
+
--badge-width: 19px;
|
|
4253
4266
|
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);
|
|
4267
|
+
--background-color: var(--color-container-brand-accent, #ffc700);
|
|
4268
|
+
--border-color: var(--color-border-primary, #3f2b2e);
|
|
4269
|
+
--text-color: var(--color-content-body, #3f2b2e);
|
|
4257
4270
|
}
|
|
4258
4271
|
|
|
4259
4272
|
: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);
|
|
4273
|
+
--background-color: var(--color-container-filter-default, #7F4E61);
|
|
4274
|
+
--border-color: var(--color-container-filter-default, #7F4E61);
|
|
4275
|
+
--text-color: var(--color-content-filter, #f6f0e7);
|
|
4276
|
+
}
|
|
4277
|
+
|
|
4278
|
+
:host([withinbutton]) {
|
|
4279
|
+
position: absolute;
|
|
4280
|
+
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
4263
4281
|
}
|
|
4264
4282
|
|
|
4265
4283
|
.badge {
|
|
4266
4284
|
display: block;
|
|
4267
|
-
padding: 1px var(--spacing-4-xs) var(--spacing-4-xs) 1px;
|
|
4285
|
+
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|
|
4268
4286
|
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);
|
|
4287
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
4288
|
+
font-weight: var(--font-weight-400, 400);
|
|
4289
|
+
height: var(--line-height-160, 16px);
|
|
4290
|
+
width: var(--line-height-160, 16px);
|
|
4273
4291
|
text-align: center;
|
|
4274
4292
|
overflow: hidden;
|
|
4275
4293
|
background: var(--background-color);
|
|
4276
|
-
border: var(--border-s) solid var(--border-color);
|
|
4294
|
+
border: var(--border-s, 0.5px) solid var(--border-color);
|
|
4277
4295
|
border-radius: 100%;
|
|
4278
|
-
font-size: var(--font-size-100);
|
|
4279
|
-
letter-spacing: var(--letter-spacing-400);
|
|
4280
|
-
line-height: var(--line-height-160);
|
|
4296
|
+
font-size: var(--font-size-100, 12px);
|
|
4297
|
+
letter-spacing: var(--letter-spacing-400, 0.04em);
|
|
4298
|
+
line-height: var(--line-height-160, 16px);
|
|
4281
4299
|
color: var(--text-color);
|
|
4282
4300
|
}
|
|
4283
4301
|
|