@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/esm-es5/mds-dropdown.entry.js

@@ -0,0 +1 @@
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{s as setAttributeIfEmpty}from"./aria-ed9d415d.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";import{c as cssDurationToMilliseconds}from"./unit-dc091397.js";import{b as autoPlacement,o as offset,f as flip,s as shift,d as arrow,c as computePosition,a as autoUpdate}from"./floating-ui.dom.esm-b6d2205c.js";var arrowSvg='<svg width="30" height="16" viewBox="0 0 30 16" xmlns="http://www.w3.org/2000/svg">\n  <path d="M10.2 2.4C12.6 -0.800001 17.4 -0.800001 19.8 2.4L30 16H0L10.2 2.4Z"/>\n</svg>\n';var mdsDropdownCss='@tailwind utilities;\n\n/**\n * @prop --mds-dropdown-arrow-background: Sets the fill color of the arrow.\n * @prop --mds-dropdown-background: Sets the background-color of the dropdown.\n * @prop --mds-dropdown-backdrop-duration: Sets the transition duration of the backdrop, used by component\'s code too.\n * @prop --mds-dropdown-backdrop-z-indx: Sets the backdrop z-index, used by component\'s code too.\n * @prop --mds-dropdown-drop-shadow: Sets the drop-shadow of the dropdown.\n * @prop --mds-dropdown-mouseover-delay: Sets the delay duration of the component when the caller trigger mouseover event, it\'s used by the javascript code.\n * @prop --mds-dropdown-duration: Sets the duration of the dropdown animation.\n * @prop --mds-dropdown-ease: Sets the easing of the dropdown animation.\n * @prop --mds-dropdown-transform-from: Sets the from animation transform of the dropdown.\n * @prop --mds-dropdown-transform-to: Sets the to animation transform of the dropdown.\n * @prop --mds-dropdown-z-index: Sets the z-index of the component.\n */\n\n:host {\n\n  --mds-dropdown-arrow-background: var(--mds-dropdown-background);\n  --mds-dropdown-backdrop-duration: 200ms;\n  --mds-dropdown-backdrop-z-index: var(--magma-backdrop-z-index, 3000);\n  --mds-dropdown-background: rgb(var(--tone-neutral));\n  --mds-dropdown-mouseover-delay: 0.5s;\n  --mds-dropdown-drop-shadow-color: var(--tone-neutral-01, 0 0 0);\n  --mds-dropdown-drop-shadow: drop-shadow(0 10px 8px rgb(var(--mds-dropdown-drop-shadow-color) / 0.05)) drop-shadow(0 4px 3px rgb(var(--mds-dropdown-drop-shadow-color) / 0.15)) drop-shadow(0 0 1px rgb(var(--mds-dropdown-drop-shadow-color) / 0.15));\n  --mds-dropdown-duration: 0.5s;\n  --mds-dropdown-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-dropdown-transform-from: scale(0.9) translateY(-3%);\n  --mds-dropdown-transform-to: scale(1) translate(0, 0);\n  --mds-dropdown-z-index: var(--magma-dropdown-z-index, 4000);\n  gap: 1rem;\n  border-radius: 0.5rem;\n  padding: 1.5rem;\n  opacity: 0;\n\n  background-color: var(--mds-dropdown-background);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: grid;\n  -webkit-filter: var(--mds-dropdown-drop-shadow);\n  filter: var(--mds-dropdown-drop-shadow);\n  pointer-events: none;\n  position: fixed;\n  -webkit-transform: var(--mds-dropdown-transform-from);\n  transform: var(--mds-dropdown-transform-from);\n  -webkit-transition-duration: var(--mds-dropdown-duration);\n  transition-duration: var(--mds-dropdown-duration);\n  -webkit-transition-property: opacity, -webkit-transform, -webkit-transform-origin;\n  transition-property: opacity, -webkit-transform, -webkit-transform-origin;\n  transition-property: opacity, transform, transform-origin;\n  transition-property: opacity, transform, transform-origin, -webkit-transform, -webkit-transform-origin;\n  -webkit-transition-timing-function: var(--mds-dropdown-ease);\n  transition-timing-function: var(--mds-dropdown-ease);\n  z-index: var(--mds-dropdown-z-index);\n}\n\n:host( [visible]:not([visible="false"]) ){\n\n  opacity: 1;\n\n  pointer-events: auto;\n  -webkit-transform: var(--mds-dropdown-transform-to);\n  transform: var(--mds-dropdown-transform-to);\n}\n\n:host( [smooth]:not([smooth="false"]) ) {\n  -webkit-transition-property: bottom, left, opacity, right, top, -webkit-transform, -webkit-transform-origin;\n  transition-property: bottom, left, opacity, right, top, -webkit-transform, -webkit-transform-origin;\n  transition-property: bottom, left, opacity, right, top, transform, transform-origin;\n  transition-property: bottom, left, opacity, right, top, transform, transform-origin, -webkit-transform, -webkit-transform-origin;\n}\n\n.arrow{\n\n  top: -1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  fill: var(--mds-dropdown-arrow-background);\n  pointer-events: none;\n  position: fixed;\n  -webkit-transition-duration: var(--mds-dropdown-duration);\n  transition-duration: var(--mds-dropdown-duration);\n  -webkit-transition-property: bottom, left, right, top, -webkit-transform, -webkit-transform-origin;\n  transition-property: bottom, left, right, top, -webkit-transform, -webkit-transform-origin;\n  transition-property: bottom, left, right, top, transform, transform-origin;\n  transition-property: bottom, left, right, top, transform, transform-origin, -webkit-transform, -webkit-transform-origin;\n}\n\n:host( [arrow]:not([arrow="false"])[visible]:not([visible="false"]) ) .arrow {\n  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n:host( [arrow]:not([arrow="false"], [visible], [visible="true"])) .arrow {\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n::slotted( * ){\n\n  z-index: 10;\n\n  position: relative;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-dropdown-backdrop-duration: 0s;\n    --mds-dropdown-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-dropdown-backdrop-duration: 0s;\n      --mds-dropdown-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-dropdown-drop-shadow: drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n  \n      --mds-dropdown-drop-shadow: drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3));\n    }\n  }\n}\n\n/* contrast + dark */\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: dark) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: system) {\n\n  @media (prefers-contrast: more) {\n\n    @media (prefers-color-scheme: dark) {\n      :host {\n\n        --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n      }\n    }\n  }\n}\n\n\n';var MdsDropdownStyle0=mdsDropdownCss;var MdsDropdown=function(){function t(t){var n=this;registerInstance(this,t);this.visibleEvent=createEvent(this,"mdsDropdownVisible",7);this.hiddenEvent=createEvent(this,"mdsDropdownHide",7);this.changedEvent=createEvent(this,"mdsDropdownChange",7);this.backdropBackgroundVisible="rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))";this.backdropBackgroundHidden="rgba(var(--magma-backdrop-color, 0 0 0) / 0)";this.backdropId="mds-dropdown-backdrop";this.km=new KeyboardManager;this.handleCloseDropdown=function(t){if(!n.visible){return}if(!n.host.contains(t.target)&&t.target!==n.caller){n.handleVisibility(false)}};this.handleVisibility=function(t){n.visible=t;n.changedEvent.emit({caller:n.caller,visible:n.visible});if(n.visible){n.visibleEvent.emit({caller:n.caller,visible:true});return}n.hiddenEvent.emit({caller:n.caller,visible:false});n.updatePosition()};this.callerOnClick=function(){n.handleVisibility(!n.visible)};this.callerOnMouseOver=function(){n.mouseoverTimer=setTimeout((function(){clearTimeout(n.mouseoverTimer);n.handleVisibility(true)}),cssDurationToMilliseconds(n.cssMouseOverDelayDuration))};this.closeDropdownMouseLeave=function(){n.handleVisibility(false);n.host.removeEventListener("mouseleave",n.closeDropdownMouseLeave.bind(n));n.host.addEventListener("mouseover",n.handleCloseDropdownMouseLeave.bind(n))};this.handleCloseDropdownMouseLeave=function(){n.host.removeEventListener("mouseover",n.handleCloseDropdownMouseLeave.bind(n));n.host.addEventListener("mouseleave",n.closeDropdownMouseLeave.bind(n))};this.arrowInset=function(t,n){var o=t.arrow;var r={bottom:"",left:"",right:"",top:""};if(o===undefined){return{}}switch(n){case"bottom":r.left=o.x!==null?"".concat(o.x,"px"):"";r.top="100%";break;case"left":r.right="100%";r.top=o.y!==null?"".concat(o.y,"px"):"";break;case"right":r.left="100%";r.top=o.y!==null?"".concat(o.y,"px"):"";break;case"top":r.left=o.x!==null?"".concat(o.x,"px"):"";r.top="";break}return r};this.arrowTransform=function(t){var o=n.arrow&&n.visible?"scale(1)":"scale(0)";switch(t){case"bottom":o="rotate(180deg) ".concat(o," translate(0, -100%)");break;case"left":o="rotate(-90deg) ".concat(o," translate(50%, -50%)");break;case"right":o="rotate(90deg) ".concat(o," translate(-50%, -50%)");break;case"top":o="rotate(0deg) ".concat(o," translate(0, 0)");break}return{transform:o}};this.arrowTransformOrigin=function(t){switch(t){case"bottom":return{transformOrigin:"center top"};case"left":return{transformOrigin:"right center"};case"right":return{transformOrigin:"left center"};case"top":return{transformOrigin:"center bottom"};default:return{transformOrigin:"center top"}}};this.updatePosition=function(){if(!n.caller)return;var t=new Array;var o={};if(n.shiftPadding){o.padding=n.shiftPadding}if(n.autoPlacement){t.push(autoPlacement())}if(n.offset){t.push(offset(n.offset))}if(!n.autoPlacement&&n.flip){t.push(flip(o))}if(n.shift){t.push(shift(o))}if(n.arrow){t.push(arrow({element:n.arrowEl,padding:n.arrowPadding}))}computePosition(n.caller,n.host,{middleware:t,placement:n.placement,strategy:n.strategy}).then((function(t){var o=t.x,r=t.y,e=t.placement,i=t.middlewareData;Object.assign(n.host.style,{left:"".concat(o,"px"),top:"".concat(r,"px")});var a={};var s={top:"bottom",right:"left",bottom:"top",left:"right"}[e.split("-")[0]];if(s){Object.assign(a,n.arrowTransform(s));Object.assign(a,n.arrowInset(i,s));Object.assign(a,n.arrowTransformOrigin(s));Object.assign(n.arrowEl.style,a)}}))};this.updateCSSCustomProps=function(){if(typeof window==="undefined")return;var t=window.getComputedStyle(n.host);n.cssBackdropDuration=t.getPropertyValue("--mds-dropdown-backdrop-duration");n.cssBackdropZIndex=t.getPropertyValue("--mds-dropdown-backdrop-z-index");n.cssMouseOverDelayDuration=t.getPropertyValue("--mds-dropdown-mouseover-delay")};this.setInteractionBehaviour=function(){if(n.interaction==="none"){return}if(n.interaction==="click"){n.caller.addEventListener("click",n.callerOnClick.bind(n))}if(n.interaction==="mouseover"){n.caller.addEventListener("mouseover",n.callerOnMouseOver.bind(n));n.host.addEventListener("mouseover",n.handleCloseDropdownMouseLeave.bind(n))}};this.arrow=true;this.arrowPadding=24;this.autoPlacement=false;this.backdrop=false;this.flip=false;this.interaction="click";this.target=undefined;this.offset=24;this.placement="bottom";this.shift=true;this.shiftPadding=24;this.smooth=true;this.strategy="fixed";this.visible=false;this.zIndex=undefined}t.prototype.attachBackdrop=function(){var t=this;if(!this.backdropEl){this.backdropEl=document.createElement("div");this.backdropEl.className=this.backdropId;this.backdropEl.style.inset="0";this.backdropEl.style.pointerEvents="none";this.backdropEl.style.position="fixed";this.backdropEl.style.transition="background-color ".concat(this.cssBackdropDuration," ease-out");this.backdropEl.style.zIndex=this.cssBackdropZIndex}this.backdropEl.style.backgroundColor=this.backdropBackgroundHidden;document.body.appendChild(this.backdropEl);clearTimeout(this.backdropTimer);this.backdropTimer=setTimeout((function(){t.backdropEl.style.backgroundColor=t.backdropBackgroundVisible}),1)};t.prototype.detachBackdrop=function(){var t=this;if(!this.backdropEl){return}this.backdropEl.style.backgroundColor="transparent";clearTimeout(this.backdropTimer);this.backdropTimer=setTimeout((function(){t.backdropEl.remove()}),cssDurationToMilliseconds(this.cssBackdropDuration))};t.prototype.arrowChanged=function(){this.updatePosition()};t.prototype.arrowPaddingChanged=function(){this.updatePosition()};t.prototype.autoPlacementChanged=function(){this.updatePosition()};t.prototype.backdropChanged=function(t){if(!this.visible){return}if(t){this.attachBackdrop();return}this.detachBackdrop()};t.prototype.flipChanged=function(){this.updatePosition()};t.prototype.offsetChanged=function(){this.updatePosition()};t.prototype.placementChanged=function(){this.updatePosition()};t.prototype.shiftChanged=function(){this.updatePosition()};t.prototype.shiftPaddingChanged=function(){this.updatePosition()};t.prototype.strategyChanged=function(){this.updatePosition()};t.prototype.visibleChanged=function(t){this.updatePosition();if(!this.backdrop){return}if(t){this.attachBackdrop();return}this.detachBackdrop()};t.prototype.zIndexChanged=function(t){if(t){this.host.style.setProperty("z-index",t.toString())}};t.prototype.componentWillLoad=function(){Array.from(document.getElementsByClassName(this.backdropId)).forEach((function(t){t.remove()}));this.zIndexChanged(this.zIndex)};t.prototype.setAriaAttributes=function(){setAttributeIfEmpty(this.caller,"aria-haspopup","true");setAttributeIfEmpty(this.caller,"aria-controls",this.target);setAttributeIfEmpty(this.host,"role","menu");setAttributeIfEmpty(this.host,"aria-labelledby",this.target)};t.prototype.componentDidLoad=function(){var t=this;var n,o,r,e;this.updateCSSCustomProps();document.addEventListener("click",this.handleCloseDropdown);this.arrowEl=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".arrow");var i=(e=(r=(o=this.host.parentElement)===null||o===void 0?void 0:o.shadowRoot)===null||r===void 0?void 0:r.querySelector(this.target))!==null&&e!==void 0?e:this.host.getRootNode().querySelector(this.target);if(!i){throw Error("Target not found: ".concat(this.target))}this.caller=i;this.setAriaAttributes();this.km.addElement(this.host);this.km.attachEscapeBehavior((function(){return t.handleVisibility(false)}));this.backdropChanged(this.backdrop);this.updatePosition();this.setInteractionBehaviour();if(!this.cleanupAutoUpdate){this.cleanupAutoUpdate=autoUpdate(this.caller,this.host,this.updatePosition)}};t.prototype.disconnectedCallback=function(){this.detachBackdrop();this.km.detachEscapeBehavior();this.cleanupAutoUpdate=function(){return}};t.prototype.render=function(){return h(Host,{key:"aee79e7c76205417090673bbbe9d875065764eb3"},h("div",{key:"9b310fb9655866a581df3ecd043e24da86fabd6c",class:"arrow",innerHTML:arrowSvg}),h("slot",{key:"206e6aff41805e57c06fbccab2aa9ca595c312ae"}))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{arrow:["arrowChanged"],arrowPadding:["arrowPaddingChanged"],autoPlacement:["autoPlacementChanged"],backdrop:["backdropChanged"],flip:["flipChanged"],offset:["offsetChanged"],placement:["placementChanged"],shift:["shiftChanged"],shiftPadding:["shiftPaddingChanged"],strategy:["strategyChanged"],visible:["visibleChanged"],zIndex:["zIndexChanged"]}},enumerable:false,configurable:true});return t}();MdsDropdown.style=MdsDropdownStyle0;export{MdsDropdown as mds_dropdown};

package/dist/esm-es5/mds-entity.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";var mdsEntityCss='@tailwind utilities;\n\n/**\n * @prop --mds-entity-background: The background-color of the entity\n * @prop --mds-entity-color: The color of the entity name\n * @prop --mds-entity-detail-color: The color of the text details\n * @prop --mds-entity-icon-background: The background-color of the icon\n * @prop --mds-entity-icon-color: The color of the icon\n * @prop --mds-entity-shadow: The box-shadow od the component\n */\n\n:host {\n\n  --mds-entity-background: rgb(var(--tone-neutral));\n  --mds-entity-color: rgb(var(--tone-neutral-02));\n  --mds-entity-detail-color: rgb(var(--tone-neutral-03));\n  --mds-entity-icon-background: rgb(var(--label-blue-09));\n  --mds-entity-icon-radius: 0.25rem;\n  --mds-entity-icon-color: rgb(var(--label-blue-04));\n  --mds-entity-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-entity-background);\n  -webkit-box-shadow: var(--mds-entity-shadow);\n  box-shadow: var(--mds-entity-shadow);\n  color: var(--mds-entity-color);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.spinner,\n.preview,\n.delete{\n\n  width: 2.75rem;\n\n  border-radius: 0.25rem;\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.spinner,\n.preview{\n\n  aspect-ratio: 1/1;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-entity-icon-background);\n  border-radius: var(--mds-entity-icon-radius);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: var(--mds-entity-icon-color);\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview {\n\n  --mds-avatar-radius: var(--mds-entity-icon-radius);\n}\n\n.spinner {\n  background-color: transparent;\n  display: none;\n  fill: var(--mds-entity-icon-color);\n}\n\n:host([await]:not([await="false"])) .spinner {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\nmds-spinner{\n\n  height: 2.25rem;\n\n  width: 2.25rem;\n}\n\n.infos{\n\n  min-width: 0rem;\n\n  gap: 0rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-pack: center;\n  justify-content: center;\n  white-space: nowrap;\n}\n\n.details{\n\n  gap: 0.25rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-entity-detail-color);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n::slotted( [slot="action"] ){\n\n  aspect-ratio: 1/1;\n\n  width: 2.75rem;\n\n  height: auto;\n}\n\n::slotted( * ){\n\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n\n  white-space: nowrap;\n}\n\n.title{\n\n  min-width: 0rem;\n\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n\n  white-space: nowrap;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-entity-background: rgb(var(--tone-neutral));\n    --mds-entity-color: rgb(var(--tone-neutral-01));\n    --mds-entity-detail-color: rgb(var(--tone-neutral-02));\n    --mds-entity-icon-background: rgb(var(--label-blue-08));\n    --mds-entity-icon-color: rgb(var(--label-blue-03));\n    --mds-entity-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-entity-background: rgb(var(--tone-neutral));\n      --mds-entity-color: rgb(var(--tone-neutral-01));\n      --mds-entity-detail-color: rgb(var(--tone-neutral-02));\n      --mds-entity-icon-background: rgb(var(--label-blue-08));\n      --mds-entity-icon-color: rgb(var(--label-blue-03));\n      --mds-entity-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-entity-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-entity-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n';var MdsEntityStyle0=mdsEntityCss;var MdsEntity=function(){function n(n){registerInstance(this,n);this.await=undefined;this.icon=undefined;this.src=undefined;this.initials=undefined;this.tone=undefined;this.variant=undefined}n.prototype.checkAvatar=function(){var n=false;if(this.src!==undefined){n=true}if(this.icon!==undefined){n=true}if(this.initials!==undefined){n=true}if(this.await){return false}return n};n.prototype.componentWillLoad=function(){this.details=this.hostElement.querySelector('[slot="detail"]')!==null;this.actions=this.hostElement.querySelector('[slot="action"]')!==null};n.prototype.render=function(){return h(Host,{key:"01450fc640fd689dd077e452f1440bd2ca42b3fa"},h("div",{key:"2da1bfb8261436830c03c2e0ef2fc3f64601c86d",class:"spinner"},h("mds-spinner",{key:"7edcea6a4cd7acb38c55b0cdbb30c4380a499014",running:true})),this.checkAvatar()&&h("mds-avatar",{key:"30ffe987e664e045ea6c1209fdd364577cfb1968",class:"preview",icon:this.icon,initials:this.initials,src:this.src,tone:this.tone,variant:this.variant}),h("div",{key:"0b514397256ab2f7007b1777b1f75f4ab04af6bd",class:"infos"},h("slot",{key:"734f2c4afc519b8d256ee7039d9961581f291016"}),this.details&&h("div",{key:"88e8b8f03c66e0dbf911faf08b9e89bc44b5d324",class:"details"},h("slot",{key:"68f396fd9453b47f6062f2b8c4dea7cd564b959b",name:"detail"}))),this.actions&&h("div",{key:"cc227d492271e5d1f1c5c4817ebfc68a1a28862f",class:"actions"},h("slot",{key:"0c2fc6b7bf1909a95b8094fd20c0c6a0ef89eff2",name:"action"})))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsEntity.style=MdsEntityStyle0;export{MdsEntity as mds_entity};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";var mdsEntityCss='@tailwind utilities;\n\n/**\n * @prop --mds-entity-background: The background-color of the entity\n * @prop --mds-entity-color: The color of the entity name\n * @prop --mds-entity-detail-color: The color of the text details\n * @prop --mds-entity-icon-background: The background-color of the icon\n * @prop --mds-entity-icon-color: The color of the icon\n * @prop --mds-entity-shadow: The box-shadow od the component\n */\n\n:host {\n\n  --mds-entity-background: rgb(var(--tone-neutral));\n  --mds-entity-color: rgb(var(--tone-neutral-02));\n  --mds-entity-detail-color: rgb(var(--tone-neutral-03));\n  --mds-entity-icon-background: rgb(var(--label-blue-09));\n  --mds-entity-icon-radius: 0.25rem;\n  --mds-entity-icon-color: rgb(var(--label-blue-04));\n  --mds-entity-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-entity-background);\n  -webkit-box-shadow: var(--mds-entity-shadow);\n  box-shadow: var(--mds-entity-shadow);\n  color: var(--mds-entity-color);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.spinner,\n.preview,\n.delete{\n\n  width: 2.75rem;\n\n  border-radius: 0.25rem;\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.spinner,\n.preview{\n\n  aspect-ratio: 1/1;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-entity-icon-background);\n  border-radius: var(--mds-entity-icon-radius);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: var(--mds-entity-icon-color);\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview {\n\n  --mds-avatar-radius: var(--mds-entity-icon-radius);\n}\n\n.spinner {\n  background-color: transparent;\n  display: none;\n  fill: var(--mds-entity-icon-color);\n}\n\n:host([await]:not([await="false"])) .spinner {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\nmds-spinner{\n\n  height: 2.25rem;\n\n  width: 2.25rem;\n}\n\n.infos{\n\n  min-width: 0rem;\n\n  gap: 0rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-pack: center;\n  justify-content: center;\n  white-space: nowrap;\n}\n\n.details{\n\n  gap: 0.25rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-entity-detail-color);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n::slotted( [slot="action"] ){\n\n  aspect-ratio: 1/1;\n\n  width: 2.75rem;\n\n  height: auto;\n}\n\n::slotted( * ){\n\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n\n  white-space: nowrap;\n}\n\n.title{\n\n  min-width: 0rem;\n\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n\n  white-space: nowrap;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-entity-background: rgb(var(--tone-neutral));\n    --mds-entity-color: rgb(var(--tone-neutral-01));\n    --mds-entity-detail-color: rgb(var(--tone-neutral-02));\n    --mds-entity-icon-background: rgb(var(--label-blue-08));\n    --mds-entity-icon-color: rgb(var(--label-blue-03));\n    --mds-entity-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-entity-background: rgb(var(--tone-neutral));\n      --mds-entity-color: rgb(var(--tone-neutral-01));\n      --mds-entity-detail-color: rgb(var(--tone-neutral-02));\n      --mds-entity-icon-background: rgb(var(--label-blue-08));\n      --mds-entity-icon-color: rgb(var(--label-blue-03));\n      --mds-entity-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-entity-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-entity-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n';var MdsEntityStyle0=mdsEntityCss;var MdsEntity=function(){function n(n){registerInstance(this,n);this.await=undefined;this.icon=undefined;this.src=undefined;this.initials=undefined;this.tone=undefined;this.variant=undefined}n.prototype.checkAvatar=function(){var n=false;if(this.src!==undefined){n=true}if(this.icon!==undefined){n=true}if(this.initials!==undefined){n=true}if(this.await){return false}return n};n.prototype.componentWillLoad=function(){this.details=this.hostElement.querySelector('[slot="detail"]')!==null;this.actions=this.hostElement.querySelector('[slot="action"]')!==null};n.prototype.render=function(){return h(Host,{key:"9391672c7ecfde903e03798d210760e52370c90b"},h("div",{key:"fab671cb638c283a8ea3648aee9c9188512e8fa0",class:"spinner"},h("mds-spinner",{key:"baed37a926e1f606b41fb85b24be7728f671ab54",running:true})),this.checkAvatar()&&h("mds-avatar",{key:"380ed5fdef281b9e9338e4beeecffa4ef9bae7b5",class:"preview",icon:this.icon,initials:this.initials,src:this.src,tone:this.tone,variant:this.variant}),h("div",{key:"d876fe0ce1f53eec1cc1062e5c38b82d67b3bd89",class:"infos"},h("slot",{key:"949113bb0e3dbf092e6604358544630440a43740"}),this.details&&h("div",{key:"7635a1805fa615b2907e3b89fffa250db9b71dce",class:"details"},h("slot",{key:"a6b8ff76384000ebc4b1684b3b888d7dd60cafd3",name:"deuploadtail"}))),this.actions&&h("div",{key:"11c50375bc0e9ea56989d7549e95b99a6db191c7",class:"actions"},h("slot",{key:"653e308b14d27197b9c945269190030984ac2ebd",name:"action"})))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsEntity.style=MdsEntityStyle0;export{MdsEntity as mds_entity};

package/dist/esm-es5/mds-file-preview.entry.js

@@ -1,8 +1,8 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{m as miBaselineCancel}from"./cancel-8698c6fc.js";import{c as clsx}from"./clsx-297c1ffe.js";import{g as getExtensionInfos,a as getSuffix,c as getFormatsVariant}from"./file-4e952d4d.js";import"./file-extensions-e7320b03.js";import"./panorama-7a041ab0.js";
+var __awaiter=this&&this.__awaiter||function(e,r,n,i){function a(e){return e instanceof n?e:new n((function(r){r(e)}))}return new(n||(n=Promise))((function(n,o){function l(e){try{t(i.next(e))}catch(e){o(e)}}function s(e){try{t(i["throw"](e))}catch(e){o(e)}}function t(e){e.done?n(e.value):a(e.value).then(l,s)}t((i=i.apply(e,r||[])).next())}))};var __generator=this&&this.__generator||function(e,r){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,l;return l={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function s(e){return function(r){return t([e,r])}}function t(s){if(i)throw new TypeError("Generator is already executing.");while(l&&(l=0,s[0]&&(n=0)),n)try{if(i=1,a&&(o=s[0]&2?a["return"]:s[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,s[1])).done)return o;if(a=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;a=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=r.call(e,n)}catch(e){s=[6,e];a=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{m as miBaselineCancel}from"./cancel-8698c6fc.js";import{c as clsx}from"./clsx-297c1ffe.js";import{f as fileDescriptionLocaleEl,a as fileDescriptionLocaleEn,b as fileDescriptionLocaleEs,c as fileDescriptionLocaleIt,g as getExtensionInfos,d as getSuffix,h as getFormatsVariant}from"./locale.it-94429e24.js";import{L as Locale}from"./locale-149207d6.js";import"./file-extensions-97006435.js";import"./panorama-7a041ab0.js";import"./_commonjsHelpers-bdec4bbd.js";
 /**
  * filesize
  *
  * @copyright 2023 Jason Mulligan <jason.mulligan@avoidwork.com>
  * @license BSD-3-Clause
  * @version 10.1.0
- */var ARRAY="array";var BIT="bit";var BITS="bits";var BYTE="byte";var BYTES="bytes";var EMPTY="";var EXPONENT="exponent";var FUNCTION="function";var IEC="iec";var INVALID_NUMBER="Invalid number";var INVALID_ROUND="Invalid rounding method";var JEDEC="jedec";var OBJECT="object";var PERIOD=".";var ROUND="round";var S="s";var SI="si";var SI_KBIT="kbit";var SI_KBYTE="kB";var SPACE=" ";var STRING="string";var ZERO="0";var STRINGS={symbol:{iec:{bits:["bit","Kibit","Mibit","Gibit","Tibit","Pibit","Eibit","Zibit","Yibit"],bytes:["B","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"]},jedec:{bits:["bit","Kbit","Mbit","Gbit","Tbit","Pbit","Ebit","Zbit","Ybit"],bytes:["B","KB","MB","GB","TB","PB","EB","ZB","YB"]}},fullform:{iec:["","kibi","mebi","gibi","tebi","pebi","exbi","zebi","yobi"],jedec:["","kilo","mega","giga","tera","peta","exa","zetta","yotta"]}};function filesize(e,n){var r=n===void 0?{}:n,i=r.bits,a=i===void 0?false:i,o=r.pad,s=o===void 0?false:o,l=r.base,t=l===void 0?-1:l,c=r.round,v=c===void 0?2:c,b=r.locale,d=b===void 0?EMPTY:b,g=r.localeOptions,m=g===void 0?{}:g,f=r.separator,p=f===void 0?EMPTY:f,u=r.spacer,h=u===void 0?SPACE:u,w=r.symbols,k=w===void 0?{}:w,x=r.standard,y=x===void 0?EMPTY:x,E=r.output,I=E===void 0?STRING:E,B=r.fullform,T=B===void 0?false:B,N=r.fullforms,M=N===void 0?[]:N,P=r.exponent,R=P===void 0?-1:P,Y=r.roundingMethod,C=Y===void 0?ROUND:Y,D=r.precision,j=D===void 0?0:D;var O=R,F=Number(e),q=[],z=0,A=EMPTY;if(y===SI){t=10;y=JEDEC}else if(y===IEC||y===JEDEC){t=2}else if(t===2){y=IEC}else{t=10;y=JEDEC}var G=t===10?1e3:1024,_=T===true,K=F<0,U=Math[C];if(typeof e!=="bigint"&&isNaN(e)){throw new TypeError(INVALID_NUMBER)}if(typeof U!==FUNCTION){throw new TypeError(INVALID_ROUND)}if(K){F=-F}if(O===-1||isNaN(O)){O=Math.floor(Math.log(F)/Math.log(G));if(O<0){O=0}}if(O>8){if(j>0){j+=8-O}O=8}if(I===EXPONENT){return O}if(F===0){q[0]=0;A=q[1]=STRINGS.symbol[y][a?BITS:BYTES][O]}else{z=F/(t===2?Math.pow(2,O*10):Math.pow(1e3,O));if(a){z=z*8;if(z>=G&&O<8){z=z/G;O++}}var V=Math.pow(10,O>0?v:0);q[0]=U(z*V)/V;if(q[0]===G&&O<8&&R===-1){q[0]=1;O++}A=q[1]=t===10&&O===1?a?SI_KBIT:SI_KBYTE:STRINGS.symbol[y][a?BITS:BYTES][O]}if(K){q[0]=-q[0]}if(j>0){q[0]=q[0].toPrecision(j)}q[1]=k[q[1]]||q[1];if(d===true){q[0]=q[0].toLocaleString()}else if(d.length>0){q[0]=q[0].toLocaleString(d,m)}else if(p.length>0){q[0]=q[0].toString().replace(PERIOD,p)}if(s&&Number.isInteger(q[0])===false&&v>0){var J=p||PERIOD,Z=q[0].toString().split(J),L=Z[1]||EMPTY,H=L.length,X=v-H;q[0]="".concat(Z[0]).concat(J).concat(L.padEnd(H+X,ZERO))}if(_){q[1]=M[O]?M[O]:STRINGS.fullform[y][O]+(a?BIT:BYTE)+(q[0]===1?EMPTY:S)}return I===ARRAY?q:I===OBJECT?{value:q[0],symbol:q[1],exponent:O,unit:A}:q.join(h)}var mdsFilePreviewCss='@tailwind utilities;\n\n:host {\n\n  --mds-file-preview-background-color: rgb(var(--tone-neutral));\n  --mds-file-preview-border-radius: 0.5rem;\n  --mds-file-preview-color: rgb(var(--tone-neutral-03));\n  --mds-file-preview-icon-background: inherit;\n  --mds-file-preview-icon-color: var(--mds-file-preview-color);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-file-preview-background-color);\n  border-radius: var(--mds-file-preview-border-radius);\n  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-file-preview-color);\n  -ms-flex-pack: stretch;\n  justify-content: stretch;\n  position: relative;\n}\n\n.card{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n\n  border-radius: var(--mds-file-preview-border-radius);\n  display: grid;\n  width: 100%;\n}\n\n.preview{\n\n  aspect-ratio: 1/1;\n\n  background-color: var(--mds-file-preview-icon-bacground);\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color:  var(--mds-file-preview-color);\n  fill:  var(--mds-file-preview-icon-color);\n  width: 100%;\n}\n\n.preview--image {\n  -webkit-filter: brightness(0.975);\n  filter: brightness(0.975);\n  padding: 0 !important;\n}\n\n.preview--icon,\n.preview--status {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview--status{\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n}\n\n.icon{\n\n  height: 3rem;\n\n  width: 3rem;\n}\n\n.message {\n  text-align: center;\n}\n\n.action-delete {\n  background-color: var(--mds-file-preview-background-color);\n  fill: var(--mds-file-preview-color);\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.infos{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.suffix {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.infos--has-file-size {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.file-name {\n\n  --mds-text-line-clamp: 2;\n}\n\n:host([format="archive"]),\n:host([format="executable"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-amaranth-10));\n}\n\n:host([format="attachment"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-icon-bacground: rgb(var(--tone-neutral-10));\n}\n\n:host([format="audio"]),\n:host([format="video"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n  --mds-file-preview-color: rgb(var(--label-violet-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-violet-10));\n}\n\n:host([format="code"]),\n:host([format="data"]),\n:host([format="markup"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-yellow-10));\n}\n\n:host([format="document"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n  --mds-file-preview-color: rgb(var(--label-orange-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-orange-10));\n}\n\n:host([format="email"]),\n:host([format="text"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n  --mds-file-preview-color: rgb(var(--label-blue-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-blue-10));\n}\n\n:host([format="image"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n  --mds-file-preview-color: rgb(var(--label-green-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-green-10));\n}\n\n:host([format="slide"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-orchid-10));\n}\n\n:host([format="spreadsheet"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n  --mds-file-preview-color: rgb(var(--label-lime-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-lime-10));\n}\n\n:host([format="vector"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-aqua-10));\n}\n\n@tailwind utilities;\n\n:host( [variant="info"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-info-09));\n  --mds-file-preview-icon-color: rgb(var(--status-info-04));\n}\n\n:host( [variant="success"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-success-09));\n  --mds-file-preview-icon-color: rgb(var(--status-success-04));\n}\n\n:host( [variant="warning"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-warning-09));\n  --mds-file-preview-icon-color: rgb(var(--status-warning-04));\n}\n\n:host( [variant="error"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-error-09));\n  --mds-file-preview-icon-color: rgb(var(--status-error-04));\n}\n\n\n:host( [variant="amaranth"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-amaranth-09));\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n}\n\n:host( [variant="aqua"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-aqua-09));\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n}\n\n\n:host( [variant="blue"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-blue-09));\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n}\n\n:host( [variant="green"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-green-09));\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n}\n\n:host( [variant="lime"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-lime-09));\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n}\n\n:host( [variant="orange"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-orange-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n}\n\n:host( [variant="orchid"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-orchid-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n}\n\n:host( [variant="primary"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--brand-maggioli-09));\n  --mds-file-preview-icon-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( [variant="sky"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-sky-09));\n  --mds-file-preview-icon-color: rgb(var(--label-sky-04));\n}\n\n:host( [variant="violet"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-violet-09));\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n}\n\n:host( [variant="yellow"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-yellow-09));\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant="info"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-info-10));\n    --mds-file-preview-icon-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant="success"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-success-10));\n    --mds-file-preview-icon-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant="warning"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-warning-10));\n    --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant="error"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-error-10));\n    --mds-file-preview-icon-color: rgb(var(--status-error-02));\n  }\n\n\n  :host( [variant="amaranth"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-amaranth-10));\n    --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n  }\n\n  :host( [variant="aqua"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-aqua-10));\n    --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n  }\n\n\n  :host( [variant="blue"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-blue-10));\n    --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n  }\n\n  :host( [variant="green"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-green-10));\n    --mds-file-preview-icon-color: rgb(var(--label-green-02));\n  }\n\n  :host( [variant="lime"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-lime-10));\n    --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n  }\n\n  :host( [variant="orange"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-orange-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n  }\n\n  :host( [variant="orchid"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-orchid-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n  }\n\n  :host( [variant="primary"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--brand-maggioli-10));\n    --mds-file-preview-icon-color: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant="sky"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-sky-10));\n    --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n  }\n\n  :host( [variant="violet"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-violet-10));\n    --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n  }\n\n  :host( [variant="yellow"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-yellow-10));\n    --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="info"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-info-10));\n      --mds-file-preview-icon-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant="success"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-success-10));\n      --mds-file-preview-icon-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant="warning"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-warning-10));\n      --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant="error"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-error-10));\n      --mds-file-preview-icon-color: rgb(var(--status-error-02));\n    }\n\n\n    :host( [variant="amaranth"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-amaranth-10));\n      --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n    }\n\n    :host( [variant="aqua"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-aqua-10));\n      --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n    }\n\n\n    :host( [variant="blue"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-blue-10));\n      --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n    }\n\n    :host( [variant="green"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-green-10));\n      --mds-file-preview-icon-color: rgb(var(--label-green-02));\n    }\n\n    :host( [variant="lime"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-lime-10));\n      --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n    }\n\n    :host( [variant="orange"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-orange-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n    }\n\n    :host( [variant="orchid"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-orchid-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n    }\n\n    :host( [variant="primary"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--brand-maggioli-10));\n      --mds-file-preview-icon-color: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant="sky"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-sky-10));\n      --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n    }\n\n    :host( [variant="violet"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-violet-10));\n      --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n    }\n\n    :host( [variant="yellow"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-yellow-10));\n      --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .preview {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .preview {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n';var MdsFilePreviewStyle0=mdsFilePreviewCss;var MdsFilePreview=function(){function e(e){var n=this;registerInstance(this,e);this.downloadedEvent=createEvent(this,"mdsFileDownload",7);this.deletedEvent=createEvent(this,"mdsFileDelete",7);this.getDefaultDescription=function(){return getExtensionInfos(n.filename,n.suffix).description};this.onClickDeletedEvent=function(){n.deletedEvent.emit({target:n.host,filename:n.filename,extension:getSuffix(n.filename,n.suffix)})};this.onClickDownloadEvent=function(){n.downloadedEvent.emit({target:n.host,filename:n.filename,extension:getSuffix(n.filename,n.suffix)})};this.deletable=undefined;this.downloadable=undefined;this.description=undefined;this.filename=undefined;this.filesize=undefined;this.message=undefined;this.truncate="word";this.src=undefined;this.suffix=undefined;this.icon=undefined;this.variant=undefined;this.format=undefined}e.prototype.componentWillLoad=function(){this.format=getExtensionInfos(this.filename,this.suffix).format};e.prototype.componentDidLoad=function(){this.handleDownloadable(this.downloadable)};e.prototype.handleFilename=function(e){this.format=getExtensionInfos(e,this.suffix).format};e.prototype.handleDownloadable=function(e,n){var r;if(e===n)return;var i=(r=this.host.shadowRoot)===null||r===void 0?void 0:r.querySelector(".card");if(e){i===null||i===void 0?void 0:i.addEventListener("click",this.onClickDownloadEvent);return}i===null||i===void 0?void 0:i.removeEventListener("click",this.onClickDownloadEvent)};e.prototype.render=function(){var e,n,r;return h(Host,{key:"3e22f95a410b9587d25c1360c3a83ba4fbb49265"},this.deletable&&h("mds-button",{key:"69ae6f4de44d37eb587c7c88cb854cd198f058b4",class:"action-delete",icon:miBaselineCancel,variant:"light",onClick:this.onClickDeletedEvent}),h("div",{key:"172674682f4e217dc3f385b420df9449b0ef686d",class:"card",part:"card",onClick:this.onClickDownloadEvent},this.src&&!this.message&&getExtensionInfos(this.filename,this.suffix).preview?h("mds-img",{src:this.src,class:"preview preview--image","aspect-ratio":"1/1"}):h("div",{class:clsx("preview",!this.message?"preview--icon":"preview--status")},this.icon?h("mds-icon",{class:"icon",name:this.icon}):h("mds-icon",{class:"icon",name:getFormatsVariant(this.filename,this.suffix).icon}),this.message&&h("mds-text",{class:"message",typography:"caption",variant:"info"},this.message)),h("mds-text",{key:"1186dbc3b2e1efa2e3c89e2dd58709f3c0bd3d73",class:"file-name",typography:"h6",variant:"title",truncate:this.truncate,title:this.filename},this.filename),h("footer",{key:"3b31040cdfa14434df1dcbf39b09ba38ee36579e",class:clsx("infos",this.filesize&&"infos--has-file-size")},this.filesize&&this.filesize===Number(this.filesize).toString()&&h("mds-text",{key:"46b176c04ee6a7fe9d305caf18ec6fecdd75d5f7",class:"file-size",truncate:"word",typography:"caption",variant:"info"},filesize(Number(this.filesize),{standard:"jedec"})),this.filesize&&this.filesize!==Number(this.filesize).toString()&&h("mds-text",{key:"0b7c0caa88e1ddd877c8fb3b3c912eae7952ace9",class:"file-size",truncate:"word",typography:"caption",variant:"info"},this.filesize),getSuffix(this.filename,this.suffix)&&h("mds-badge",{key:"8408bc6bf58b09c086140616adc2badd81a2142f",variant:getFormatsVariant(this.filename,this.suffix).variant,tone:"weak",class:"suffix",title:(e=this.description)!==null&&e!==void 0?e:this.getDefaultDescription()},getSuffix(this.filename,this.suffix)),!this.filesize&&h("mds-text",{key:"bf57ea88022bc53569b2453f2be6394ec086713e",class:"description",truncate:"word",typography:"caption",variant:"info",title:(n=this.description)!==null&&n!==void 0?n:this.getDefaultDescription()},(r=this.description)!==null&&r!==void 0?r:this.getDefaultDescription()))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{filename:["handleFilename"],downloadable:["handleDownloadable"]}},enumerable:false,configurable:true});return e}();MdsFilePreview.style=MdsFilePreviewStyle0;export{MdsFilePreview as mds_file_preview};
+ */var ARRAY="array";var BIT="bit";var BITS="bits";var BYTE="byte";var BYTES="bytes";var EMPTY="";var EXPONENT="exponent";var FUNCTION="function";var IEC="iec";var INVALID_NUMBER="Invalid number";var INVALID_ROUND="Invalid rounding method";var JEDEC="jedec";var OBJECT="object";var PERIOD=".";var ROUND="round";var S="s";var SI="si";var SI_KBIT="kbit";var SI_KBYTE="kB";var SPACE=" ";var STRING="string";var ZERO="0";var STRINGS={symbol:{iec:{bits:["bit","Kibit","Mibit","Gibit","Tibit","Pibit","Eibit","Zibit","Yibit"],bytes:["B","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"]},jedec:{bits:["bit","Kbit","Mbit","Gbit","Tbit","Pbit","Ebit","Zbit","Ybit"],bytes:["B","KB","MB","GB","TB","PB","EB","ZB","YB"]}},fullform:{iec:["","kibi","mebi","gibi","tebi","pebi","exbi","zebi","yobi"],jedec:["","kilo","mega","giga","tera","peta","exa","zetta","yotta"]}};function filesize(e,r){var n=r===void 0?{}:r,i=n.bits,a=i===void 0?false:i,o=n.pad,l=o===void 0?false:o,s=n.base,t=s===void 0?-1:s,c=n.round,v=c===void 0?2:c,b=n.locale,d=b===void 0?EMPTY:b,m=n.localeOptions,f=m===void 0?{}:m,g=n.separator,p=g===void 0?EMPTY:g,u=n.spacer,w=u===void 0?SPACE:u,h=n.symbols,k=h===void 0?{}:h,y=n.standard,x=y===void 0?EMPTY:y,E=n.output,I=E===void 0?STRING:E,T=n.fullform,B=T===void 0?false:T,N=n.fullforms,j=N===void 0?[]:N,D=n.exponent,P=D===void 0?-1:D,M=n.roundingMethod,O=M===void 0?ROUND:M,R=n.precision,Y=R===void 0?0:R;var C=P,_=Number(e),q=[],F=0,L=EMPTY;if(x===SI){t=10;x=JEDEC}else if(x===IEC||x===JEDEC){t=2}else if(t===2){x=IEC}else{t=10;x=JEDEC}var z=t===10?1e3:1024,G=B===true,A=_<0,K=Math[O];if(typeof e!=="bigint"&&isNaN(e)){throw new TypeError(INVALID_NUMBER)}if(typeof K!==FUNCTION){throw new TypeError(INVALID_ROUND)}if(A){_=-_}if(C===-1||isNaN(C)){C=Math.floor(Math.log(_)/Math.log(z));if(C<0){C=0}}if(C>8){if(Y>0){Y+=8-C}C=8}if(I===EXPONENT){return C}if(_===0){q[0]=0;L=q[1]=STRINGS.symbol[x][a?BITS:BYTES][C]}else{F=_/(t===2?Math.pow(2,C*10):Math.pow(1e3,C));if(a){F=F*8;if(F>=z&&C<8){F=F/z;C++}}var U=Math.pow(10,C>0?v:0);q[0]=K(F*U)/U;if(q[0]===z&&C<8&&P===-1){q[0]=1;C++}L=q[1]=t===10&&C===1?a?SI_KBIT:SI_KBYTE:STRINGS.symbol[x][a?BITS:BYTES][C]}if(A){q[0]=-q[0]}if(Y>0){q[0]=q[0].toPrecision(Y)}q[1]=k[q[1]]||q[1];if(d===true){q[0]=q[0].toLocaleString()}else if(d.length>0){q[0]=q[0].toLocaleString(d,f)}else if(p.length>0){q[0]=q[0].toString().replace(PERIOD,p)}if(l&&Number.isInteger(q[0])===false&&v>0){var V=p||PERIOD,J=q[0].toString().split(V),Z=J[1]||EMPTY,$=Z.length,H=v-$;q[0]="".concat(J[0]).concat(V).concat(Z.padEnd($+H,ZERO))}if(G){q[1]=j[C]?j[C]:STRINGS.fullform[x][C]+(a?BIT:BYTE)+(q[0]===1?EMPTY:S)}return I===ARRAY?q:I===OBJECT?{value:q[0],symbol:q[1],exponent:C,unit:L}:q.join(w)}var remove$3="Αφαιρέστε το αρχείο από την ουρά μεταφόρτωσης";var localeEl={remove:remove$3};var remove$2="Remove file from upload queue";var localeEn={remove:remove$2};var remove$1="Eliminar archivo de la cola de carga";var localeEs={remove:remove$1};var remove="Rimuovi file dalla coda di upload";var localeIt={remove:remove};var mdsFilePreviewCss='@tailwind utilities;\n\n:host {\n\n  --mds-file-preview-background-color: rgb(var(--tone-neutral));\n  --mds-file-preview-border-radius: 0.5rem;\n  --mds-file-preview-color: rgb(var(--tone-neutral-03));\n  --mds-file-preview-icon-background: inherit;\n  --mds-file-preview-icon-color: var(--mds-file-preview-color);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-file-preview-background-color);\n  border-radius: var(--mds-file-preview-border-radius);\n  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-file-preview-color);\n  -ms-flex-pack: stretch;\n  justify-content: stretch;\n  position: relative;\n}\n\n.card{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n\n  border-radius: var(--mds-file-preview-border-radius);\n  display: grid;\n  width: 100%;\n}\n\n.preview{\n\n  aspect-ratio: 1/1;\n\n  background-color: var(--mds-file-preview-icon-background);\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color:  var(--mds-file-preview-color);\n  fill:  var(--mds-file-preview-icon-color);\n  width: 100%;\n}\n\n.preview--image {\n  -webkit-filter: brightness(0.975);\n  filter: brightness(0.975);\n  padding: 0 !important;\n}\n\n.preview--icon,\n.preview--status {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview--status{\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n}\n\n.icon{\n\n  height: 3rem;\n\n  width: 3rem;\n}\n\n.message {\n  text-align: center;\n}\n\n.action-delete {\n  background-color: var(--mds-file-preview-background-color);\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.infos{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.suffix {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.infos--has-file-size {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.file-name {\n\n  --mds-text-line-clamp: 2;\n}\n\n:host([format="archive"]),\n:host([format="executable"]) {\n\n  --mds-file-preview-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n}\n\n:host([format="attachment"]) {\n\n  --mds-file-preview-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-icon-background: rgb(var(--tone-neutral-10));\n  --mds-file-preview-icon-color: rgb(var(--tone-neutral-04));\n}\n\n:host([format="audio"]),\n:host([format="video"]) {\n\n  --mds-file-preview-color: rgb(var(--label-violet-04));\n  --mds-file-preview-icon-background: rgb(var(--label-violet-10));\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n}\n\n:host([format="code"]),\n:host([format="data"]),\n:host([format="markup"]) {\n\n  --mds-file-preview-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-icon-background: rgb(var(--label-yellow-10));\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n}\n\n:host([format="document"]) {\n\n  --mds-file-preview-color: rgb(var(--label-orange-04));\n  --mds-file-preview-icon-background: rgb(var(--label-orange-10));\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n}\n\n:host([format="email"]),\n:host([format="text"]) {\n\n  --mds-file-preview-color: rgb(var(--label-blue-04));\n  --mds-file-preview-icon-background: rgb(var(--label-blue-10));\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n}\n\n:host([format="image"]) {\n\n  --mds-file-preview-color: rgb(var(--label-green-04));\n  --mds-file-preview-icon-background: rgb(var(--label-green-10));\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n}\n\n:host([format="slide"]) {\n\n  --mds-file-preview-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-icon-background: rgb(var(--label-orchid-10));\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n}\n\n:host([format="spreadsheet"]) {\n\n  --mds-file-preview-color: rgb(var(--label-lime-04));\n  --mds-file-preview-icon-background: rgb(var(--label-lime-10));\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n}\n\n:host([format="vector"]) {\n\n  --mds-file-preview-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-icon-background: rgb(var(--label-aqua-10));\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n}\n\n@tailwind utilities;\n\n:host( [variant="primary"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--variant-primary-09));\n  --mds-file-preview-icon-color: rgb(var(--variant-primary-04));\n}\n\n:host( [variant="info"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-info-09));\n  --mds-file-preview-icon-color: rgb(var(--status-info-04));\n  --mds-file-preview-color: rgb(var(--status-info-03));\n}\n\n:host( [variant="success"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-success-09));\n  --mds-file-preview-icon-color: rgb(var(--status-success-04));\n  --mds-file-preview-color: rgb(var(--status-success-03));\n}\n\n:host( [variant="warning"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-warning-09));\n  --mds-file-preview-icon-color: rgb(var(--status-warning-04));\n  --mds-file-preview-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant="error"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-error-09));\n  --mds-file-preview-icon-color: rgb(var(--status-error-04));\n  --mds-file-preview-color: rgb(var(--status-error-03));\n}\n\n\n:host( [variant="amaranth"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-amaranth-09));\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-color: rgb(var(--label-amaranth-03));\n}\n\n:host( [variant="aqua"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-aqua-09));\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-color: rgb(var(--label-aqua-03));\n}\n\n\n:host( [variant="blue"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-blue-09));\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n  --mds-file-preview-color: rgb(var(--label-blue-03));\n}\n\n:host( [variant="green"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-green-09));\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n  --mds-file-preview-color: rgb(var(--label-green-03));\n}\n\n:host( [variant="lime"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-lime-09));\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n  --mds-file-preview-color: rgb(var(--label-lime-03));\n}\n\n:host( [variant="orange"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-orange-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n  --mds-file-preview-color: rgb(var(--label-orange-03));\n}\n\n:host( [variant="orchid"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-orchid-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-color: rgb(var(--label-orchid-03));\n}\n\n:host( [variant="sky"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-sky-09));\n  --mds-file-preview-icon-color: rgb(var(--label-sky-04));\n  --mds-file-preview-color: rgb(var(--label-sky-03));\n}\n\n:host( [variant="violet"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-violet-09));\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n  --mds-file-preview-color: rgb(var(--label-violet-03));\n}\n\n:host( [variant="yellow"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-yellow-09));\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-color: rgb(var(--label-yellow-03));\n}\n\n@container style(--magma-pref-contrast: more) {\n\n  :host( [variant="primary"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--variant-primary-10));\n    --mds-file-preview-icon-color: rgb(var(--variant-primary-02));\n    --mds-file-preview-color: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant="info"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-info-10));\n    --mds-file-preview-icon-color: rgb(var(--status-info-02));\n    --mds-file-preview-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant="success"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-success-10));\n    --mds-file-preview-icon-color: rgb(var(--status-success-02));\n    --mds-file-preview-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant="warning"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-warning-10));\n    --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n    --mds-file-preview-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant="error"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-error-10));\n    --mds-file-preview-icon-color: rgb(var(--status-error-02));\n    --mds-file-preview-color: rgb(var(--status-error-01));\n  }\n\n\n  :host( [variant="amaranth"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));\n    --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n    --mds-file-preview-color: rgb(var(--label-amaranth-01));\n  }\n\n  :host( [variant="aqua"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-aqua-10));\n    --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n    --mds-file-preview-color: rgb(var(--label-aqua-01));\n  }\n\n\n  :host( [variant="blue"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-blue-10));\n    --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n    --mds-file-preview-color: rgb(var(--label-blue-01));\n  }\n\n  :host( [variant="green"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-green-10));\n    --mds-file-preview-icon-color: rgb(var(--label-green-02));\n    --mds-file-preview-color: rgb(var(--label-green-01));\n  }\n\n  :host( [variant="lime"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-lime-10));\n    --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n    --mds-file-preview-color: rgb(var(--label-lime-01));\n  }\n\n  :host( [variant="orange"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-orange-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n    --mds-file-preview-color: rgb(var(--label-orange-01));\n  }\n\n  :host( [variant="orchid"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-orchid-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n    --mds-file-preview-color: rgb(var(--label-orchid-01));\n  }\n\n  :host( [variant="sky"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-sky-10));\n    --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n    --mds-file-preview-color: rgb(var(--label-sky-01));\n  }\n\n  :host( [variant="violet"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-violet-10));\n    --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n    --mds-file-preview-color: rgb(var(--label-violet-01));\n  }\n\n  :host( [variant="yellow"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-yellow-10));\n    --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n    --mds-file-preview-color: rgb(var(--label-yellow-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant="primary"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--variant-primary-10));\n      --mds-file-preview-icon-color: rgb(var(--variant-primary-02));\n      --mds-file-preview-color: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant="info"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-info-10));\n      --mds-file-preview-icon-color: rgb(var(--status-info-02));\n      --mds-file-preview-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant="success"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-success-10));\n      --mds-file-preview-icon-color: rgb(var(--status-success-02));\n      --mds-file-preview-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant="warning"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-warning-10));\n      --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n      --mds-file-preview-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant="error"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-error-10));\n      --mds-file-preview-icon-color: rgb(var(--status-error-02));\n      --mds-file-preview-color: rgb(var(--status-error-01));\n    }\n\n\n    :host( [variant="amaranth"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));\n      --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n      --mds-file-preview-color: rgb(var(--label-amaranth-01));\n    }\n\n    :host( [variant="aqua"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-aqua-10));\n      --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n      --mds-file-preview-color: rgb(var(--label-aqua-01));\n    }\n\n\n    :host( [variant="blue"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-blue-10));\n      --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n      --mds-file-preview-color: rgb(var(--label-blue-01));\n    }\n\n    :host( [variant="green"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-green-10));\n      --mds-file-preview-icon-color: rgb(var(--label-green-02));\n      --mds-file-preview-color: rgb(var(--label-green-01));\n    }\n\n    :host( [variant="lime"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-lime-10));\n      --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n      --mds-file-preview-color: rgb(var(--label-lime-01));\n    }\n\n    :host( [variant="orange"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-orange-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n      --mds-file-preview-color: rgb(var(--label-orange-01));\n    }\n\n    :host( [variant="orchid"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-orchid-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n      --mds-file-preview-color: rgb(var(--label-orchid-01));\n    }\n\n    :host( [variant="sky"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-sky-10));\n      --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n      --mds-file-preview-color: rgb(var(--label-sky-01));\n    }\n\n    :host( [variant="violet"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-violet-10));\n      --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n      --mds-file-preview-color: rgb(var(--label-violet-01));\n    }\n\n    :host( [variant="yellow"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-yellow-10));\n      --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n      --mds-file-preview-color: rgb(var(--label-yellow-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .preview {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .preview {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n';var MdsFilePreviewStyle0=mdsFilePreviewCss;var MdsFilePreview=function(){function e(e){var r=this;registerInstance(this,e);this.downloadedEvent=createEvent(this,"mdsFileDownload",7);this.deletedEvent=createEvent(this,"mdsFileDelete",7);this.t=new Locale({el:Object.assign(Object.assign({},localeEl),fileDescriptionLocaleEl),en:Object.assign(Object.assign({},localeEn),fileDescriptionLocaleEn),es:Object.assign(Object.assign({},localeEs),fileDescriptionLocaleEs),it:Object.assign(Object.assign({},localeIt),fileDescriptionLocaleIt)});this.getDefaultKeyDescription=function(){return getExtensionInfos(r.filename,r.suffix).description};this.onClickDeletedEvent=function(){r.deletedEvent.emit({target:r.host,filename:r.filename,extension:getSuffix(r.filename,r.suffix)})};this.onClickDownloadEvent=function(){r.downloadedEvent.emit({target:r.host,filename:r.filename,extension:getSuffix(r.filename,r.suffix)})};this.language=undefined;this.deletable=undefined;this.downloadable=undefined;this.description=undefined;this.filename=undefined;this.filesize=undefined;this.message=undefined;this.truncate="word";this.src=undefined;this.suffix=undefined;this.icon=undefined;this.variant=undefined;this.format=undefined}e.prototype.updateLang=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.language=this.t.lang(this.host);return[2]}))}))};e.prototype.componentWillLoad=function(){this.t.lang(this.host);this.format=getExtensionInfos(this.filename,this.suffix).format};e.prototype.componentDidLoad=function(){this.handleDownloadable(this.downloadable)};e.prototype.handleFilename=function(e){this.format=getExtensionInfos(e,this.suffix).format};e.prototype.handleDownloadable=function(e,r){var n;if(e===r)return;var i=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".card");if(e){i===null||i===void 0?void 0:i.addEventListener("click",this.onClickDownloadEvent);return}i===null||i===void 0?void 0:i.removeEventListener("click",this.onClickDownloadEvent)};e.prototype.render=function(){var e,r,n;return h(Host,{key:"a7dda123874919af0842b36f88f84de14e9dc85a"},this.deletable&&h("mds-button",{key:"7e36d34ac76dd06d03ea07ff5d1be37bbec7a19d",title:this.t.get("remove"),class:"action-delete",icon:miBaselineCancel,variant:"light",onClick:this.onClickDeletedEvent}),h("div",{key:"5f43336b09414404595fd96b0f885fea892401fd",class:"card",part:"card",onClick:this.onClickDownloadEvent},this.src&&!this.message&&getExtensionInfos(this.filename,this.suffix).preview?h("mds-img",{src:this.src,class:"preview preview--image","aspect-ratio":"1/1"}):h("div",{class:clsx("preview",!this.message?"preview--icon":"preview--status")},this.icon?h("mds-icon",{class:"icon",name:this.icon}):h("mds-icon",{class:"icon",name:getFormatsVariant(this.filename,this.suffix).icon}),this.message&&h("mds-text",{class:"message",typography:"caption",variant:"info"},this.message)),h("mds-text",{key:"fb4b233d9d7b2c53404865013102c349b1b97400",class:"file-name",typography:"h6",variant:"title",truncate:this.truncate,title:this.filename},this.filename),h("footer",{key:"00b1ba509692b5de8dc88ce8d480b96a0c7c8344",class:clsx("infos",this.filesize&&"infos--has-file-size")},this.filesize&&this.filesize===Number(this.filesize).toString()&&h("mds-text",{key:"2f2db2eb690b1c47de551a05618c495382bedf1b",class:"file-size",truncate:"word",typography:"caption",variant:"info"},filesize(Number(this.filesize),{standard:"jedec"})),this.filesize&&this.filesize!==Number(this.filesize).toString()&&h("mds-text",{key:"4fe83b584365b422f7fa31c91ddfb5168a7a213b",class:"file-size",truncate:"word",typography:"caption",variant:"info"},this.filesize),getSuffix(this.filename,this.suffix)&&h("mds-badge",{key:"e40bb98da46ed616f9c67223ecbed54d76a38454",variant:getFormatsVariant(this.filename,this.suffix).variant,tone:"weak",class:"suffix",title:(e=this.description)!==null&&e!==void 0?e:this.t.get(this.getDefaultKeyDescription())},getSuffix(this.filename,this.suffix)),!this.filesize&&h("mds-text",{key:"299abc283bed28e4410249d5140b1fbeec9b2eb5",class:"description",truncate:"word",typography:"caption",variant:"info",title:(r=this.description)!==null&&r!==void 0?r:this.t.get(this.getDefaultKeyDescription())},(n=this.description)!==null&&n!==void 0?n:this.t.get(this.getDefaultKeyDescription())))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{filename:["handleFilename"],downloadable:["handleDownloadable"]}},enumerable:false,configurable:true});return e}();MdsFilePreview.style=MdsFilePreviewStyle0;export{MdsFilePreview as mds_file_preview};