https://slow-magazine.org/CLwT8gBB.js

1import{e as d,h as l,d as h,T as c,a as f,i as b,x as n}from"./C2FIWsVB.js";import{o as g}from"./DiiNQ3pp.js";import{o as u}from"./BvX-A4XI.js";import{t as y}from"./BdxTxoiZ.js";/**
2 * @license
3 * Copyright 2018 Google LLC
4 * SPDX-License-Identifier: BSD-3-Clause
5 */const m=d(class extends l{constructor(i){if(super(i),i.type!==h.ATTRIBUTE||i.name!=="class"||i.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(i){return" "+Object.keys(i).filter(e=>i[e]).join(" ")+" "}update(i,[e]){if(this.st===void 0){this.st=new Set,i.strings!==void 0&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(const t in e)e[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(e)}const r=i.element.classList;for(const t of this.st)t in e||(r.remove(t),this.st.delete(t));for(const t in e){const s=!!e[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return c}});/**
6 * @license
7 * Copyright 2018 Google LLC
8 * SPDX-License-Identifier: BSD-3-Clause
9 */const p="important",v=" !"+p,w=d(class extends l{constructor(i){if(super(i),i.type!==h.ATTRIBUTE||i.name!=="style"||i.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(i){return Object.keys(i).reduce((e,r)=>{const t=i[r];return t==null?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${t};`},"")}update(i,[e]){const{style:r}=i.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(e)),this.render(e);for(const t of this.ft)e[t]==null&&(this.ft.delete(t),t.includes("-")?r.removeProperty(t):r[t]=null);for(const t in e){const s=e[t];if(s!=null){this.ft.add(t);const o=typeof s=="string"&&s.endsWith(v);t.includes("-")||o?r.setProperty(t,o?s.slice(0,-11):s,o?p:""):r[t]=s}}return c}});class x extends f{static properties={inline:{type:Boolean},random:{type:Boolean},width:{type:String},chars:{type:Number},lines:{type:Number},minLines:{type:Number},classes:{},_classList:{type:Object,state:!0}};static styles=[y,b`:host{position:relative;min-width:100%;min-height:1px;font-size:inherit;overflow:visible;--preload-color:var(--text-color-hsl);--preload-radius:max(0.25em, 0.25lh);--preload-glow-width:0.125em;--glow1:var(--color-pink);--glow2:var(--color-green-light)}:host([image]){flex:1;min-height:100%;height:100%;min-width:100%}:host([button]){display:inline-block}:host[inline],:host[inline] [part=element]{display:inline-block}[part=element]{position:relative;min-height:max(1em,1lh);margin:calc(var(--preload-glow-width) + .5px)}.dummy,[part=element]{content:'';height:100%;border-radius:var(--preload-radius)}.dummy{content:'';position:relative;display:inline-block;flex:1;width:calc(100% - var(--preload-glow-width) * 2 - 1px);font-size:inherit;background:hsl(var(--preload-color) / .3);border-radius:var(--preload-radius);min-height:min(1em,1lh);animation:shake 1.5s .5s infinite linear alternate-reverse,glitch 1s .5s infinite}:host([image]) .dummy{height:calc(100% - var(--preload-glow-width) * 2 - 1px)}:host([button]) .dummy{min-height:calc(min(1em,1lh) + 1ex)}@supports not (padding-top:1lh){:host([button]) .dummy{min-height:calc(1.25em + 1ex)}}.dummy::after,.dummy::before{content:'';position:absolute;border-radius:inherit;top:0;bottom:0;left:0;right:0;border:0;background:0 0;border:0 solid var(--glow1)}.dummy::before{animation:shake 1.5s 0s infinite linear alternate-reverse}.dummy::after{border:0 solid var(--glow2);animation:shake 1.5s .5s infinite linear alternate-reverse}.scanlines{overflow:visible;mix-blend-mode:difference;position:absolute;top:0;left:0;bottom:0;right:0;border-radius:var(--preload-radius);mask-image:linear-gradient(90deg,rgb(255,255,255,0) 0,#fff max(2.5%,var(--preload-glow-width)),#fff calc(100% - max(-2.5%,var(--preload-glow-width))),rgb(255,255,255,0) 100%)}.scanlines::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;border-radius:var(--preload-radius);background:repeating-linear-gradient(to bottom,transparent 0,hsl(var(--text-color-dark-hsl) / .2) .5%,transparent 1%);animation:lines 1s ease-in-out alternate infinite}@keyframes shake{0%{transform:skewX(-15deg);border-right-width:var(--preload-glow-width);border-left-width:max(calc(var(--preload-glow-width)/ 2),1px);opacity:.4}5%{transform:skewX(15deg);border-right-width:max(calc(var(--preload-glow-width)/ 4),1px);border-bottom-width:var(--preload-glow-width);border-left-width:var(--preload-glow-width);opacity:.6}10%{transform:skewX(-12deg);border-bottom-width:0;border-right-width:0;border-left-width:max(calc(var(--preload-glow-width)/ 2),1px);border-top-width:var(--preload-glow-width);opacity:.2}15%{transform:skewX(10deg);border-top-width:0;border-left-width:0;border-left-width:max(calc(var(--preload-glow-width)/ 4),1px);border-bottom-width:0;opacity:.8}20%{transform:skewX(0);border-right-width:max(calc(var(--preload-glow-width)/ 2),1px);opacity:1}25%{transform:skewX(0);border-right-width:0;border-left-width:var(--preload-glow-width);opacity:.3}30%{transform:skewX(12deg);border-left-width:0;border-right-width:var(--preload-glow-width);border-bottom-width:var(--preload-glow-width);opacity:.5}35%{transform:skewX(0);border-top-width:0;border-left-width:0;border-right-width:0;border-bottom-width:0;opacity:.5}100%{transform:skewX(0);border-top-width:0;border-left-width:0;border-right-width:0;border-bottom-width:0;opacity:1}}@keyframes glitch{1%{transform:rotateX(10deg) skewX(90deg)}2%{transform:rotateX(0) skewX(0)}}@keyframes lines{0%{opacity:0;transform:translate(0,0)}10%{opacity:1;transform:translate(0,2%)}50%{opacity:0;transform:translate(0,0)}90%{opacity:1;transform:translate(0,2%)}100%{opacity:0;transform:translate(0,0)}}`];connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this._classList={}}setClasses(){typeof this.classes=="string"?this.classes.split(" ").forEach(e

9=>{this._classList[`${e}`]=!0}):Array.isArray(this.classes)?this.classes.forEach(e=>{this._classList[e]=!0}):this._classList=this.classes}willUpdate(e){e.has("classes")&&this.setClasses()}renderElement(e={}){return n` <div class="dummy" style="${w(e)}"></div> `}renderContainer(e,r={}){return n`<div part="element" class="${m(this._classList)}" style="${w(r)}"> ${e} <div class="scanlines"></div> </div>`}_getRandomInt(e,r){return Math.floor(Math.random()*(r-e+1)+e)}_getRandowmWidth(e){let r=20,t=100,s="";if(this.chars)e?r=Math.max(1,this.chars/4):r=Math.max(Math.min(4,this.chars),this.chars/2),t=this.chars;else{const a=this?.width??100;this.width||(s="%"),e?r=Math.max(10,a/10):r=a*.8,t=a}const o=this._getRandomInt(r,t);return this.chars?`max(${o}em, ${o}ch)`:`${o}${s}`}render(){const e={};this.width&&(e.width=this.width,this._classList.inline=!0),this.chars&&(e.width=`max(${this.chars}em, ${this.chars}ch)`,this._classList.inline=!0),this.random&&(e.width=this._getRandowmWidth());let r=parseInt(this?.lines??0,10);if(this.minLines){const s=parseInt(this.minLines,10);r=this._getRandomInt(s||r,r)}let t;return r?t=g(u(r),s=>{const o=this._getRandowmWidth(s+1===r);return n`${this.renderElement({width:o})}<br>`}):t=this.renderElement(),this.renderContainer(t,e)}}customElements.define("preload-content",x);var k=Object.freeze({__proto__:null});export{m as e,k as p};