让GKD网页审查工具再次强大！
目前為
// ==UserScript== // @name GKD网页审查工具增强 // @namespace https://blog.adproqwq.xyz // @version 2.1.3 // @author Adpro // @description 让GKD网页审查工具再次强大！ // @license MIT // @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Im0yMyA0bC01IDMuNzV2Ni41TDE1IDEybC01IDMuNzV2Ni41TDcgMjBsLTUgMy43NVYzMGgydi01LjI1bDMtMi4yNWwzIDIuMjVWMzBoMlYxNi43NWwzLTIuMjVsMyAyLjI1VjMwaDJWOC43NWwzLTIuMjVsMyAyLjI1VjMwaDJWNy43NXoiLz48L3N2Zz4= // @match https://i.gkd.li/* // @exclude https://i.gkd.li // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js // @grant none // ==/UserScript== (r=>{if(typeof GM_addStyle=="function"){GM_addStyle(r);return}const o=document.createElement("style");o.textContent=r,document.head.append(o)})(' :root{--mdui-breakpoint-xs:0px;--mdui-breakpoint-sm:600px;--mdui-breakpoint-md:840px;--mdui-breakpoint-lg:1080px;--mdui-breakpoint-xl:1440px;--mdui-breakpoint-xxl:1920px}:root{--mdui-color-primary-light:103,80,164;--mdui-color-primary-container-light:234,221,255;--mdui-color-on-primary-light:255,255,255;--mdui-color-on-primary-container-light:33,0,94;--mdui-color-inverse-primary-light:208,188,255;--mdui-color-secondary-light:98,91,113;--mdui-color-secondary-container-light:232,222,248;--mdui-color-on-secondary-light:255,255,255;--mdui-color-on-secondary-container-light:30,25,43;--mdui-color-tertiary-light:125,82,96;--mdui-color-tertiary-container-light:255,216,228;--mdui-color-on-tertiary-light:255,255,255;--mdui-color-on-tertiary-container-light:55,11,30;--mdui-color-surface-light:254,247,255;--mdui-color-surface-dim-light:222,216,225;--mdui-color-surface-bright-light:254,247,255;--mdui-color-surface-container-lowest-light:255,255,255;--mdui-color-surface-container-low-light:247,242,250;--mdui-color-surface-container-light:243,237,247;--mdui-color-surface-container-high-light:236,230,240;--mdui-color-surface-container-highest-light:230,224,233;--mdui-color-surface-variant-light:231,224,236;--mdui-color-on-surface-light:28,27,31;--mdui-color-on-surface-variant-light:73,69,78;--mdui-color-inverse-surface-light:49,48,51;--mdui-color-inverse-on-surface-light:244,239,244;--mdui-color-background-light:254,247,255;--mdui-color-on-background-light:28,27,31;--mdui-color-error-light:179,38,30;--mdui-color-error-container-light:249,222,220;--mdui-color-on-error-light:255,255,255;--mdui-color-on-error-container-light:65,14,11;--mdui-color-outline-light:121,116,126;--mdui-color-outline-variant-light:196,199,197;--mdui-color-shadow-light:0,0,0;--mdui-color-surface-tint-color-light:103,80,164;--mdui-color-scrim-light:0,0,0;--mdui-color-primary-dark:208,188,255;--mdui-color-primary-container-dark:79,55,139;--mdui-color-on-primary-dark:55,30,115;--mdui-color-on-primary-container-dark:234,221,255;--mdui-color-inverse-primary-dark:103,80,164;--mdui-color-secondary-dark:204,194,220;--mdui-color-secondary-container-dark:74,68,88;--mdui-color-on-secondary-dark:51,45,65;--mdui-color-on-secondary-container-dark:232,222,248;--mdui-color-tertiary-dark:239,184,200;--mdui-color-tertiary-container-dark:99,59,72;--mdui-color-on-tertiary-dark:73,37,50;--mdui-color-on-tertiary-container-dark:255,216,228;--mdui-color-surface-dark:20,18,24;--mdui-color-surface-dim-dark:20,18,24;--mdui-color-surface-bright-dark:59,56,62;--mdui-color-surface-container-lowest-dark:15,13,19;--mdui-color-surface-container-low-dark:29,27,32;--mdui-color-surface-container-dark:33,31,38;--mdui-color-surface-container-high-dark:43,41,48;--mdui-color-surface-container-highest-dark:54,52,59;--mdui-color-surface-variant-dark:73,69,79;--mdui-color-on-surface-dark:230,225,229;--mdui-color-on-surface-variant-dark:202,196,208;--mdui-color-inverse-surface-dark:230,225,229;--mdui-color-inverse-on-surface-dark:49,48,51;--mdui-color-background-dark:20,18,24;--mdui-color-on-background-dark:230,225,229;--mdui-color-error-dark:242,184,181;--mdui-color-error-container-dark:140,29,24;--mdui-color-on-error-dark:96,20,16;--mdui-color-on-error-container-dark:249,222,220;--mdui-color-outline-dark:147,143,153;--mdui-color-outline-variant-dark:68,71,70;--mdui-color-shadow-dark:0,0,0;--mdui-color-surface-tint-color-dark:208,188,255;--mdui-color-scrim-dark:0,0,0;font-size:16px}.mdui-theme-light,:root{color-scheme:light;--mdui-color-primary:var(--mdui-color-primary-light);--mdui-color-primary-container:var(--mdui-color-primary-container-light);--mdui-color-on-primary:var(--mdui-color-on-primary-light);--mdui-color-on-primary-container:var(--mdui-color-on-primary-container-light);--mdui-color-inverse-primary:var(--mdui-color-inverse-primary-light);--mdui-color-secondary:var(--mdui-color-secondary-light);--mdui-color-secondary-container:var(--mdui-color-secondary-container-light);--mdui-color-on-secondary:var(--mdui-color-on-secondary-light);--mdui-color-on-secondary-container:var(--mdui-color-on-secondary-container-light);--mdui-color-tertiary:var(--mdui-color-tertiary-light);--mdui-color-tertiary-container:var(--mdui-color-tertiary-container-light);--mdui-color-on-tertiary:var(--mdui-color-on-tertiary-light);--mdui-color-on-tertiary-container:var(--mdui-color-on-tertiary-container-light);--mdui-color-surface:var(--mdui-color-surface-light);--mdui-color-surface-dim:var(--mdui-color-surface-dim-light);--mdui-color-surface-bright:var(--mdui-color-surface-bright-light);--mdui-color-surface-container-lowest:var(--mdui-color-surface-container-lowest-light);--mdui-color-surface-container-low:var(--mdui-color-surface-container-low-light);--mdui-color-surface-container:var(--mdui-color-surface-container-light);--mdui-color-surface-container-high:var(--mdui-color-surface-container-high-light);--mdui-color-surface-container-highest:var(--mdui-color-surface-container-highest-light);--mdui-color-surface-variant:var(--mdui-color-surface-variant-light);--mdui-color-on-surface:var(--mdui-color-on-surface-light);--mdui-color-on-surface-variant:var(--mdui-color-on-surface-variant-light);--mdui-color-inverse-surface:var(--mdui-color-inverse-surface-light);--mdui-color-inverse-on-surface:var(--mdui-color-inverse-on-surface-light);--mdui-color-background:var(--mdui-color-background-light);--mdui-color-on-background:var(--mdui-color-on-background-light);--mdui-color-error:var(--mdui-color-error-light);--mdui-color-error-container:var(--mdui-color-error-container-light);--mdui-color-on-error:var(--mdui-color-on-error-light);--mdui-color-on-error-container:var(--mdui-color-on-error-container-light);--mdui-color-outline:var(--mdui-color-outline-light);--mdui-color-outline-variant:var(--mdui-color-outline-variant-light);--mdui-color-shadow:var(--mdui-color-shadow-light);--mdui-color-surface-tint-color:var(--mdui-color-surface-tint-color-light);--mdui-color-scrim:var(--mdui-color-scrim-light);color:rgb(var(--mdui-color-on-background));background-color:rgb(var(--mdui-color-background))}.mdui-theme-dark{color-scheme:dark;--mdui-color-primary:var(--mdui-color-primary-dark);--mdui-color-primary-container:var(--mdui-color-primary-container-dark);--mdui-color-on-primary:var(--mdui-color-on-primary-dark);--mdui-color-on-primary-container:var(--mdui-color-on-primary-container-dark);--mdui-color-inverse-primary:var(--mdui-color-inverse-primary-dark);--mdui-color-secondary:var(--mdui-color-secondary-dark);--mdui-color-secondary-container:var(--mdui-color-secondary-container-dark);--mdui-color-on-secondary:var(--mdui-color-on-secondary-dark);--mdui-color-on-secondary-container:var(--mdui-color-on-secondary-container-dark);--mdui-color-tertiary:var(--mdui-color-tertiary-dark);--mdui-color-tertiary-container:var(--mdui-color-tertiary-container-dark);--mdui-color-on-tertiary:var(--mdui-color-on-tertiary-dark);--mdui-color-on-tertiary-container:var(--mdui-color-on-tertiary-container-dark);--mdui-color-surface:var(--mdui-color-surface-dark);--mdui-color-surface-dim:var(--mdui-color-surface-dim-dark);--mdui-color-surface-bright:var(--mdui-color-surface-bright-dark);--mdui-color-surface-container-lowest:var(--mdui-color-surface-container-lowest-dark);--mdui-color-surface-container-low:var(--mdui-color-surface-container-low-dark);--mdui-color-surface-container:var(--mdui-color-surface-container-dark);--mdui-color-surface-container-high:var(--mdui-color-surface-container-high-dark);--mdui-color-surface-container-highest:var(--mdui-color-surface-container-highest-dark);--mdui-color-surface-variant:var(--mdui-color-surface-variant-dark);--mdui-color-on-surface:var(--mdui-color-on-surface-dark);--mdui-color-on-surface-variant:var(--mdui-color-on-surface-variant-dark);--mdui-color-inverse-surface:var(--mdui-color-inverse-surface-dark);--mdui-color-inverse-on-surface:var(--mdui-color-inverse-on-surface-dark);--mdui-color-background:var(--mdui-color-background-dark);--mdui-color-on-background:var(--mdui-color-on-background-dark);--mdui-color-error:var(--mdui-color-error-dark);--mdui-color-error-container:var(--mdui-color-error-container-dark);--mdui-color-on-error:var(--mdui-color-on-error-dark);--mdui-color-on-error-container:var(--mdui-color-on-error-container-dark);--mdui-color-outline:var(--mdui-color-outline-dark);--mdui-color-outline-variant:var(--mdui-color-outline-variant-dark);--mdui-color-shadow:var(--mdui-color-shadow-dark);--mdui-color-surface-tint-color:var(--mdui-color-surface-tint-color-dark);--mdui-color-scrim:var(--mdui-color-scrim-dark);color:rgb(var(--mdui-color-on-background));background-color:rgb(var(--mdui-color-background))}@media (prefers-color-scheme:dark){.mdui-theme-auto{color-scheme:dark;--mdui-color-primary:var(--mdui-color-primary-dark);--mdui-color-primary-container:var(--mdui-color-primary-container-dark);--mdui-color-on-primary:var(--mdui-color-on-primary-dark);--mdui-color-on-primary-container:var(--mdui-color-on-primary-container-dark);--mdui-color-inverse-primary:var(--mdui-color-inverse-primary-dark);--mdui-color-secondary:var(--mdui-color-secondary-dark);--mdui-color-secondary-container:var(--mdui-color-secondary-container-dark);--mdui-color-on-secondary:var(--mdui-color-on-secondary-dark);--mdui-color-on-secondary-container:var(--mdui-color-on-secondary-container-dark);--mdui-color-tertiary:var(--mdui-color-tertiary-dark);--mdui-color-tertiary-container:var(--mdui-color-tertiary-container-dark);--mdui-color-on-tertiary:var(--mdui-color-on-tertiary-dark);--mdui-color-on-tertiary-container:var(--mdui-color-on-tertiary-container-dark);--mdui-color-surface:var(--mdui-color-surface-dark);--mdui-color-surface-dim:var(--mdui-color-surface-dim-dark);--mdui-color-surface-bright:var(--mdui-color-surface-bright-dark);--mdui-color-surface-container-lowest:var(--mdui-color-surface-container-lowest-dark);--mdui-color-surface-container-low:var(--mdui-color-surface-container-low-dark);--mdui-color-surface-container:var(--mdui-color-surface-container-dark);--mdui-color-surface-container-high:var(--mdui-color-surface-container-high-dark);--mdui-color-surface-container-highest:var(--mdui-color-surface-container-highest-dark);--mdui-color-surface-variant:var(--mdui-color-surface-variant-dark);--mdui-color-on-surface:var(--mdui-color-on-surface-dark);--mdui-color-on-surface-variant:var(--mdui-color-on-surface-variant-dark);--mdui-color-inverse-surface:var(--mdui-color-inverse-surface-dark);--mdui-color-inverse-on-surface:var(--mdui-color-inverse-on-surface-dark);--mdui-color-background:var(--mdui-color-background-dark);--mdui-color-on-background:var(--mdui-color-on-background-dark);--mdui-color-error:var(--mdui-color-error-dark);--mdui-color-error-container:var(--mdui-color-error-container-dark);--mdui-color-on-error:var(--mdui-color-on-error-dark);--mdui-color-on-error-container:var(--mdui-color-on-error-container-dark);--mdui-color-outline:var(--mdui-color-outline-dark);--mdui-color-outline-variant:var(--mdui-color-outline-variant-dark);--mdui-color-shadow:var(--mdui-color-shadow-dark);--mdui-color-surface-tint-color:var(--mdui-color-surface-tint-color-dark);--mdui-color-scrim:var(--mdui-color-scrim-dark);color:rgb(var(--mdui-color-on-background));background-color:rgb(var(--mdui-color-background))}}:root{--mdui-elevation-level0:none;--mdui-elevation-level1:0 .5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);--mdui-elevation-level2:0 .85px 3px 0 rgba(var(--mdui-color-shadow), 19%),0 .25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%);--mdui-elevation-level3:0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%),0 .3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%);--mdui-elevation-level4:0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%),0 .5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%);--mdui-elevation-level5:0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%),0 .25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)}:root{--mdui-motion-easing-linear:cubic-bezier(0, 0, 1, 1);--mdui-motion-easing-standard:cubic-bezier(.2, 0, 0, 1);--mdui-motion-easing-standard-accelerate:cubic-bezier(.3, 0, 1, 1);--mdui-motion-easing-standard-decelerate:cubic-bezier(0, 0, 0, 1);--mdui-motion-easing-emphasized:var(--mdui-motion-easing-standard);--mdui-motion-easing-emphasized-accelerate:cubic-bezier(.3, 0, .8, .15);--mdui-motion-easing-emphasized-decelerate:cubic-bezier(.05, .7, .1, 1);--mdui-motion-duration-short1:50ms;--mdui-motion-duration-short2:.1s;--mdui-motion-duration-short3:.15s;--mdui-motion-duration-short4:.2s;--mdui-motion-duration-medium1:.25s;--mdui-motion-duration-medium2:.3s;--mdui-motion-duration-medium3:.35s;--mdui-motion-duration-medium4:.4s;--mdui-motion-duration-long1:.45s;--mdui-motion-duration-long2:.5s;--mdui-motion-duration-long3:.55s;--mdui-motion-duration-long4:.6s;--mdui-motion-duration-extra-long1:.7s;--mdui-motion-duration-extra-long2:.8s;--mdui-motion-duration-extra-long3:.9s;--mdui-motion-duration-extra-long4:1s}.mdui-prose{line-height:1.75;word-wrap:break-word}.mdui-prose :first-child{margin-top:0}.mdui-prose :last-child{margin-bottom:0}.mdui-prose code,.mdui-prose kbd,.mdui-prose pre,.mdui-prose pre tt,.mdui-prose samp{font-family:Consolas,Courier,Courier New,monospace}.mdui-prose caption{text-align:left}.mdui-prose [draggable=true],.mdui-prose [draggable]{cursor:move}.mdui-prose [draggable=false]{cursor:inherit}.mdui-prose dl,.mdui-prose form,.mdui-prose ol,.mdui-prose p,.mdui-prose ul{margin-top:1.25em;margin-bottom:1.25em}.mdui-prose a{text-decoration:none;outline:0;color:rgb(var(--mdui-color-primary))}.mdui-prose a:focus,.mdui-prose a:hover{border-bottom:.0625rem solid rgb(var(--mdui-color-primary))}.mdui-prose small{font-size:.875em}.mdui-prose strong{font-weight:600}.mdui-prose blockquote{margin:1.6em 2em;padding-left:1em;border-left:.25rem solid rgb(var(--mdui-color-surface-variant))}@media only screen and (max-width:599.98px){.mdui-prose blockquote{margin:1.6em 0}}.mdui-prose blockquote footer{font-size:86%;color:rgb(var(--mdui-color-on-surface-variant))}.mdui-prose mark{color:inherit;background-color:rgb(var(--mdui-color-secondary-container));border-bottom:.0625rem solid rgb(var(--mdui-color-secondary));margin:0 .375rem;padding:.125rem}.mdui-prose h1,.mdui-prose h2,.mdui-prose h3,.mdui-prose h4,.mdui-prose h5,.mdui-prose h6{font-weight:400}.mdui-prose h1 small,.mdui-prose h2 small,.mdui-prose h3 small,.mdui-prose h4 small,.mdui-prose h5 small,.mdui-prose h6 small{font-weight:inherit;font-size:65%;color:rgb(var(--mdui-color-on-surface-variant))}.mdui-prose h1 strong,.mdui-prose h2 strong,.mdui-prose h3 strong,.mdui-prose h4 strong,.mdui-prose h5 strong,.mdui-prose h6 strong{font-weight:600}.mdui-prose h1{font-size:2.5em;margin-top:0;margin-bottom:1.25em;line-height:1.1111}.mdui-prose h2{font-size:1.875em;margin-top:2.25em;margin-bottom:1.125em;line-height:1.3333}.mdui-prose h3{font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.6}.mdui-prose h4{font-size:1.25em;margin-top:1.875em;margin-bottom:.875em;line-height:1.5}.mdui-prose h2+*,.mdui-prose h3+*,.mdui-prose h4+*,.mdui-prose hr+*{margin-top:0}.mdui-prose code,.mdui-prose kbd{font-size:.875em;color:rgb(var(--mdui-color-on-surface-container));background-color:rgba(var(--mdui-color-surface-variant),.28);padding:.125rem .375rem;border-radius:var(--mdui-shape-corner-extra-small)}.mdui-prose kbd{font-size:.9em}.mdui-prose abbr[title]{text-decoration:none;cursor:help;border-bottom:.0625rem dotted rgb(var(--mdui-color-on-surface-variant))}.mdui-prose ins,.mdui-prose u{text-decoration:none;border-bottom:.0625rem solid rgb(var(--mdui-color-on-surface-variant))}.mdui-prose del{text-decoration:line-through}.mdui-prose hr{margin-top:3em;margin-bottom:3em;border:none;border-bottom:.0625rem solid rgb(var(--mdui-color-surface-variant))}.mdui-prose pre{margin-top:1.7143em;margin-bottom:1.7143em}.mdui-prose pre code{padding:.8571em 1.1429em;overflow-x:auto;-webkit-overflow-scrolling:touch;background-color:rgb(var(--mdui-color-surface-container));color:rgb(var(--mdui-color-on-surface-container));border-radius:var(--mdui-shape-corner-extra-small)}.mdui-prose ol,.mdui-prose ul{padding-left:1.625em}.mdui-prose ul{list-style-type:disc}.mdui-prose ol{list-style-type:decimal}.mdui-prose ol[type=A]{list-style-type:upper-alpha}.mdui-prose ol[type=a]{list-style-type:lower-alpha}.mdui-prose ol[type=I]{list-style-type:upper-roman}.mdui-prose ol[type=i]{list-style-type:lower-roman}.mdui-prose ol[type="1"]{list-style-type:decimal}.mdui-prose li{margin-top:.5em;margin-bottom:.5em}.mdui-prose ol>li,.mdui-prose ul>li{padding-left:.375em}.mdui-prose ol>li>p,.mdui-prose ul>li>p{margin-top:.75em;margin-bottom:.75em}.mdui-prose ol>li>:first-child,.mdui-prose ul>li>:first-child{margin-top:1.25em}.mdui-prose ol>li>:last-child,.mdui-prose ul>li>:last-child{margin-bottom:1.25em}.mdui-prose ol>li::marker{font-weight:400;color:rgb(var(--mdui-color-on-surface-variant))}.mdui-prose ul>li::marker{color:rgb(var(--mdui-color-on-surface-variant))}.mdui-prose ol ol,.mdui-prose ol ul,.mdui-prose ul ol,.mdui-prose ul ul{margin-top:.75em;margin-bottom:.75em}.mdui-prose fieldset,.mdui-prose img{border:none}.mdui-prose figure,.mdui-prose img,.mdui-prose video{margin-top:2em;margin-bottom:2em;max-width:100%}.mdui-prose figure>*{margin-top:0;margin-bottom:0}.mdui-prose figcaption{font-size:.875em;line-height:1.4286;margin-top:.8571em;color:rgb(var(--mdui-color-on-surface-variant))}.mdui-prose figcaption:empty:before{z-index:-1;cursor:text;content:attr(placeholder);color:rgb(var(--mdui-color-on-surface-variant))}.mdui-prose table{margin-top:2em;margin-bottom:2em;border:.0625rem solid rgb(var(--mdui-color-surface-variant));border-radius:var(--mdui-shape-corner-large)}.mdui-table{width:100%;overflow-x:auto;margin-top:2em;margin-bottom:2em;border:.0625rem solid rgb(var(--mdui-color-surface-variant));border-radius:var(--mdui-shape-corner-large)}.mdui-table table{margin-top:0;margin-bottom:0;border:none;border-radius:0}.mdui-prose table,.mdui-table table{width:100%;text-align:left;border-collapse:collapse;border-spacing:0}.mdui-prose td,.mdui-prose th,.mdui-table td,.mdui-table th{border-top:.0625rem solid rgb(var(--mdui-color-surface-variant))}.mdui-prose td:not(:first-child),.mdui-prose th:not(:first-child),.mdui-table td:not(:first-child),.mdui-table th:not(:first-child){border-left:.0625rem solid rgb(var(--mdui-color-surface-variant))}.mdui-prose td:not(:last-child),.mdui-prose th:not(:last-child),.mdui-table td:not(:last-child),.mdui-table th:not(:last-child){border-right:.0625rem solid rgb(var(--mdui-color-surface-variant))}.mdui-prose tbody:first-child tr:first-child td,.mdui-prose thead:first-child tr:first-child th,.mdui-table tbody:first-child tr:first-child td,.mdui-table thead:first-child tr:first-child th{border-top:0}.mdui-prose tfoot td,.mdui-prose tfoot th,.mdui-prose thead td,.mdui-prose thead th,.mdui-table tfoot td,.mdui-table tfoot th,.mdui-table thead td,.mdui-table thead th{position:relative;vertical-align:middle;padding:1.125rem 1rem;font-weight:var(--mdui-typescale-title-medium-weight);letter-spacing:var(--mdui-typescale-title-medium-tracking);line-height:var(--mdui-typescale-title-medium-line-height);color:rgb(var(--mdui-color-on-surface-variant));box-shadow:var(--mdui-elevation-level1)}.mdui-prose tbody td,.mdui-prose tbody th,.mdui-table tbody td,.mdui-table tbody th{padding:.875rem 1rem}.mdui-prose tbody th,.mdui-table tbody th{vertical-align:middle;font-weight:inherit}.mdui-prose tbody td,.mdui-table tbody td{vertical-align:baseline}:root{--mdui-shape-corner-none:0;--mdui-shape-corner-extra-small:.25rem;--mdui-shape-corner-small:.5rem;--mdui-shape-corner-medium:.75rem;--mdui-shape-corner-large:1rem;--mdui-shape-corner-extra-large:1.75rem;--mdui-shape-corner-full:1000rem}:root{--mdui-state-layer-hover:.08;--mdui-state-layer-focus:.12;--mdui-state-layer-pressed:.12;--mdui-state-layer-dragged:.16}:root{--mdui-typescale-display-large-weight:400;--mdui-typescale-display-medium-weight:400;--mdui-typescale-display-small-weight:400;--mdui-typescale-display-large-line-height:4rem;--mdui-typescale-display-medium-line-height:3.25rem;--mdui-typescale-display-small-line-height:2.75rem;--mdui-typescale-display-large-size:3.5625rem;--mdui-typescale-display-medium-size:2.8125rem;--mdui-typescale-display-small-size:2.25rem;--mdui-typescale-display-large-tracking:0rem;--mdui-typescale-display-medium-tracking:0rem;--mdui-typescale-display-small-tracking:0rem;--mdui-typescale-headline-large-weight:400;--mdui-typescale-headline-medium-weight:400;--mdui-typescale-headline-small-weight:400;--mdui-typescale-headline-large-line-height:2.5rem;--mdui-typescale-headline-medium-line-height:2.25rem;--mdui-typescale-headline-small-line-height:2rem;--mdui-typescale-headline-large-size:2rem;--mdui-typescale-headline-medium-size:1.75rem;--mdui-typescale-headline-small-size:1.5rem;--mdui-typescale-headline-large-tracking:0rem;--mdui-typescale-headline-medium-tracking:0rem;--mdui-typescale-headline-small-tracking:0rem;--mdui-typescale-title-large-weight:400;--mdui-typescale-title-medium-weight:500;--mdui-typescale-title-small-weight:500;--mdui-typescale-title-large-line-height:1.75rem;--mdui-typescale-title-medium-line-height:1.5rem;--mdui-typescale-title-small-line-height:1.25rem;--mdui-typescale-title-large-size:1.375rem;--mdui-typescale-title-medium-size:1rem;--mdui-typescale-title-small-size:.875rem;--mdui-typescale-title-large-tracking:0rem;--mdui-typescale-title-medium-tracking:.009375rem;--mdui-typescale-title-small-tracking:.00625rem;--mdui-typescale-label-large-weight:500;--mdui-typescale-label-medium-weight:500;--mdui-typescale-label-small-weight:500;--mdui-typescale-label-large-line-height:1.25rem;--mdui-typescale-label-medium-line-height:1rem;--mdui-typescale-label-small-line-height:.375rem;--mdui-typescale-label-large-size:.875rem;--mdui-typescale-label-medium-size:.75rem;--mdui-typescale-label-small-size:.6875rem;--mdui-typescale-label-large-tracking:.00625rem;--mdui-typescale-label-medium-tracking:.03125rem;--mdui-typescale-label-small-tracking:.03125rem;--mdui-typescale-body-large-weight:400;--mdui-typescale-body-medium-weight:400;--mdui-typescale-body-small-weight:400;--mdui-typescale-body-large-line-height:1.5rem;--mdui-typescale-body-medium-line-height:1.25rem;--mdui-typescale-body-small-line-height:1rem;--mdui-typescale-body-large-size:1rem;--mdui-typescale-body-medium-size:.875rem;--mdui-typescale-body-small-size:.75rem;--mdui-typescale-body-large-tracking:.009375rem;--mdui-typescale-body-medium-tracking:.015625rem;--mdui-typescale-body-small-tracking:.025rem}.mdui-lock-screen{overflow:hidden!important}#categories{width:500px}mdui-dialog>*>span{display:flex;font-size:var(--mdui-typescale-body-large-size)}.introduction{color:rgb(var(--mdui-color-on-surface-variant));display:block;opacity:1;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)} '); (function (vue) { 'use strict'; var _a; function isObject(obj) { return obj !== null && typeof obj === "object" && "constructor" in obj && obj.constructor === Object; } function extend$1(target = {}, src = {}) { Object.keys(src).forEach((key2) => { if (typeof target[key2] === "undefined") target[key2] = src[key2]; else if (isObject(src[key2]) && isObject(target[key2]) && Object.keys(src[key2]).length > 0) { extend$1(target[key2], src[key2]); } }); } const ssrDocument = { body: {}, addEventListener() { }, removeEventListener() { }, activeElement: { blur() { }, nodeName: "" }, querySelector() { return null; }, querySelectorAll() { return []; }, getElementById() { return null; }, createEvent() { return { initEvent() { } }; }, createElement() { return { children: [], childNodes: [], style: {}, setAttribute() { }, getElementsByTagName() { return []; } }; }, createElementNS() { return {}; }, importNode() { return null; }, location: { hash: "", host: "", hostname: "", href: "", origin: "", pathname: "", protocol: "", search: "" } }; function getDocument() { const doc = typeof document !== "undefined" ? document : {}; extend$1(doc, ssrDocument); return doc; } const ssrWindow = { document: ssrDocument, navigator: { userAgent: "" }, location: { hash: "", host: "", hostname: "", href: "", origin: "", pathname: "", protocol: "", search: "" }, history: { replaceState() { }, pushState() { }, go() { }, back() { } }, CustomEvent: function CustomEvent2() { return this; }, addEventListener() { }, removeEventListener() { }, getComputedStyle() { return { getPropertyValue() { return ""; } }; }, Image() { }, Date() { }, screen: {}, setTimeout() { }, clearTimeout() { }, matchMedia() { return {}; }, requestAnimationFrame(callback) { if (typeof setTimeout === "undefined") { callback(); return null; } return setTimeout(callback, 0); }, cancelAnimationFrame(id2) { if (typeof setTimeout === "undefined") { return; } clearTimeout(id2); } }; function getWindow$1() { const win = typeof window !== "undefined" ? window : {}; extend$1(win, ssrWindow); return win; } const getNodeName$1 = (element) => { return (element == null ? void 0 : element.nodeName.toLowerCase()) ?? ""; }; const isNodeName = (element, name) => { return (element == null ? void 0 : element.nodeName.toLowerCase()) === name.toLowerCase(); }; const isFunction = (target) => { return typeof target === "function"; }; const isString = (target) => { return typeof target === "string"; }; const isNumber = (target) => { return typeof target === "number"; }; const isBoolean = (target) => { return typeof target === "boolean"; }; const isUndefined = (target) => { return typeof target === "undefined"; }; const isNull = (target) => { return target === null; }; const isWindow = (target) => { return typeof Window !== "undefined" && target instanceof Window; }; const isDocument = (target) => { return typeof Document !== "undefined" && target instanceof Document; }; const isElement = (target) => { return typeof Element !== "undefined" && target instanceof Element; }; const isNode$1 = (target) => { return typeof Node !== "undefined" && target instanceof Node; }; const isArrayLike = (target) => { return !isFunction(target) && !isWindow(target) && isNumber(target.length); }; const isObjectLike = (target) => { return typeof target === "object" && target !== null; }; const toElement = (target) => { return isDocument(target) ? target.documentElement : target; }; const toCamelCase = (string) => { return string.replace(/-([a-z])/g, (_2, letter) => { return letter.toUpperCase(); }); }; const toKebabCase = (string) => { if (!string) { return string; } return string.replace(/^./, string[0].toLowerCase()).replace(/[A-Z]/g, (replacer) => { return "-" + replacer.toLowerCase(); }); }; const returnFalse = () => { return false; }; const returnTrue = () => { return true; }; const eachArray = (target, callback) => { for (let i3 = 0; i3 < target.length; i3 += 1) { if (callback.call(target[i3], target[i3], i3) === false) { return target; } } return target; }; const eachObject = (target, callback) => { const keys = Object.keys(target); for (let i3 = 0; i3 < keys.length; i3 += 1) { const key2 = keys[i3]; if (callback.call(target[key2], key2, target[key2]) === false) { return target; } } return target; }; class JQ { constructor(arr) { this.length = 0; if (!arr) { return this; } eachArray(arr, (item, i3) => { this[i3] = item; }); this.length = arr.length; return this; } } const isDomReady = (document2 = getDocument()) => { return /complete|interactive/.test(document2.readyState); }; const createElement = (tagName) => { const document2 = getDocument(); return document2.createElement(tagName); }; const appendChild = (element, child) => { return element.appendChild(child); }; const removeChild = (element) => { return element.parentNode ? element.parentNode.removeChild(element) : element; }; const getChildNodesArray = (target, parent) => { const tempParent = createElement(parent); tempParent.innerHTML = target; return [].slice.call(tempParent.childNodes); }; const get$ = () => { const $2 = function(selector) { if (!selector) { return new JQ(); } if (selector instanceof JQ) { return selector; } if (isFunction(selector)) { const document2 = getDocument(); if (isDomReady(document2)) { selector.call(document2, $2); } else { document2.addEventListener("DOMContentLoaded", () => selector.call(document2, $2), { once: true }); } return new JQ([document2]); } if (isString(selector)) { const html = selector.trim(); if (html.startsWith("<") && html.endsWith(">")) { let toCreate = "div"; const tags = { li: "ul", tr: "tbody", td: "tr", th: "tr", tbody: "table", option: "select" }; eachObject(tags, (childTag, parentTag) => { if (html.startsWith(`<${childTag}`)) { toCreate = parentTag; return false; } return; }); return new JQ(getChildNodesArray(html, toCreate)); } const document2 = getDocument(); return new JQ(document2.querySelectorAll(selector)); } if (isArrayLike(selector) && !isNode$1(selector)) { return new JQ(selector); } return new JQ([selector]); }; $2.fn = JQ.prototype; return $2; }; const $$1 = get$(); const merge = (first, second) => { eachArray(second, (value) => { first.push(value); }); return first; }; const unique = (arr) => { return [...new Set(arr)]; }; $$1.fn.get = function(index) { return index === void 0 ? [].slice.call(this) : this[index >= 0 ? index : index + this.length]; }; $$1.fn.add = function(selector) { return new JQ(unique(merge(this.get(), $$1(selector).get()))); }; const getAttribute = (element, key2, defaultValue2) => { const value = element.getAttribute(key2); return isNull(value) ? defaultValue2 : value; }; const removeAttribute = (element, key2) => { element.removeAttribute(key2); }; const setAttribute = (element, key2, value) => { isNull(value) ? removeAttribute(element, key2) : element.setAttribute(key2, value); }; $$1.fn.each = function(callback) { return eachArray(this, (value, index) => { return callback.call(value, index, value); }); }; eachArray(["add", "remove", "toggle"], (name) => { $$1.fn[`${name}Class`] = function(className2) { if (name === "remove" && !arguments.length) { return this.each((_2, element) => { setAttribute(element, "class", ""); }); } return this.each((i3, element) => { if (!isElement(element)) { return; } const classes = (isFunction(className2) ? className2.call(element, i3, getAttribute(element, "class", "")) : className2).split(" ").filter((name2) => name2); eachArray(classes, (cls) => { element.classList[name](cls); }); }); }; }); eachArray(["insertBefore", "insertAfter"], (name, nameIndex) => { $$1.fn[name] = function(target) { const $element = nameIndex ? $$1(this.get().reverse()) : this; const $target = $$1(target); const result = []; $target.each((index, target2) => { if (!target2.parentNode) { return; } $element.each((_2, element) => { const newItem = index ? element.cloneNode(true) : element; const existingItem = nameIndex ? target2.nextSibling : target2; result.push(newItem); target2.parentNode.insertBefore(newItem, existingItem); }); }); return $$1(nameIndex ? result.reverse() : result); }; }); const isPlainText = (target) => { return isString(target) && !(target.startsWith("<") && target.endsWith(">")); }; eachArray(["before", "after"], (name, nameIndex) => { $$1.fn[name] = function(...args) { if (nameIndex === 1) { args = args.reverse(); } return this.each((index, element) => { const targets = isFunction(args[0]) ? [args[0].call(element, index, element.innerHTML)] : args; eachArray(targets, (target) => { let $target; if (isPlainText(target)) { $target = $$1(getChildNodesArray(target, "div")); } else if (index && isElement(target)) { $target = $$1(target.cloneNode(true)); } else { $target = $$1(target); } $target[nameIndex ? "insertAfter" : "insertBefore"](element); }); }); }; }); function each(target, callback) { return isArrayLike(target) ? eachArray(target, (value, index) => { return callback.call(value, index, value); }) : eachObject(target, callback); } function map(elements, callback) { const window2 = getWindow$1(); let value; const ret = []; each(elements, (i3, element) => { value = callback.call(window2, element, i3); if (value != null) { ret.push(value); } }); return [].concat(...ret); } $$1.fn.map = function(callback) { return new JQ(map(this, (element, i3) => { return callback.call(element, i3, element); })); }; $$1.fn.clone = function() { return this.map(function() { return this.cloneNode(true); }); }; $$1.fn.is = function(selector) { let isMatched = false; if (isFunction(selector)) { this.each((index, element) => { if (selector.call(element, index, element)) { isMatched = true; } }); return isMatched; } if (isString(selector)) { this.each((_2, element) => { if (isDocument(element) || isWindow(element)) { return; } if (element.matches.call(element, selector)) { isMatched = true; } }); return isMatched; } const $compareWith = $$1(selector); this.each((_2, element) => { $compareWith.each((_3, compare) => { if (element === compare) { isMatched = true; } }); }); return isMatched; }; $$1.fn.remove = function(selector) { return this.each((_2, element) => { if (!selector || $$1(element).is(selector)) { removeChild(element); } }); }; eachArray(["prepend", "append"], (name, nameIndex) => { $$1.fn[name] = function(...args) { return this.each((index, element) => { const childNodes = element.childNodes; const childLength = childNodes.length; const child = childLength ? childNodes[nameIndex ? childLength - 1 : 0] : createElement("div"); if (!childLength) { appendChild(element, child); } let contents = isFunction(args[0]) ? [args[0].call(element, index, element.innerHTML)] : args; if (index) { contents = contents.map((content) => { return isString(content) ? content : $$1(content).clone(); }); } $$1(child)[nameIndex ? "after" : "before"](...contents); if (!childLength) { removeChild(child); } }); }; }); eachArray(["appendTo", "prependTo"], (name, nameIndex) => { $$1.fn[name] = function(target) { const extraChilds = []; const $target = $$1(target).map((_2, element) => { const childNodes = element.childNodes; const childLength = childNodes.length; if (childLength) { return childNodes[nameIndex ? 0 : childLength - 1]; } const child = createElement("div"); appendChild(element, child); extraChilds.push(child); return child; }); const $result = this[nameIndex ? "insertBefore" : "insertAfter"]($target); $$1(extraChilds).remove(); return $result; }; }); const getComputedStyleValue = (element, name) => { const window2 = getWindow$1(); return window2.getComputedStyle(element).getPropertyValue(toKebabCase(name)); }; const isBorderBox = (element) => { return getComputedStyleValue(element, "box-sizing") === "border-box"; }; const getExtraWidth = (element, direction, extra) => { const position = direction === "width" ? ["Left", "Right"] : ["Top", "Bottom"]; return [0, 1].reduce((prev, _2, index) => { let prop = extra + position[index]; if (extra === "border") { prop += "Width"; } return prev + parseFloat(getComputedStyleValue(element, prop) || "0"); }, 0); }; const getStyle = (element, name) => { if (name === "width" || name === "height") { const valueNumber = element.getBoundingClientRect()[name]; if (isBorderBox(element)) { return `${valueNumber}px`; } return `${valueNumber - getExtraWidth(element, name, "border") - getExtraWidth(element, name, "padding")}px`; } return getComputedStyleValue(element, name); }; const cssNumber = [ "animation-iteration-count", "column-count", "fill-opacity", "flex-grow", "flex-shrink", "font-weight", "grid-area", "grid-column", "grid-column-end", "grid-column-start", "grid-row", "grid-row-end", "grid-row-start", "line-height", "opacity", "order", "orphans", "widows", "z-index", "zoom" ]; eachArray(["attr", "prop", "css"], (name, nameIndex) => { const set2 = (element, key2, value) => { if (isUndefined(value)) { return; } if (nameIndex === 0) { return setAttribute(element, key2, value); } if (nameIndex === 1) { element[key2] = value; return; } key2 = toKebabCase(key2); const getSuffix = () => key2.startsWith("--") || cssNumber.includes(key2) ? "" : "px"; element.style.setProperty(key2, isNumber(value) ? `${value}${getSuffix()}` : value); }; const get2 = (element, key2) => { if (nameIndex === 0) { return getAttribute(element, key2); } if (nameIndex === 1) { return element[key2]; } return getStyle(element, key2); }; $$1.fn[name] = function(key2, value) { if (isObjectLike(key2)) { eachObject(key2, (k2, v2) => { this[name](k2, v2); }); return this; } if (arguments.length === 1) { const element = this[0]; return isElement(element) ? get2(element, key2) : void 0; } return this.each((i3, element) => { set2(element, key2, isFunction(value) ? value.call(element, i3, get2(element, key2)) : value); }); }; }); $$1.fn.children = function(selector) { const children = []; this.each((_2, element) => { eachArray(element.childNodes, (childNode) => { if (!isElement(childNode)) { return; } if (!selector || $$1(childNode).is(selector)) { children.push(childNode); } }); }); return new JQ(unique(children)); }; $$1.fn.slice = function(...args) { return new JQ([].slice.apply(this, args)); }; $$1.fn.eq = function(index) { const ret = index === -1 ? this.slice(index) : this.slice(index, +index + 1); return new JQ(ret); }; const dir = ($elements, nameIndex, node, selector, filter) => { const ret = []; let target; $elements.each((_2, element) => { target = element[node]; while (target && isElement(target)) { if (nameIndex === 2) { if (selector && $$1(target).is(selector)) { break; } if (!filter || $$1(target).is(filter)) { ret.push(target); } } else if (nameIndex === 0) { if (!selector || $$1(target).is(selector)) { ret.push(target); } break; } else { if (!selector || $$1(target).is(selector)) { ret.push(target); } } target = target[node]; } }); return new JQ(unique(ret)); }; eachArray(["", "s", "sUntil"], (name, nameIndex) => { $$1.fn[`parent${name}`] = function(selector, filter) { const $nodes = !nameIndex ? this : $$1(this.get().reverse()); return dir($nodes, nameIndex, "parentNode", selector, filter); }; }); $$1.fn.closest = function(selector) { if (this.is(selector)) { return this; } const matched = []; this.parents().each((_2, element) => { if ($$1(element).is(selector)) { matched.push(element); return false; } }); return new JQ(matched); }; const weakMap$1 = /* @__PURE__ */ new WeakMap(); const getAll = (element) => { return weakMap$1.get(element) ?? {}; }; const get$2 = (element, keyOriginal) => { const data2 = getAll(element); const key2 = toCamelCase(keyOriginal); return key2 in data2 ? data2[key2] : void 0; }; const setAll = (element, object) => { const data2 = getAll(element); eachObject(object, (keyOriginal, value) => { data2[toCamelCase(keyOriginal)] = value; }); weakMap$1.set(element, data2); }; const set$2 = (element, keyOriginal, value) => { setAll(element, { [keyOriginal]: value }); }; const removeAll = (element) => { weakMap$1.delete(element); }; const removeMultiple = (element, keysOriginal) => { const data2 = getAll(element); eachArray(keysOriginal, (keyOriginal) => { const key2 = toCamelCase(keyOriginal); delete data2[key2]; }); weakMap$1.set(element, data2); }; const rbrace = /^(?:{[\w\W]*\}|\[[\w\W]*\])$/; const stringTransform = (value) => { if (value === "true") { return true; } if (value === "false") { return false; } if (value === "null") { return null; } if (value === +value + "") { return +value; } if (rbrace.test(value)) { return JSON.parse(value); } return value; }; const dataAttr = (element, key2, value) => { if (isUndefined(value) && element.nodeType === 1) { value = element.dataset[key2]; if (isString(value)) { try { value = stringTransform(value); } catch (e2) { } } } return value; }; $$1.fn.data = function(key2, value) { if (isUndefined(key2)) { if (!this.length) { return void 0; } const element = this[0]; const resultData = getAll(element); if (element.nodeType !== 1) { return resultData; } eachObject(element.dataset, (key3) => { resultData[key3] = dataAttr(element, key3, resultData[key3]); }); return resultData; } if (isObjectLike(key2)) { return this.each(function() { setAll(this, key2); }); } if (arguments.length === 2 && isUndefined(value)) { return this; } if (!isUndefined(value)) { return this.each(function() { set$2(this, key2, value); }); } if (!this.length) { return void 0; } return dataAttr(this[0], toCamelCase(key2), get$2(this[0], key2)); }; $$1.fn.empty = function() { return this.each((_2, element) => { element.innerHTML = ""; }); }; $$1.fn.extend = function(obj) { eachObject(obj, (prop, value) => { $$1.fn[prop] = value; }); return this; }; $$1.fn.filter = function(selector) { if (isFunction(selector)) { return this.map((index, element) => { return selector.call(element, index, element) ? element : void 0; }); } if (isString(selector)) { return this.map((_2, element) => { return $$1(element).is(selector) ? element : void 0; }); } const $selector = $$1(selector); return this.map((_2, element) => { return $selector.get().includes(element) ? element : void 0; }); }; $$1.fn.find = function(selector) { const foundElements = []; this.each((_2, element) => { merge(foundElements, $$1(element.querySelectorAll(selector)).get()); }); return new JQ(foundElements); }; $$1.fn.first = function() { return this.eq(0); }; const contains = (container2, contains2) => { return container2 !== contains2 && toElement(container2).contains(contains2); }; $$1.fn.has = function(selector) { const $targets = isString(selector) ? this.find(selector) : $$1(selector); const { length } = $targets; return this.map(function() { for (let i3 = 0; i3 < length; i3 += 1) { if (contains(this, $targets[i3])) { return this; } } return; }); }; $$1.fn.hasClass = function(className2) { return this[0].classList.contains(className2); }; const handleExtraWidth = (element, name, value, funcIndex, includeMargin, multiply) => { const getExtraWidthValue = (extra) => { return getExtraWidth(element, name.toLowerCase(), extra) * multiply; }; if (funcIndex === 2 && includeMargin) { value += getExtraWidthValue("margin"); } if (isBorderBox(element)) { if (funcIndex === 0) { value -= getExtraWidthValue("border"); } if (funcIndex === 1) { value -= getExtraWidthValue("border"); value -= getExtraWidthValue("padding"); } } else { if (funcIndex === 0) { value += getExtraWidthValue("padding"); } if (funcIndex === 2) { value += getExtraWidthValue("border"); value += getExtraWidthValue("padding"); } } return value; }; const get$1 = (element, name, funcIndex, includeMargin) => { const document2 = getDocument(); const clientProp = `client${name}`; const scrollProp = `scroll${name}`; const offsetProp = `offset${name}`; const innerProp = `inner${name}`; if (isWindow(element)) { return funcIndex === 2 ? element[innerProp] : toElement(document2)[clientProp]; } if (isDocument(element)) { const doc = toElement(element); return Math.max( // @ts-ignore element.body[scrollProp], doc[scrollProp], // @ts-ignore element.body[offsetProp], doc[offsetProp], doc[clientProp] ); } const value = parseFloat(getComputedStyleValue(element, name.toLowerCase()) || "0"); return handleExtraWidth(element, name, value, funcIndex, includeMargin, 1); }; const set$1 = (element, elementIndex, name, funcIndex, includeMargin, value) => { let computedValue = isFunction(value) ? value.call(element, elementIndex, get$1(element, name, funcIndex, includeMargin)) : value; if (computedValue == null) { return; } const $element = $$1(element); const dimension = name.toLowerCase(); if (isString(computedValue) && ["auto", "inherit", ""].includes(computedValue)) { $element.css(dimension, computedValue); return; } const suffix = computedValue.toString().replace(/\b[0-9.]*/, ""); const numerical = parseFloat(computedValue); computedValue = handleExtraWidth(element, name, numerical, funcIndex, includeMargin, -1) + (suffix || "px"); $element.css(dimension, computedValue); }; eachArray(["Width", "Height"], (name) => { eachArray([`inner${name}`, name.toLowerCase(), `outer${name}`], (funcName, funcIndex) => { $$1.fn[funcName] = function(margin, value) { const isSet = arguments.length && (funcIndex < 2 || !isBoolean(margin)); const includeMargin = margin === true || value === true; if (!isSet) { return this.length ? get$1(this[0], name, funcIndex, includeMargin) : void 0; } return this.each((index, element) => { return set$1(element, index, name, funcIndex, includeMargin, margin); }); }; }); }); $$1.fn.hide = function() { return this.each((_2, element) => { element.style.display = "none"; }); }; eachArray(["val", "html", "text"], (name, nameIndex) => { const props = ["value", "innerHTML", "textContent"]; const propName = props[nameIndex]; const get2 = ($elements) => { if (nameIndex === 2) { return map($elements, (element) => { return toElement(element)[propName]; }).join(""); } if (!$elements.length) { return void 0; } const firstElement = $elements[0]; const $firstElement = $$1(firstElement); if (nameIndex === 0 && $firstElement.is("select[multiple]")) { return map($firstElement.find("option:checked"), (element) => element.value); } return firstElement[propName]; }; const set2 = (element, value) => { if (isUndefined(value)) { if (nameIndex !== 0) { return; } value = ""; } if (nameIndex === 1 && isElement(value)) { value = value.outerHTML; } element[propName] = value; }; $$1.fn[name] = function(value) { if (!arguments.length) { return get2(this); } return this.each((i3, element) => { const $element = $$1(element); const computedValue = isFunction(value) ? value.call(element, i3, get2($element)) : value; if (nameIndex === 0 && Array.isArray(computedValue)) { if ($element.is("select[multiple]")) { map($element.find("option"), (option) => { return option.selected = computedValue.includes(option.value); }); } else { element.checked = computedValue.includes(element.value); } } else { set2(element, computedValue); } }); }; }); $$1.fn.index = function(selector) { if (!arguments.length) { return this.eq(0).parent().children().get().indexOf(this[0]); } if (isString(selector)) { return $$1(selector).get().indexOf(this[0]); } return this.get().indexOf($$1(selector)[0]); }; $$1.fn.last = function() { return this.eq(-1); }; eachArray(["", "All", "Until"], (name, nameIndex) => { $$1.fn[`next${name}`] = function(selector, filter) { return dir(this, nameIndex, "nextElementSibling", selector, filter); }; }); $$1.fn.not = function(selector) { const $excludes = this.filter(selector); return this.map((_2, element) => { return $excludes.index(element) > -1 ? void 0 : element; }); }; const CustomEvent$1 = getWindow$1().CustomEvent; class MduiCustomEvent extends CustomEvent$1 { constructor(type, options) { super(type, options); this.data = options.data; this.namespace = options.namespace; } } const elementIdMap = /* @__PURE__ */ new WeakMap(); let elementId = 1; const getElementId = (element) => { if (!elementIdMap.has(element)) { elementIdMap.set(element, ++elementId); } return elementIdMap.get(element); }; const handlersMap = /* @__PURE__ */ new Map(); const getHandlers = (element) => { const id2 = getElementId(element); return handlersMap.get(id2) || handlersMap.set(id2, []).get(id2); }; const parse$1 = (type) => { const parts = type.split("."); return { type: parts[0], namespace: parts.slice(1).sort().join(" ") }; }; const matcherFor = (namespace) => { return new RegExp("(?:^| )" + namespace.replace(" ", " .* ?") + "(?: |$)"); }; const getMatchedHandlers = (element, type, func, selector) => { const event = parse$1(type); return getHandlers(element).filter((handler) => { return handler && (!event.type || handler.type === event.type) && (!event.namespace || matcherFor(event.namespace).test(handler.namespace)) && (!func || getElementId(handler.func) === getElementId(func)) && (!selector || handler.selector === selector); }); }; const add = (element, types, func, data2, selector) => { let useCapture = false; if (isObjectLike(data2) && data2.useCapture) { useCapture = true; } types.split(" ").forEach((type) => { if (!type) { return; } const event = parse$1(type); const callFn = (e2, elem) => { const result = func.apply( elem, // @ts-ignore e2.detail === null ? [e2] : [e2].concat(e2.detail) ); if (result === false) { e2.preventDefault(); e2.stopPropagation(); } }; const proxyFn = (e2) => { if (e2.namespace && !matcherFor(e2.namespace).test(event.namespace)) { return; } e2.data = data2; if (selector) { $$1(element).find(selector).get().reverse().forEach((elem) => { if (elem === e2.target || contains(elem, e2.target)) { callFn(e2, elem); } }); } else { callFn(e2, element); } }; const handler = { type: event.type, namespace: event.namespace, func, selector, id: getHandlers(element).length, proxy: proxyFn }; getHandlers(element).push(handler); element.addEventListener(handler.type, proxyFn, useCapture); }); }; const remove = (element, types, func, selector) => { const handlersInElement = getHandlers(element); const removeEvent = (handler) => { delete handlersInElement[handler.id]; element.removeEventListener(handler.type, handler.proxy, false); }; if (!types) { handlersInElement.forEach((handler) => { removeEvent(handler); }); } else { types.split(" ").forEach((type) => { if (type) { getMatchedHandlers(element, type, func, selector).forEach((handler) => { removeEvent(handler); }); } }); } }; $$1.fn.off = function(types, selector, callback) { if (isObjectLike(types)) { eachObject(types, (type, fn) => { this.off(type, selector, fn); }); return this; } if (selector === false || isFunction(selector)) { callback = selector; selector = void 0; } if (callback === false) { callback = returnFalse; } return this.each(function() { remove(this, types, callback, selector); }); }; function extend(target, ...objectN) { eachArray(objectN, (object) => { eachObject(object, (prop, value) => { if (!isUndefined(value)) { target[prop] = value; } }); }); return target; } $$1.fn.offsetParent = function() { const document2 = getDocument(); return this.map(function() { let offsetParent = this.offsetParent; while (offsetParent && $$1(offsetParent).css("position") === "static") { offsetParent = offsetParent.offsetParent; } return offsetParent || document2.documentElement; }); }; const floatStyle = ($element, name) => { return parseFloat($element.css(name)); }; $$1.fn.position = function() { if (!this.length) { return void 0; } const $element = this.eq(0); let currentOffset; let parentOffset = { left: 0, top: 0 }; if ($element.css("position") === "fixed") { currentOffset = $element[0].getBoundingClientRect(); } else { currentOffset = $element.offset(); const $offsetParent = $element.offsetParent(); parentOffset = $offsetParent.offset(); parentOffset.top += floatStyle($offsetParent, "border-top-width"); parentOffset.left += floatStyle($offsetParent, "border-left-width"); } return { top: currentOffset.top - parentOffset.top - floatStyle($element, "margin-top"), left: currentOffset.left - parentOffset.left - floatStyle($element, "margin-left") }; }; const get = (element) => { if (!element.getClientRects().length) { return { top: 0, left: 0 }; } const { top, left } = element.getBoundingClientRect(); const { pageYOffset, pageXOffset } = element.ownerDocument.defaultView; return { top: top + pageYOffset, left: left + pageXOffset }; }; const set = (element, value, index) => { const $element = $$1(element); const position = $element.css("position"); if (position === "static") { $element.css("position", "relative"); } const currentOffset = get(element); const currentTopString = $element.css("top"); const currentLeftString = $element.css("left"); let currentTop; let currentLeft; const calculatePosition = (position === "absolute" || position === "fixed") && (currentTopString + currentLeftString).includes("auto"); if (calculatePosition) { const currentPosition = $element.position(); currentTop = currentPosition.top; currentLeft = currentPosition.left; } else { currentTop = parseFloat(currentTopString); currentLeft = parseFloat(currentLeftString); } const computedValue = isFunction(value) ? value.call(element, index, extend({}, currentOffset)) : value; $element.css({ top: computedValue.top != null ? computedValue.top - currentOffset.top + currentTop : void 0, left: computedValue.left != null ? computedValue.left - currentOffset.left + currentLeft : void 0 }); }; $$1.fn.offset = function(value) { if (!arguments.length) { if (!this.length) { return void 0; } return get(this[0]); } return this.each(function(index) { set(this, value, index); }); }; $$1.fn.on = function(types, selector, data2, callback, one) { if (isObjectLike(types)) { if (!isString(selector)) { data2 = data2 || selector; selector = void 0; } eachObject(types, (type, fn) => { this.on(type, selector, data2, fn, one); }); return this; } if (data2 == null && callback == null) { callback = selector; data2 = selector = void 0; } else if (callback == null) { if (isString(selector)) { callback = data2; data2 = void 0; } else { callback = data2; data2 = selector; selector = void 0; } } if (callback === false) { callback = returnFalse; } else if (!callback) { return this; } if (one) { const _this = this; const origCallback = callback; callback = function(event, ...dataN) { _this.off(event.type, selector, callback); return origCallback.call(this, event, ...dataN); }; } return this.each(function() { add(this, types, callback, data2, selector); }); }; $$1.fn.one = function(types, selector, data2, callback) { return this.on(types, selector, data2, callback, true); }; eachArray(["", "All", "Until"], (name, nameIndex) => { $$1.fn[`prev${name}`] = function(selector, filter) { const $nodes = !nameIndex ? this : $$1(this.get().reverse()); return dir($nodes, nameIndex, "previousElementSibling", selector, filter); }; }); $$1.fn.removeAttr = function(attributeName) { const names = attributeName.split(" ").filter((name) => name); return this.each(function() { eachArray(names, (name) => { removeAttribute(this, name); }); }); }; const removeData = (element, name) => { if (isUndefined(name)) { return removeAll(element); } const keys = isString(name) ? name.split(" ").filter((nameItem) => nameItem) : name; removeMultiple(element, keys); }; $$1.fn.removeData = function(name) { return this.each((_2, element) => { removeData(element, name); }); }; $$1.fn.removeProp = function(name) { return this.each((_2, element) => { try { delete element[name]; } catch (e2) { } }); }; $$1.fn.replaceWith = function(newContent) { this.each((index, element) => { let content = newContent; if (isFunction(content)) { content = content.call(element, index, element.innerHTML); } else if (index && !isString(content)) { content = $$1(content).clone(); } $$1(element).before(content); }); return this.remove(); }; $$1.fn.replaceAll = function(target) { return $$1(target).map((index, element) => { $$1(element).replaceWith(index ? this.clone() : this); return this.get(); }); }; const param = (obj) => { if (!isObjectLike(obj) && !Array.isArray(obj)) { return ""; } const args = []; const destructure = (key2, value) => { let keyTmp; if (isObjectLike(value)) { eachObject(value, (i3, v2) => { keyTmp = Array.isArray(value) && !isObjectLike(v2) ? "" : i3; destructure(`${key2}[${keyTmp}]`, v2); }); } else { keyTmp = value == null || value === "" ? "=" : `=${encodeURIComponent(value)}`; args.push(encodeURIComponent(key2) + keyTmp); } }; if (Array.isArray(obj)) { eachArray(obj, ({ name, value }) => { return destructure(name, value); }); } else { eachObject(obj, destructure); } return args.join("&"); }; const formCollections = /* @__PURE__ */ new WeakMap(); const getFormControls = (form) => { const nativeFormControls = [...form.elements]; const formControls = formCollections.get(form) || []; const comparePosition = (a2, b3) => { const position = a2.compareDocumentPosition(b3); return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1; }; return [...nativeFormControls, ...formControls].sort(comparePosition); }; const getFormControlsValue = ($elements) => { const result = []; $elements.each((_2, element) => { const elements = element instanceof HTMLFormElement ? getFormControls(element) : [element]; $$1(elements).each((_3, element2) => { const $element = $$1(element2); const type = element2.type; const nodeName = element2.nodeName.toLowerCase(); if (nodeName !== "fieldset" && element2.name && !element2.disabled && [ "input", "select", "textarea", "keygen", "mdui-checkbox", "mdui-radio-group", "mdui-switch", "mdui-text-field", "mdui-select", "mdui-slider", "mdui-range-slider", "mdui-segmented-button-group" ].includes(nodeName) && !["submit", "button", "image", "reset", "file"].includes(type) && (!["radio", "checkbox"].includes(type) || element2.checked) && (!["mdui-checkbox", "mdui-switch"].includes(nodeName) || element2.checked)) { result.push({ name: element2.name, value: $element.val() }); } }); }); return result; }; $$1.fn.serializeArray = function() { return getFormControlsValue(this).map((element) => { if (!Array.isArray(element.value)) { return element; } return element.value.map((value) => ({ name: element.name, value })); }).flat(); }; $$1.fn.serialize = function() { return param(this.serializeArray()); }; $$1.fn.serializeObject = function() { const result = {}; getFormControlsValue(this).forEach((element) => { const { name, value } = element; if (!result.hasOwnProperty(name)) { result[name] = value; } else { const originalValue = result[name]; if (!Array.isArray(originalValue)) { result[name] = [originalValue]; } if (Array.isArray(value)) { result[name].push(...value); } else { result[name].push(value); } } }); return result; }; const elementDisplay = {}; const defaultDisplay = (nodeName) => { const document2 = getDocument(); let element; let display; if (!elementDisplay[nodeName]) { element = createElement(nodeName); appendChild(document2.body, element); display = getStyle(element, "display"); removeChild(element); if (display === "none") { display = "block"; } elementDisplay[nodeName] = display; } return elementDisplay[nodeName]; }; $$1.fn.show = function() { return this.each((_2, element) => { if (element.style.display === "none") { element.style.display = ""; } if (getStyle(element, "display") === "none") { element.style.display = defaultDisplay(element.nodeName); } }); }; $$1.fn.siblings = function(selector) { return this.prevAll(selector).add(this.nextAll(selector)); }; $$1.fn.toggle = function() { return this.each((_2, element) => { getStyle(element, "display") === "none" ? $$1(element).show() : $$1(element).hide(); }); }; $$1.fn.trigger = function(name, detail = null, options) { const { type, namespace } = parse$1(name); const event = new MduiCustomEvent(type, { detail, data: null, namespace, bubbles: true, cancelable: false, composed: true, ...options }); return this.each((_2, element) => { element.dispatchEvent(event); }); }; const ajaxStart = "ajaxStart"; const ajaxSuccess = "ajaxSuccess"; const ajaxError = "ajaxError"; const ajaxComplete = "ajaxComplete"; const globalOptions = {}; const isQueryStringData = (method) => { return ["GET", "HEAD"].includes(method); }; const appendQuery = (url, query) => { return `${url}&${query}`.replace(/[&?]{1,2}/, "?"); }; const isCrossDomain = (url) => { const window2 = getWindow$1(); return /^([\w-]+:)?\/\/([^/]+)/.test(url) && RegExp.$2 !== window2.location.host; }; const isHttpStatusSuccess = (status) => { return status >= 200 && status < 300 || [0, 304].includes(status); }; const mergeOptions = (options) => { const defaults = { url: "", method: "GET", data: "", processData: true, async: true, cache: true, username: "", password: "", headers: {}, xhrFields: {}, statusCode: {}, dataType: "", contentType: "application/x-www-form-urlencoded", timeout: 0, global: true }; eachObject(globalOptions, (key2, value) => { const callbacks = [ "beforeSend", "success", "error", "complete", "statusCode" ]; if (!callbacks.includes(key2) && !isUndefined(value)) { defaults[key2] = value; } }); return extend({}, defaults, options); }; const ajax = (options) => { const document2 = getDocument(); const window2 = getWindow$1(); let isCanceled = false; const eventParams = {}; const successEventParams = {}; const mergedOptions = mergeOptions(options); const method = mergedOptions.method.toUpperCase(); let { data: data2, url } = mergedOptions; url = url || window2.location.toString(); const { processData, async, cache, username, password, headers, xhrFields, statusCode, dataType, contentType, timeout, global } = mergedOptions; const isMethodQueryString = isQueryStringData(method); if (data2 && (isMethodQueryString || processData) && !isString(data2) && !(data2 instanceof ArrayBuffer) && !(data2 instanceof Blob) && !(data2 instanceof Document) && !(data2 instanceof FormData)) { data2 = param(data2); } if (data2 && isMethodQueryString) { url = appendQuery(url, data2); data2 = null; } const trigger = (event, callback, ...args) => { if (global) { $$1(document2).trigger(event, callback === "success" ? successEventParams : eventParams); } let resultGlobal; let resultCustom; if (callback in globalOptions) { resultGlobal = globalOptions[callback](...args); } if (mergedOptions[callback]) { resultCustom = mergedOptions[callback](...args); } if (callback === "beforeSend" && [resultGlobal, resultCustom].includes(false)) { isCanceled = true; } }; const XHR = () => { let textStatus; return new Promise((resolve, reject) => { const doReject = (reason) => { return reject(new Error(reason)); }; if (isMethodQueryString && !cache) { url = appendQuery(url, `_=${Date.now()}`); } const xhr = new XMLHttpRequest(); xhr.open(method, url, async, username, password); if (contentType || data2 && !isMethodQueryString && contentType !== false) { xhr.setRequestHeader("Content-Type", contentType); } if (dataType === "json") { xhr.setRequestHeader("Accept", "application/json, text/javascript"); } eachObject(headers, (key2, value) => { if (!isUndefined(value)) { xhr.setRequestHeader(key2, value + ""); } }); if (!isCrossDomain(url)) { xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); } eachObject(xhrFields, (key2, value) => { xhr[key2] = value; }); eventParams.xhr = successEventParams.xhr = xhr; eventParams.options = successEventParams.options = mergedOptions; let xhrTimeout; xhr.onload = () => { if (xhrTimeout) { clearTimeout(xhrTimeout); } const isSuccess = isHttpStatusSuccess(xhr.status); let responseData = void 0; if (isSuccess) { textStatus = xhr.status === 204 || method === "HEAD" ? "nocontent" : xhr.status === 304 ? "notmodified" : "success"; if (dataType === "json" || !dataType && (xhr.getResponseHeader("content-type") || "").includes("json")) { try { responseData = method === "HEAD" ? void 0 : JSON.parse(xhr.responseText); successEventParams.response = responseData; } catch (err) { textStatus = "parsererror"; trigger(ajaxError, "error", xhr, textStatus); doReject(textStatus); } if (textStatus !== "parsererror") { trigger(ajaxSuccess, "success", responseData, textStatus, xhr); resolve(responseData); } } else { responseData = method === "HEAD" ? void 0 : xhr.responseType === "text" || xhr.responseType === "" ? xhr.responseText : xhr.response; successEventParams.response = responseData; trigger(ajaxSuccess, "success", responseData, textStatus, xhr); resolve(responseData); } } else { textStatus = "error"; trigger(ajaxError, "error", xhr, textStatus); doReject(textStatus); } eachArray([globalOptions.statusCode ?? {}, statusCode], (func) => { if (func[xhr.status]) { if (isSuccess) { func[xhr.status](responseData, textStatus, xhr); } else { func[xhr.status](xhr, textStatus); } } }); trigger(ajaxComplete, "complete", xhr, textStatus); }; xhr.onerror = () => { if (xhrTimeout) { clearTimeout(xhrTimeout); } trigger(ajaxError, "error", xhr, xhr.statusText); trigger(ajaxComplete, "complete", xhr, "error"); doReject(xhr.statusText); }; xhr.onabort = () => { let statusText = "abort"; if (xhrTimeout) { statusText = "timeout"; clearTimeout(xhrTimeout); } trigger(ajaxError, "error", xhr, statusText); trigger(ajaxComplete, "complete", xhr, statusText); doReject(statusText); }; trigger(ajaxStart, "beforeSend", xhr, mergedOptions); if (isCanceled) { return doReject("cancel"); } if (timeout > 0) { xhrTimeout = window2.setTimeout(() => xhr.abort(), timeout); } xhr.send(data2); }); }; return XHR(); }; $$1.ajax = ajax; const ajaxSetup = (options) => { return extend(globalOptions, options); }; $$1.ajaxSetup = ajaxSetup; $$1.contains = contains; function data(element, key2, value) { if (isObjectLike(key2)) { setAll(element, key2); return key2; } if (!isUndefined(value)) { set$2(element, key2, value); return value; } if (isUndefined(key2)) { return getAll(element); } return get$2(element, key2); } $$1.data = data; $$1.each = each; $$1.extend = function(target, ...objectN) { if (!objectN.length) { eachObject(target, (prop, value) => { this[prop] = value; }); return this; } return extend(target, ...objectN); }; $$1.map = map; $$1.merge = merge; $$1.param = param; $$1.removeData = removeData; $$1.unique = unique; function __decorate(decorators, target, key2, desc) { var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key2) : desc, d2; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key2, desc); else for (var i3 = decorators.length - 1; i3 >= 0; i3--) if (d2 = decorators[i3]) r2 = (c2 < 3 ? d2(r2) : c2 > 3 ? d2(target, key2, r2) : d2(target, key2)) || r2; return c2 > 3 && r2 && Object.defineProperty(target, key2, r2), r2; } typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) { var e2 = new Error(message); return e2.name = "SuppressedError", e2.error = error, e2.suppressed = suppressed, e2; }; /** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const t$2 = globalThis, e$3 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s = Symbol(), o$4 = /* @__PURE__ */ new WeakMap(); let n$4 = class n { constructor(t2, e2, o2) { if (this._$cssResult$ = true, o2 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead."); this.cssText = t2, this.t = e2; } get styleSheet() { let t2 = this.o; const s2 = this.t; if (e$3 && void 0 === t2) { const e2 = void 0 !== s2 && 1 === s2.length; e2 && (t2 = o$4.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$4.set(s2, t2)); } return t2; } toString() { return this.cssText; } }; const r$4 = (t2) => new n$4("string" == typeof t2 ? t2 : t2 + "", void 0, s), i$3 = (t2, ...e2) => { const o2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s2, o3) => e3 + ((t3) => { if (true === t3._$cssResult$) return t3.cssText; if ("number" == typeof t3) return t3; throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."); })(s2) + t2[o3 + 1], t2[0]); return new n$4(o2, t2, s); }, S$1 = (s2, o2) => { if (e$3) s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet); else for (const e2 of o2) { const o3 = document.createElement("style"), n3 = t$2.litNonce; void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3); } }, c$3 = e$3 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => { let e2 = ""; for (const s2 of t3.cssRules) e2 += s2.cssText; return r$4(e2); })(t2) : t2; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const { is: i$2, defineProperty: e$2, getOwnPropertyDescriptor: r$3, getOwnPropertyNames: h$2, getOwnPropertySymbols: o$3, getPrototypeOf: n$3 } = Object, a$1 = globalThis, c$2 = a$1.trustedTypes, l = c$2 ? c$2.emptyScript : "", p = a$1.reactiveElementPolyfillSupport, d = (t2, s2) => t2, u = { toAttribute(t2, s2) { switch (s2) { case Boolean: t2 = t2 ? l : null; break; case Object: case Array: t2 = null == t2 ? t2 : JSON.stringify(t2); } return t2; }, fromAttribute(t2, s2) { let i3 = t2; switch (s2) { case Boolean: i3 = null !== t2; break; case Number: i3 = null === t2 ? null : Number(t2); break; case Object: case Array: try { i3 = JSON.parse(t2); } catch (t3) { i3 = null; } } return i3; } }, f$2 = (t2, s2) => !i$2(t2, s2), y = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f$2 }; Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a$1.litPropertyMetadata ?? (a$1.litPropertyMetadata = /* @__PURE__ */ new WeakMap()); let b$1 = class b extends HTMLElement { static addInitializer(t2) { this._$Ei(), (this.l ?? (this.l = [])).push(t2); } static get observedAttributes() { return this.finalize(), this._$Eh && [...this._$Eh.keys()]; } static createProperty(t2, s2 = y) { if (s2.state && (s2.attribute = false), this._$Ei(), this.elementProperties.set(t2, s2), !s2.noAccessor) { const i3 = Symbol(), r2 = this.getPropertyDescriptor(t2, i3, s2); void 0 !== r2 && e$2(this.prototype, t2, r2); } } static getPropertyDescriptor(t2, s2, i3) { const { get: e2, set: h2 } = r$3(this.prototype, t2) ?? { get() { return this[s2]; }, set(t3) { this[s2] = t3; } }; return { get() { return e2 == null ? void 0 : e2.call(this); }, set(s3) { const r2 = e2 == null ? void 0 : e2.call(this); h2.call(this, s3), this.requestUpdate(t2, r2, i3); }, configurable: true, enumerable: true }; } static getPropertyOptions(t2) { return this.elementProperties.get(t2) ?? y; } static _$Ei() { if (this.hasOwnProperty(d("elementProperties"))) return; const t2 = n$3(this); t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties); } static finalize() { if (this.hasOwnProperty(d("finalized"))) return; if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) { const t3 = this.properties, s2 = [...h$2(t3), ...o$3(t3)]; for (const i3 of s2) this.createProperty(i3, t3[i3]); } const t2 = this[Symbol.metadata]; if (null !== t2) { const s2 = litPropertyMetadata.get(t2); if (void 0 !== s2) for (const [t3, i3] of s2) this.elementProperties.set(t3, i3); } this._$Eh = /* @__PURE__ */ new Map(); for (const [t3, s2] of this.elementProperties) { const i3 = this._$Eu(t3, s2); void 0 !== i3 && this._$Eh.set(i3, t3); } this.elementStyles = this.finalizeStyles(this.styles); } static finalizeStyles(s2) { const i3 = []; if (Array.isArray(s2)) { const e2 = new Set(s2.flat(1 / 0).reverse()); for (const s3 of e2) i3.unshift(c$3(s3)); } else void 0 !== s2 && i3.push(c$3(s2)); return i3; } static _$Eu(t2, s2) { const i3 = s2.attribute; return false === i3 ? void 0 : "string" == typeof i3 ? i3 : "string" == typeof t2 ? t2.toLowerCase() : void 0; } constructor() { super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev(); } _$Ev() { var _a2; this._$ES = new Promise((t2) => this.enableUpdating = t2), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (_a2 = this.constructor.l) == null ? void 0 : _a2.forEach((t2) => t2(this)); } addController(t2) { var _a2; (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t2), void 0 !== this.renderRoot && this.isConnected && ((_a2 = t2.hostConnected) == null ? void 0 : _a2.call(t2)); } removeController(t2) { var _a2; (_a2 = this._$EO) == null ? void 0 : _a2.delete(t2); } _$E_() { const t2 = /* @__PURE__ */ new Map(), s2 = this.constructor.elementProperties; for (const i3 of s2.keys()) this.hasOwnProperty(i3) && (t2.set(i3, this[i3]), delete this[i3]); t2.size > 0 && (this._$Ep = t2); } createRenderRoot() { const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions); return S$1(t2, this.constructor.elementStyles), t2; } connectedCallback() { var _a2; this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), (_a2 = this._$EO) == null ? void 0 : _a2.forEach((t2) => { var _a3; return (_a3 = t2.hostConnected) == null ? void 0 : _a3.call(t2); }); } enableUpdating(t2) { } disconnectedCallback() { var _a2; (_a2 = this._$EO) == null ? void 0 : _a2.forEach((t2) => { var _a3; return (_a3 = t2.hostDisconnected) == null ? void 0 : _a3.call(t2); }); } attributeChangedCallback(t2, s2, i3) { this._$AK(t2, i3); } _$EC(t2, s2) { var _a2; const i3 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i3); if (void 0 !== e2 && true === i3.reflect) { const r2 = (void 0 !== ((_a2 = i3.converter) == null ? void 0 : _a2.toAttribute) ? i3.converter : u).toAttribute(s2, i3.type); this._$Em = t2, null == r2 ? this.removeAttribute(e2) : this.setAttribute(e2, r2), this._$Em = null; } } _$AK(t2, s2) { var _a2; const i3 = this.constructor, e2 = i3._$Eh.get(t2); if (void 0 !== e2 && this._$Em !== e2) { const t3 = i3.getPropertyOptions(e2), r2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== ((_a2 = t3.converter) == null ? void 0 : _a2.fromAttribute) ? t3.converter : u; this._$Em = e2, this[e2] = r2.fromAttribute(s2, t3.type), this._$Em = null; } } requestUpdate(t2, s2, i3) { if (void 0 !== t2) { if (i3 ?? (i3 = this.constructor.getPropertyOptions(t2)), !(i3.hasChanged ?? f$2)(this[t2], s2)) return; this.P(t2, s2, i3); } false === this.isUpdatePending && (this._$ES = this._$ET()); } P(t2, s2, i3) { this._$AL.has(t2) || this._$AL.set(t2, s2), true === i3.reflect && this._$Em !== t2 && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t2); } async _$ET() { this.isUpdatePending = true; try { await this._$ES; } catch (t3) { Promise.reject(t3); } const t2 = this.scheduleUpdate(); return null != t2 && await t2, !this.isUpdatePending; } scheduleUpdate() { return this.performUpdate(); } performUpdate() { var _a2; if (!this.isUpdatePending) return; if (!this.hasUpdated) { if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) { for (const [t4, s3] of this._$Ep) this[t4] = s3; this._$Ep = void 0; } const t3 = this.constructor.elementProperties; if (t3.size > 0) for (const [s3, i3] of t3) true !== i3.wrapped || this._$AL.has(s3) || void 0 === this[s3] || this.P(s3, this[s3], i3); } let t2 = false; const s2 = this._$AL; try { t2 = this.shouldUpdate(s2), t2 ? (this.willUpdate(s2), (_a2 = this._$EO) == null ? void 0 : _a2.forEach((t3) => { var _a3; return (_a3 = t3.hostUpdate) == null ? void 0 : _a3.call(t3); }), this.update(s2)) : this._$EU(); } catch (s3) { throw t2 = false, this._$EU(), s3; } t2 && this._$AE(s2); } willUpdate(t2) { } _$AE(t2) { var _a2; (_a2 = this._$EO) == null ? void 0 : _a2.forEach((t3) => { var _a3; return (_a3 = t3.hostUpdated) == null ? void 0 : _a3.call(t3); }), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2); } _$EU() { this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false; } get updateComplete() { return this.getUpdateComplete(); } getUpdateComplete() { return this._$ES; } shouldUpdate(t2) { return true; } update(t2) { this._$Ej && (this._$Ej = this._$Ej.forEach((t3) => this._$EC(t3, this[t3]))), this._$EU(); } updated(t2) { } firstUpdated(t2) { } }; b$1.elementStyles = [], b$1.shadowRootOptions = { mode: "open" }, b$1[d("elementProperties")] = /* @__PURE__ */ new Map(), b$1[d("finalized")] = /* @__PURE__ */ new Map(), p == null ? void 0 : p({ ReactiveElement: b$1 }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.0.4"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const n$2 = globalThis, c$1 = n$2.trustedTypes, h$1 = c$1 ? c$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, f$1 = "$lit$", v = `lit$${Math.random().toFixed(9).slice(2)}$`, m = "?" + v, _ = `<${m}>`, w$1 = document, lt = () => w$1.createComment(""), st$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, g$1 = Array.isArray, $ = (t2) => g$1(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), x$1 = "[ \n\f\r]", T = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, E = /-->/g, k = />/g, O = RegExp(`>|${x$1}(?:([^\\s"'>=/]+)(${x$1}*=${x$1}*(?:[^ \f\r"'\`<>=]|("|')|))|$)`, "g"), S = /'/g, j$1 = /"/g, M = /^(?:script|style|textarea|title)$/i, P = (t2) => (i3, ...s2) => ({ _$litType$: t2, strings: i3, values: s2 }), ke = P(1), R = Symbol.for("lit-noChange"), D = Symbol.for("lit-nothing"), V = /* @__PURE__ */ new WeakMap(), I = w$1.createTreeWalker(w$1, 129); function N$1(t2, i3) { if (!g$1(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array"); return void 0 !== h$1 ? h$1.createHTML(i3) : i3; } const U = (t2, i3) => { const s2 = t2.length - 1, e2 = []; let h2, o2 = 2 === i3 ? "<svg>" : 3 === i3 ? "<math>" : "", n3 = T; for (let i4 = 0; i4 < s2; i4++) { const s3 = t2[i4]; let r2, l2, c2 = -1, a2 = 0; for (; a2 < s3.length && (n3.lastIndex = a2, l2 = n3.exec(s3), null !== l2); ) a2 = n3.lastIndex, n3 === T ? "!--" === l2[1] ? n3 = E : void 0 !== l2[1] ? n3 = k : void 0 !== l2[2] ? (M.test(l2[2]) && (h2 = RegExp("</" + l2[2], "g")), n3 = O) : void 0 !== l2[3] && (n3 = O) : n3 === O ? ">" === l2[0] ? (n3 = h2 ?? T, c2 = -1) : void 0 === l2[1] ? c2 = -2 : (c2 = n3.lastIndex - l2[2].length, r2 = l2[1], n3 = void 0 === l2[3] ? O : '"' === l2[3] ? j$1 : S) : n3 === j$1 || n3 === S ? n3 = O : n3 === E || n3 === k ? n3 = T : (n3 = O, h2 = void 0); const u2 = n3 === O && t2[i4 + 1].startsWith("/>") ? " " : ""; o2 += n3 === T ? s3 + _ : c2 >= 0 ? (e2.push(r2), s3.slice(0, c2) + f$1 + s3.slice(c2) + v + u2) : s3 + v + (-2 === c2 ? i4 : u2); } return [N$1(t2, o2 + (t2[s2] || "<?>") + (2 === i3 ? "</svg>" : 3 === i3 ? "</math>" : "")), e2]; }; class B { constructor({ strings: t2, _$litType$: i3 }, s2) { let e2; this.parts = []; let h2 = 0, o2 = 0; const n3 = t2.length - 1, r2 = this.parts, [l2, a2] = U(t2, i3); if (this.el = B.createElement(l2, s2), I.currentNode = this.el.content, 2 === i3 || 3 === i3) { const t3 = this.el.content.firstChild; t3.replaceWith(...t3.childNodes); } for (; null !== (e2 = I.nextNode()) && r2.length < n3; ) { if (1 === e2.nodeType) { if (e2.hasAttributes()) for (const t3 of e2.getAttributeNames()) if (t3.endsWith(f$1)) { const i4 = a2[o2++], s3 = e2.getAttribute(t3).split(v), n4 = /([.?@])?(.*)/.exec(i4); r2.push({ type: 1, index: h2, name: n4[2], strings: s3, ctor: "." === n4[1] ? Y : "?" === n4[1] ? Z : "@" === n4[1] ? q : G }), e2.removeAttribute(t3); } else t3.startsWith(v) && (r2.push({ type: 6, index: h2 }), e2.removeAttribute(t3)); if (M.test(e2.tagName)) { const t3 = e2.textContent.split(v), i4 = t3.length - 1; if (i4 > 0) { e2.textContent = c$1 ? c$1.emptyScript : ""; for (let s3 = 0; s3 < i4; s3++) e2.append(t3[s3], lt()), I.nextNode(), r2.push({ type: 2, index: ++h2 }); e2.append(t3[i4], lt()); } } } else if (8 === e2.nodeType) if (e2.data === m) r2.push({ type: 2, index: h2 }); else { let t3 = -1; for (; -1 !== (t3 = e2.data.indexOf(v, t3 + 1)); ) r2.push({ type: 7, index: h2 }), t3 += v.length - 1; } h2++; } } static createElement(t2, i3) { const s2 = w$1.createElement("template"); return s2.innerHTML = t2, s2; } } function z(t2, i3, s2 = t2, e2) { var _a2, _b; if (i3 === R) return i3; let h2 = void 0 !== e2 ? (_a2 = s2.o) == null ? void 0 : _a2[e2] : s2.l; const o2 = st$1(i3) ? void 0 : i3._$litDirective$; return (h2 == null ? void 0 : h2.constructor) !== o2 && ((_b = h2 == null ? void 0 : h2._$AO) == null ? void 0 : _b.call(h2, false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s2, e2)), void 0 !== e2 ? (s2.o ?? (s2.o = []))[e2] = h2 : s2.l = h2), void 0 !== h2 && (i3 = z(t2, h2._$AS(t2, i3.values), h2, e2)), i3; } let F$1 = class F { constructor(t2, i3) { this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i3; } get parentNode() { return this._$AM.parentNode; } get _$AU() { return this._$AM._$AU; } u(t2) { const { el: { content: i3 }, parts: s2 } = this._$AD, e2 = ((t2 == null ? void 0 : t2.creationScope) ?? w$1).importNode(i3, true); I.currentNode = e2; let h2 = I.nextNode(), o2 = 0, n3 = 0, r2 = s2[0]; for (; void 0 !== r2; ) { if (o2 === r2.index) { let i4; 2 === r2.type ? i4 = new et(h2, h2.nextSibling, this, t2) : 1 === r2.type ? i4 = new r2.ctor(h2, r2.name, r2.strings, this, t2) : 6 === r2.type && (i4 = new K(h2, this, t2)), this._$AV.push(i4), r2 = s2[++n3]; } o2 !== (r2 == null ? void 0 : r2.index) && (h2 = I.nextNode(), o2++); } return I.currentNode = w$1, e2; } p(t2) { let i3 = 0; for (const s2 of this._$AV) void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i3), i3 += s2.strings.length - 2) : s2._$AI(t2[i3])), i3++; } }; class et { get _$AU() { var _a2; return ((_a2 = this._$AM) == null ? void 0 : _a2._$AU) ?? this.v; } constructor(t2, i3, s2, e2) { this.type = 2, this._$AH = D, this._$AN = void 0, this._$AA = t2, this._$AB = i3, this._$AM = s2, this.options = e2, this.v = (e2 == null ? void 0 : e2.isConnected) ?? true; } get parentNode() { let t2 = this._$AA.parentNode; const i3 = this._$AM; return void 0 !== i3 && 11 === (t2 == null ? void 0 : t2.nodeType) && (t2 = i3.parentNode), t2; } get startNode() { return this._$AA; } get endNode() { return this._$AB; } _$AI(t2, i3 = this) { t2 = z(this, t2, i3), st$1(t2) ? t2 === D || null == t2 || "" === t2 ? (this._$AH !== D && this._$AR(), this._$AH = D) : t2 !== this._$AH && t2 !== R && this._(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : $(t2) ? this.k(t2) : this._(t2); } O(t2) { return this._$AA.parentNode.insertBefore(t2, this._$AB); } T(t2) { this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2)); } _(t2) { this._$AH !== D && st$1(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(w$1.createTextNode(t2)), this._$AH = t2; } $(t2) { var _a2; const { values: i3, _$litType$: s2 } = t2, e2 = "number" == typeof s2 ? this._$AC(t2) : (void 0 === s2.el && (s2.el = B.createElement(N$1(s2.h, s2.h[0]), this.options)), s2); if (((_a2 = this._$AH) == null ? void 0 : _a2._$AD) === e2) this._$AH.p(i3); else { const t3 = new F$1(e2, this), s3 = t3.u(this.options); t3.p(i3), this.T(s3), this._$AH = t3; } } _$AC(t2) { let i3 = V.get(t2.strings); return void 0 === i3 && V.set(t2.strings, i3 = new B(t2)), i3; } k(t2) { g$1(this._$AH) || (this._$AH = [], this._$AR()); const i3 = this._$AH; let s2, e2 = 0; for (const h2 of t2) e2 === i3.length ? i3.push(s2 = new et(this.O(lt()), this.O(lt()), this, this.options)) : s2 = i3[e2], s2._$AI(h2), e2++; e2 < i3.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i3.length = e2); } _$AR(t2 = this._$AA.nextSibling, i3) { var _a2; for ((_a2 = this._$AP) == null ? void 0 : _a2.call(this, false, true, i3); t2 && t2 !== this._$AB; ) { const i4 = t2.nextSibling; t2.remove(), t2 = i4; } } setConnected(t2) { var _a2; void 0 === this._$AM && (this.v = t2, (_a2 = this._$AP) == null ? void 0 : _a2.call(this, t2)); } } class G { get tagName() { return this.element.tagName; } get _$AU() { return this._$AM._$AU; } constructor(t2, i3, s2, e2, h2) { this.type = 1, this._$AH = D, this._$AN = void 0, this.element = t2, this.name = i3, this._$AM = e2, this.options = h2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = D; } _$AI(t2, i3 = this, s2, e2) { const h2 = this.strings; let o2 = false; if (void 0 === h2) t2 = z(this, t2, i3, 0), o2 = !st$1(t2) || t2 !== this._$AH && t2 !== R, o2 && (this._$AH = t2); else { const e3 = t2; let n3, r2; for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++) r2 = z(this, e3[s2 + n3], i3, n3), r2 === R && (r2 = this._$AH[n3]), o2 || (o2 = !st$1(r2) || r2 !== this._$AH[n3]), r2 === D ? t2 = D : t2 !== D && (t2 += (r2 ?? "") + h2[n3 + 1]), this._$AH[n3] = r2; } o2 && !e2 && this.j(t2); } j(t2) { t2 === D ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t2 ?? ""); } } class Y extends G { constructor() { super(...arguments), this.type = 3; } j(t2) { this.element[this.name] = t2 === D ? void 0 : t2; } } class Z extends G { constructor() { super(...arguments), this.type = 4; } j(t2) { this.element.toggleAttribute(this.name, !!t2 && t2 !== D); } } class q extends G { constructor(t2, i3, s2, e2, h2) { super(t2, i3, s2, e2, h2), this.type = 5; } _$AI(t2, i3 = this) { if ((t2 = z(this, t2, i3, 0) ?? D) === R) return; const s2 = this._$AH, e2 = t2 === D && s2 !== D || t2.capture !== s2.capture || t2.once !== s2.once || t2.passive !== s2.passive, h2 = t2 !== D && (s2 === D || e2); e2 && this.element.removeEventListener(this.name, this, s2), h2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2; } handleEvent(t2) { var _a2; "function" == typeof this._$AH ? this._$AH.call(((_a2 = this.options) == null ? void 0 : _a2.host) ?? this.element, t2) : this._$AH.handleEvent(t2); } } class K { constructor(t2, i3, s2) { this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i3, this.options = s2; } get _$AU() { return this._$AM._$AU; } _$AI(t2) { z(this, t2); } } const Re = n$2.litHtmlPolyfillSupport; Re == null ? void 0 : Re(B, et), (n$2.litHtmlVersions ?? (n$2.litHtmlVersions = [])).push("3.2.0"); const Q = (t2, i3, s2) => { const e2 = (s2 == null ? void 0 : s2.renderBefore) ?? i3; let h2 = e2._$litPart$; if (void 0 === h2) { const t3 = (s2 == null ? void 0 : s2.renderBefore) ?? null; e2._$litPart$ = h2 = new et(i3.insertBefore(lt(), t3), t3, void 0, s2 ?? {}); } return h2._$AI(t2), h2; }; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ class h extends b$1 { constructor() { super(...arguments), this.renderOptions = { host: this }, this.o = void 0; } createRenderRoot() { var _a2; const t2 = super.createRenderRoot(); return (_a2 = this.renderOptions).renderBefore ?? (_a2.renderBefore = t2.firstChild), t2; } update(t2) { const e2 = this.render(); this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this.o = Q(e2, this.renderRoot, this.renderOptions); } connectedCallback() { var _a2; super.connectedCallback(), (_a2 = this.o) == null ? void 0 : _a2.setConnected(true); } disconnectedCallback() { var _a2; super.disconnectedCallback(), (_a2 = this.o) == null ? void 0 : _a2.setConnected(false); } render() { return R; } } h._$litElement$ = true, h["finalized"] = true, (_a = globalThis.litElementHydrateSupport) == null ? void 0 : _a.call(globalThis, { LitElement: h }); const f = globalThis.litElementPolyfillSupport; f == null ? void 0 : f({ LitElement: h }); (globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.0"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const t$1 = (t2) => (e2, o2) => { void 0 !== o2 ? o2.addInitializer(() => { customElements.define(t2, e2); }) : customElements.define(t2, e2); }; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const o$2 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f$2 }, r$2 = (t2 = o$2, e2, r2) => { const { kind: n3, metadata: i3 } = r2; let s2 = globalThis.litPropertyMetadata.get(i3); if (void 0 === s2 && globalThis.litPropertyMetadata.set(i3, s2 = /* @__PURE__ */ new Map()), s2.set(r2.name, t2), "accessor" === n3) { const { name: o2 } = r2; return { set(r3) { const n4 = e2.get.call(this); e2.set.call(this, r3), this.requestUpdate(o2, n4, t2); }, init(e3) { return void 0 !== e3 && this.P(o2, void 0, t2), e3; } }; } if ("setter" === n3) { const { name: o2 } = r2; return function(r3) { const n4 = this[o2]; e2.call(this, r3), this.requestUpdate(o2, n4, t2); }; } throw Error("Unsupported decorator location: " + n3); }; function n$1(t2) { return (e2, o2) => "object" == typeof o2 ? r$2(t2, e2, o2) : ((t3, e3, o3) => { const r2 = e3.hasOwnProperty(o3); return e3.constructor.createProperty(o3, r2 ? { ...t3, wrapped: true } : t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0; })(t2, e2, o2); } /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ function r$1(r2) { return n$1({ ...r2, state: true, attribute: false }); } /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const e$1 = (e2, t2, c2) => (c2.configurable = true, c2.enumerable = true, Reflect.decorate && "object" != typeof t2 && Object.defineProperty(e2, t2, c2), c2); /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ function o$1(o2) { return (e2, n3) => { const { slot: r2, selector: s2 } = o2 ?? {}, c2 = "slot" + (r2 ? `[name=${r2}]` : ":not([name])"); return e$1(e2, n3, { get() { var _a2; const t2 = (_a2 = this.renderRoot) == null ? void 0 : _a2.querySelector(c2), e3 = (t2 == null ? void 0 : t2.assignedElements(o2)) ?? []; return void 0 === s2 ? e3 : e3.filter((t3) => t3.matches(s2)); } }); }; } /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const to = (t2) => t2 ?? D; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 }); let i$1 = class i { constructor(t2) { } get _$AU() { return this._$AM._$AU; } _$AT(t2, e2, i3) { this.t = t2, this._$AM = e2, this.i = i3; } _$AS(t2, e2) { return this.update(t2, e2); } update(t2, e2) { return this.render(...e2); } }; /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const ee = "important", ie = " !" + ee, se = e(class extends i$1 { constructor(e2) { var _a2; if (super(e2), e2.type !== t.ATTRIBUTE || "style" !== e2.name || ((_a2 = e2.strings) == null ? void 0 : _a2.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute."); } render(t2) { return Object.keys(t2).reduce((e2, r2) => { const s2 = t2[r2]; return null == s2 ? e2 : e2 + `${r2 = r2.includes("-") ? r2 : r2.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s2};`; }, ""); } update(t2, [e2]) { const { style: r2 } = t2.element; if (void 0 === this.ft) return this.ft = new Set(Object.keys(e2)), this.render(e2); for (const t3 of this.ft) null == e2[t3] && (this.ft.delete(t3), t3.includes("-") ? r2.removeProperty(t3) : r2[t3] = null); for (const t3 in e2) { const s2 = e2[t3]; if (null != s2) { this.ft.add(t3); const e3 = "string" == typeof s2 && s2.endsWith(ie); t3.includes("-") || e3 ? r2.setProperty(t3, e3 ? s2.slice(0, -11) : s2, e3 ? ee : "") : r2[t3] = s2; } } return R; } }); class MduiElement extends h { /** * 触发自定义事件。若返回 false，表示事件被取消 * @param type * @param options 通常只用到 cancelable 和 detail；bubbles、composed 统一不用 */ emit(type, options) { const event = new CustomEvent(type, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options)); return this.dispatchEvent(event); } } class HasSlotController { constructor(host, ...slotNames) { this.slotNames = []; (this.host = host).addController(this); this.slotNames = slotNames; this.onSlotChange = this.onSlotChange.bind(this); } hostConnected() { this.host.shadowRoot.addEventListener("slotchange", this.onSlotChange); if (!isDomReady()) { $$1(() => { this.host.requestUpdate(); }); } } hostDisconnected() { this.host.shadowRoot.removeEventListener("slotchange", this.onSlotChange); } test(slotName) { return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName); } hasDefaultSlot() { return [...this.host.childNodes].some((node) => { if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") { return true; } if (node.nodeType === node.ELEMENT_NODE) { const el = node; if (!el.hasAttribute("slot")) { return true; } } return false; }); } hasNamedSlot(name) { return this.host.querySelector(`:scope > [slot="${name}"]`) !== null; } onSlotChange(event) { const slot = event.target; if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) { this.host.requestUpdate(); } } } const nothingTemplate = ke`${D}`; const componentStyle = i$3`:host{box-sizing:border-box}:host *,:host ::after,:host ::before{box-sizing:inherit}:host :focus,:host :focus-visible,:host(:focus),:host(:focus-visible){outline:0}[hidden]{display:none!important}`; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ class le extends i$1 { constructor(i3) { if (super(i3), this.it = D, i3.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings"); } render(t2) { if (t2 === D || null == t2) return this._t = void 0, this.it = t2; if (t2 === R) return t2; if ("string" != typeof t2) throw Error(this.constructor.directiveName + "() called with a non-string value"); if (t2 === this.it) return this._t; this.it = t2; const i3 = [t2]; return i3.raw = i3, this._t = { _$litType$: this.constructor.resultType, strings: i3, values: [] }; } } le.directiveName = "unsafeHTML", le.resultType = 1; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ class pe extends le { } pe.directiveName = "unsafeSVG", pe.resultType = 2; const fe = e(pe); /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const st = (o2) => null === o2 || "object" != typeof o2 && "function" != typeof o2, rt = (o2) => void 0 === o2.strings, ht = {}, dt = (o2, t2 = ht) => o2._$AH = t2; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const mt = (i3, t2) => { var _a2; const e2 = i3._$AN; if (void 0 === e2) return false; for (const i4 of e2) (_a2 = i4._$AO) == null ? void 0 : _a2.call(i4, t2, false), mt(i4, t2); return true; }, _t = (i3) => { let t2, e2; do { if (void 0 === (t2 = i3._$AM)) break; e2 = t2._$AN, e2.delete(i3), i3 = t2; } while (0 === (e2 == null ? void 0 : e2.size)); }, wt = (i3) => { for (let t2; t2 = i3._$AM; i3 = t2) { let e2 = t2._$AN; if (void 0 === e2) t2._$AN = e2 = /* @__PURE__ */ new Set(); else if (e2.has(i3)) break; e2.add(i3), gt(t2); } }; function bt(i3) { void 0 !== this._$AN ? (_t(this), this._$AM = i3, wt(this)) : this._$AM = i3; } function yt(i3, t2 = false, e2 = 0) { const s2 = this._$AH, o2 = this._$AN; if (void 0 !== o2 && 0 !== o2.size) if (t2) if (Array.isArray(s2)) for (let i4 = e2; i4 < s2.length; i4++) mt(s2[i4], false), _t(s2[i4]); else null != s2 && (mt(s2, false), _t(s2)); else mt(this, i3); } const gt = (i3) => { i3.type == t.CHILD && (i3._$AP ?? (i3._$AP = yt), i3._$AQ ?? (i3._$AQ = bt)); }; class $t extends i$1 { constructor() { super(...arguments), this._$AN = void 0; } _$AT(i3, t2, e2) { super._$AT(i3, t2, e2), wt(this), this.isConnected = i3._$AU; } _$AO(i3, t2 = true) { var _a2, _b; i3 !== this.isConnected && (this.isConnected = i3, i3 ? (_a2 = this.reconnected) == null ? void 0 : _a2.call(this) : (_b = this.disconnected) == null ? void 0 : _b.call(this)), t2 && (mt(this, i3), _t(this)); } setValue(i3) { if (rt(this.t)) this.t._$AI(i3, this); else { const t2 = [...this.t._$AH]; t2[this.i] = i3, this.t._$AI(t2, this, 0); } } disconnected() { } reconnected() { } } /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ class Tt { constructor(t2) { this.Y = t2; } disconnect() { this.Y = void 0; } reconnect(t2) { this.Y = t2; } deref() { return this.Y; } } class Et { constructor() { this.Z = void 0, this.q = void 0; } get() { return this.Z; } pause() { this.Z ?? (this.Z = new Promise((t2) => this.q = t2)); } resume() { var _a2; (_a2 = this.q) == null ? void 0 : _a2.call(this), this.Z = this.q = void 0; } } /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const me = (t2) => !st(t2) && "function" == typeof t2.then, _e = 1073741823; class we extends $t { constructor() { super(...arguments), this.wt = _e, this.bt = [], this.K = new Tt(this), this.X = new Et(); } render(...t2) { return t2.find((t3) => !me(t3)) ?? R; } update(t2, s2) { const i3 = this.bt; let e2 = i3.length; this.bt = s2; const r2 = this.K, o2 = this.X; this.isConnected || this.disconnected(); for (let t3 = 0; t3 < s2.length && !(t3 > this.wt); t3++) { const n3 = s2[t3]; if (!me(n3)) return this.wt = t3, n3; t3 < e2 && n3 === i3[t3] || (this.wt = _e, e2 = 0, Promise.resolve(n3).then(async (t4) => { for (; o2.get(); ) await o2.get(); const s3 = r2.deref(); if (void 0 !== s3) { const i4 = s3.bt.indexOf(n3); i4 > -1 && i4 < s3.wt && (s3.wt = i4, s3.setValue(t4)); } })); } return R; } disconnected() { this.K.disconnect(), this.X.pause(); } reconnected() { this.K.reconnect(this), this.X.resume(); } } const be = e(we); const style$n = i$3`:host{display:inline-block;width:1em;height:1em;font-weight:400;font-family:'Material Icons';font-display:block;font-style:normal;line-height:1;direction:ltr;letter-spacing:normal;white-space:nowrap;text-transform:none;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;font-size:1.5rem}::slotted(svg),svg{width:100%;height:100%;fill:currentcolor}`; let Icon = class Icon2 extends MduiElement { constructor() { super(...arguments); this.hasSlotController = new HasSlotController(this, "[default]"); } render() { const renderDefault = () => { if (this.name) { const [name, variant] = this.name.split("--"); const familyMap = /* @__PURE__ */ new Map([ ["outlined", "Material Icons Outlined"], ["filled", "Material Icons"], ["rounded", "Material Icons Round"], ["sharp", "Material Icons Sharp"], ["two-tone", "Material Icons Two Tone"] ]); return ke`<span style="${se({ fontFamily: familyMap.get(variant) })}">${name}</span>`; } if (this.src) { return ke`${be(ajax({ url: this.src }).then(fe))}`; } return ke``; }; return this.hasSlotController.test("[default]") ? ke`<slot></slot>` : renderDefault(); } }; Icon.styles = [componentStyle, style$n]; __decorate([ n$1({ reflect: true }) ], Icon.prototype, "name", void 0); __decorate([ n$1({ reflect: true }) ], Icon.prototype, "src", void 0); Icon = __decorate([ t$1("mdui-icon") ], Icon); const style$m = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;white-space:nowrap;vertical-align:middle;border-radius:var(--shape-corner);-webkit-user-select:none;user-select:none;width:2.5rem;height:2.5rem;background-color:rgb(var(--mdui-color-primary-container));color:rgb(var(--mdui-color-on-primary-container));font-size:var(--mdui-typescale-title-medium-size);font-weight:var(--mdui-typescale-title-medium-weight);letter-spacing:var(--mdui-typescale-title-medium-tracking);line-height:var(--mdui-typescale-title-medium-line-height)}img{width:100%;height:100%}::slotted(mdui-icon),mdui-icon{font-size:1.5em}`; let Avatar = class Avatar2 extends MduiElement { constructor() { super(...arguments); this.hasSlotController = new HasSlotController(this, "[default]"); } render() { return this.hasSlotController.test("[default]") ? ke`<slot></slot>` : this.src ? ke`<img part="image" alt="${to(this.label)}" src="${this.src}" style="${se({ objectFit: this.fit })}">` : this.icon ? ke`<mdui-icon part="icon" name="${this.icon}"></mdui-icon>` : nothingTemplate; } }; Avatar.styles = [componentStyle, style$m]; __decorate([ n$1({ reflect: true }) ], Avatar.prototype, "src", void 0); __decorate([ n$1({ reflect: true }) ], Avatar.prototype, "fit", void 0); __decorate([ n$1({ reflect: true }) ], Avatar.prototype, "icon", void 0); __decorate([ n$1({ reflect: true }) ], Avatar.prototype, "label", void 0); Avatar = __decorate([ t$1("mdui-avatar") ], Avatar); const style$l = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--shape-corner);padding-left:.25rem;padding-right:.25rem;color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error));height:1rem;min-width:1rem;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height)}:host([variant=small]){min-width:0;padding:0;width:.375rem;height:.375rem}`; let Badge = class Badge2 extends MduiElement { constructor() { super(...arguments); this.variant = "large"; } render() { if (this.variant === "small") { return nothingTemplate; } return ke`<slot></slot>`; } }; Badge.styles = [componentStyle, style$l]; __decorate([ n$1({ reflect: true }) ], Badge.prototype, "variant", void 0); Badge = __decorate([ t$1("mdui-badge") ], Badge); const booleanConverter = (value) => { return value !== null && value !== "false"; }; class DefinedController { constructor(host, options) { this.defined = false; (this.host = host).addController(this); this.relatedElements = options.relatedElements; this.needDomReady = options.needDomReady || !!options.relatedElements; this.onSlotChange = this.onSlotChange.bind(this); } hostConnected() { this.host.shadowRoot.addEventListener("slotchange", this.onSlotChange); } hostDisconnected() { this.host.shadowRoot.removeEventListener("slotchange", this.onSlotChange); } /** * 判断组件是否定义完成 */ isDefined() { if (this.defined) { return true; } this.defined = (!this.needDomReady || isDomReady()) && !this.getUndefinedLocalNames().length; return this.defined; } /** * 在组件定义完成后，promise 被 resolve */ async whenDefined() { if (this.defined) { return Promise.resolve(); } const document2 = getDocument(); if (this.needDomReady && !isDomReady(document2)) { await new Promise((resolve) => { document2.addEventListener("DOMContentLoaded", () => resolve(), { once: true }); }); } const undefinedLocalNames = this.getUndefinedLocalNames(); if (undefinedLocalNames.length) { const promises = []; undefinedLocalNames.forEach((localName) => { promises.push(customElements.whenDefined(localName)); }); await Promise.all(promises); } this.defined = true; return; } /** * slot 中的未完成定义的相关 Web components 组件的 CSS 选择器 */ getScopeLocalNameSelector() { const localNames = this.relatedElements; if (!localNames) { return null; } if (Array.isArray(localNames)) { return localNames.map((localName) => `${localName}:not(:defined)`).join(","); } return Object.keys(localNames).filter((localName) => !localNames[localName]).map((localName) => `${localName}:not(:defined)`).join(","); } /** * 整个页面中的未完成定义的相关 Web components 组件的 CSS 选择器 */ getGlobalLocalNameSelector() { const localNames = this.relatedElements; if (!localNames || Array.isArray(localNames)) { return null; } return Object.keys(localNames).filter((localName) => localNames[localName]).map((localName) => `${localName}:not(:defined)`).join(","); } /** * 获取未完成定义的相关 Web components 组件名 */ getUndefinedLocalNames() { const scopeSelector = this.getScopeLocalNameSelector(); const globalSelector = this.getGlobalLocalNameSelector(); const undefinedScopeElements = scopeSelector ? [...this.host.querySelectorAll(scopeSelector)] : []; const undefinedGlobalElements = globalSelector ? [...getDocument().querySelectorAll(globalSelector)] : []; const localNames = [ ...undefinedScopeElements, ...undefinedGlobalElements ].map((element) => element.localName); return unique(localNames); } /** * slot 变更时，若 slot 中包含未完成定义的相关 Web components 组件，则组件未定义完成 */ onSlotChange() { const selector = this.getScopeLocalNameSelector(); if (selector) { const undefinedElements = this.host.querySelectorAll(selector); if (undefinedElements.length) { this.defined = false; } } } } function watch(propName, waitUntilFirstUpdate = false) { return (proto, functionName) => { const { update } = proto; if (propName in proto) { proto.update = function(changedProperties) { if (changedProperties.has(propName)) { const oldValue = changedProperties.get(propName); const newValue = this[propName]; if (oldValue !== newValue) { if (!waitUntilFirstUpdate || this.hasUpdated) { this[functionName](oldValue, newValue); } } } update.call(this, changedProperties); }; } }; } const ScrollBehaviorMixin = (superclass) => { class ScrollBehaviorMixinClass extends superclass { // eslint-disable-next-line @typescript-eslint/no-explicit-any constructor(...args) { super(...args); this.scrollBehaviorDefinedController = new DefinedController(this, { needDomReady: true }); this.lastScrollTopThreshold = 0; this.lastScrollTopNoThreshold = 0; this.isParentLayout = false; this.onListeningScroll = this.onListeningScroll.bind(this); } /** * 滚动时，如果需要给 container 添加 padding，添加在顶部还是底部 */ get scrollPaddingPosition() { throw new Error("Must implement scrollPaddingPosition getter"); } async onScrollTargetChange(oldValue, newValue) { await this.scrollBehaviorDefinedController.whenDefined(); if (oldValue && !newValue || !oldValue && newValue) { this.updateContainerPadding(); } if (!this.scrollBehavior) { return; } const oldListening = this.getListening(oldValue); if (oldListening) { oldListening.removeEventListener("scroll", this.onListeningScroll); } const newListening = this.getListening(newValue); if (newListening) { this.updateScrollTop(newListening); newListening.addEventListener("scroll", this.onListeningScroll); } } async onScrollBehaviorChange(oldValue, newValue) { await this.scrollBehaviorDefinedController.whenDefined(); if (oldValue && !newValue || !oldValue && newValue) { this.updateContainerPadding(); } const listening = this.getListening(this.scrollTarget); if (!listening) { return; } if (this.scrollBehavior) { this.updateScrollTop(listening); listening.addEventListener("scroll", this.onListeningScroll); } else { listening.removeEventListener("scroll", this.onListeningScroll); } } connectedCallback() { super.connectedCallback(); this.scrollBehaviorDefinedController.whenDefined().then(() => { this.isParentLayout = isNodeName(this.parentElement, "mdui-layout"); this.updateContainerPadding(); }); } disconnectedCallback() { super.disconnectedCallback(); this.scrollBehaviorDefinedController.whenDefined().then(() => { this.updateContainerPadding(false); }); } /** * scrollBehavior 包含多个滚动行为，用空格分割 * 用该方法判断指定滚动行为是否在 scrollBehavior 中 * @param behavior 为数组时，只要其中一个行为在 scrollBehavior 中，即返回 `true` */ hasScrollBehavior(behavior) { var _a2; const behaviors = ((_a2 = this.scrollBehavior) == null ? void 0 : _a2.split(" ")) ?? []; if (Array.isArray(behavior)) { return !!behaviors.filter((v2) => behavior.includes(v2)).length; } else { return behaviors.includes(behavior); } } /** * 执行滚动事件，在滚动距离超过 scrollThreshold 时才会执行 * Note: 父类可以按需实现该方法 * @param isScrollingUp 是否向上滚动 * @param scrollTop 距离 scrollTarget 顶部的距离 */ // eslint-disable-next-line @typescript-eslint/no-unused-vars runScrollThreshold(isScrollingUp, scrollTop) { return; } /** * 执行滚动事件，会无视 scrollThreshold，始终会执行 * @param isScrollingUp 是否向上滚动 * @param scrollTop 距离 scrollTarget 顶部的距离 */ // eslint-disable-next-line @typescript-eslint/no-unused-vars runScrollNoThreshold(isScrollingUp, scrollTop) { return; } /** * 更新滚动容器的 padding，避免内容被 navigation-bar 覆盖 * 仅 scrollBehavior 包含 hide、shrink 时，添加 padding * @param withPadding 该值为 false 时，为移除 padding */ updateContainerPadding(withPadding = true) { const container2 = this.getContainer(this.scrollTarget); if (!container2 || this.isParentLayout) { return; } const propName = this.scrollPaddingPosition === "top" ? "paddingTop" : "paddingBottom"; if (withPadding) { const propValue = this.getListening(this.scrollTarget) && ["fixed", "absolute"].includes($$1(this).css("position")) ? this.offsetHeight : null; $$1(container2).css({ [propName]: propValue }); } else { $$1(container2).css({ [propName]: null }); } } onListeningScroll() { const listening = this.getListening(this.scrollTarget); window.requestAnimationFrame(() => this.onScroll(listening)); } /** * 滚动事件，这里过滤掉不符合条件的滚动 */ onScroll(listening) { const scrollTop = listening.scrollY ?? listening.scrollTop; if (this.lastScrollTopNoThreshold !== scrollTop) { this.runScrollNoThreshold(scrollTop < this.lastScrollTopNoThreshold, scrollTop); this.lastScrollTopNoThreshold = scrollTop; } if (Math.abs(scrollTop - this.lastScrollTopThreshold) > (this.scrollThreshold || 0)) { this.runScrollThreshold(scrollTop < this.lastScrollTopThreshold, scrollTop); this.lastScrollTopThreshold = scrollTop; } } /** * 重新更新 lastScrollTopThreshold、lastScrollTopNoThreshold 的值 * 用于在 scrollTarget、scrollBehavior 变更时，重新设置 lastScrollTopThreshold、lastScrollTopNoThreshold 的初始值 */ updateScrollTop(listening) { this.lastScrollTopThreshold = this.lastScrollTopNoThreshold = listening.scrollY ?? listening.scrollTop; } /** * 获取组件需要监听哪个元素的滚动状态 */ getListening(target) { return target ? $$1(target)[0] : window; } /** * 获取组件在哪个容器内滚动 */ getContainer(target) { return target ? $$1(target)[0] : document.body; } } __decorate([ n$1({ attribute: "scroll-target" }) ], ScrollBehaviorMixinClass.prototype, "scrollTarget", void 0); __decorate([ n$1({ reflect: true, attribute: "scroll-behavior" }) ], ScrollBehaviorMixinClass.prototype, "scrollBehavior", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "scroll-threshold" }) ], ScrollBehaviorMixinClass.prototype, "scrollThreshold", void 0); __decorate([ watch("scrollTarget") ], ScrollBehaviorMixinClass.prototype, "onScrollTargetChange", null); __decorate([ watch("scrollBehavior") ], ScrollBehaviorMixinClass.prototype, "onScrollBehaviorChange", null); return ScrollBehaviorMixinClass; }; let id = 0; const uniqueId = () => { return ++id; }; let weakMap; let observer; const observeResize = (target, callback) => { const $target = $$1(target); const key2 = uniqueId(); const result = { unobserve: () => { $target.each((_2, target2) => { const options = weakMap.get(target2); const index = options.coArr.findIndex((co) => co.key === key2); if (index !== -1) { options.coArr.splice(index, 1); } if (!options.coArr.length) { observer.unobserve(target2); weakMap.delete(target2); } else { weakMap.set(target2, options); } }); } }; if (!weakMap) { weakMap = /* @__PURE__ */ new WeakMap(); observer = new ResizeObserver((entries) => { entries.forEach((entry) => { const target2 = entry.target; const options = weakMap.get(target2); options.entry = entry; options.coArr.forEach((co) => { co.callback.call(result, entry, result); }); }); }); } $target.each((_2, target2) => { const options = weakMap.get(target2) ?? { coArr: [] }; if (options.coArr.length && options.entry) { callback.call(result, options.entry, result); } options.coArr.push({ callback, key: key2 }); weakMap.set(target2, options); observer.observe(target2); }); return result; }; class LayoutManager { constructor() { this.states = []; } /** * 注册 `<mdui-layout-main>` */ registerMain(element) { this.$main = $$1(element); } /** * 取消注册 `<mdui-layout-main>` */ unregisterMain() { this.$main = void 0; } /** * 注册新的 `<mdui-layout-item>` */ registerItem(element) { const state = { element }; this.states.push(state); state.observeResize = observeResize(state.element, () => { this.updateLayout(state.element, { width: this.isNoWidth(state) ? 0 : void 0 }); }); this.items = void 0; this.resort(); this.updateLayout(); } /** * 取消注册 `<mdui-layout-item>` */ unregisterItem(element) { var _a2; const index = this.states.findIndex((item2) => item2.element === element); if (index < 0) { return; } const item = this.states[index]; (_a2 = item.observeResize) == null ? void 0 : _a2.unobserve(); this.items = void 0; this.states.splice(index, 1); if (this.states[index]) { this.updateLayout(this.states[index].element); } } /** * 获取所有 `<mdui-layout-item>` 元素（按在 DOM 中的顺序） */ getItems() { if (!this.items) { const items = this.states.map((state) => state.element); this.items = items.sort((a2, b3) => { const position = a2.compareDocumentPosition(b3); if (position & Node.DOCUMENT_POSITION_FOLLOWING) { return -1; } else if (position & Node.DOCUMENT_POSITION_PRECEDING) { return 1; } else { return 0; } }); } return this.items; } /** * 获取 `<mdui-layout-main>` 元素 */ getMain() { return this.$main ? this.$main[0] : void 0; } /** * 获取 `<mdui-layout-item>` 及 `<mdui-layout-main>` 元素 */ getItemsAndMain() { return [...this.getItems(), this.getMain()].filter((i3) => i3); } /** * 更新 `order` 值，更新完后重新计算布局 */ updateOrder() { this.resort(); this.updateLayout(); } /** * 重新计算布局 * @param element 从哪一个元素开始更新；若未传入参数，则将更新所有元素 * @param size 此次更新中，元素的宽高（仅在此次更新中使用）。若不传则自动计算 */ updateLayout(element, size) { const state = element ? { element, width: size == null ? void 0 : size.width, height: size == null ? void 0 : size.height } : void 0; const index = state ? this.states.findIndex((v2) => v2.element === state.element) : 0; if (index < 0) { return; } Object.assign(this.states[index], state); this.states.forEach((currState, currIndex) => { if (currIndex < index) { return; } const placement = currState.element.layoutPlacement; const prevState = currIndex > 0 ? this.states[currIndex - 1] : void 0; const top = (prevState == null ? void 0 : prevState.top) ?? 0; const right = (prevState == null ? void 0 : prevState.right) ?? 0; const bottom = (prevState == null ? void 0 : prevState.bottom) ?? 0; const left = (prevState == null ? void 0 : prevState.left) ?? 0; Object.assign(currState, { top, right, bottom, left }); switch (placement) { case "top": case "bottom": currState[placement] += currState.height ?? currState.element.offsetHeight; break; case "right": case "left": currState[placement] += (this.isNoWidth(currState) ? 0 : currState.width) ?? currState.element.offsetWidth; break; } currState.height = currState.width = void 0; $$1(currState.element).css({ position: "absolute", top: placement === "bottom" ? null : top, right: placement === "left" ? null : right, bottom: placement === "top" ? null : bottom, left: placement === "right" ? null : left }); }); const lastState = this.states[this.states.length - 1]; if (this.$main) { this.$main.css({ paddingTop: lastState.top, paddingRight: lastState.right, paddingBottom: lastState.bottom, paddingLeft: lastState.left }); } } /** * 按 order 排序，order 相同时，按在 DOM 中的顺序排序 */ resort() { const items = this.getItems(); this.states.sort((a2, b3) => { const aOrder = a2.element.order ?? 0; const bOrder = b3.element.order ?? 0; if (aOrder > bOrder) { return 1; } if (aOrder < bOrder) { return -1; } if (items.indexOf(a2.element) > items.indexOf(b3.element)) { return 1; } if (items.indexOf(a2.element) < items.indexOf(b3.element)) { return -1; } return 0; }); } /** * 组件宽度是否为 0 * mdui-navigation-drawer 较为特殊，在为模态化时，占据的宽度为 0 */ isNoWidth(state) { return isNodeName(state.element, "mdui-navigation-drawer") && // @ts-ignore state.element.isModal; } } const layoutManagerMap = /* @__PURE__ */ new WeakMap(); const getLayout = (element) => { if (!layoutManagerMap.has(element)) { layoutManagerMap.set(element, new LayoutManager()); } return layoutManagerMap.get(element); }; class LayoutItemBase extends MduiElement { constructor() { super(...arguments); this.isParentLayout = false; } /** * 当前布局组件所处的位置，父类必须实现该 getter */ get layoutPlacement() { throw new Error("Must implement placement getter!"); } // order 变更时，需要重新调整布局 onOrderChange() { var _a2; (_a2 = this.layoutManager) == null ? void 0 : _a2.updateOrder(); } connectedCallback() { super.connectedCallback(); const parentElement = this.parentElement; this.isParentLayout = isNodeName(parentElement, "mdui-layout"); if (this.isParentLayout) { this.layoutManager = getLayout(parentElement); this.layoutManager.registerItem(this); } } disconnectedCallback() { super.disconnectedCallback(); if (this.layoutManager) { this.layoutManager.unregisterItem(this); } } } __decorate([ n$1({ type: Number, reflect: true }) ], LayoutItemBase.prototype, "order", void 0); __decorate([ watch("order", true) ], LayoutItemBase.prototype, "onOrderChange", null); const style$k = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;align-items:center;justify-content:flex-start;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-emphasized);padding:0 1rem;height:5rem;background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transition-duration:var(--mdui-motion-duration-short4);bottom:-5.625rem}::slotted(:not(:first-child)){margin-left:.5rem}::slotted(mdui-fab){box-shadow:var(--mdui-elevation-level0)}:host([fab-detach]) ::slotted(mdui-fab){position:absolute;transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard);right:1rem;bottom:.75rem}:host([fab-detach][hide][scroll-behavior~=hide]) ::slotted(mdui-fab){transition-duration:var(--mdui-motion-duration-short4);bottom:1rem;box-shadow:var(--mdui-elevation-level2)}:host([fab-detach][hide][scroll-behavior~=hide][scroll-target]:not([scroll-target=''])) ::slotted(mdui-fab){bottom:6.625rem}:host([hide]) ::slotted(:not(mdui-fab)),:host([hide]:not([fab-detach])) ::slotted(mdui-fab){transform:translateY(8.75rem);transition:transform var(--mdui-motion-duration-0) var(--mdui-motion-easing-emphasized-accelerate) var(--mdui-motion-duration-short4)}::slotted(:first-child){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short1)}::slotted(:nth-child(2)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short3)}::slotted(:nth-child(3)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short4)}::slotted(:nth-child(4)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium1)}::slotted(:nth-child(5)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium2)}::slotted(:nth-child(6)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium3)}`; let BottomAppBar = class BottomAppBar2 extends ScrollBehaviorMixin(LayoutItemBase) { constructor() { super(...arguments); this.hide = false; this.fabDetach = false; } get scrollPaddingPosition() { return "bottom"; } get layoutPlacement() { return "bottom"; } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.addEventListener("transitionend", (event) => { if (event.target === this) { this.emit(this.hide ? "hidden" : "shown"); } }); } render() { return ke`<slot></slot>`; } /** * 滚动行为 * 当前仅支持 hide 这一个行为，所以不做行为类型判断 */ runScrollThreshold(isScrollingUp) { if (!isScrollingUp && !this.hide) { const eventProceeded = this.emit("hide", { cancelable: true }); if (eventProceeded) { this.hide = true; } } if (isScrollingUp && this.hide) { const eventProceeded = this.emit("show", { cancelable: true }); if (eventProceeded) { this.hide = false; } } } }; BottomAppBar.styles = [componentStyle, style$k]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], BottomAppBar.prototype, "hide", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "fab-detach" }) ], BottomAppBar.prototype, "fabDetach", void 0); __decorate([ n$1({ reflect: true, attribute: "scroll-behavior" }) ], BottomAppBar.prototype, "scrollBehavior", void 0); BottomAppBar = __decorate([ t$1("mdui-bottom-app-bar") ], BottomAppBar); /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const ii = () => new Zt(); class Zt { } const qt = /* @__PURE__ */ new WeakMap(), Kt = e(class extends $t { render(t2) { return D; } update(t2, [i3]) { var _a2; const s2 = i3 !== this.Y; return s2 && void 0 !== this.Y && this.rt(void 0), (s2 || this.lt !== this.ct) && (this.Y = i3, this.ht = (_a2 = t2.options) == null ? void 0 : _a2.host, this.rt(this.ct = t2.element)), D; } rt(t2) { if (this.isConnected || (t2 = void 0), "function" == typeof this.Y) { const i3 = this.ht ?? globalThis; let s2 = qt.get(i3); void 0 === s2 && (s2 = /* @__PURE__ */ new WeakMap(), qt.set(i3, s2)), void 0 !== s2.get(this.Y) && this.Y.call(this.ht, void 0), s2.set(this.Y, t2), void 0 !== t2 && this.Y.call(this.ht, t2); } else this.Y.value = t2; } get lt() { var _a2, _b; return "function" == typeof this.Y ? (_a2 = qt.get(this.ht ?? globalThis)) == null ? void 0 : _a2.get(this.Y) : (_b = this.Y) == null ? void 0 : _b.value; } disconnected() { this.lt === this.ct && this.rt(void 0); } reconnected() { this.rt(this.ct); } }); function cc(names) { if (typeof names === "string" || typeof names === "number") return "" + names; let out = ""; if (Array.isArray(names)) { for (let i3 = 0, tmp; i3 < names.length; i3++) { if ((tmp = cc(names[i3])) !== "") { out += (out && " ") + tmp; } } } else { for (let k2 in names) { if (names[k2]) out += (out && " ") + k2; } } return out; } const reportValidityOverloads = /* @__PURE__ */ new WeakMap(); const formResets = /* @__PURE__ */ new WeakMap(); class FormController { constructor(host, options) { (this.host = host).addController(this); this.definedController = new DefinedController(host, { needDomReady: true }); this.options = { form: (control) => { const formId = $$1(control).attr("form"); if (formId) { const root2 = control.getRootNode(); return root2.getElementById(formId); } return control.closest("form"); }, name: (control) => control.name, value: (control) => control.value, defaultValue: (control) => control.defaultValue, setValue: (control, value) => control.value = value, disabled: (control) => control.disabled, reportValidity: (control) => isFunction(control.reportValidity) ? control.reportValidity() : true, ...options }; this.onFormData = this.onFormData.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); this.onFormReset = this.onFormReset.bind(this); this.reportFormValidity = this.reportFormValidity.bind(this); } hostConnected() { this.definedController.whenDefined().then(() => { this.form = this.options.form(this.host); if (this.form) { this.attachForm(this.form); } }); } hostDisconnected() { this.detachForm(); } hostUpdated() { this.definedController.whenDefined().then(() => { const form = this.options.form(this.host); if (!form) { this.detachForm(); } if (form && this.form !== form) { this.detachForm(); this.attachForm(form); } }); } /** * 获取当前表单控件关联的 `<form>` 元素 */ getForm() { return this.form ?? null; } /** * 重置整个表单，所有表单控件恢复成默认值 */ reset(invoker) { this.doAction("reset", invoker); } /** * 提交整个表单 */ submit(invoker) { this.doAction("submit", invoker); } attachForm(form) { if (!form) { this.form = void 0; return; } this.form = form; if (formCollections.has(this.form)) { formCollections.get(this.form).add(this.host); } else { formCollections.set(this.form, /* @__PURE__ */ new Set([this.host])); } this.form.addEventListener("formdata", this.onFormData); this.form.addEventListener("submit", this.onFormSubmit); this.form.addEventListener("reset", this.onFormReset); if (!reportValidityOverloads.has(this.form)) { reportValidityOverloads.set(this.form, this.form.reportValidity); this.form.reportValidity = () => this.reportFormValidity(); } } detachForm() { if (this.form) { formCollections.get(this.form).delete(this.host); this.form.removeEventListener("formdata", this.onFormData); this.form.removeEventListener("submit", this.onFormSubmit); this.form.removeEventListener("reset", this.onFormReset); if (reportValidityOverloads.has(this.form) && !formCollections.get(this.form).size) { this.form.reportValidity = reportValidityOverloads.get(this.form); reportValidityOverloads.delete(this.form); } } } doAction(type, invoker) { if (!this.form) { return; } const $button = $$1(`<button type="${type}">`).css({ position: "absolute", width: 0, height: 0, clipPath: "inset(50%)", overflow: "hidden", whiteSpace: "nowrap" }); const button = $button[0]; if (invoker) { button.name = invoker.name; button.value = invoker.value; [ "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget" ].forEach((attr) => { $button.attr(attr, $$1(invoker).attr(attr)); }); } this.form.append(button); button.click(); button.remove(); } onFormData(event) { const disabled = this.options.disabled(this.host); const name = this.options.name(this.host); const value = this.options.value(this.host); const isButton = [ "mdui-button", "mdui-button-icon", "mdui-chip", "mdui-fab", "mdui-segmented-button" ].includes(this.host.tagName.toLowerCase()); if (!disabled && !isButton && isString(name) && name && !isUndefined(value)) { if (Array.isArray(value)) { value.forEach((val) => { event.formData.append(name, val.toString()); }); } else { event.formData.append(name, value.toString()); } } } // todo: 当前组件进行验证的顺序，取决于组件的注册顺序，而不会按在 DOM 中的顺序从上到下验证。如何按 DOM 顺序验证？ onFormSubmit(event) { const disabled = this.options.disabled(this.host); const reportValidity = this.options.reportValidity; if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) { event.preventDefault(); event.stopImmediatePropagation(); } } onFormReset() { if (this.form) { this.options.setValue(this.host, this.options.defaultValue(this.host)); this.host.invalid = false; if (formResets.has(this.form)) { formResets.get(this.form).add(this.host); } else { formResets.set(this.form, /* @__PURE__ */ new Set([this.host])); } } } reportFormValidity() { if (this.form && !this.form.noValidate) { const elements = getFormControls(this.form); for (const element of elements) { if (isFunction(element.reportValidity) && !element.reportValidity()) { return false; } } } return true; } } const AnchorMixin = (superclass) => { class AnchorMixinClass extends superclass { renderAnchor({ id: id2, className: className2, part, content = ke`<slot></slot>`, refDirective, tabIndex }) { return ke`<a ${refDirective} id="${to(id2)}" class="_a ${className2 ? className2 : ""}" part="${to(part)}" href="${to(this.href)}" download="${to(this.download)}" target="${to(this.target)}" rel="${to(this.rel)}" tabindex="${to(tabIndex)}">${content}</a>`; } } __decorate([ n$1({ reflect: true }) ], AnchorMixinClass.prototype, "href", void 0); __decorate([ n$1({ reflect: true }) ], AnchorMixinClass.prototype, "download", void 0); __decorate([ n$1({ reflect: true }) ], AnchorMixinClass.prototype, "target", void 0); __decorate([ n$1({ reflect: true }) ], AnchorMixinClass.prototype, "rel", void 0); return AnchorMixinClass; }; let isClick = true; const document$1 = getDocument(); document$1.addEventListener("pointerdown", () => { isClick = true; }); document$1.addEventListener("keydown", () => { isClick = false; }); const FocusableMixin = (superclass) => { class FocusableMixinClass extends superclass { constructor() { super(...arguments); this.autofocus = false; this.focused = false; this.focusVisible = false; this.focusableDefinedController = new DefinedController(this, { relatedElements: [""] }); this._manipulatingTabindex = false; this._tabIndex = 0; } /** * 元素在使用 Tab 键切换焦点时的顺序 */ get tabIndex() { const $this = $$1(this); if (this.focusElement === this) { return Number($this.attr("tabindex") || -1); } const tabIndexAttribute = Number($this.attr("tabindex") || 0); if (this.focusDisabled || tabIndexAttribute < 0) { return -1; } if (!this.focusElement) { return tabIndexAttribute; } return this.focusElement.tabIndex; } set tabIndex(tabIndex) { if (this._manipulatingTabindex) { this._manipulatingTabindex = false; return; } const $this = $$1(this); if (this.focusElement === this) { if (tabIndex !== null) { this._tabIndex = tabIndex; } $this.attr("tabindex", this.focusDisabled ? null : tabIndex); return; } const onPointerDown = () => { if (this.tabIndex === -1) { this.tabIndex = 0; this.focus({ preventScroll: true }); } }; if (tabIndex === -1) { this.addEventListener("pointerdown", onPointerDown); } else { this._manipulatingTabindex = true; this.removeEventListener("pointerdown", onPointerDown); } if (tabIndex === -1 || this.focusDisabled) { $this.attr("tabindex", -1); if (tabIndex !== -1) { this.manageFocusElementTabindex(tabIndex); } return; } if (!this.hasAttribute("tabindex")) { this._manipulatingTabindex = false; } this.manageFocusElementTabindex(tabIndex); } /** * 父类要实现该属性，表示是否禁用 focus 状态 */ get focusDisabled() { throw new Error("Must implement focusDisabled getter!"); } /** * 最终获得焦点的元素 */ get focusElement() { throw new Error("Must implement focusElement getter!"); } connectedCallback() { super.connectedCallback(); this.updateComplete.then(() => { requestAnimationFrame(() => { this.manageAutoFocus(); }); }); } /** * 模拟鼠标点击元素 */ click() { if (this.focusDisabled) { return; } if (this.focusElement !== this) { this.focusElement.click(); } else { HTMLElement.prototype.click.apply(this); } } /** * 将焦点设置到当前元素。 * * 可以传入一个对象作为参数，该对象的属性包括： * * * `preventScroll`：默认情况下，元素获取焦点后，页面会滚动以将该元素滚动到视图中。如果不希望页面滚动，可以将此属性设置为 `true`。 */ focus(options) { if (this.focusDisabled || !this.focusElement) { return; } if (this.focusElement !== this) { this.focusElement.focus(options); } else { HTMLElement.prototype.focus.apply(this, [options]); } } /** * 移除当前元素的焦点 */ blur() { if (this.focusElement !== this) { this.focusElement.blur(); } else { HTMLElement.prototype.blur.apply(this); } } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.focusElement.addEventListener("focus", () => { this.focused = true; this.focusVisible = !isClick; }); this.focusElement.addEventListener("blur", () => { this.focused = false; this.focusVisible = false; }); } update(changedProperties) { if (this._lastFocusDisabled === void 0 || this._lastFocusDisabled !== this.focusDisabled) { this._lastFocusDisabled = this.focusDisabled; const $this = $$1(this); if (this.focusDisabled) { $this.removeAttr("tabindex"); } else { if (this.focusElement === this) { this._manipulatingTabindex = true; $this.attr("tabindex", this._tabIndex); } else if (this.tabIndex > -1) { $this.removeAttr("tabindex"); } } } super.update(changedProperties); } updated(changedProperties) { super.updated(changedProperties); if (this.focused && this.focusDisabled) { this.blur(); } } async manageFocusElementTabindex(tabIndex) { if (!this.focusElement) { await this.updateComplete; } if (tabIndex === null) { this.focusElement.removeAttribute("tabindex"); } else { this.focusElement.tabIndex = tabIndex; } } manageAutoFocus() { if (this.autofocus) { this.dispatchEvent(new KeyboardEvent("keydown", { code: "Tab" })); this.focusElement.focus(); } } } __decorate([ n$1({ type: Boolean, /** * 哪些属性需要 reflect: true？ * 一般所有属性都需要 reflect，但以下情况除外： * 1. 会频繁变更的属性 * 2. 属性同步会造成较大性能开销的属性 * 3. 复杂类型属性（数组、对象等，仅提供 property，不提供 attribute） */ reflect: true, converter: booleanConverter }) ], FocusableMixinClass.prototype, "autofocus", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], FocusableMixinClass.prototype, "focused", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "focus-visible" }) ], FocusableMixinClass.prototype, "focusVisible", void 0); __decorate([ n$1({ type: Number, attribute: "tabindex" }) ], FocusableMixinClass.prototype, "tabIndex", null); return FocusableMixinClass; }; /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const Rt = e(class extends i$1 { constructor(s2) { var _a2; if (super(s2), s2.type !== t.ATTRIBUTE || "class" !== s2.name || ((_a2 = s2.strings) == null ? void 0 : _a2.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute."); } render(t2) { return " " + Object.keys(t2).filter((s2) => t2[s2]).join(" ") + " "; } update(t2, [s2]) { var _a2, _b; if (void 0 === this.st) { this.st = /* @__PURE__ */ new Set(), void 0 !== t2.strings && (this.nt = new Set(t2.strings.join(" ").split(/\s/).filter((t3) => "" !== t3))); for (const t3 in s2) s2[t3] && !((_a2 = this.nt) == null ? void 0 : _a2.has(t3)) && this.st.add(t3); return this.render(s2); } const i3 = t2.element.classList; for (const t3 of this.st) t3 in s2 || (i3.remove(t3), this.st.delete(t3)); for (const t3 in s2) { const r2 = !!s2[t3]; r2 === this.st.has(t3) || ((_b = this.nt) == null ? void 0 : _b.has(t3)) || (r2 ? (i3.add(t3), this.st.add(t3)) : (i3.remove(t3), this.st.delete(t3))); } return R; } }); const style$j = i$3`:host{position:relative;display:inline-block;flex-shrink:0;width:2.5rem;height:2.5rem;stroke:rgb(var(--mdui-color-primary))}.progress{position:relative;display:inline-block;width:100%;height:100%;text-align:left;transition:opacity var(--mdui-motion-duration-medium1) var(--mdui-motion-easing-linear)}.determinate svg{transform:rotate(-90deg);fill:transparent}.determinate .track{stroke:transparent}.determinate .circle{stroke:inherit;transition:stroke-dashoffset var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate{font-size:0;letter-spacing:0;white-space:nowrap;animation:mdui-comp-circular-progress-rotate 1568ms var(--mdui-motion-easing-linear) infinite}.indeterminate .circle,.indeterminate .layer{position:absolute;width:100%;height:100%}.indeterminate .layer{animation:mdui-comp-circular-progress-layer-rotate 5332ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .circle{fill:transparent;stroke:inherit}.indeterminate .gap-patch{position:absolute;top:0;left:47.5%;width:5%;height:100%;overflow:hidden}.indeterminate .gap-patch .circle{left:-900%;width:2000%;transform:rotate(180deg)}.indeterminate .clipper{position:relative;display:inline-block;width:50%;height:100%;overflow:hidden}.indeterminate .clipper .circle{width:200%}.indeterminate .clipper.left .circle{animation:mdui-comp-circular-progress-left-spin 1333ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .clipper.right .circle{left:-100%;animation:mdui-comp-circular-progress-right-spin 1333ms var(--mdui-motion-easing-standard) infinite both}@keyframes mdui-comp-circular-progress-rotate{to{transform:rotate(360deg)}}@keyframes mdui-comp-circular-progress-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdui-comp-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes mdui-comp-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}100%{transform:rotate(-265deg)}}`; let CircularProgress = class CircularProgress2 extends MduiElement { constructor() { super(...arguments); this.max = 1; } render() { const isDeterminate = !isUndefined(this.value); return ke`<div class="progress ${Rt({ determinate: isDeterminate, indeterminate: !isDeterminate })}">${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}</div>`; } renderDeterminate() { const value = this.value; const strokeWidth = 4; const circleRadius = 18; const π = 3.1415926; const center = circleRadius + strokeWidth / 2; const circumference = 2 * π * circleRadius; const determinateStrokeDashOffset = (1 - value / Math.max(this.max ?? value, value)) * circumference; return ke`<svg viewBox="0 0 ${center * 2} ${center * 2}"><circle class="track" cx="${center}" cy="${center}" r="${circleRadius}" stroke-width="${strokeWidth}"></circle><circle class="circle" cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${2 * π * circleRadius}" stroke-dashoffset="${determinateStrokeDashOffset}" stroke-width="${strokeWidth}"></circle></svg>`; } renderInDeterminate() { const strokeWidth = 4; const circleRadius = 18; const π = 3.1415926; const center = circleRadius + strokeWidth / 2; const circumference = 2 * π * circleRadius; const halfCircumference = 0.5 * circumference; const circle = (thisStrokeWidth) => ke`<svg class="circle" viewBox="0 0 ${center * 2} ${center * 2}"><circle cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${circumference}" stroke-dashoffset="${halfCircumference}" stroke-width="${thisStrokeWidth}"></circle></svg>`; return ke`<div class="layer"><div class="clipper left">${circle(strokeWidth)}</div><div class="gap-patch">${circle(strokeWidth * 0.8)}</div><div class="clipper right">${circle(strokeWidth)}</div></div>`; } }; CircularProgress.styles = [componentStyle, style$j]; __decorate([ n$1({ type: Number, reflect: true }) ], CircularProgress.prototype, "max", void 0); __decorate([ n$1({ type: Number }) ], CircularProgress.prototype, "value", void 0); CircularProgress = __decorate([ t$1("mdui-circular-progress") ], CircularProgress); const style$i = i$3`:host{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.surface{position:absolute;top:0;left:0;width:100%;height:100%;transition-duration:280ms;transition-property:background-color;pointer-events:none;transition-timing-function:var(--mdui-motion-easing-standard)}.hover{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-hover))}:host-context([focus-visible]) .focused{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-focus))}.dragged{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-dragged))}.wave{position:absolute;z-index:1;background-color:rgb(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)));border-radius:50%;transform:translate3d(0,0,0) scale(.4);opacity:0;animation:225ms ease 0s 1 normal forwards running mdui-comp-ripple-radius-in,75ms ease 0s 1 normal forwards running mdui-comp-ripple-opacity-in;pointer-events:none}.out{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1);animation:150ms ease 0s 1 normal none running mdui-comp-ripple-opacity-out}@keyframes mdui-comp-ripple-radius-in{from{transform:translate3d(0,0,0) scale(.4);animation-timing-function:var(--mdui-motion-easing-standard)}to{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1)}}@keyframes mdui-comp-ripple-opacity-in{from{opacity:0;animation-timing-function:linear}to{opacity:var(--mdui-state-layer-pressed)}}@keyframes mdui-comp-ripple-opacity-out{from{animation-timing-function:linear;opacity:var(--mdui-state-layer-pressed)}to{opacity:0}}`; let Ripple = class Ripple2 extends MduiElement { constructor() { super(...arguments); this.noRipple = false; this.hover = false; this.focused = false; this.dragged = false; this.surfaceRef = ii(); } startPress(event) { if (this.noRipple) { return; } const $surface = $$1(this.surfaceRef.value); const surfaceHeight = $surface.innerHeight(); const surfaceWidth = $surface.innerWidth(); let touchStartX; let touchStartY; if (!event) { touchStartX = surfaceWidth / 2; touchStartY = surfaceHeight / 2; } else { const touchPosition = typeof TouchEvent !== "undefined" && event instanceof TouchEvent && event.touches.length ? event.touches[0] : event; const offset = $surface.offset(); if (touchPosition.pageX < offset.left || touchPosition.pageX > offset.left + surfaceWidth || touchPosition.pageY < offset.top || touchPosition.pageY > offset.top + surfaceHeight) { return; } touchStartX = touchPosition.pageX - offset.left; touchStartY = touchPosition.pageY - offset.top; } const diameter = Math.max(Math.pow(Math.pow(surfaceHeight, 2) + Math.pow(surfaceWidth, 2), 0.5), 48); const translateX = `${-touchStartX + surfaceWidth / 2}px`; const translateY = `${-touchStartY + surfaceHeight / 2}px`; const translate = `translate3d(${translateX}, ${translateY}, 0) scale(1)`; $$1('<div class="wave"></div>').css({ width: diameter, height: diameter, marginTop: -diameter / 2, marginLeft: -diameter / 2, left: touchStartX, top: touchStartY }).each((_2, wave) => { wave.style.setProperty("--mdui-comp-ripple-transition-x", translateX); wave.style.setProperty("--mdui-comp-ripple-transition-y", translateY); }).prependTo(this.surfaceRef.value).each((_2, wave) => wave.clientLeft).css("transform", translate).on("animationend", function(e2) { const event2 = e2; if (event2.animationName === "mdui-comp-ripple-radius-in") { $$1(this).data("filled", true); } }); } endPress() { const $waves = $$1(this.surfaceRef.value).children().filter((_2, wave) => !$$1(wave).data("removing")).data("removing", true); const hideAndRemove = ($waves2) => { $waves2.addClass("out").each((_2, wave) => wave.clientLeft).on("animationend", function() { $$1(this).remove(); }); }; $waves.filter((_2, wave) => !$$1(wave).data("filled")).on("animationend", function(e2) { const event = e2; if (event.animationName === "mdui-comp-ripple-radius-in") { hideAndRemove($$1(this)); } }); hideAndRemove($waves.filter((_2, wave) => !!$$1(wave).data("filled"))); } startHover() { this.hover = true; } endHover() { this.hover = false; } startFocus() { this.focused = true; } endFocus() { this.focused = false; } startDrag() { this.dragged = true; } endDrag() { this.dragged = false; } render() { return ke`<div ${Kt(this.surfaceRef)} class="surface ${Rt({ hover: this.hover, focused: this.focused, dragged: this.dragged })}"></div>`; } }; Ripple.styles = [componentStyle, style$i]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "no-ripple" }) ], Ripple.prototype, "noRipple", void 0); __decorate([ r$1() ], Ripple.prototype, "hover", void 0); __decorate([ r$1() ], Ripple.prototype, "focused", void 0); __decorate([ r$1() ], Ripple.prototype, "dragged", void 0); Ripple = __decorate([ t$1("mdui-ripple") ], Ripple); const RippleMixin = (superclass) => { class Mixin extends superclass { constructor() { super(...arguments); this.noRipple = false; this.rippleIndex = void 0; this.getRippleIndex = () => this.rippleIndex; } /** * 子类要添加该属性，指向 <mdui-ripple> 元素 * 如果一个组件中包含多个 <mdui-ripple> 元素，则这里可以是一个数组或 NodeList */ get rippleElement() { throw new Error("Must implement rippleElement getter!"); } /** * 子类要实现该属性，表示是否禁用 ripple * 如果一个组件中包含多个 <mdui-ripple> 元素，则这里可以是一个数组；也可以是单个值，同时控制多个 <mdui-ripple> 元素 */ get rippleDisabled() { throw new Error("Must implement rippleDisabled getter!"); } /** * 当前 <mdui-ripple> 元素相对于哪个元素存在，即 hover、pressed、dragged 属性要添加到哪个元素上，默认为 :host * 如果需要修改该属性，则子类可以实现该属性 * 如果一个组件中包含多个 <mdui-ripple> 元素，则这里可以是一个数组；也可以是单个值，同时控制多个 <mdui-ripple> 元素 */ get rippleTarget() { return this; } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); const $rippleTarget = $$1(this.rippleTarget); const setRippleIndex = (event) => { if (isArrayLike(this.rippleTarget)) { this.rippleIndex = $rippleTarget.index(event.target); } }; const rippleTargetArr = isArrayLike(this.rippleTarget) ? this.rippleTarget : [this.rippleTarget]; rippleTargetArr.forEach((rippleTarget) => { rippleTarget.addEventListener("pointerdown", (event) => { setRippleIndex(event); this.startPress(event); }); rippleTarget.addEventListener("pointerenter", (event) => { setRippleIndex(event); this.startHover(event); }); rippleTarget.addEventListener("pointerleave", (event) => { setRippleIndex(event); this.endHover(event); }); rippleTarget.addEventListener("focus", (event) => { setRippleIndex(event); this.startFocus(); }); rippleTarget.addEventListener("blur", (event) => { setRippleIndex(event); this.endFocus(); }); }); } /** * 若存在多个 <mdui-ripple>，但 rippleTarget 为同一个，则 hover 状态无法在多个 <mdui-ripple> 之间切换 * 所以把 startHover 和 endHover 设置为 protected，供子类调用 * 子类中，在 getRippleIndex() 的返回值变更前调用 endHover(event)，变更后调用 startHover(event) */ startHover(event) { if (event.pointerType !== "mouse" || this.isRippleDisabled()) { return; } this.getRippleTarget().setAttribute("hover", ""); this.getRippleElement().startHover(); } endHover(event) { if (event.pointerType !== "mouse" || this.isRippleDisabled()) { return; } this.getRippleTarget().removeAttribute("hover"); this.getRippleElement().endHover(); } /** * 当前激活的 <mdui-ripple> 元素是否被禁用 */ isRippleDisabled() { const disabled = this.rippleDisabled; if (!Array.isArray(disabled)) { return disabled; } const rippleIndex = this.getRippleIndex(); if (rippleIndex !== void 0) { return disabled[rippleIndex]; } return disabled.length ? disabled[0] : false; } /** * 获取当前激活的 <mdui-ripple> 元素实例 */ getRippleElement() { const ripple = this.rippleElement; if (!isArrayLike(ripple)) { return ripple; } const rippleIndex = this.getRippleIndex(); if (rippleIndex !== void 0) { return ripple[rippleIndex]; } return ripple[0]; } /** * 获取当前激活的 <mdui-ripple> 元素相对于哪个元素存在 */ getRippleTarget() { const target = this.rippleTarget; if (!isArrayLike(target)) { return target; } const rippleIndex = this.getRippleIndex(); if (rippleIndex !== void 0) { return target[rippleIndex]; } return target[0]; } startFocus() { if (this.isRippleDisabled()) { return; } this.getRippleElement().startFocus(); } endFocus() { if (this.isRippleDisabled()) { return; } this.getRippleElement().endFocus(); } startPress(event) { if (this.isRippleDisabled() || event.button) { return; } const target = this.getRippleTarget(); target.setAttribute("pressed", ""); if (["touch", "pen"].includes(event.pointerType)) { let hidden = false; let timer = setTimeout(() => { timer = 0; this.getRippleElement().startPress(event); }, 70); const hideRipple = () => { if (timer) { clearTimeout(timer); timer = 0; this.getRippleElement().startPress(event); } if (!hidden) { hidden = true; this.endPress(); } target.removeEventListener("pointerup", hideRipple); target.removeEventListener("pointercancel", hideRipple); }; const touchMove = () => { if (timer) { clearTimeout(timer); timer = 0; } target.removeEventListener("touchmove", touchMove); }; target.addEventListener("touchmove", touchMove); target.addEventListener("pointerup", hideRipple); target.addEventListener("pointercancel", hideRipple); } if (event.pointerType === "mouse" && event.button === 0) { const hideRipple = () => { this.endPress(); target.removeEventListener("pointerup", hideRipple); target.removeEventListener("pointercancel", hideRipple); target.removeEventListener("pointerleave", hideRipple); }; this.getRippleElement().startPress(event); target.addEventListener("pointerup", hideRipple); target.addEventListener("pointercancel", hideRipple); target.addEventListener("pointerleave", hideRipple); } } endPress() { if (this.isRippleDisabled()) { return; } this.getRippleTarget().removeAttribute("pressed"); this.getRippleElement().endPress(); } startDrag() { if (this.isRippleDisabled()) { return; } this.getRippleElement().startDrag(); } endDrag() { if (this.isRippleDisabled()) { return; } this.getRippleElement().endDrag(); } } __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "no-ripple" }) ], Mixin.prototype, "noRipple", void 0); return Mixin; }; const buttonBaseStyle = i$3`.button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;overflow:hidden;color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit;white-space:nowrap;text-align:center;text-decoration:none;vertical-align:middle;background:0 0;border:none;outline:0;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}`; class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) { constructor() { super(...arguments); this.disabled = false; this.loading = false; this.name = ""; this.value = ""; this.type = "button"; this.formNoValidate = false; this.formController = new FormController(this); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { if (this.isButton()) { return this.focusElement.validity; } } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { if (this.isButton()) { return this.focusElement.validationMessage; } } get rippleDisabled() { return this.disabled || this.loading; } get focusElement() { var _a2, _b; return this.isButton() ? (_a2 = this.renderRoot) == null ? void 0 : _a2.querySelector("._button") : !this.focusDisabled ? (_b = this.renderRoot) == null ? void 0 : _b.querySelector("._a") : this; } get focusDisabled() { return this.disabled || this.loading; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { if (this.isButton()) { const valid = this.focusElement.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } return true; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { if (this.isButton()) { const invalid = !this.focusElement.reportValidity(); if (invalid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return !invalid; } return true; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { if (this.isButton()) { this.focusElement.setCustomValidity(message); } } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.addEventListener("click", () => { if (this.type === "submit") { this.formController.submit(this); } if (this.type === "reset") { this.formController.reset(this); } }); } renderLoading() { return this.loading ? ke`<mdui-circular-progress part="loading"></mdui-circular-progress>` : nothingTemplate; } renderButton({ id: id2, className: className2, part, content = ke`<slot></slot>` }) { return ke`<button id="${to(id2)}" class="${cc(["_button", className2])}" part="${to(part)}" ?disabled="${this.rippleDisabled || this.focusDisabled}">${content}</button>`; } isButton() { return !this.href; } } ButtonBase.styles = [ componentStyle, buttonBaseStyle ]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ButtonBase.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ButtonBase.prototype, "loading", void 0); __decorate([ n$1({ reflect: true }) ], ButtonBase.prototype, "name", void 0); __decorate([ n$1({ reflect: true }) ], ButtonBase.prototype, "value", void 0); __decorate([ n$1({ reflect: true }) ], ButtonBase.prototype, "type", void 0); __decorate([ n$1({ reflect: true }) ], ButtonBase.prototype, "form", void 0); __decorate([ n$1({ reflect: true, attribute: "formaction" }) ], ButtonBase.prototype, "formAction", void 0); __decorate([ n$1({ reflect: true, attribute: "formenctype" }) ], ButtonBase.prototype, "formEnctype", void 0); __decorate([ n$1({ reflect: true, attribute: "formmethod" }) ], ButtonBase.prototype, "formMethod", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "formnovalidate" }) ], ButtonBase.prototype, "formNoValidate", void 0); __decorate([ n$1({ reflect: true, attribute: "formtarget" }) ], ButtonBase.prototype, "formTarget", void 0); const style$h = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);min-width:3rem;height:2.5rem;color:rgb(var(--mdui-color-primary));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{width:100%;padding:0 1rem}:host([full-width]){display:block}:host([variant=elevated]){box-shadow:var(--mdui-elevation-level1);background-color:rgb(var(--mdui-color-surface-container-low));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-secondary-container )}:host([variant=outlined]){border:.0625rem solid rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=text]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=outlined][focus-visible]){border-color:rgb(var(--mdui-color-primary))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=tonal][hover]){box-shadow:var(--mdui-elevation-level1)}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([variant=elevated][disabled]),:host([variant=filled][disabled]),:host([variant=tonal][disabled]){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([variant=outlined][disabled]){border-color:rgba(var(--mdui-color-on-surface),12%)}.label{display:inline-flex;padding-right:.5rem;padding-left:.5rem}.end-icon,.icon{display:inline-flex;font-size:1.28571429em}.end-icon mdui-icon,.icon mdui-icon,::slotted([slot=end-icon]),::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.125rem;height:1.125rem}:host([variant=filled]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([variant=tonal]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-secondary-container))}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`; let Button = class Button2 extends ButtonBase { constructor() { super(...arguments); this.variant = "filled"; this.fullWidth = false; this.rippleRef = ii(); } get rippleElement() { return this.rippleRef.value; } render() { return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton() ? this.renderButton({ className: "button", part: "button", content: this.renderInner() }) : this.disabled || this.loading ? ke`<span part="button" class="button _a">${this.renderInner()}</span>` : this.renderAnchor({ className: "button", part: "button", content: this.renderInner() })}`; } renderIcon() { if (this.loading) { return this.renderLoading(); } return ke`<slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot>`; } renderLabel() { return ke`<slot part="label" class="label"></slot>`; } renderEndIcon() { return ke`<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon ? ke`<mdui-icon name="${this.endIcon}"></mdui-icon>` : nothingTemplate}</slot>`; } renderInner() { return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()]; } }; Button.styles = [ButtonBase.styles, style$h]; __decorate([ n$1({ reflect: true }) ], Button.prototype, "variant", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "full-width" }) ], Button.prototype, "fullWidth", void 0); __decorate([ n$1({ reflect: true }) ], Button.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], Button.prototype, "endIcon", void 0); Button = __decorate([ t$1("mdui-button") ], Button); const style$g = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:1.5rem;width:2.5rem;height:2.5rem}:host([variant=standard]){color:rgb(var(--mdui-color-on-surface-variant));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=filled]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-highest));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=outlined]){border:.0625rem solid rgb(var(--mdui-color-outline));color:rgb(var(--mdui-color-on-surface-variant));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=outlined][pressed]){color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([variant=standard][selected]){color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]:not([selectable])),:host([variant=filled][selected]){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]:not([selectable])),:host([variant=tonal][selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-secondary-container )}:host([variant=outlined][selected]){border:none;color:rgb(var(--mdui-color-inverse-on-surface));background-color:rgb(var(--mdui-color-inverse-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}:host([variant=filled][disabled]),:host([variant=outlined][disabled]),:host([variant=tonal][disabled]){background-color:rgba(var(--mdui-color-on-surface),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),.38)!important}:host([loading]) .button,:host([loading]) mdui-ripple{opacity:0}.button{float:left;width:100%}.icon,.selected-icon mdui-icon,::slotted(*){font-size:inherit}mdui-circular-progress{display:flex;position:absolute;top:calc(50% - 1.5rem / 2);left:calc(50% - 1.5rem / 2);width:1.5rem;height:1.5rem}:host([variant=filled]:not([disabled])) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`; let ButtonIcon = class ButtonIcon2 extends ButtonBase { constructor() { super(...arguments); this.variant = "standard"; this.selectable = false; this.selected = false; this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "[default]", "selected-icon"); } get rippleElement() { return this.rippleRef.value; } onSelectedChange() { this.emit("change"); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.addEventListener("click", () => { if (!this.selectable || this.disabled) { return; } this.selected = !this.selected; }); } render() { return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton() ? this.renderButton({ className: "button", part: "button", content: this.renderIcon() }) : this.disabled || this.loading ? ke`<span part="button" class="button _a">${this.renderIcon()}</span>` : this.renderAnchor({ className: "button", part: "button", content: this.renderIcon() })} ${this.renderLoading()}`; } renderIcon() { const icon = () => this.hasSlotController.test("[default]") ? ke`<slot></slot>` : this.icon ? ke`<mdui-icon part="icon" class="icon" name="${this.icon}"></mdui-icon>` : nothingTemplate; const selectedIcon = () => this.hasSlotController.test("selected-icon") || this.selectedIcon ? ke`<slot name="selected-icon" part="selected-icon" class="selected-icon"><mdui-icon name="${this.selectedIcon}"></mdui-icon></slot>` : icon(); return this.selected ? selectedIcon() : icon(); } }; ButtonIcon.styles = [ButtonBase.styles, style$g]; __decorate([ n$1({ reflect: true }) ], ButtonIcon.prototype, "variant", void 0); __decorate([ n$1({ reflect: true }) ], ButtonIcon.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "selected-icon" }) ], ButtonIcon.prototype, "selectedIcon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ButtonIcon.prototype, "selectable", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ButtonIcon.prototype, "selected", void 0); __decorate([ watch("selected", true) ], ButtonIcon.prototype, "onSelectedChange", null); ButtonIcon = __decorate([ t$1("mdui-button-icon") ], ButtonIcon); const style$f = i$3`:host{--shape-corner:var(--mdui-shape-corner-medium);position:relative;display:inline-block;overflow:hidden;border-radius:var(--shape-corner);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([clickable]){cursor:pointer}:host([variant=elevated]){background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([variant=filled]){background-color:rgb(var(--mdui-color-surface-container-highest))}:host([variant=outlined]){background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=outlined][hover]){box-shadow:var(--mdui-elevation-level1)}:host([variant=elevated][dragged]),:host([variant=filled][dragged]),:host([variant=outlined][dragged]){box-shadow:var(--mdui-elevation-level3)}:host([disabled]){opacity:.38;cursor:default;-webkit-user-select:none;user-select:none}:host([variant=elevated][disabled]){background-color:rgb(var(--mdui-color-surface-variant));box-shadow:var(--mdui-elevation-level0)}:host([variant=filled][disabled]){background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level1)}:host([variant=outlined][disabled]){box-shadow:var(--mdui-elevation-level0);border-color:rgba(var(--mdui-color-outline),.32)}.link{position:relative;display:inline-block;width:100%;height:100%;color:inherit;font-size:inherit;letter-spacing:inherit;text-decoration:none;touch-action:manipulation;-webkit-user-drag:none}`; let Card = class Card2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) { constructor() { super(...arguments); this.variant = "elevated"; this.clickable = false; this.disabled = false; this.rippleRef = ii(); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.disabled || !this.href && !this.clickable; } get focusElement() { return this.href && !this.disabled ? this.renderRoot.querySelector("._a") : this; } get focusDisabled() { return this.rippleDisabled; } render() { return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled ? this.renderAnchor({ className: "link", content: ke`<slot></slot>` }) : ke`<slot></slot>`}`; } }; Card.styles = [componentStyle, style$f]; __decorate([ n$1({ reflect: true }) ], Card.prototype, "variant", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Card.prototype, "clickable", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Card.prototype, "disabled", void 0); Card = __decorate([ t$1("mdui-card") ], Card); /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const Ft = e(class extends i$1 { constructor(r2) { if (super(r2), r2.type !== t.PROPERTY && r2.type !== t.ATTRIBUTE && r2.type !== t.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings"); if (!rt(r2)) throw Error("`live` bindings can only contain a single expression"); } render(r2) { return r2; } update(r2, [e2]) { if (e2 === R || e2 === D) return e2; const i3 = r2.element, n3 = r2.name; if (r2.type === t.PROPERTY) { if (e2 === i3[n3]) return R; } else if (r2.type === t.BOOLEAN_ATTRIBUTE) { if (!!e2 === i3.hasAttribute(n3)) return R; } else if (r2.type === t.ATTRIBUTE && i3.getAttribute(n3) === e2 + "") return R; return dt(r2), e2; } }); function defaultValue(propertyName = "value") { return (proto, key2) => { const constructor = proto.constructor; const attributeChangedCallback = constructor.prototype.attributeChangedCallback; constructor.prototype.attributeChangedCallback = function(name, old, value) { const options = constructor.getPropertyOptions(propertyName); const attributeName = isString(options.attribute) ? options.attribute : propertyName; if (name === attributeName) { const converter = options.converter || u; const fromAttribute = isFunction(converter) ? converter : (converter == null ? void 0 : converter.fromAttribute) ?? u.fromAttribute; const newValue = fromAttribute(value, options.type); if (this[propertyName] !== newValue) { this[key2] = newValue; } } attributeChangedCallback.call(this, name, old, value); }; }; } const style$e = i$3`:host{display:inline-block;width:1em;height:1em;line-height:1;font-size:1.5rem}`; const svgTag = (svgPaths) => ke`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor">${fe(svgPaths)}</svg>`; let IconCheckBoxOutlineBlank = class IconCheckBoxOutlineBlank2 extends h { render() { return svgTag('<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>'); } }; IconCheckBoxOutlineBlank.styles = style$e; IconCheckBoxOutlineBlank = __decorate([ t$1("mdui-icon-check-box-outline-blank") ], IconCheckBoxOutlineBlank); let IconCheckBox = class IconCheckBox2 extends h { render() { return svgTag('<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>'); } }; IconCheckBox.styles = style$e; IconCheckBox = __decorate([ t$1("mdui-icon-check-box") ], IconCheckBox); let IconIndeterminateCheckBox = class IconIndeterminateCheckBox2 extends h { render() { return svgTag('<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>'); } }; IconIndeterminateCheckBox.styles = style$e; IconIndeterminateCheckBox = __decorate([ t$1("mdui-icon-indeterminate-check-box") ], IconIndeterminateCheckBox); const style$d = i$3`:host{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:.125rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}label{display:inline-flex;align-items:center;width:100%;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.125rem;height:1.125rem;margin:0 0 0 .6875rem}.icon{display:flex;position:absolute;opacity:1;transform:scale(1);color:rgb(var(--mdui-color-on-surface));font-size:1.5rem;transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.checked-icon,.indeterminate-icon{opacity:0;transform:scale(.5);transition-property:color,opacity,transform;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=indeterminate-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:50%;width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface));transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .indeterminate-icon{opacity:0;transform:scale(.5)}:host([checked]) .checked-icon{opacity:1;transform:scale(1)}:host([indeterminate]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([indeterminate]) .icon{color:rgb(var(--mdui-color-primary))}:host([indeterminate]) .checked-icon{opacity:0;transform:scale(.5)}:host([indeterminate]) .indeterminate-icon{opacity:1;transform:scale(1)}.invalid i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.invalid .icon{color:rgb(var(--mdui-color-error))}.invalid .label{color:rgb(var(--mdui-color-error))}:host([disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled][checked]) .unchecked-icon,:host([disabled][indeterminate]) .unchecked-icon{opacity:0}`; let Checkbox = class Checkbox2 extends RippleMixin(FocusableMixin(MduiElement)) { constructor() { super(...arguments); this.disabled = false; this.checked = false; this.defaultChecked = false; this.indeterminate = false; this.required = false; this.name = ""; this.value = "on"; this.invalid = false; this.inputRef = ii(); this.rippleRef = ii(); this.formController = new FormController(this, { value: (control) => control.checked ? control.value : void 0, defaultValue: (control) => control.defaultChecked, setValue: (control, checked) => control.checked = checked }); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.inputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.inputRef.value.validationMessage; } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.disabled; } get focusElement() { return this.inputRef.value; } get focusDisabled() { return this.disabled; } async onDisabledChange() { await this.updateComplete; this.invalid = !this.inputRef.value.checkValidity(); } async onCheckedChange() { var _a2; await this.updateComplete; const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.inputRef.value.checkValidity(); } } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.inputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.inputRef.value.reportValidity(); if (this.invalid) { const eventProceeded = this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); if (!eventProceeded) { this.blur(); this.focus(); } } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.inputRef.value.setCustomValidity(message); this.invalid = !this.inputRef.value.checkValidity(); } render() { return ke`<label class="${Rt({ invalid: this.invalid })}"><input ${Kt(this.inputRef)} type="checkbox" name="${to(this.name)}" value="${to(this.value)}" .indeterminate="${Ft(this.indeterminate)}" .disabled="${this.disabled}" .checked="${Ft(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <i part="control"><mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon ? ke`<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-check-box-outline-blank class="i"></mdui-icon-check-box-outline-blank>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon ? ke`<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-check-box class="i"></mdui-icon-check-box>`}</slot><slot name="indeterminate-icon" part="indeterminate-icon" class="icon indeterminate-icon">${this.indeterminateIcon ? ke`<mdui-icon name="${this.indeterminateIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-indeterminate-check-box class="i"></mdui-icon-indeterminate-check-box>`}</slot></i><slot part="label" class="label"></slot></label>`; } /** * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom */ onChange() { this.checked = this.inputRef.value.checked; this.indeterminate = false; this.emit("change"); } }; Checkbox.styles = [componentStyle, style$d]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Checkbox.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Checkbox.prototype, "checked", void 0); __decorate([ defaultValue("checked") ], Checkbox.prototype, "defaultChecked", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Checkbox.prototype, "indeterminate", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Checkbox.prototype, "required", void 0); __decorate([ n$1({ reflect: true }) ], Checkbox.prototype, "form", void 0); __decorate([ n$1({ reflect: true }) ], Checkbox.prototype, "name", void 0); __decorate([ n$1({ reflect: true }) ], Checkbox.prototype, "value", void 0); __decorate([ n$1({ reflect: true, attribute: "unchecked-icon" }) ], Checkbox.prototype, "uncheckedIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "checked-icon" }) ], Checkbox.prototype, "checkedIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "indeterminate-icon" }) ], Checkbox.prototype, "indeterminateIcon", void 0); __decorate([ r$1() ], Checkbox.prototype, "invalid", void 0); __decorate([ watch("disabled", true), watch("indeterminate", true), watch("required", true) ], Checkbox.prototype, "onDisabledChange", null); __decorate([ watch("checked", true) ], Checkbox.prototype, "onCheckedChange", null); Checkbox = __decorate([ t$1("mdui-checkbox") ], Checkbox); let IconCheck = class IconCheck2 extends h { render() { return svgTag('<path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>'); } }; IconCheck.styles = style$e; IconCheck = __decorate([ t$1("mdui-icon-check") ], IconCheck); let IconClear = class IconClear2 extends h { render() { return svgTag('<path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>'); } }; IconClear.styles = style$e; IconClear = __decorate([ t$1("mdui-icon-clear") ], IconClear); const style$c = i$3`:host{--shape-corner:var(--mdui-shape-corner-small);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);height:2rem;background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline));color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.button{padding-right:.4375rem;padding-left:.4375rem}:host([variant=input]) .button{padding-right:.1875rem;padding-left:.1875rem}:host([selected]) .button{padding-right:.5rem;padding-left:.5rem}:host([selected][variant=input]) .button{padding-right:.25rem;padding-left:.25rem}:host([elevated]) .button{padding-right:.5rem;padding-left:.5rem}:host([variant=assist]){color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([elevated]){border-width:0;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));border-width:0;--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-secondary-container )}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){border-color:rgba(var(--mdui-color-on-surface),12%);color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([disabled][elevated]),:host([disabled][selected]){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([selected][hover]){box-shadow:var(--mdui-elevation-level1)}:host([elevated][hover]){color:rgb(var(--mdui-color-on-secondary-container));box-shadow:var(--mdui-elevation-level2)}:host([variant=filter][hover]),:host([variant=input][hover]),:host([variant=suggestion][hover]){color:rgb(var(--mdui-color-on-surface-variant))}:host([variant=filter][focus-visible]),:host([variant=input][focus-visible]),:host([variant=suggestion][focus-visible]){border-color:rgb(var(--mdui-color-on-surface-variant))}:host([dragged]),:host([dragged][hover]){box-shadow:var(--mdui-elevation-level4)}.button{overflow:visible}.label{display:inline-flex;padding-right:.5rem;padding-left:.5rem}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em;color:rgb(var(--mdui-color-on-surface-variant))}:host([variant=assist]) .end-icon,:host([variant=assist]) .icon,:host([variant=assist]) .selected-icon{color:rgb(var(--mdui-color-primary))}:host([selected]) .end-icon,:host([selected]) .icon,:host([selected]) .selected-icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([disabled]) .selected-icon{opacity:.38;color:rgb(var(--mdui-color-on-surface))}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}:host([variant=input]) .has-icon .icon,:host([variant=input]) .has-icon .selected-icon,:host([variant=input]) .has-icon mdui-circular-progress{margin-left:.25rem}:host([variant=input]) .has-end-icon .end-icon{margin-right:.25rem}mdui-circular-progress{display:inline-flex;width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}::slotted(mdui-avatar[slot=end-icon]),::slotted(mdui-avatar[slot=icon]),::slotted(mdui-avatar[slot=selected-icon]){width:1.5rem;height:1.5rem}:host([disabled]) ::slotted(mdui-avatar[slot=end-icon]),:host([disabled]) ::slotted(mdui-avatar[slot=icon]),:host([disabled]) ::slotted(mdui-avatar[slot=selected-icon]){opacity:.38}::slotted(mdui-avatar[slot=icon]),::slotted(mdui-avatar[slot=selected-icon]){margin-left:-.25rem;margin-right:-.125rem}::slotted(mdui-avatar[slot=end-icon]){margin-right:-.25rem;margin-left:-.125rem}.delete-icon{display:inline-flex;font-size:1.28571429em;transition:background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);border-radius:var(--mdui-shape-corner-full);margin-right:-.25rem;margin-left:-.25rem;padding:.25rem;color:rgb(var(--mdui-color-on-surface-variant))}.delete-icon:hover{background-color:rgba(var(--mdui-color-on-surface-variant),12%)}.has-end-icon .delete-icon{margin-left:.25rem}:host([variant=assiat]) .delete-icon{color:rgb(var(--mdui-color-primary))}:host([variant=input]) .delete-icon{margin-right:.0625rem}:host([disabled]) .delete-icon{color:rgba(var(--mdui-color-on-surface),38%)}.delete-icon .i,::slotted([slot=delete-icon]){font-size:inherit}::slotted(mdui-avatar[slot=delete-icon]){width:1.125rem;height:1.125rem}`; let Chip = class Chip2 extends ButtonBase { constructor() { super(); this.variant = "assist"; this.elevated = false; this.selectable = false; this.selected = false; this.deletable = false; this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "icon", "selected-icon", "end-icon"); this.onClick = this.onClick.bind(this); this.onKeyDown = this.onKeyDown.bind(this); } get rippleElement() { return this.rippleRef.value; } onSelectedChange() { this.emit("change"); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.addEventListener("click", this.onClick); this.addEventListener("keydown", this.onKeyDown); } render() { const hasIcon = this.icon || this.hasSlotController.test("icon"); const hasEndIcon = this.endIcon || this.hasSlotController.test("end-icon"); const hasSelectedIcon = this.selectedIcon || ["assist", "filter"].includes(this.variant) || hasIcon || this.hasSlotController.test("selected-icon"); const className2 = cc({ button: true, "has-icon": this.loading || !this.selected && hasIcon || this.selected && hasSelectedIcon, "has-end-icon": hasEndIcon }); return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton() ? this.renderButton({ className: className2, part: "button", content: this.renderInner() }) : this.disabled || this.loading ? ke`<span part="button" class="${className2} _a">${this.renderInner()}</span>` : this.renderAnchor({ className: className2, part: "button", content: this.renderInner() })}`; } onClick() { if (this.disabled || this.loading) { return; } if (this.selectable) { this.selected = !this.selected; } } onKeyDown(event) { if (this.disabled || this.loading) { return; } if (this.selectable && event.key === " ") { event.preventDefault(); this.selected = !this.selected; } if (this.deletable && ["Delete", "Backspace"].includes(event.key)) { this.emit("delete"); } } /** * 点击删除按钮 */ onDelete(event) { event.stopPropagation(); this.emit("delete"); } renderIcon() { if (this.loading) { return this.renderLoading(); } const icon = () => { return this.icon ? ke`<mdui-icon name="${this.icon}" class="i"></mdui-icon>` : nothingTemplate; }; const selectedIcon = () => { if (this.selectedIcon) { return ke`<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`; } if (this.variant === "assist" || this.variant === "filter") { return ke`<mdui-icon-check class="i"></mdui-icon-check>`; } return icon(); }; return !this.selected ? ke`<slot name="icon" part="icon" class="icon">${icon()}</slot>` : ke`<slot name="selected-icon" part="selected-icon" class="selected-icon">${selectedIcon()}</slot>`; } renderLabel() { return ke`<slot part="label" class="label"></slot>`; } renderEndIcon() { return ke`<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon ? ke`<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>` : nothingTemplate}</slot>`; } renderDeleteIcon() { if (!this.deletable) { return nothingTemplate; } return ke`<slot name="delete-icon" part="delete-icon" class="delete-icon" @click="${this.onDelete}">${this.deleteIcon ? ke`<mdui-icon name="${this.deleteIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot>`; } renderInner() { return [ this.renderIcon(), this.renderLabel(), this.renderEndIcon(), this.renderDeleteIcon() ]; } }; Chip.styles = [ButtonBase.styles, style$c]; __decorate([ n$1({ reflect: true }) ], Chip.prototype, "variant", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Chip.prototype, "elevated", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Chip.prototype, "selectable", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Chip.prototype, "selected", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Chip.prototype, "deletable", void 0); __decorate([ n$1({ reflect: true }) ], Chip.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "selected-icon" }) ], Chip.prototype, "selectedIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], Chip.prototype, "endIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "delete-icon" }) ], Chip.prototype, "deleteIcon", void 0); __decorate([ watch("selected", true) ], Chip.prototype, "onSelectedChange", null); Chip = __decorate([ t$1("mdui-chip") ], Chip); const arraysEqualIgnoreOrder = (a2, b3) => { if (a2.length !== b3.length) { return false; } const sortedA = [...a2].sort(); const sortedB = [...b3].sort(); return sortedA.every((value, index) => value === sortedB[index]); }; const collapseStyle = i$3`:host{display:block}`; let Collapse = class Collapse2 extends MduiElement { constructor() { super(...arguments); this.accordion = false; this.disabled = false; this.activeKeys = []; this.isInitial = true; this.definedController = new DefinedController(this, { relatedElements: ["mdui-collapse-item"] }); } async onActiveKeysChange() { var _a2; await this.definedController.whenDefined(); const value = this.accordion ? (_a2 = this.items.find((item) => this.activeKeys.includes(item.key))) == null ? void 0 : _a2.value : this.items.filter((item) => this.activeKeys.includes(item.key)).map((item) => item.value); this.setValue(value); if (!this.isInitial) { this.emit("change"); } } async onValueChange() { this.isInitial = !this.hasUpdated; await this.definedController.whenDefined(); if (this.accordion) { const value = this.value; if (!value) { this.setActiveKeys([]); } else { const item = this.items.find((item2) => item2.value === value); this.setActiveKeys(item ? [item.key] : []); } } else { const value = this.value; if (!value.length) { this.setActiveKeys([]); } else { const activeKeys = this.items.filter((item) => value.includes(item.value)).map((item) => item.key); this.setActiveKeys(activeKeys); } } this.updateItems(); } render() { return ke`<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`; } setActiveKeys(activeKeys) { if (!arraysEqualIgnoreOrder(this.activeKeys, activeKeys)) { this.activeKeys = activeKeys; } } setValue(value) { if (this.accordion || isUndefined(this.value) || isUndefined(value)) { this.value = value; } else if (!arraysEqualIgnoreOrder(this.value, value)) { this.value = value; } } onClick(event) { if (this.disabled) { return; } if (event.button) { return; } const target = event.target; const item = target.closest("mdui-collapse-item"); if (!item || item.disabled) { return; } const path = event.composedPath(); if (item.trigger && !path.find((element) => isElement(element) && $$1(element).is(item.trigger))) { return; } if (!path.find((element) => isElement(element) && element.part.contains("header"))) { return; } if (this.accordion) { if (this.activeKeys.includes(item.key)) { this.setActiveKeys([]); } else { this.setActiveKeys([item.key]); } } else { const activeKeys = [...this.activeKeys]; if (activeKeys.includes(item.key)) { activeKeys.splice(activeKeys.indexOf(item.key), 1); } else { activeKeys.push(item.key); } this.setActiveKeys(activeKeys); } this.isInitial = false; this.updateItems(); } async onSlotChange() { await this.definedController.whenDefined(); this.updateItems(); } // 更新 <mdui-collapse-item> 的状态 updateItems() { this.items.forEach((item) => { item.active = this.activeKeys.includes(item.key); item.isInitial = this.isInitial; }); } }; Collapse.styles = [ componentStyle, collapseStyle ]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Collapse.prototype, "accordion", void 0); __decorate([ n$1() ], Collapse.prototype, "value", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Collapse.prototype, "disabled", void 0); __decorate([ r$1() ], Collapse.prototype, "activeKeys", void 0); __decorate([ o$1({ selector: "mdui-collapse-item", flatten: true }) ], Collapse.prototype, "items", void 0); __decorate([ watch("activeKeys", true) ], Collapse.prototype, "onActiveKeysChange", null); __decorate([ watch("value") ], Collapse.prototype, "onValueChange", null); Collapse = __decorate([ t$1("mdui-collapse") ], Collapse); const collapseItemStyle = i$3`:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}.body.active{transition-duration:var(--mdui-motion-duration-medium4)}`; let CollapseItem = class CollapseItem2 extends MduiElement { constructor() { super(...arguments); this.disabled = false; this.active = false; this.state = "closed"; this.isInitial = true; this.key = uniqueId(); this.bodyRef = ii(); } onActiveChange() { if (this.isInitial) { this.state = this.active ? "opened" : "closed"; if (this.hasUpdated) { this.updateBodyHeight(); } } else { this.state = this.active ? "open" : "close"; this.emit(this.state); this.updateBodyHeight(); } } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.updateBodyHeight(); } render() { return ke`<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${Rt({ opened: this.state === "opened", active: this.active })}" ${Kt(this.bodyRef)} @transitionend="${this.onTransitionEnd}"></slot>`; } onTransitionEnd(event) { if (event.target === this.bodyRef.value) { this.state = this.active ? "opened" : "closed"; this.emit(this.state); this.updateBodyHeight(); } } updateBodyHeight() { const scrollHeight = this.bodyRef.value.scrollHeight; if (this.state === "close") { $$1(this.bodyRef.value).height(scrollHeight); this.bodyRef.value.clientLeft; } $$1(this.bodyRef.value).height(this.state === "opened" ? "auto" : this.state === "open" ? scrollHeight : 0); } }; CollapseItem.styles = [ componentStyle, collapseItemStyle ]; __decorate([ n$1({ reflect: true }) ], CollapseItem.prototype, "value", void 0); __decorate([ n$1({ reflect: true }) ], CollapseItem.prototype, "header", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], CollapseItem.prototype, "disabled", void 0); __decorate([ n$1() ], CollapseItem.prototype, "trigger", void 0); __decorate([ r$1() ], CollapseItem.prototype, "active", void 0); __decorate([ r$1() ], CollapseItem.prototype, "state", void 0); __decorate([ watch("active") ], CollapseItem.prototype, "onActiveChange", null); CollapseItem = __decorate([ t$1("mdui-collapse-item") ], CollapseItem); /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ function nn(n3, r2, t2) { return n3 ? r2(n3) : t2 == null ? void 0 : t2(n3); } function animateTo(el, keyframes, options) { if (!el) { return Promise.resolve(); } return new Promise((resolve) => { if (options.duration === Infinity) { throw new Error("Promise-based animations must be finite."); } if (isNumber(options.duration) && isNaN(options.duration)) { options.duration = 0; } if (options.easing === "") { options.easing = "linear"; } const animation = el.animate(keyframes, options); animation.addEventListener("cancel", resolve, { once: true }); animation.addEventListener("finish", resolve, { once: true }); }); } function stopAnimations(el) { if (!el) { return Promise.resolve(); } return Promise.all(el.getAnimations().map((animation) => { return new Promise((resolve) => { const handleAnimationEvent = requestAnimationFrame(resolve); animation.addEventListener("cancel", () => handleAnimationEvent, { once: true }); animation.addEventListener("finish", () => handleAnimationEvent, { once: true }); animation.cancel(); }); })); } function isTabbable(el) { const window2 = getWindow$1(); const localName = el.localName; if (el.getAttribute("tabindex") === "-1") { return false; } if (el.hasAttribute("disabled")) { return false; } if (el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") !== "false") { return false; } if (localName === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) { return false; } if (el.offsetParent === null) { return false; } if (window2.getComputedStyle(el).visibility === "hidden") { return false; } if ((localName === "audio" || localName === "video") && el.hasAttribute("controls")) { return true; } if (el.hasAttribute("tabindex")) { return true; } if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") { return true; } return [ "button", "input", "select", "textarea", "a", "audio", "video", "summary" ].includes(localName); } function getTabbableBoundary(root2) { const allElements = []; function walk(el) { if (el instanceof HTMLElement) { allElements.push(el); if (el.shadowRoot !== null && el.shadowRoot.mode === "open") { walk(el.shadowRoot); } } const children = el.children; [...children].forEach((e2) => walk(e2)); } walk(root2); const start = allElements.find((el) => isTabbable(el)) ?? null; const end = allElements.reverse().find((el) => isTabbable(el)) ?? null; return { start, end }; } let activeModals = []; class Modal { constructor(element) { this.tabDirection = "forward"; this.element = element; this.handleFocusIn = this.handleFocusIn.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); this.handleKeyUp = this.handleKeyUp.bind(this); } activate() { activeModals.push(this.element); document.addEventListener("focusin", this.handleFocusIn); document.addEventListener("keydown", this.handleKeyDown); document.addEventListener("keyup", this.handleKeyUp); } deactivate() { activeModals = activeModals.filter((modal) => modal !== this.element); document.removeEventListener("focusin", this.handleFocusIn); document.removeEventListener("keydown", this.handleKeyDown); document.removeEventListener("keyup", this.handleKeyUp); } isActive() { return activeModals[activeModals.length - 1] === this.element; } checkFocus() { if (this.isActive()) { if (!this.element.matches(":focus-within")) { const { start, end } = getTabbableBoundary(this.element); const target = this.tabDirection === "forward" ? start : end; if (typeof (target == null ? void 0 : target.focus) === "function") { target.focus({ preventScroll: true }); } } } } handleFocusIn() { this.checkFocus(); } handleKeyDown(event) { if (event.key === "Tab" && event.shiftKey) { this.tabDirection = "backward"; } requestAnimationFrame(() => this.checkFocus()); } handleKeyUp() { this.tabDirection = "forward"; } } const getEasing = (element, name) => { const cssVariableName = `--mdui-motion-easing-${name}`; return $$1(element).css(cssVariableName).trim(); }; const getDuration = (element, name) => { const cssVariableName = `--mdui-motion-duration-${name}`; const cssValue = $$1(element).css(cssVariableName).trim().toLowerCase(); if (cssValue.endsWith("ms")) { return parseFloat(cssValue); } else { return parseFloat(cssValue) * 1e3; } }; let scrollBarSizeCached; const getScrollBarSize = (fresh) => { if (isUndefined(document)) { return 0; } if (scrollBarSizeCached === void 0) { const $inner = $$1("<div>").css({ width: "100%", height: "200px" }); const $outer = $$1("<div>").css({ position: "absolute", top: "0", left: "0", pointerEvents: "none", visibility: "hidden", width: "200px", height: "150px", overflow: "hidden" }).append($inner).appendTo(document.body); const widthContained = $inner[0].offsetWidth; $outer.css("overflow", "scroll"); let widthScroll = $inner[0].offsetWidth; if (widthContained === widthScroll) { widthScroll = $outer[0].clientWidth; } $outer.remove(); scrollBarSizeCached = widthContained - widthScroll; } return scrollBarSizeCached; }; const hasScrollbar = (target) => { return target.scrollHeight > target.clientHeight; }; const lockMap = /* @__PURE__ */ new WeakMap(); const className = "mdui-lock-screen"; const lockScreen = (source2, target) => { const document2 = getDocument(); target ?? (target = document2.documentElement); if (!lockMap.has(target)) { lockMap.set(target, /* @__PURE__ */ new Set()); } const lock = lockMap.get(target); lock.add(source2); const $target = $$1(target); if (hasScrollbar(target)) { $target.css("width", `calc(100% - ${getScrollBarSize()}px)`); } $target.addClass(className); }; const unlockScreen = (source2, target) => { const document2 = getDocument(); target ?? (target = document2.documentElement); const lock = lockMap.get(target); if (!lock) { return; } lock.delete(source2); if (lock.size === 0) { lockMap.delete(target); $$1(target).removeClass(className).width(""); } }; /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const LOCALE_STATUS_EVENT = "lit-localize-status"; /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const isStrTagged = (val) => typeof val !== "string" && "strTag" in val; const joinStringsAndValues = (strings, values, valueOrder) => { let concat = strings[0]; for (let i3 = 1; i3 < strings.length; i3++) { concat += values[i3 - 1]; concat += strings[i3]; } return concat; }; /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ const defaultMsg = (template) => isStrTagged(template) ? joinStringsAndValues(template.strings, template.values) : template; let msg = defaultMsg; /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ class Deferred { constructor() { this.settled = false; this.promise = new Promise((resolve, reject) => { this._resolve = resolve; this._reject = reject; }); } resolve(value) { this.settled = true; this._resolve(value); } reject(error) { this.settled = true; this._reject(error); } } /** * @license * Copyright 2014 Travis Webb * SPDX-License-Identifier: MIT */ for (let i3 = 0; i3 < 256; i3++) { (i3 >> 4 & 15).toString(16) + (i3 & 15).toString(16); } /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ let loading = new Deferred(); loading.resolve(); let listeningLitLocalizeStatus = false; const localeReadyCallbacksMap = /* @__PURE__ */ new Map(); const onLocaleReady = (target, callback) => { if (!listeningLitLocalizeStatus) { listeningLitLocalizeStatus = true; const window2 = getWindow$1(); window2.addEventListener(LOCALE_STATUS_EVENT, (event) => { if (event.detail.status === "ready") { localeReadyCallbacksMap.forEach((callbacks2) => { callbacks2.forEach((cb) => cb()); }); } }); } const callbacks = localeReadyCallbacksMap.get(target) || []; callbacks.push(callback); localeReadyCallbacksMap.set(target, callbacks); }; const offLocaleReady = (target) => { localeReadyCallbacksMap.delete(target); }; const style$b = i$3`:host{--shape-corner:var(--mdui-shape-corner-extra-large);--z-index:2300;position:fixed;z-index:var(--z-index);display:none;align-items:center;justify-content:center;inset:0;padding:3rem}::slotted(mdui-top-app-bar[slot=header]){position:absolute;border-top-left-radius:var(--mdui-shape-corner-extra-large);border-top-right-radius:var(--mdui-shape-corner-extra-large);background-color:rgb(var(--mdui-color-surface-container-high))}:host([fullscreen]){--shape-corner:var(--mdui-shape-corner-none);padding:0}:host([fullscreen]) ::slotted(mdui-top-app-bar[slot=header]){border-top-left-radius:var(--mdui-shape-corner-none);border-top-right-radius:var(--mdui-shape-corner-none)}.overlay{position:fixed;inset:0;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{--mdui-color-background:var(--mdui-color-surface-container-high);position:relative;display:flex;flex-direction:column;max-height:100%;border-radius:var(--shape-corner);outline:0;transform-origin:top;min-width:17.5rem;max-width:35rem;padding:1.5rem;background-color:rgb(var(--mdui-color-surface-container-high));box-shadow:var(--mdui-elevation-level3)}:host([fullscreen]) .panel{width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:var(--mdui-elevation-level0)}.header{display:flex;flex-direction:column}.has-icon .header{align-items:center}.icon{display:flex;color:rgb(var(--mdui-color-secondary));font-size:1.5rem}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}.headline{display:flex;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.icon+.headline{padding-top:1rem}.body{overflow:auto}.header+.body{margin-top:1rem}.description{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([fullscreen]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description.has-default .description{margin-bottom:1rem}.action{display:flex;justify-content:flex-end;padding-top:1.5rem}.action::slotted(:not(:first-child)){margin-left:.5rem}:host([stacked-actions]) .action{flex-direction:column;align-items:end}:host([stacked-actions]) .action::slotted(:not(:first-child)){margin-left:0;margin-top:.5rem}`; let Dialog = class Dialog2 extends MduiElement { constructor() { super(...arguments); this.open = false; this.fullscreen = false; this.closeOnEsc = false; this.closeOnOverlayClick = false; this.stackedActions = false; this.overlayRef = ii(); this.panelRef = ii(); this.bodyRef = ii(); this.hasSlotController = new HasSlotController(this, "header", "icon", "headline", "description", "action", "[default]"); this.definedController = new DefinedController(this, { relatedElements: ["mdui-top-app-bar"] }); } async onOpenChange() { const hasUpdated = this.hasUpdated; if (!this.open && !hasUpdated) { return; } await this.definedController.whenDefined(); if (!hasUpdated) { await this.updateComplete; } const children = Array.from(this.panelRef.value.querySelectorAll(".header, .body, .actions")); const easingLinear = getEasing(this, "linear"); const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate"); const easingEmphasizedAccelerate = getEasing(this, "emphasized-accelerate"); const stopAnimation = () => Promise.all([ stopAnimations(this.overlayRef.value), stopAnimations(this.panelRef.value), ...children.map((child) => stopAnimations(child)) ]); if (this.open) { if (hasUpdated) { const eventProceeded = this.emit("open", { cancelable: true }); if (!eventProceeded) { return; } } this.style.display = "flex"; const topAppBarElements = this.topAppBarElements ?? []; if (topAppBarElements.length) { const topAppBarElement = topAppBarElements[0]; if (!topAppBarElement.scrollTarget) { topAppBarElement.scrollTarget = this.bodyRef.value; } this.bodyRef.value.style.marginTop = "0"; } this.originalTrigger = document.activeElement; this.modalHelper.activate(); lockScreen(this); await stopAnimation(); requestAnimationFrame(() => { const autoFocusTarget = this.querySelector("[autofocus]"); if (autoFocusTarget) { autoFocusTarget.focus({ preventScroll: true }); } else { this.panelRef.value.focus({ preventScroll: true }); } }); const duration = getDuration(this, "medium4"); await Promise.all([ animateTo(this.overlayRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], { duration: hasUpdated ? duration : 0, easing: easingLinear }), animateTo(this.panelRef.value, [ { transform: "translateY(-1.875rem) scaleY(0)" }, { transform: "translateY(0) scaleY(1)" } ], { duration: hasUpdated ? duration : 0, easing: easingEmphasizedDecelerate }), animateTo(this.panelRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.1 }, { opacity: 1 }], { duration: hasUpdated ? duration : 0, easing: easingLinear }), ...children.map((child) => animateTo(child, [ { opacity: 0 }, { opacity: 0, offset: 0.2 }, { opacity: 1, offset: 0.8 }, { opacity: 1 } ], { duration: hasUpdated ? duration : 0, easing: easingLinear })) ]); if (hasUpdated) { this.emit("opened"); } } else { const eventProceeded = this.emit("close", { cancelable: true }); if (!eventProceeded) { return; } this.modalHelper.deactivate(); await stopAnimation(); const duration = getDuration(this, "short4"); await Promise.all([ animateTo(this.overlayRef.value, [{ opacity: 1 }, { opacity: 0 }], { duration, easing: easingLinear }), animateTo(this.panelRef.value, [ { transform: "translateY(0) scaleY(1)" }, { transform: "translateY(-1.875rem) scaleY(0.6)" } ], { duration, easing: easingEmphasizedAccelerate }), animateTo(this.panelRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear }), ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })) ]); this.style.display = "none"; unlockScreen(this); const trigger = this.originalTrigger; if (typeof (trigger == null ? void 0 : trigger.focus) === "function") { setTimeout(() => trigger.focus()); } this.emit("closed"); } } disconnectedCallback() { super.disconnectedCallback(); unlockScreen(this); offLocaleReady(this); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.modalHelper = new Modal(this); this.addEventListener("keydown", (event) => { if (this.open && this.closeOnEsc && event.key === "Escape") { event.stopPropagation(); this.open = false; } }); } render() { const hasActionSlot = this.hasSlotController.test("action"); const hasDefaultSlot = this.hasSlotController.test("[default]"); const hasIcon = !!this.icon || this.hasSlotController.test("icon"); const hasHeadline = !!this.headline || this.hasSlotController.test("headline"); const hasDescription = !!this.description || this.hasSlotController.test("description"); const hasHeader = hasIcon || hasHeadline || this.hasSlotController.test("header"); const hasBody = hasDescription || hasDefaultSlot; return ke`<div ${Kt(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}" tabindex="-1"></div><div ${Kt(this.panelRef)} part="panel" class="panel ${Rt({ "has-icon": hasIcon, "has-description": hasDescription, "has-default": hasDefaultSlot })}" tabindex="0">${nn(hasHeader, () => ke`<slot name="header" part="header" class="header">${nn(hasIcon, () => this.renderIcon())} ${nn(hasHeadline, () => this.renderHeadline())}</slot>`)} ${nn(hasBody, () => ke`<div ${Kt(this.bodyRef)} part="body" class="body">${nn(hasDescription, () => this.renderDescription())}<slot></slot></div>`)} ${nn(hasActionSlot, () => ke`<slot name="action" part="action" class="action"></slot>`)}</div>`; } onOverlayClick() { this.emit("overlay-click"); if (!this.closeOnOverlayClick) { return; } this.open = false; } renderIcon() { return ke`<slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot>`; } renderHeadline() { return ke`<slot name="headline" part="headline" class="headline">${this.headline}</slot>`; } renderDescription() { return ke`<slot name="description" part="description" class="description">${this.description}</slot>`; } }; Dialog.styles = [componentStyle, style$b]; __decorate([ n$1({ reflect: true }) ], Dialog.prototype, "icon", void 0); __decorate([ n$1({ reflect: true }) ], Dialog.prototype, "headline", void 0); __decorate([ n$1({ reflect: true }) ], Dialog.prototype, "description", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Dialog.prototype, "open", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Dialog.prototype, "fullscreen", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "close-on-esc" }) ], Dialog.prototype, "closeOnEsc", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "close-on-overlay-click" }) ], Dialog.prototype, "closeOnOverlayClick", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "stacked-actions" }) ], Dialog.prototype, "stackedActions", void 0); __decorate([ o$1({ slot: "header", selector: "mdui-top-app-bar", flatten: true }) ], Dialog.prototype, "topAppBarElements", void 0); __decorate([ watch("open") ], Dialog.prototype, "onOpenChange", null); Dialog = __decorate([ t$1("mdui-dialog") ], Dialog); const style$a = i$3`:host{display:block;height:.0625rem;background-color:rgb(var(--mdui-color-surface-variant))}:host([inset]){margin-left:1rem}:host([middle]){margin-left:1rem;margin-right:1rem}:host([vertical]){height:100%;width:.0625rem}`; let Divider = class Divider2 extends MduiElement { constructor() { super(...arguments); this.vertical = false; this.inset = false; this.middle = false; } render() { return ke``; } }; Divider.styles = [componentStyle, style$a]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Divider.prototype, "vertical", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Divider.prototype, "inset", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Divider.prototype, "middle", void 0); Divider = __decorate([ t$1("mdui-divider") ], Divider); function getNodeName(node) { if (isNode(node)) { return (node.nodeName || "").toLowerCase(); } return "#document"; } function getWindow(node) { var _node$ownerDocument; return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window; } function getDocumentElement(node) { var _ref; return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement; } function isNode(value) { return value instanceof Node || value instanceof getWindow(value).Node; } function isHTMLElement(value) { return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement; } function isShadowRoot(value) { if (typeof ShadowRoot === "undefined") { return false; } return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot; } function isOverflowElement(element) { const { overflow, overflowX, overflowY, display } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display); } function isLastTraversableNode(node) { return ["html", "body", "#document"].includes(getNodeName(node)); } function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getParentNode(node) { if (getNodeName(node) === "html") { return node; } const result = ( // Step into the shadow DOM of the parent of a slotted node. node.assignedSlot || // DOM Element detected. node.parentNode || // ShadowRoot detected. isShadowRoot(node) && node.host || // Fallback. getDocumentElement(node) ); return isShadowRoot(result) ? result.host : result; } function getNearestOverflowAncestor(node) { const parentNode = getParentNode(node); if (isLastTraversableNode(parentNode)) { return node.ownerDocument ? node.ownerDocument.body : node.body; } if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { return parentNode; } return getNearestOverflowAncestor(parentNode); } function getOverflowAncestors(node, list, traverseIframes) { var _node$ownerDocument2; if (list === void 0) { list = []; } if (traverseIframes === void 0) { traverseIframes = true; } const scrollableAncestor = getNearestOverflowAncestor(node); const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body); const win = getWindow(scrollableAncestor); if (isBody) { const frameElement = getFrameElement(win); return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []); } return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes)); } function getFrameElement(win) { return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null; } const style$9 = i$3`:host{--z-index:2100;display:contents}.panel{display:block;position:fixed;z-index:var(--z-index)}`; let Dropdown = class Dropdown2 extends MduiElement { constructor() { super(); this.open = false; this.disabled = false; this.trigger = "click"; this.placement = "auto"; this.stayOpenOnClick = false; this.openDelay = 150; this.closeDelay = 150; this.openOnPointer = false; this.panelRef = ii(); this.definedController = new DefinedController(this, { relatedElements: [""] }); this.onDocumentClick = this.onDocumentClick.bind(this); this.onDocumentKeydown = this.onDocumentKeydown.bind(this); this.onWindowScroll = this.onWindowScroll.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); this.onFocus = this.onFocus.bind(this); this.onClick = this.onClick.bind(this); this.onContextMenu = this.onContextMenu.bind(this); this.onMouseEnter = this.onMouseEnter.bind(this); this.onPanelClick = this.onPanelClick.bind(this); } get triggerElement() { return this.triggerElements[0]; } // 这些属性变更时，需要更新样式 async onPositionChange() { if (this.open) { await this.definedController.whenDefined(); this.updatePositioner(); } } async onOpenChange() { var _a2, _b; const hasUpdated = this.hasUpdated; if (!this.open && !hasUpdated) { return; } await this.definedController.whenDefined(); if (!hasUpdated) { await this.updateComplete; } const easingLinear = getEasing(this, "linear"); const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate"); const easingEmphasizedAccelerate = getEasing(this, "emphasized-accelerate"); if (this.open) { if (hasUpdated) { const eventProceeded = this.emit("open", { cancelable: true }); if (!eventProceeded) { return; } } const focusablePanel = this.panelElements.find((panel) => isFunction(panel.focus)); setTimeout(() => { focusablePanel == null ? void 0 : focusablePanel.focus(); }); const duration = getDuration(this, "medium4"); await stopAnimations(this.panelRef.value); this.panelRef.value.hidden = false; this.updatePositioner(); await Promise.all([ animateTo(this.panelRef.value, [ { transform: `${this.getCssScaleName()}(0.45)` }, { transform: `${this.getCssScaleName()}(1)` } ], { duration: hasUpdated ? duration : 0, easing: easingEmphasizedDecelerate }), animateTo(this.panelRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.125 }, { opacity: 1 }], { duration: hasUpdated ? duration : 0, easing: easingLinear }) ]); if (hasUpdated) { this.emit("opened"); } } else { const eventProceeded = this.emit("close", { cancelable: true }); if (!eventProceeded) { return; } if (!this.hasTrigger("focus") && isFunction((_a2 = this.triggerElement) == null ? void 0 : _a2.focus) && (this.contains(document.activeElement) || this.contains(((_b = document.activeElement) == null ? void 0 : _b.assignedSlot) ?? null))) { this.triggerElement.focus(); } const duration = getDuration(this, "short4"); await stopAnimations(this.panelRef.value); await Promise.all([ animateTo(this.panelRef.value, [ { transform: `${this.getCssScaleName()}(1)` }, { transform: `${this.getCssScaleName()}(0.45)` } ], { duration, easing: easingEmphasizedAccelerate }), animateTo(this.panelRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.875 }, { opacity: 0 }], { duration, easing: easingLinear }) ]); if (this.panelRef.value) { this.panelRef.value.hidden = true; } this.emit("closed"); } } connectedCallback() { super.connectedCallback(); this.definedController.whenDefined().then(() => { document.addEventListener("pointerdown", this.onDocumentClick); document.addEventListener("keydown", this.onDocumentKeydown); this.overflowAncestors = getOverflowAncestors(this.triggerElement); this.overflowAncestors.forEach((ancestor) => { ancestor.addEventListener("scroll", this.onWindowScroll); }); }); } disconnectedCallback() { var _a2, _b; super.disconnectedCallback(); document.removeEventListener("pointerdown", this.onDocumentClick); document.removeEventListener("keydown", this.onDocumentKeydown); (_a2 = this.overflowAncestors) == null ? void 0 : _a2.forEach((ancestor) => { ancestor.removeEventListener("scroll", this.onWindowScroll); }); (_b = this.observeResize) == null ? void 0 : _b.unobserve(); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.addEventListener("mouseleave", this.onMouseLeave); this.definedController.whenDefined().then(() => { this.triggerElement.addEventListener("focus", this.onFocus); this.triggerElement.addEventListener("click", this.onClick); this.triggerElement.addEventListener("contextmenu", this.onContextMenu); this.triggerElement.addEventListener("mouseenter", this.onMouseEnter); this.observeResize = observeResize(this.triggerElement, () => { this.updatePositioner(); }); }); } render() { return ke`<slot name="trigger" part="trigger" class="trigger"></slot><slot ${Kt(this.panelRef)} part="panel" class="panel" hidden @click="${this.onPanelClick}"></slot>`; } /** * 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY */ getCssScaleName() { return this.animateDirection === "horizontal" ? "scaleX" : "scaleY"; } /** * 在 document 上点击时，根据条件判断是否要关闭 dropdown */ onDocumentClick(e2) { if (this.disabled || !this.open) { return; } const path = e2.composedPath(); if (!path.includes(this)) { this.open = false; } if (this.hasTrigger("contextmenu") && !this.hasTrigger("click") && path.includes(this.triggerElement)) { this.open = false; } } /** * 在 document 上按下按键时，根据条件判断是否要关闭 dropdown */ onDocumentKeydown(event) { var _a2; if (this.disabled || !this.open) { return; } if (event.key === "Escape") { this.open = false; return; } if (event.key === "Tab") { if (!this.hasTrigger("focus") && isFunction((_a2 = this.triggerElement) == null ? void 0 : _a2.focus)) { event.preventDefault(); } this.open = false; } } onWindowScroll() { window.requestAnimationFrame(() => this.onPositionChange()); } hasTrigger(trigger) { const triggers = this.trigger.split(" "); return triggers.includes(trigger); } onFocus() { if (this.disabled || this.open || !this.hasTrigger("focus")) { return; } this.open = true; } onClick(e2) { if (this.disabled || e2.button || !this.hasTrigger("click")) { return; } if (this.open && (this.hasTrigger("hover") || this.hasTrigger("focus"))) { return; } this.pointerOffsetX = e2.offsetX; this.pointerOffsetY = e2.offsetY; this.open = !this.open; } onPanelClick(e2) { if (!this.disabled && !this.stayOpenOnClick && $$1(e2.target).is("mdui-menu-item")) { this.open = false; } } onContextMenu(e2) { if (this.disabled || !this.hasTrigger("contextmenu")) { return; } e2.preventDefault(); this.pointerOffsetX = e2.offsetX; this.pointerOffsetY = e2.offsetY; this.open = true; } onMouseEnter() { if (this.disabled || !this.hasTrigger("hover")) { return; } window.clearTimeout(this.closeTimeout); if (this.openDelay) { this.openTimeout = window.setTimeout(() => { this.open = true; }, this.openDelay); } else { this.open = true; } } onMouseLeave() { if (this.disabled || !this.hasTrigger("hover")) { return; } window.clearTimeout(this.openTimeout); this.closeTimeout = window.setTimeout(() => { this.open = false; }, this.closeDelay || 50); } // 更新 panel 的位置 updatePositioner() { const $panel = $$1(this.panelRef.value); const $window = $$1(window); const panelElements = this.panelElements; const panelRect = { width: Math.max(...(panelElements == null ? void 0 : panelElements.map((panel) => panel.offsetWidth)) ?? []), height: panelElements == null ? void 0 : panelElements.map((panel) => panel.offsetHeight).reduce((total, height) => total + height, 0) }; const triggerClientRect = this.triggerElement.getBoundingClientRect(); const triggerRect = this.openOnPointer ? { top: this.pointerOffsetY + triggerClientRect.top, left: this.pointerOffsetX + triggerClientRect.left, width: 0, height: 0 } : triggerClientRect; const screenMargin = 8; let transformOriginX; let transformOriginY; let top; let left; let placement = this.placement; if (placement === "auto") { const windowWidth = $window.width(); const windowHeight = $window.height(); let position2; let alignment2; if (windowHeight - triggerRect.top - triggerRect.height > panelRect.height + screenMargin) { position2 = "bottom"; } else if (triggerRect.top > panelRect.height + screenMargin) { position2 = "top"; } else if (windowWidth - triggerRect.left - triggerRect.width > panelRect.width + screenMargin) { position2 = "right"; } else if (triggerRect.left > panelRect.width + screenMargin) { position2 = "left"; } else { position2 = "bottom"; } if (["top", "bottom"].includes(position2)) { if (windowWidth - triggerRect.left > panelRect.width + screenMargin) { alignment2 = "start"; } else if (triggerRect.left + triggerRect.width / 2 > panelRect.width / 2 + screenMargin && windowWidth - triggerRect.left - triggerRect.width / 2 > panelRect.width / 2 + screenMargin) { alignment2 = void 0; } else if (triggerRect.left + triggerRect.width > panelRect.width + screenMargin) { alignment2 = "end"; } else { alignment2 = "start"; } } else { if (windowHeight - triggerRect.top > panelRect.height + screenMargin) { alignment2 = "start"; } else if (triggerRect.top + triggerRect.height / 2 > panelRect.height / 2 + screenMargin && windowHeight - triggerRect.top - triggerRect.height / 2 > panelRect.height / 2 + screenMargin) { alignment2 = void 0; } else if (triggerRect.top + triggerRect.height > panelRect.height + screenMargin) { alignment2 = "end"; } else { alignment2 = "start"; } } placement = alignment2 ? [position2, alignment2].join("-") : position2; } const [position, alignment] = placement.split("-"); this.animateDirection = ["top", "bottom"].includes(position) ? "vertical" : "horizontal"; switch (position) { case "top": transformOriginY = "bottom"; top = triggerRect.top - panelRect.height; break; case "bottom": transformOriginY = "top"; top = triggerRect.top + triggerRect.height; break; default: transformOriginY = "center"; switch (alignment) { case "start": top = triggerRect.top; break; case "end": top = triggerRect.top + triggerRect.height - panelRect.height; break; default: top = triggerRect.top + triggerRect.height / 2 - panelRect.height / 2; break; } break; } switch (position) { case "left": transformOriginX = "right"; left = triggerRect.left - panelRect.width; break; case "right": transformOriginX = "left"; left = triggerRect.left + triggerRect.width; break; default: transformOriginX = "center"; switch (alignment) { case "start": left = triggerRect.left; break; case "end": left = triggerRect.left + triggerRect.width - panelRect.width; break; default: left = triggerRect.left + triggerRect.width / 2 - panelRect.width / 2; break; } break; } $panel.css({ top, left, transformOrigin: [transformOriginX, transformOriginY].join(" ") }); } }; Dropdown.styles = [componentStyle, style$9]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Dropdown.prototype, "open", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Dropdown.prototype, "disabled", void 0); __decorate([ n$1({ reflect: true }) ], Dropdown.prototype, "trigger", void 0); __decorate([ n$1({ reflect: true }) ], Dropdown.prototype, "placement", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "stay-open-on-click" }) ], Dropdown.prototype, "stayOpenOnClick", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "open-delay" }) ], Dropdown.prototype, "openDelay", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "close-delay" }) ], Dropdown.prototype, "closeDelay", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "open-on-pointer" }) ], Dropdown.prototype, "openOnPointer", void 0); __decorate([ o$1({ slot: "trigger", flatten: true }) ], Dropdown.prototype, "triggerElements", void 0); __decorate([ o$1({ flatten: true }) ], Dropdown.prototype, "panelElements", void 0); __decorate([ watch("placement", true), watch("openOnPointer", true) ], Dropdown.prototype, "onPositionChange", null); __decorate([ watch("open") ], Dropdown.prototype, "onOpenChange", null); Dropdown = __decorate([ t$1("mdui-dropdown") ], Dropdown); const delay = (duration = 0) => { return new Promise((resolve) => setTimeout(resolve, duration)); }; const style$8 = i$3`:host{--shape-corner-small:var(--mdui-shape-corner-small);--shape-corner-normal:var(--mdui-shape-corner-large);--shape-corner-large:var(--mdui-shape-corner-extra-large);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;transition-property:box-shadow;transition-timing-function:var(--mdui-motion-easing-emphasized);transition-duration:var(--mdui-motion-duration-medium4);width:3.5rem;height:3.5rem;box-shadow:var(--mdui-elevation-level3);font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{padding:0 1rem}:host([size=small]) .button{padding:0 .5rem}:host([size=large]) .button{padding:0 1.875rem}:host([lowered]){box-shadow:var(--mdui-elevation-level1)}:host([focus-visible]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][focus-visible]){box-shadow:var(--mdui-elevation-level1)}:host([pressed]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][pressed]){box-shadow:var(--mdui-elevation-level1)}:host([hover]){box-shadow:var(--mdui-elevation-level4)}:host([lowered][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=primary]){color:rgb(var(--mdui-color-on-primary-container));background-color:rgb(var(--mdui-color-primary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-primary-container )}:host([variant=surface]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-high));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=surface][lowered]){background-color:rgb(var(--mdui-color-surface-container-low))}:host([variant=secondary]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-secondary-container )}:host([variant=tertiary]){color:rgb(var(--mdui-color-on-tertiary-container));background-color:rgb(var(--mdui-color-tertiary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-tertiary-container )}:host([size=small]){border-radius:var(--shape-corner-small);width:2.5rem;height:2.5rem}:host([size=large]){border-radius:var(--shape-corner-large);width:6rem;height:6rem}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),12%);box-shadow:var(--mdui-elevation-level0)}:host([extended]){width:auto}.label{display:inline-flex;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);padding-left:.25rem;padding-right:.25rem}.has-icon .label{margin-left:.5rem}:host([size=small]) .has-icon .label{margin-left:.25rem}:host([size=large]) .has-icon .label{margin-left:1rem}:host(:not([extended])) .label{opacity:0;transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([size=large]) .label{font-size:1.5em}.icon{display:inline-flex;font-size:1.71428571em}:host([size=large]) .icon{font-size:2.57142857em}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.5rem;height:1.5rem}:host([size=large]) mdui-circular-progress{width:2.25rem;height:2.25rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`; let Fab = class Fab2 extends ButtonBase { constructor() { super(...arguments); this.variant = "primary"; this.size = "normal"; this.extended = false; this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "icon"); this.definedController = new DefinedController(this, { relatedElements: [""] }); } get rippleElement() { return this.rippleRef.value; } /** * extended 变更时，设置动画 */ async onExtendedChange() { const hasUpdated = this.hasUpdated; if (this.extended) { this.style.width = `${this.scrollWidth}px`; } else { this.style.width = ""; } await this.definedController.whenDefined(); await this.updateComplete; if (this.extended && !hasUpdated) { this.style.width = `${this.scrollWidth}px`; } if (!hasUpdated) { await delay(); this.style.transitionProperty = "box-shadow, width, bottom, transform"; } } render() { const className2 = cc({ button: true, "has-icon": this.icon || this.hasSlotController.test("icon") }); return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton() ? this.renderButton({ className: className2, part: "button", content: this.renderInner() }) : this.disabled || this.loading ? ke`<span part="button" class="_a ${className2}">${this.renderInner()}</span>` : this.renderAnchor({ className: className2, part: "button", content: this.renderInner() })}`; } renderLabel() { return ke`<slot part="label" class="label"></slot>`; } renderIcon() { if (this.loading) { return this.renderLoading(); } return ke`<slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot>`; } renderInner() { return [this.renderIcon(), this.renderLabel()]; } }; Fab.styles = [ButtonBase.styles, style$8]; __decorate([ n$1({ reflect: true }) ], Fab.prototype, "variant", void 0); __decorate([ n$1({ reflect: true }) ], Fab.prototype, "size", void 0); __decorate([ n$1({ reflect: true }) ], Fab.prototype, "icon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Fab.prototype, "extended", void 0); __decorate([ watch("extended") ], Fab.prototype, "onExtendedChange", null); Fab = __decorate([ t$1("mdui-fab") ], Fab); const layoutStyle = i$3`:host{position:relative;display:flex;flex:1 1 auto;overflow:hidden}:host([full-height]){height:100%}`; let Layout = class Layout2 extends MduiElement { constructor() { super(...arguments); this.fullHeight = false; } render() { return ke`<slot></slot>`; } }; Layout.styles = [componentStyle, layoutStyle]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "full-height" }) ], Layout.prototype, "fullHeight", void 0); Layout = __decorate([ t$1("mdui-layout") ], Layout); const layoutItemStyle = i$3`:host{display:flex;z-index:1}`; let LayoutItem = class LayoutItem2 extends LayoutItemBase { constructor() { super(...arguments); this.placement = "top"; } get layoutPlacement() { return this.placement; } // placement 变更时，需要重新调整布局 onPlacementChange() { var _a2; (_a2 = this.layoutManager) == null ? void 0 : _a2.updateLayout(this); } render() { return ke`<slot></slot>`; } }; LayoutItem.styles = [ componentStyle, layoutItemStyle ]; __decorate([ n$1({ reflect: true }) ], LayoutItem.prototype, "placement", void 0); __decorate([ watch("placement", true) ], LayoutItem.prototype, "onPlacementChange", null); LayoutItem = __decorate([ t$1("mdui-layout-item") ], LayoutItem); const layoutMainStyle = i$3`:host{flex:1 0 auto;max-width:100%;overflow:auto}`; let LayoutMain = class LayoutMain2 extends MduiElement { connectedCallback() { super.connectedCallback(); const parentElement = this.parentElement; if (isNodeName(parentElement, "mdui-layout")) { this.layoutManager = getLayout(parentElement); this.layoutManager.registerMain(this); } } disconnectedCallback() { super.disconnectedCallback(); if (this.layoutManager) { this.layoutManager.unregisterMain(); } } render() { return ke`<slot></slot>`; } }; LayoutMain.styles = [ componentStyle, layoutMainStyle ]; LayoutMain = __decorate([ t$1("mdui-layout-main") ], LayoutMain); const style$7 = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);position:relative;display:inline-block;width:100%;overflow:hidden;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container-highest));height:.25rem}.determinate,.indeterminate{background-color:rgb(var(--mdui-color-primary))}.determinate{height:100%;transition:width var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate::before{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate 2s var(--mdui-motion-easing-linear) infinite;content:' '}.indeterminate::after{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate-short 2s var(--mdui-motion-easing-linear) infinite;content:' '}@keyframes mdui-comp-progress-indeterminate{0%{left:0;width:0}50%{left:30%;width:70%}75%{left:100%;width:0}}@keyframes mdui-comp-progress-indeterminate-short{0%{left:0;width:0}50%{left:0;width:0}75%{left:0;width:25%}100%{left:100%;width:0}}`; let LinearProgress = class LinearProgress2 extends MduiElement { constructor() { super(...arguments); this.max = 1; } render() { const isDeterminate = !isUndefined(this.value); if (isDeterminate) { const value = this.value; return ke`<div part="indicator" class="determinate" style="${se({ width: `${value / Math.max(this.max ?? value, value) * 100}%` })}"></div>`; } return ke`<div part="indicator" class="indeterminate"></div>`; } }; LinearProgress.styles = [componentStyle, style$7]; __decorate([ n$1({ type: Number, reflect: true }) ], LinearProgress.prototype, "max", void 0); __decorate([ n$1({ type: Number }) ], LinearProgress.prototype, "value", void 0); LinearProgress = __decorate([ t$1("mdui-linear-progress") ], LinearProgress); const listItemStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--shape-corner-rounded:var(--mdui-shape-corner-extra-large);position:relative;display:block;border-radius:var(--shape-corner);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([rounded]),:host([rounded]) mdui-ripple{border-radius:var(--shape-corner-rounded)}:host([active]){background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-secondary-container )}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`; let ListItem = class ListItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) { constructor() { super(...arguments); this.disabled = false; this.active = false; this.nonclickable = false; this.rounded = false; this.alignment = "center"; this.rippleRef = ii(); this.itemRef = ii(); this.hasSlotController = new HasSlotController(this, "[default]", "description", "icon", "end-icon", "custom"); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.focusDisabled; } get focusElement() { return this.href && !this.disabled ? this.itemRef.value : this; } get focusDisabled() { return this.href ? this.disabled : this.disabled || this.nonclickable; } render() { const preset = !this.hasSlotController.test("custom"); const hasIcon = this.icon || this.hasSlotController.test("icon"); const hasEndIcon = this.endIcon || this.hasSlotController.test("end-icon"); const hasDescription = this.description || this.hasSlotController.test("description"); const className2 = cc({ container: true, preset, "has-icon": hasIcon, "has-end-icon": hasEndIcon, "has-description": hasDescription, // icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件 "is-icon": isNodeName(this.iconElements[0], "mdui-icon"), // end-icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件 "is-end-icon": getNodeName$1(this.endIconElements[0]).startsWith("mdui-icon-") }); return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled ? this.renderAnchor({ className: className2, content: this.renderInner(), part: "container", refDirective: Kt(this.itemRef) }) : ke`<div part="container" class="${className2}" ${Kt(this.itemRef)}>${this.renderInner()}</div>`}`; } renderInner() { const hasDefaultSlot = this.hasSlotController.test("[default]"); return ke`<slot name="custom"><slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot><div part="body" class="body">${hasDefaultSlot ? ke`<slot part="headline" class="headline"></slot>` : ke`<div part="headline" class="headline">${this.headline}</div>`}<slot name="description" part="description" class="description">${this.description}</slot></div><slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon ? ke`<mdui-icon name="${this.endIcon}"></mdui-icon>` : nothingTemplate}</slot></slot>`; } }; ListItem.styles = [ componentStyle, listItemStyle ]; __decorate([ n$1({ reflect: true }) ], ListItem.prototype, "headline", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "headline-line" }) ], ListItem.prototype, "headlineLine", void 0); __decorate([ n$1({ reflect: true }) ], ListItem.prototype, "description", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "description-line" }) ], ListItem.prototype, "descriptionLine", void 0); __decorate([ n$1({ reflect: true }) ], ListItem.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], ListItem.prototype, "endIcon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ListItem.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ListItem.prototype, "active", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ListItem.prototype, "nonclickable", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], ListItem.prototype, "rounded", void 0); __decorate([ n$1({ reflect: true }) ], ListItem.prototype, "alignment", void 0); __decorate([ o$1({ slot: "icon", flatten: true }) ], ListItem.prototype, "iconElements", void 0); __decorate([ o$1({ slot: "end-icon", flatten: true }) ], ListItem.prototype, "endIconElements", void 0); ListItem = __decorate([ t$1("mdui-list-item") ], ListItem); const listSubheaderStyle = i$3`:host{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);padding-left:1rem;padding-right:1.5rem;height:3.5rem;line-height:3.5rem}`; let ListSubheader = class ListSubheader2 extends MduiElement { render() { return ke`<slot></slot>`; } }; ListSubheader.styles = [ componentStyle, listSubheaderStyle ]; ListSubheader = __decorate([ t$1("mdui-list-subheader") ], ListSubheader); const listStyle = i$3`:host{display:block;padding:.5rem 0}::slotted(mdui-divider[middle]){margin-left:1rem;margin-right:1.5rem}`; let List = class List2 extends MduiElement { render() { return ke`<slot></slot>`; } }; List.styles = [componentStyle, listStyle]; List = __decorate([ t$1("mdui-list") ], List); let IconArrowRight = class IconArrowRight2 extends h { render() { return svgTag('<path d="m10 17 5-5-5-5v10z"/>'); } }; IconArrowRight.styles = style$e; IconArrowRight = __decorate([ t$1("mdui-icon-arrow-right") ], IconArrowRight); const menuItemStyle = i$3`:host{position:relative;display:block}:host([selected]){background-color:rgba(var(--mdui-color-primary),12%)}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}.preset{display:flex;align-items:center;text-decoration:none;height:3rem;padding:0 .75rem}.preset.dense{height:2rem}.label-container{flex:1 1 100%;min-width:0}.label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.end-icon,.end-text,.icon,.selected-icon{display:none;flex:0 0 auto;color:rgb(var(--mdui-color-on-surface-variant))}.has-end-icon .end-icon,.has-end-text .end-text,.has-icon .icon,.has-icon .selected-icon{display:flex}.end-icon,.icon,.selected-icon{font-size:1.5rem}.end-icon::slotted(mdui-avatar),.icon::slotted(mdui-avatar),.selected-icon::slotted(mdui-avatar){width:1.5rem;height:1.5rem}.dense .end-icon,.dense .icon,.dense .selected-icon{font-size:1.125rem}.dense .end-icon::slotted(mdui-avatar),.dense .icon::slotted(mdui-avatar),.dense .selected-icon::slotted(mdui-avatar){width:1.125rem;height:1.125rem}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}.end-text{font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon,.selected-icon{margin-right:.75rem}.end-icon,.end-text{margin-left:.75rem}.arrow-right{color:rgb(var(--mdui-color-on-surface))}.submenu{--shape-corner:var(--mdui-shape-corner-extra-small);display:block;position:absolute;z-index:1;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.submenu::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`; let MenuItem = class MenuItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) { constructor() { super(); this.disabled = false; this.submenuOpen = false; this.selected = false; this.dense = false; this.focusable = false; this.key = uniqueId(); this.rippleRef = ii(); this.containerRef = ii(); this.submenuRef = ii(); this.hasSlotController = new HasSlotController(this, "[default]", "icon", "end-icon", "end-text", "submenu", "custom"); this.definedController = new DefinedController(this, { relatedElements: [""] }); this.onOuterClick = this.onOuterClick.bind(this); this.onFocus = this.onFocus.bind(this); this.onBlur = this.onBlur.bind(this); this.onClick = this.onClick.bind(this); this.onKeydown = this.onKeydown.bind(this); this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); } get focusDisabled() { return this.disabled || !this.focusable; } get focusElement() { return this.href && !this.disabled ? this.containerRef.value : this; } get rippleDisabled() { return this.disabled; } get rippleElement() { return this.rippleRef.value; } get hasSubmenu() { return this.hasSlotController.test("submenu"); } async onOpenChange() { const hasUpdated = this.hasUpdated; if (!this.submenuOpen && !hasUpdated) { return; } await this.definedController.whenDefined(); if (!hasUpdated) { await this.updateComplete; } const easingLinear = getEasing(this, "linear"); const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate"); const easingEmphasizedAccelerate = getEasing(this, "emphasized-accelerate"); if (this.submenuOpen) { if (hasUpdated) { const eventProceeded = this.emit("submenu-open", { cancelable: true }); if (!eventProceeded) { return; } } const duration = getDuration(this, "medium4"); await stopAnimations(this.submenuRef.value); this.submenuRef.value.hidden = false; this.updateSubmenuPositioner(); await Promise.all([ animateTo(this.submenuRef.value, [{ transform: "scaleY(0.45)" }, { transform: "scaleY(1)" }], { duration: hasUpdated ? duration : 0, easing: easingEmphasizedDecelerate }), animateTo(this.submenuRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.125 }, { opacity: 1 }], { duration: hasUpdated ? duration : 0, easing: easingLinear }) ]); if (hasUpdated) { this.emit("submenu-opened"); } } else { const eventProceeded = this.emit("submenu-close", { cancelable: true }); if (!eventProceeded) { return; } const duration = getDuration(this, "short4"); await stopAnimations(this.submenuRef.value); await Promise.all([ animateTo(this.submenuRef.value, [{ transform: "scaleY(1)" }, { transform: "scaleY(0.45)" }], { duration, easing: easingEmphasizedAccelerate }), animateTo(this.submenuRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.875 }, { opacity: 0 }], { duration, easing: easingLinear }) ]); if (this.submenuRef.value) { this.submenuRef.value.hidden = true; } this.emit("submenu-closed"); } } connectedCallback() { super.connectedCallback(); this.definedController.whenDefined().then(() => { document.addEventListener("pointerdown", this.onOuterClick); }); } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener("pointerdown", this.onOuterClick); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.definedController.whenDefined().then(() => { this.addEventListener("focus", this.onFocus); this.addEventListener("blur", this.onBlur); this.addEventListener("click", this.onClick); this.addEventListener("keydown", this.onKeydown); this.addEventListener("mouseenter", this.onMouseEnter); this.addEventListener("mouseleave", this.onMouseLeave); }); } render() { const hasSubmenu = this.hasSubmenu; const hasCustomSlot = this.hasSlotController.test("custom"); const hasEndIconSlot = this.hasSlotController.test("end-icon"); const useDefaultEndIcon = !this.endIcon && hasSubmenu && !hasEndIconSlot; const hasEndIcon = this.endIcon || hasSubmenu || hasEndIconSlot; const hasIcon = !isUndefined(this.icon) || this.selects === "single" || this.selects === "multiple" || this.hasSlotController.test("icon"); const hasEndText = !!this.endText || this.hasSlotController.test("end-text"); const className2 = cc({ container: true, dense: this.dense, preset: !hasCustomSlot, "has-icon": hasIcon, "has-end-text": hasEndText, "has-end-icon": hasEndIcon }); return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled ? this.renderAnchor({ part: "container", className: className2, content: this.renderInner(useDefaultEndIcon, hasIcon), refDirective: Kt(this.containerRef), tabIndex: this.focusable ? 0 : -1 }) : ke`<div part="container" ${Kt(this.containerRef)} class="${className2}">${this.renderInner(useDefaultEndIcon, hasIcon)}</div>`} ${nn(hasSubmenu, () => ke`<slot name="submenu" ${Kt(this.submenuRef)} part="submenu" class="submenu" hidden></slot>`)}`; } /** * 点击子菜单外面的区域，关闭子菜单 */ onOuterClick(event) { if (!this.disabled && this.submenuOpen && this !== event.target && !$$1.contains(this, event.target)) { this.submenuOpen = false; } } hasTrigger(trigger) { return this.submenuTrigger ? this.submenuTrigger.split(" ").includes(trigger) : false; } onFocus() { if (this.disabled || this.submenuOpen || !this.hasTrigger("focus") || !this.hasSubmenu) { return; } this.submenuOpen = true; } onBlur() { if (this.disabled || !this.submenuOpen || !this.hasTrigger("focus") || !this.hasSubmenu) { return; } this.submenuOpen = false; } onClick(event) { if (this.disabled || event.button) { return; } if (!this.hasTrigger("click") || event.target !== this || !this.hasSubmenu) { return; } if (this.submenuOpen && (this.hasTrigger("hover") || this.hasTrigger("focus"))) { return; } this.submenuOpen = !this.submenuOpen; } onKeydown(event) { if (this.disabled || !this.hasSubmenu) { return; } if (!this.submenuOpen && event.key === "Enter") { event.stopPropagation(); this.submenuOpen = true; } if (this.submenuOpen && event.key === "Escape") { event.stopPropagation(); this.submenuOpen = false; } } onMouseEnter() { if (this.disabled || !this.hasTrigger("hover") || !this.hasSubmenu) { return; } window.clearTimeout(this.submenuCloseTimeout); if (this.submenuOpenDelay) { this.submenuOpenTimeout = window.setTimeout(() => { this.submenuOpen = true; }, this.submenuOpenDelay); } else { this.submenuOpen = true; } } onMouseLeave() { if (this.disabled || !this.hasTrigger("hover") || !this.hasSubmenu) { return; } window.clearTimeout(this.submenuOpenTimeout); this.submenuCloseTimeout = window.setTimeout(() => { this.submenuOpen = false; }, this.submenuCloseDelay || 50); } // 更新子菜单的位置 updateSubmenuPositioner() { const $window = $$1(window); const $submenu = $$1(this.submenuRef.value); const itemRect = this.getBoundingClientRect(); const submenuWidth = $submenu.innerWidth(); const submenuHeight = $submenu.innerHeight(); const screenMargin = 8; let placementX = "bottom"; let placementY = "right"; if ($window.height() - itemRect.top > submenuHeight + screenMargin) { placementX = "bottom"; } else if (itemRect.top + itemRect.height > submenuHeight + screenMargin) { placementX = "top"; } if ($window.width() - itemRect.left - itemRect.width > submenuWidth + screenMargin) { placementY = "right"; } else if (itemRect.left > submenuWidth + screenMargin) { placementY = "left"; } $$1(this.submenuRef.value).css({ top: placementX === "bottom" ? 0 : itemRect.height - submenuHeight, left: placementY === "right" ? itemRect.width : -submenuWidth, transformOrigin: [ placementY === "right" ? 0 : "100%", placementX === "bottom" ? 0 : "100%" ].join(" ") }); } renderInner(useDefaultEndIcon, hasIcon) { return ke`<slot name="custom">${this.selected ? ke`<slot name="selected-icon" part="selected-icon" class="selected-icon">${this.selectedIcon ? ke`<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-check class="i"></mdui-icon-check>`}</slot>` : ke`<slot name="icon" part="icon" class="icon">${hasIcon ? ke`<mdui-icon name="${this.icon}" class="i"></mdui-icon>` : nothingTemplate}</slot>`}<div class="label-container"><slot part="label" class="label"></slot></div><slot name="end-text" part="end-text" class="end-text">${this.endText}</slot>${useDefaultEndIcon ? ke`<mdui-icon-arrow-right part="end-icon" class="end-icon arrow-right"></mdui-icon-arrow-right>` : ke`<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon ? ke`<mdui-icon name="${this.endIcon}"></mdui-icon>` : nothingTemplate}</slot>`}</slot>`; } }; MenuItem.styles = [ componentStyle, menuItemStyle ]; __decorate([ n$1({ reflect: true }) ], MenuItem.prototype, "value", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], MenuItem.prototype, "disabled", void 0); __decorate([ n$1({ reflect: true }) ], MenuItem.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], MenuItem.prototype, "endIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-text" }) ], MenuItem.prototype, "endText", void 0); __decorate([ n$1({ reflect: true, attribute: "selected-icon" }) ], MenuItem.prototype, "selectedIcon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "submenu-open" }) ], MenuItem.prototype, "submenuOpen", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], MenuItem.prototype, "selected", void 0); __decorate([ r$1() ], MenuItem.prototype, "dense", void 0); __decorate([ r$1() ], MenuItem.prototype, "selects", void 0); __decorate([ r$1() ], MenuItem.prototype, "submenuTrigger", void 0); __decorate([ r$1() ], MenuItem.prototype, "submenuOpenDelay", void 0); __decorate([ r$1() ], MenuItem.prototype, "submenuCloseDelay", void 0); __decorate([ r$1() ], MenuItem.prototype, "focusable", void 0); __decorate([ watch("submenuOpen") ], MenuItem.prototype, "onOpenChange", null); MenuItem = __decorate([ t$1("mdui-menu-item") ], MenuItem); const menuStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-extra-small);position:relative;display:block;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`; let Menu = class Menu2 extends MduiElement { constructor() { super(...arguments); this.dense = false; this.submenuTrigger = "click hover"; this.submenuOpenDelay = 200; this.submenuCloseDelay = 200; this.selectedKeys = []; this.isInitial = true; this.lastActiveItems = []; this.definedController = new DefinedController(this, { relatedElements: ["mdui-menu-item"] }); } // 菜单项元素（包含子菜单中的菜单项） get items() { return $$1(this.childrenItems).find("mdui-menu-item").add(this.childrenItems).get(); } // 菜单项元素（不包含已禁用的，包含子菜单中的菜单项） get itemsEnabled() { return this.items.filter((item) => !item.disabled); } // 当前菜单是否为单选 get isSingle() { return this.selects === "single"; } // 当前菜单是否为多选 get isMultiple() { return this.selects === "multiple"; } // 当前菜单是否可选择 get isSelectable() { return this.isSingle || this.isMultiple; } // 当前菜单是否为子菜单 get isSubmenu() { return !$$1(this).parent().length; } // 最深层级的子菜单中，最后交互过的 menu-item get lastActiveItem() { const index = this.lastActiveItems.length ? this.lastActiveItems.length - 1 : 0; return this.lastActiveItems[index]; } set lastActiveItem(item) { const index = this.lastActiveItems.length ? this.lastActiveItems.length - 1 : 0; this.lastActiveItems[index] = item; } async onSlotChange() { await this.definedController.whenDefined(); this.items.forEach((item) => { item.dense = this.dense; item.selects = this.selects; item.submenuTrigger = this.submenuTrigger; item.submenuOpenDelay = this.submenuOpenDelay; item.submenuCloseDelay = this.submenuCloseDelay; }); } async onSelectsChange() { if (!this.isSelectable) { this.setSelectedKeys([]); } else if (this.isSingle) { this.setSelectedKeys(this.selectedKeys.slice(0, 1)); } await this.onSelectedKeysChange(); } async onSelectedKeysChange() { await this.definedController.whenDefined(); const values = this.itemsEnabled.filter((item) => this.selectedKeys.includes(item.key)).map((item) => item.value); const value = this.isMultiple ? values : values[0] || void 0; this.setValue(value); if (!this.isInitial) { this.emit("change"); } } async onValueChange() { this.isInitial = !this.hasUpdated; await this.definedController.whenDefined(); if (!this.isSelectable) { this.updateSelected(); return; } const values = (this.isSingle ? [this.value] : ( // 多选时，传入的值可能是字符串（通过 attribute 属性设置）；或字符串数组（通过 property 属性设置） isString(this.value) ? [this.value] : this.value )).filter((i3) => i3); if (!values.length) { this.setSelectedKeys([]); } else if (this.isSingle) { const firstItem = this.itemsEnabled.find((item) => item.value === values[0]); this.setSelectedKeys(firstItem ? [firstItem.key] : []); } else if (this.isMultiple) { this.setSelectedKeys(this.itemsEnabled.filter((item) => values.includes(item.value)).map((item) => item.key)); } this.updateSelected(); this.updateFocusable(); } /** * 将焦点设置在当前元素上 */ focus(options) { if (this.lastActiveItem) { this.focusOne(this.lastActiveItem, options); } } /** * 从当前元素中移除焦点 */ blur() { if (this.lastActiveItem) { this.lastActiveItem.blur(); } } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.definedController.whenDefined().then(() => { this.updateFocusable(); this.lastActiveItem = this.items.find((item) => item.focusable); }); this.addEventListener("submenu-open", (e2) => { const $parentItem = $$1(e2.target); const submenuItemsEnabled = $parentItem.children("mdui-menu-item:not([disabled])").get(); const submenuLevel = $parentItem.parents("mdui-menu-item").length + 1; if (submenuItemsEnabled.length) { this.lastActiveItems[submenuLevel] = submenuItemsEnabled[0]; this.updateFocusable(); this.focusOne(this.lastActiveItems[submenuLevel]); } }); this.addEventListener("submenu-close", (e2) => { const $parentItem = $$1(e2.target); const submenuLevel = $parentItem.parents("mdui-menu-item").length + 1; if (this.lastActiveItems.length - 1 === submenuLevel) { this.lastActiveItems.pop(); this.updateFocusable(); if (this.lastActiveItems[submenuLevel - 1]) { this.focusOne(this.lastActiveItems[submenuLevel - 1]); } } }); } render() { return ke`<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}" @keydown="${this.onKeyDown}"></slot>`; } setSelectedKeys(selectedKeys) { if (!arraysEqualIgnoreOrder(this.selectedKeys, selectedKeys)) { this.selectedKeys = selectedKeys; } } setValue(value) { if (this.isSingle || isUndefined(this.value) || isUndefined(value)) { this.value = value; } else if (!arraysEqualIgnoreOrder(this.value, value)) { this.value = value; } } // 获取和指定菜单项同级的所有菜单项 getSiblingsItems(item, onlyEnabled = false) { return $$1(item).parent().children(`mdui-menu-item${onlyEnabled ? ":not([disabled])" : ""}`).get(); } // 更新 menu-item 的可聚焦状态 updateFocusable() { if (this.lastActiveItem) { this.items.forEach((item) => { item.focusable = item.key === this.lastActiveItem.key; }); return; } if (!this.selectedKeys.length) { this.itemsEnabled.forEach((item, index) => { item.focusable = !index; }); return; } if (this.isSingle) { this.items.forEach((item) => { item.focusable = this.selectedKeys.includes(item.key); }); return; } if (this.isMultiple) { const focusableItem = this.items.find((item) => item.focusable); if (!(focusableItem == null ? void 0 : focusableItem.key) || !this.selectedKeys.includes(focusableItem.key)) { this.itemsEnabled.filter((item) => this.selectedKeys.includes(item.key)).forEach((item, index) => item.focusable = !index); } } } updateSelected() { this.items.forEach((item) => { item.selected = this.selectedKeys.includes(item.key); }); } // 切换一个菜单项的选中状态 selectOne(item) { if (this.isMultiple) { const selectedKeys = [...this.selectedKeys]; if (selectedKeys.includes(item.key)) { selectedKeys.splice(selectedKeys.indexOf(item.key), 1); } else { selectedKeys.push(item.key); } this.setSelectedKeys(selectedKeys); } if (this.isSingle) { if (this.selectedKeys.includes(item.key)) { this.setSelectedKeys([]); } else { this.setSelectedKeys([item.key]); } } this.isInitial = false; this.updateSelected(); } // 使一个 menu-item 可聚焦 async focusableOne(item) { this.items.forEach((_item) => _item.focusable = _item.key === item.key); await delay(); } // 聚焦一个 menu-item focusOne(item, options) { item.focus(options); } async onClick(event) { if (!this.definedController.isDefined()) { return; } if (this.isSubmenu) { return; } if (event.button) { return; } const target = event.target; const item = target.closest("mdui-menu-item"); if (!item || item.disabled) { return; } this.lastActiveItem = item; if (this.isSelectable && item.value) { this.selectOne(item); } await this.focusableOne(item); this.focusOne(item); } async onKeyDown(event) { if (!this.definedController.isDefined()) { return; } if (this.isSubmenu) { return; } const item = event.target; if (event.key === "Enter") { event.preventDefault(); item.click(); } if (event.key === " ") { event.preventDefault(); if (this.isSelectable && item.value) { this.selectOne(item); await this.focusableOne(item); this.focusOne(item); } } if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) { const items = this.getSiblingsItems(item, true); const activeItem = items.find((item2) => item2.focusable); let index = activeItem ? items.indexOf(activeItem) : 0; if (items.length > 0) { event.preventDefault(); if (event.key === "ArrowDown") { index++; } else if (event.key === "ArrowUp") { index--; } else if (event.key === "Home") { index = 0; } else if (event.key === "End") { index = items.length - 1; } if (index < 0) { index = items.length - 1; } if (index > items.length - 1) { index = 0; } this.lastActiveItem = items[index]; await this.focusableOne(items[index]); this.focusOne(items[index]); return; } } } }; Menu.styles = [componentStyle, menuStyle]; __decorate([ n$1({ reflect: true }) // eslint-disable-next-line prettier/prettier ], Menu.prototype, "selects", void 0); __decorate([ n$1() ], Menu.prototype, "value", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Menu.prototype, "dense", void 0); __decorate([ n$1({ reflect: true, attribute: "submenu-trigger" }) ], Menu.prototype, "submenuTrigger", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "submenu-open-delay" }) ], Menu.prototype, "submenuOpenDelay", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "submenu-close-delay" }) ], Menu.prototype, "submenuCloseDelay", void 0); __decorate([ r$1() ], Menu.prototype, "selectedKeys", void 0); __decorate([ o$1({ flatten: true, selector: "mdui-menu-item" }) ], Menu.prototype, "childrenItems", void 0); __decorate([ watch("dense"), watch("selects"), watch("submenuTrigger"), watch("submenuOpenDelay"), watch("submenuCloseDelay") ], Menu.prototype, "onSlotChange", null); __decorate([ watch("selects", true) ], Menu.prototype, "onSelectsChange", null); __decorate([ watch("selectedKeys", true) ], Menu.prototype, "onSelectedKeysChange", null); __decorate([ watch("value") ], Menu.prototype, "onValueChange", null); Menu = __decorate([ t$1("mdui-menu") ], Menu); const navigationBarItemStyle = i$3`:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;flex:1;overflow:hidden;min-width:3rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding-top:.75rem;padding-bottom:.75rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;left:50%;transform:translateX(-50%);width:4rem;height:2rem;margin-top:.75rem;border-radius:var(--mdui-shape-corner-full)}mdui-ripple:not(.initial){transition:margin-top var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host(:not([active])) mdui-ripple.label-visibility-selected,mdui-ripple.label-visibility-unlabeled{margin-top:1.5rem}.container.label-visibility-unlabeled,:host(:not([active])) .container.label-visibility-selected{padding-top:1.5rem;padding-bottom:0}.container.label-visibility-unlabeled .label,:host(:not([active])) .container.label-visibility-selected .label{opacity:0}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:4rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`; let NavigationBarItem = class NavigationBarItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) { constructor() { super(...arguments); this.isInitial = true; this.active = false; this.disabled = false; this.key = uniqueId(); this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "active-icon"); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.disabled; } get focusElement() { var _a2; return this.href ? (_a2 = this.renderRoot) == null ? void 0 : _a2.querySelector("._a") : this; } get focusDisabled() { return this.disabled; } render() { const labelVisibilityClassName = cc({ "label-visibility-selected": this.labelVisibility === "selected", "label-visibility-labeled": this.labelVisibility === "labeled", "label-visibility-unlabeled": this.labelVisibility === "unlabeled", initial: this.isInitial }); const className2 = cc([ { container: true, "has-active-icon": this.activeIcon || this.hasSlotController.test("active-icon") }, labelVisibilityClassName ]); return ke`<mdui-ripple .noRipple="${!this.active || this.noRipple}" class="${labelVisibilityClassName}" ${Kt(this.rippleRef)}></mdui-ripple>${this.href ? this.renderAnchor({ part: "container", className: className2, content: this.renderInner() }) : ke`<div part="container" class="${className2}">${this.renderInner()}</div>`}`; } renderInner() { return ke`<div part="indicator" class="indicator"><slot name="badge" part="badge" class="badge"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon ? ke`<mdui-icon name="${this.activeIcon}"></mdui-icon>` : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot></div><slot part="label" class="label"></slot>`; } }; NavigationBarItem.styles = [ componentStyle, navigationBarItemStyle ]; __decorate([ n$1({ reflect: true }) ], NavigationBarItem.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "active-icon" }) ], NavigationBarItem.prototype, "activeIcon", void 0); __decorate([ n$1({ reflect: true }) ], NavigationBarItem.prototype, "value", void 0); __decorate([ r$1() ], NavigationBarItem.prototype, "labelVisibility", void 0); __decorate([ r$1() ], NavigationBarItem.prototype, "isInitial", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationBarItem.prototype, "active", void 0); __decorate([ r$1() ], NavigationBarItem.prototype, "disabled", void 0); NavigationBarItem = __decorate([ t$1("mdui-navigation-bar-item") ], NavigationBarItem); const navigationBarStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition-property:transform;transition-duration:var(--mdui-motion-duration-long2);transition-timing-function:var(--mdui-motion-easing-emphasized);height:5rem;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transform:translateY(5.625rem);transition-duration:var(--mdui-motion-duration-short4)}`; let NavigationBar = class NavigationBar2 extends ScrollBehaviorMixin(LayoutItemBase) { constructor() { super(...arguments); this.hide = false; this.labelVisibility = "auto"; this.activeKey = 0; this.isInitial = true; this.definedController = new DefinedController(this, { relatedElements: ["mdui-navigation-bar-item"] }); } get scrollPaddingPosition() { return "bottom"; } get layoutPlacement() { return "bottom"; } async onActiveKeyChange() { await this.definedController.whenDefined(); const item = this.items.find((item2) => item2.key === this.activeKey); this.value = item == null ? void 0 : item.value; if (!this.isInitial) { this.emit("change"); } } async onValueChange() { this.isInitial = !this.hasUpdated; await this.definedController.whenDefined(); const item = this.items.find((item2) => item2.value === this.value); this.activeKey = (item == null ? void 0 : item.key) ?? 0; this.updateItems(); } async onLabelVisibilityChange() { await this.definedController.whenDefined(); this.updateItems(); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.addEventListener("transitionend", (event) => { if (event.target === this) { this.emit(this.hide ? "hidden" : "shown"); } }); } render() { return ke`<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`; } /** * 滚动行为 * 当前仅支持 hide 这一个行为，所以不做行为类型判断 */ runScrollThreshold(isScrollingUp) { if (!isScrollingUp && !this.hide) { const eventProceeded = this.emit("hide", { cancelable: true }); if (eventProceeded) { this.hide = true; } } if (isScrollingUp && this.hide) { const eventProceeded = this.emit("show", { cancelable: true }); if (eventProceeded) { this.hide = false; } } } onClick(event) { if (event.button) { return; } const target = event.target; const item = target.closest("mdui-navigation-bar-item"); if (!item) { return; } this.activeKey = item.key; this.isInitial = false; this.updateItems(); } // 更新 <mdui-navigation-bar-item> 的状态 updateItems() { const items = this.items; const labelVisibility = this.labelVisibility === "auto" ? items.length <= 3 ? "labeled" : "selected" : this.labelVisibility; items.forEach((item) => { item.active = this.activeKey === item.key; item.labelVisibility = labelVisibility; item.isInitial = this.isInitial; }); } async onSlotChange() { await this.definedController.whenDefined(); this.updateItems(); } }; NavigationBar.styles = [ componentStyle, navigationBarStyle ]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationBar.prototype, "hide", void 0); __decorate([ n$1({ reflect: true, attribute: "label-visibility" }) ], NavigationBar.prototype, "labelVisibility", void 0); __decorate([ n$1({ reflect: true }) ], NavigationBar.prototype, "value", void 0); __decorate([ n$1({ reflect: true, attribute: "scroll-behavior" }) ], NavigationBar.prototype, "scrollBehavior", void 0); __decorate([ r$1() ], NavigationBar.prototype, "activeKey", void 0); __decorate([ o$1({ selector: "mdui-navigation-bar-item", flatten: true }) ], NavigationBar.prototype, "items", void 0); __decorate([ watch("activeKey", true) ], NavigationBar.prototype, "onActiveKeyChange", null); __decorate([ watch("value") ], NavigationBar.prototype, "onValueChange", null); __decorate([ watch("labelVisibility", true) ], NavigationBar.prototype, "onLabelVisibilityChange", null); NavigationBar = __decorate([ t$1("mdui-navigation-bar") ], NavigationBar); const breakpoint = (width) => { const window2 = getWindow$1(); const document2 = getDocument(); const computedStyle = window2.getComputedStyle(document2.documentElement); const containerWidth = isElement(width) ? $$1(width).innerWidth() : isNumber(width) ? width : $$1(window2).innerWidth(); const getBreakpointValue = (breakpoint2) => { const width2 = computedStyle.getPropertyValue(`--mdui-breakpoint-${breakpoint2}`).toLowerCase(); return parseFloat(width2); }; const getNextBreakpoint = (breakpoint2) => { switch (breakpoint2) { case "xs": return "sm"; case "sm": return "md"; case "md": return "lg"; case "lg": return "xl"; case "xl": return "xxl"; } }; return { /** * 当前宽度是否大于指定断点值 * @param breakpoint */ up(breakpoint2) { return containerWidth >= getBreakpointValue(breakpoint2); }, /** * 当前宽度是否小于指定断点值 * @param breakpoint */ down(breakpoint2) { return containerWidth < getBreakpointValue(breakpoint2); }, /** * 当前宽度是否在指定断点值内 * @param breakpoint */ only(breakpoint2) { if (breakpoint2 === "xxl") { return this.up(breakpoint2); } else { return this.up(breakpoint2) && this.down(getNextBreakpoint(breakpoint2)); } }, /** * 当前宽度是否不在指定断点值内 * @param breakpoint */ not(breakpoint2) { return !this.only(breakpoint2); }, /** * 当前宽度是否在指定断点值之间 * @param startBreakpoint * @param endBreakpoint * @returns */ between(startBreakpoint, endBreakpoint) { return this.up(startBreakpoint) && this.down(endBreakpoint); } }; }; const style$6 = i$3`:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`; let NavigationDrawer = class NavigationDrawer2 extends LayoutItemBase { constructor() { super(...arguments); this.open = false; this.modal = false; this.closeOnEsc = false; this.closeOnOverlayClick = false; this.placement = "left"; this.contained = false; this.mobile = false; this.overlayRef = ii(); this.panelRef = ii(); this.definedController = new DefinedController(this, { needDomReady: true }); } get layoutPlacement() { return this.placement; } get lockTarget() { return this.contained || this.isParentLayout ? this.parentElement : document.documentElement; } get isModal() { return this.mobile || this.modal; } // contained 变更后，修改监听尺寸变化的元素。为 true 时，监听父元素；为 false 时，监听 body async onContainedChange() { var _a2; await this.definedController.whenDefined(); (_a2 = this.observeResize) == null ? void 0 : _a2.unobserve(); this.observeResize = observeResize(this.contained ? this.parentElement : document.documentElement, () => { const target = this.contained ? this.parentElement : void 0; this.mobile = breakpoint(target).down("md"); if (this.isParentLayout) { this.layoutManager.updateLayout(this, { width: this.isModal ? 0 : void 0 }); } }); } onPlacementChange() { if (this.isParentLayout) { this.layoutManager.updateLayout(this); } } async onMobileChange() { if (!this.open || this.isParentLayout || this.contained) { return; } await this.definedController.whenDefined(); if (this.isModal) { lockScreen(this, this.lockTarget); await this.getLockTargetAnimate(false, 0); } else { unlockScreen(this, this.lockTarget); await this.getLockTargetAnimate(true, 0); } } async onOpenChange() { let panel = this.panelRef.value; let overlay = this.overlayRef.value; const isRight = this.placement === "right"; const easingLinear = getEasing(this, "linear"); const easingEmphasized = getEasing(this, "emphasized"); const setLayoutTransition = (duration, easing) => { $$1(this.layoutManager.getItemsAndMain()).css("transition", isNull(duration) ? null : `all ${duration}ms ${easing}`); }; const stopOldAnimations = async () => { const elements = []; if (this.isModal) { elements.push(overlay, panel); } else if (!this.isParentLayout) { elements.push(this.lockTarget); } if (this.isParentLayout) { const layoutItems = this.layoutManager.getItemsAndMain(); const layoutIndex = layoutItems.indexOf(this); elements.push(...layoutItems.slice(layoutIndex)); } if (!this.isModal && !elements.includes(this)) { elements.push(this); } await Promise.all(elements.map((element) => stopAnimations(element))); }; if (this.open) { const hasUpdated = this.hasUpdated; if (!hasUpdated) { await this.updateComplete; panel = this.panelRef.value; overlay = this.overlayRef.value; } if (hasUpdated) { const eventProceeded = this.emit("open", { cancelable: true }); if (!eventProceeded) { return; } } await this.definedController.whenDefined(); this.style.display = "block"; this.originalTrigger = document.activeElement; if (this.isModal) { this.modalHelper.activate(); if (!this.contained) { lockScreen(this, this.lockTarget); } } await stopOldAnimations(); requestAnimationFrame(() => { const autoFocusTarget = this.querySelector("[autofocus]"); if (autoFocusTarget) { autoFocusTarget.focus({ preventScroll: true }); } else { panel.focus({ preventScroll: true }); } }); const duration = getDuration(this, "long2"); const animations = []; if (this.isModal) { animations.push(animateTo(overlay, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], { duration: hasUpdated ? duration : 0, easing: easingLinear })); } else if (!this.isParentLayout) { animations.push(this.getLockTargetAnimate(true, hasUpdated ? duration : 0)); } if (this.isParentLayout && hasUpdated) { setLayoutTransition(duration, easingEmphasized); this.layoutManager.updateLayout(this); } animations.push(animateTo(this.isModal ? panel : this, [ { transform: `translateX(${isRight ? "" : "-"}100%)` }, { transform: "translateX(0)" } ], { duration: hasUpdated ? duration : 0, easing: easingEmphasized })); await Promise.all(animations); if (!this.open) { return; } if (this.isParentLayout && hasUpdated) { setLayoutTransition(null); } if (hasUpdated) { this.emit("opened"); } } else if (this.hasUpdated) { const eventProceeded = this.emit("close", { cancelable: true }); if (!eventProceeded) { return; } await this.definedController.whenDefined(); if (this.isModal) { this.modalHelper.deactivate(); } await stopOldAnimations(); const duration = getDuration(this, "short4"); const animations = []; if (this.isModal) { animations.push(animateTo(overlay, [{ opacity: 1 }, { opacity: 0 }], { duration, easing: easingLinear })); } else if (!this.isParentLayout) { animations.push(this.getLockTargetAnimate(false, duration)); } if (this.isParentLayout) { setLayoutTransition(duration, easingEmphasized); this.layoutManager.updateLayout(this, { width: 0 }); } animations.push(animateTo(this.isModal ? panel : this, [ { transform: "translateX(0)" }, { transform: `translateX(${isRight ? "" : "-"}100%)` } ], { duration, easing: easingEmphasized })); await Promise.all(animations); if (this.open) { return; } if (this.isParentLayout) { setLayoutTransition(null); } this.style.display = "none"; if (this.isModal && !this.contained) { unlockScreen(this, this.lockTarget); } const trigger = this.originalTrigger; if (isFunction(trigger == null ? void 0 : trigger.focus)) { setTimeout(() => trigger.focus()); } this.emit("closed"); } } connectedCallback() { super.connectedCallback(); this.modalHelper = new Modal(this); } disconnectedCallback() { var _a2; super.disconnectedCallback(); unlockScreen(this, this.lockTarget); (_a2 = this.observeResize) == null ? void 0 : _a2.unobserve(); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.addEventListener("keydown", (event) => { if (this.open && this.closeOnEsc && event.key === "Escape" && this.isModal) { event.stopPropagation(); this.open = false; } }); } render() { return ke`${nn(this.isModal, () => ke`<div ${Kt(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${Kt(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`; } onOverlayClick() { this.emit("overlay-click"); if (this.closeOnOverlayClick) { this.open = false; } } getLockTargetAnimate(open, duration) { const paddingName = this.placement === "right" ? "paddingRight" : "paddingLeft"; const panelWidth = $$1(this.panelRef.value).innerWidth() + "px"; return animateTo(this.lockTarget, [ { [paddingName]: open ? 0 : panelWidth }, { [paddingName]: open ? panelWidth : 0 } ], { duration, easing: getEasing(this, "emphasized"), fill: "forwards" }); } }; NavigationDrawer.styles = [componentStyle, style$6]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationDrawer.prototype, "open", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationDrawer.prototype, "modal", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "close-on-esc" }) ], NavigationDrawer.prototype, "closeOnEsc", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "close-on-overlay-click" }) ], NavigationDrawer.prototype, "closeOnOverlayClick", void 0); __decorate([ n$1({ reflect: true }) // eslint-disable-next-line prettier/prettier ], NavigationDrawer.prototype, "placement", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationDrawer.prototype, "contained", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationDrawer.prototype, "mobile", void 0); __decorate([ watch("contained") ], NavigationDrawer.prototype, "onContainedChange", null); __decorate([ watch("placement", true) ], NavigationDrawer.prototype, "onPlacementChange", null); __decorate([ watch("mobile", true), watch("modal", true) ], NavigationDrawer.prototype, "onMobileChange", null); __decorate([ watch("open") ], NavigationDrawer.prototype, "onOpenChange", null); NavigationDrawer = __decorate([ t$1("mdui-navigation-drawer") ], NavigationDrawer); const navigationRailStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;border-radius:0 var(--shape-corner) var(--shape-corner) 0;z-index:var(--z-index);width:5rem;background-color:rgb(var(--mdui-color-surface));padding:.375rem .75rem}:host([contained]){position:absolute}:host([divider]){border-right:.0625rem solid rgb(var(--mdui-color-surface-variant));width:5.0625rem}:host([placement=right]){left:initial;right:0;border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host([placement=right][divider]){border-right:none;border-left:.0625rem solid rgb(var(--mdui-color-surface-variant))}.bottom,.items,.top{display:flex;flex-direction:column;align-items:center;width:100%}.top{margin-bottom:1.75rem}.bottom{margin-top:1.75rem}::slotted([slot=bottom]),::slotted([slot=top]),::slotted(mdui-navigation-rail-item){margin-top:.375rem;margin-bottom:.375rem}:host([alignment=start]) .top-spacer{flex-grow:0}:host([alignment=start]) .bottom-spacer{flex-grow:1}:host([alignment=end]) .top-spacer{flex-grow:1}:host([alignment=end]) .bottom-spacer{flex-grow:0}:host([alignment=center]){justify-content:center}:host([alignment=center]) .bottom,:host([alignment=center]) .top{position:absolute}:host([alignment=center]) .top{top:.375rem}:host([alignment=center]) .bottom{bottom:.375rem}`; let NavigationRail = class NavigationRail2 extends LayoutItemBase { constructor() { super(...arguments); this.placement = "left"; this.alignment = "start"; this.contained = false; this.divider = false; this.activeKey = 0; this.hasSlotController = new HasSlotController(this, "top", "bottom"); this.definedController = new DefinedController(this, { relatedElements: ["mdui-navigation-rail-item"] }); this.isInitial = true; } get layoutPlacement() { return this.placement; } get parentTarget() { return this.contained || this.isParentLayout ? this.parentElement : document.body; } get isRight() { return this.placement === "right"; } get paddingValue() { return ["fixed", "absolute"].includes($$1(this).css("position")) ? this.offsetWidth : void 0; } async onActiveKeyChange() { await this.definedController.whenDefined(); const item = this.items.find((item2) => item2.key === this.activeKey); this.value = item == null ? void 0 : item.value; if (!this.isInitial) { this.emit("change"); } } async onValueChange() { this.isInitial = !this.hasUpdated; await this.definedController.whenDefined(); const item = this.items.find((item2) => item2.value === this.value); this.activeKey = (item == null ? void 0 : item.key) ?? 0; this.updateItems(); } async onContainedChange() { if (this.isParentLayout) { return; } await this.definedController.whenDefined(); $$1(document.body).css({ paddingLeft: this.contained || this.isRight ? null : this.paddingValue, paddingRight: this.contained || !this.isRight ? null : this.paddingValue }); $$1(this.parentElement).css({ paddingLeft: this.contained && !this.isRight ? this.paddingValue : null, paddingRight: this.contained && this.isRight ? this.paddingValue : null }); } async onPlacementChange() { var _a2; await this.definedController.whenDefined(); (_a2 = this.layoutManager) == null ? void 0 : _a2.updateLayout(this); this.items.forEach((item) => { item.placement = this.placement; }); if (!this.isParentLayout) { $$1(this.parentTarget).css({ paddingLeft: this.isRight ? null : this.paddingValue, paddingRight: this.isRight ? this.paddingValue : null }); } } connectedCallback() { super.connectedCallback(); if (!this.isParentLayout) { this.definedController.whenDefined().then(() => { $$1(this.parentTarget).css({ paddingLeft: this.isRight ? null : this.paddingValue, paddingRight: this.isRight ? this.paddingValue : null }); }); } } disconnectedCallback() { super.disconnectedCallback(); if (!this.isParentLayout && this.definedController.isDefined()) { $$1(this.parentTarget).css({ paddingLeft: this.isRight ? void 0 : null, paddingRight: this.isRight ? null : void 0 }); } } render() { const hasTopSlot = this.hasSlotController.test("top"); const hasBottomSlot = this.hasSlotController.test("bottom"); return ke`${nn(hasTopSlot, () => ke`<slot name="top" part="top" class="top"></slot>`)} <span class="top-spacer"></span><slot part="items" class="items" @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><span class="bottom-spacer"></span> ${nn(hasBottomSlot, () => ke`<slot name="bottom" part="bottom" class="bottom"></slot>`)}`; } onClick(event) { if (event.button) { return; } const target = event.target; const item = target.closest("mdui-navigation-rail-item"); if (!item) { return; } this.activeKey = item.key; this.isInitial = false; this.updateItems(); } updateItems() { this.items.forEach((item) => { item.active = this.activeKey === item.key; item.placement = this.placement; item.isInitial = this.isInitial; }); } async onSlotChange() { await this.definedController.whenDefined(); this.updateItems(); } }; NavigationRail.styles = [ componentStyle, navigationRailStyle ]; __decorate([ n$1({ reflect: true }) ], NavigationRail.prototype, "value", void 0); __decorate([ n$1({ reflect: true }) // eslint-disable-next-line prettier/prettier ], NavigationRail.prototype, "placement", void 0); __decorate([ n$1({ reflect: true }) ], NavigationRail.prototype, "alignment", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationRail.prototype, "contained", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationRail.prototype, "divider", void 0); __decorate([ r$1() ], NavigationRail.prototype, "activeKey", void 0); __decorate([ o$1({ selector: "mdui-navigation-rail-item", flatten: true }) ], NavigationRail.prototype, "items", void 0); __decorate([ watch("activeKey", true) ], NavigationRail.prototype, "onActiveKeyChange", null); __decorate([ watch("value") ], NavigationRail.prototype, "onValueChange", null); __decorate([ watch("contained", true) ], NavigationRail.prototype, "onContainedChange", null); __decorate([ watch("placement", true) ], NavigationRail.prototype, "onPlacementChange", null); NavigationRail = __decorate([ t$1("mdui-navigation-rail") ], NavigationRail); const navigationRailItemStyle = i$3`:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;width:100%;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:3.5rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;width:3.5rem;height:2rem;border-radius:var(--mdui-shape-corner-full)}.container:not(.has-label)+mdui-ripple{height:3.5rem}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.placement-right::slotted([slot=badge]){transform:translate(-50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.placement-right::slotted([slot=badge][variant=small]){transform:translate(-.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active-icon]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:3.5rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) :not(.has-label) .indicator{height:3.5rem}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`; let NavigationRailItem = class NavigationRailItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) { constructor() { super(...arguments); this.active = false; this.isInitial = true; this.placement = "left"; this.disabled = false; this.key = uniqueId(); this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "[default]", "active-icon"); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.disabled; } get focusElement() { var _a2; return this.href ? (_a2 = this.renderRoot) == null ? void 0 : _a2.querySelector("._a") : this; } get focusDisabled() { return this.disabled; } render() { const hasDefaultSlot = this.hasSlotController.test("[default]"); const className2 = cc({ container: true, "has-label": hasDefaultSlot, "has-active-icon": this.activeIcon || this.hasSlotController.test("active-icon"), initial: this.isInitial }); return ke`${this.href ? this.renderAnchor({ part: "container", className: className2, content: this.renderInner(hasDefaultSlot) }) : ke`<div part="container" class="${className2}">${this.renderInner(hasDefaultSlot)}</div>`}<mdui-ripple .noRipple="${!this.active || this.noRipple}" ${Kt(this.rippleRef)}></mdui-ripple>`; } renderInner(hasDefaultSlot) { return ke`<div part="indicator" class="indicator"><slot name="badge" part="badge" class="${Rt({ badge: true, "placement-right": this.placement === "right" })}"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon ? ke`<mdui-icon name="${this.activeIcon}"></mdui-icon>` : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot></div>${hasDefaultSlot ? ke`<slot part="label" class="label"></slot>` : D}`; } }; NavigationRailItem.styles = [ componentStyle, navigationRailItemStyle ]; __decorate([ n$1({ reflect: true }) ], NavigationRailItem.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "active-icon" }) ], NavigationRailItem.prototype, "activeIcon", void 0); __decorate([ n$1({ reflect: true }) ], NavigationRailItem.prototype, "value", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], NavigationRailItem.prototype, "active", void 0); __decorate([ r$1() ], NavigationRailItem.prototype, "isInitial", void 0); __decorate([ r$1() ], NavigationRailItem.prototype, "placement", void 0); __decorate([ r$1() ], NavigationRailItem.prototype, "disabled", void 0); NavigationRailItem = __decorate([ t$1("mdui-navigation-rail-item") ], NavigationRailItem); let IconCircle = class IconCircle2 extends h { render() { return svgTag('<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/>'); } }; IconCircle.styles = style$e; IconCircle = __decorate([ t$1("mdui-icon-circle") ], IconCircle); let IconRadioButtonUnchecked = class IconRadioButtonUnchecked2 extends h { render() { return svgTag('<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>'); } }; IconRadioButtonUnchecked.styles = style$e; IconRadioButtonUnchecked = __decorate([ t$1("mdui-icon-radio-button-unchecked") ], IconRadioButtonUnchecked); const radioStyle = i$3`:host{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none;border-radius:.125rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon{display:flex;position:absolute;font-size:1.5rem}:not(.initial) .icon{transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.unchecked-icon{transition-property:color;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .unchecked-icon,:host([hover]) .unchecked-icon,:host([pressed]) .unchecked-icon{color:rgb(var(--mdui-color-on-surface))}.checked-icon{opacity:0;transform:scale(.2);transition-property:color,opacity,transform;color:rgb(var(--mdui-color-primary))}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:50%;width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface))}.label:not(.initial){transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .checked-icon{opacity:1;transform:scale(.5)}i.invalid{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}i.invalid .icon{color:rgb(var(--mdui-color-error))}.label.invalid{color:rgb(var(--mdui-color-error))}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon,:host([group-disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label,:host([group-disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}`; let Radio = class Radio2 extends RippleMixin(FocusableMixin(MduiElement)) { constructor() { super(...arguments); this.value = ""; this.disabled = false; this.checked = false; this.invalid = false; this.groupDisabled = false; this.focusable = true; this.isInitial = true; this.rippleRef = ii(); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.isDisabled(); } get focusElement() { return this; } get focusDisabled() { return this.isDisabled() || !this.focusable; } onCheckedChange() { this.emit("change"); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.addEventListener("click", () => { if (!this.isDisabled()) { this.checked = true; } }); } render() { const className2 = Rt({ invalid: this.invalid, initial: this.isInitial }); return ke`<i part="control" class="${className2}"><mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon ? ke`<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-radio-button-unchecked class="i"></mdui-icon-radio-button-unchecked>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon ? ke`<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label ${className2}"></slot>`; } isDisabled() { return this.disabled || this.groupDisabled; } }; Radio.styles = [componentStyle, radioStyle]; __decorate([ n$1({ reflect: true }) ], Radio.prototype, "value", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Radio.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Radio.prototype, "checked", void 0); __decorate([ n$1({ reflect: true, attribute: "unchecked-icon" }) ], Radio.prototype, "uncheckedIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "checked-icon" }) ], Radio.prototype, "checkedIcon", void 0); __decorate([ r$1() ], Radio.prototype, "invalid", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "group-disabled" }) ], Radio.prototype, "groupDisabled", void 0); __decorate([ r$1() ], Radio.prototype, "focusable", void 0); __decorate([ r$1() ], Radio.prototype, "isInitial", void 0); __decorate([ watch("checked", true) ], Radio.prototype, "onCheckedChange", null); Radio = __decorate([ t$1("mdui-radio") ], Radio); const radioGroupStyle = i$3`:host{display:inline-block}fieldset{border:none;padding:0;margin:0;min-width:0}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}`; let RadioGroup = class RadioGroup2 extends MduiElement { constructor() { super(...arguments); this.disabled = false; this.name = ""; this.value = ""; this.defaultValue = ""; this.required = false; this.invalid = false; this.isInitial = true; this.inputRef = ii(); this.formController = new FormController(this); this.definedController = new DefinedController(this, { relatedElements: ["mdui-radio"] }); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.inputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.inputRef.value.validationMessage; } // 为了使 <mdui-radio> 可以不是该组件的直接子元素，这里不用 @queryAssignedElements() get items() { return $$1(this).find("mdui-radio").get(); } get itemsEnabled() { return $$1(this).find("mdui-radio:not([disabled])").get(); } async onValueChange() { var _a2; this.isInitial = false; await this.definedController.whenDefined(); this.emit("input"); this.emit("change"); this.updateItems(); this.updateRadioFocusable(); await this.updateComplete; const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.inputRef.value.checkValidity(); } } async onInvalidChange() { await this.definedController.whenDefined(); this.updateItems(); } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.inputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.inputRef.value.reportValidity(); if (this.invalid) { const eventProceeded = this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); if (!eventProceeded) { this.inputRef.value.blur(); this.inputRef.value.focus(); } } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.inputRef.value.setCustomValidity(message); this.invalid = !this.inputRef.value.checkValidity(); } render() { return ke`<fieldset><input ${Kt(this.inputRef)} type="radio" class="input" name="${to(this.name)}" value="${to(this.value)}" .checked="${!!this.value}" .required="${this.required}" tabindex="-1" @keydown="${this.onKeyDown}"><slot @click="${this.onClick}" @keydown="${this.onKeyDown}" @slotchange="${this.onSlotChange}" @change="${this.onCheckedChange}"></slot></fieldset>`; } // 更新 mdui-radio 的 checked 后，需要更新可聚焦状态 // 同一个 mdui-radio-group 中的多个 mdui-radio，仅有一个可聚焦 // 若有已选中的，则已选中的可聚焦；若没有已选中的，则第一个可聚焦 updateRadioFocusable() { const items = this.items; const itemChecked = items.find((item) => item.checked); if (itemChecked) { items.forEach((item) => { item.focusable = item === itemChecked; }); } else { this.itemsEnabled.forEach((item, index) => { item.focusable = !index; }); } } async onClick(event) { await this.definedController.whenDefined(); const target = event.target; const item = target.closest("mdui-radio"); if (!item || item.disabled) { return; } this.value = item.value; await this.updateComplete; item.focus(); } /** * 在内部的 `<mdui-radio>` 上按下按键时，在 `<mdui-radio>` 之间切换焦点 */ async onKeyDown(event) { if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) { return; } event.preventDefault(); await this.definedController.whenDefined(); const items = this.itemsEnabled; const itemChecked = items.find((item) => item.checked) ?? items[0]; const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1; let index = items.indexOf(itemChecked) + incr; if (index < 0) { index = items.length - 1; } if (index > items.length - 1) { index = 0; } this.value = items[index].value; await this.updateComplete; items[index].focus(); } async onSlotChange() { await this.definedController.whenDefined(); this.updateItems(); this.updateRadioFocusable(); } /** * slot 中的 mdui-radio 的 checked 变更时触发的事件 */ onCheckedChange(event) { event.stopPropagation(); } // 更新 <mdui-radio> 的状态 updateItems() { this.items.forEach((item) => { item.checked = item.value === this.value; item.invalid = this.invalid; item.groupDisabled = this.disabled; item.isInitial = this.isInitial; }); } }; RadioGroup.styles = [ componentStyle, radioGroupStyle ]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], RadioGroup.prototype, "disabled", void 0); __decorate([ n$1({ reflect: true }) ], RadioGroup.prototype, "form", void 0); __decorate([ n$1({ reflect: true }) ], RadioGroup.prototype, "name", void 0); __decorate([ n$1({ reflect: true }) ], RadioGroup.prototype, "value", void 0); __decorate([ defaultValue() ], RadioGroup.prototype, "defaultValue", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], RadioGroup.prototype, "required", void 0); __decorate([ r$1() ], RadioGroup.prototype, "invalid", void 0); __decorate([ watch("value", true) ], RadioGroup.prototype, "onValueChange", null); __decorate([ watch("invalid", true), watch("disabled") ], RadioGroup.prototype, "onInvalidChange", null); RadioGroup = __decorate([ t$1("mdui-radio-group") ], RadioGroup); /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ function* oo(o2, f2) { if (void 0 !== o2) { let i3 = 0; for (const t2 of o2) yield f2(t2, i3++); } } const sliderBaseStyle = i$3`:host{position:relative;display:block;width:100%;-webkit-tap-highlight-color:transparent;height:2.5rem;padding:0 1.25rem}label{position:relative;display:block;width:100%;height:100%}input[type=range]{position:absolute;inset:0;z-index:4;height:100%;cursor:pointer;opacity:0;appearance:none;width:calc(100% + 20rem * 2 / 16);margin:0 -1.25rem;padding:0 .75rem}:host([disabled]) input[type=range]{cursor:not-allowed}.track-active,.track-inactive{position:absolute;top:50%;height:.25rem;margin-top:-.125rem}.track-inactive{left:-.125rem;right:-.125rem;border-radius:var(--mdui-shape-corner-full);background-color:rgb(var(--mdui-color-surface-container-highest))}.invalid .track-inactive{background-color:rgba(var(--mdui-color-error),.12)}:host([disabled]) .track-inactive{background-color:rgba(var(--mdui-color-on-surface),.12)}.track-active{background-color:rgb(var(--mdui-color-primary))}.invalid .track-active{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .track-active{background-color:rgba(var(--mdui-color-on-surface),.38)}.handle{position:absolute;top:50%;transform:translate(-50%);cursor:pointer;z-index:2;width:2.5rem;height:2.5rem;margin-top:-1.25rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.invalid .handle{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.handle .elevation,.handle::before{position:absolute;display:block;content:' ';left:.625rem;top:.625rem;width:1.25rem;height:1.25rem;border-radius:var(--mdui-shape-corner-full)}.handle .elevation{background-color:rgb(var(--mdui-color-primary));box-shadow:var(--mdui-elevation-level1)}.invalid .handle .elevation{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .handle .elevation{background-color:rgba(var(--mdui-color-on-surface),.38);box-shadow:var(--mdui-elevation-level0)}.handle::before{background-color:rgb(var(--mdui-color-background))}.handle mdui-ripple{border-radius:var(--mdui-shape-corner-full)}.label{position:absolute;left:50%;transform:translateX(-50%) scale(0);transform-origin:center bottom;display:flex;align-items:center;justify-content:center;cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform var(--mdui-motion-duration-short2) var(--mdui-motion-easing-standard);bottom:2.5rem;min-width:1.75rem;height:1.75rem;padding:.375rem .5rem;border-radius:var(--mdui-shape-corner-full);color:rgb(var(--mdui-color-on-primary));font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height);background-color:rgb(var(--mdui-color-primary))}.invalid .label{color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error))}.label::after{content:' ';position:absolute;z-index:-1;transform:rotate(45deg);width:.875rem;height:.875rem;bottom:-.125rem;background-color:rgb(var(--mdui-color-primary))}.invalid .label::after{background-color:rgb(var(--mdui-color-error))}.label-visible{transform:translateX(-50%) scale(1);transition:transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.tickmark{position:absolute;top:50%;transform:translate(-50%);width:.125rem;height:.125rem;margin-top:-.0625rem;border-radius:var(--mdui-shape-corner-full);background-color:rgba(var(--mdui-color-on-surface-variant),.38)}.invalid .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}.invalid .tickmark.active{background-color:rgba(var(--mdui-color-on-error),.38)}:host([disabled]) .tickmark{background-color:rgba(var(--mdui-color-on-surface),.38)}`; class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) { constructor() { super(...arguments); this.min = 0; this.max = 100; this.step = 1; this.tickmarks = false; this.nolabel = false; this.disabled = false; this.name = ""; this.invalid = false; this.labelVisible = false; this.inputRef = ii(); this.trackActiveRef = ii(); this.labelFormatter = (value) => value.toString(); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.inputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.inputRef.value.validationMessage; } get rippleDisabled() { return this.disabled; } get focusElement() { return this.inputRef.value; } get focusDisabled() { return this.disabled; } onDisabledChange() { this.invalid = !this.inputRef.value.checkValidity(); } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.inputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.inputRef.value.reportValidity(); if (this.invalid) { const eventProceeded = this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); if (!eventProceeded) { this.blur(); this.focus(); } } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.inputRef.value.setCustomValidity(message); this.invalid = !this.inputRef.value.checkValidity(); } /** * value 不在 min、max 或 step 的限制范围内时，修正 value 的值 */ fixValue(value) { const { min, max, step } = this; value = Math.min(Math.max(value, min), max); const steps = Math.round((value - min) / step); let fixedValue = min + steps * step; if (fixedValue > max) { fixedValue -= step; } return fixedValue; } /** * 获取候选值组成的数组 */ getCandidateValues() { return Array.from({ length: this.max - this.min + 1 }, (_2, index) => index + this.min).filter((value) => !((value - this.min) % this.step)); } /** * 渲染浮动标签 */ renderLabel(value) { return nn(!this.nolabel, () => ke`<div part="label" class="label ${Rt({ "label-visible": this.labelVisible })}">${this.labelFormatter(value)}</div>`); } onChange() { this.emit("change"); } } SliderBase.styles = [ componentStyle, sliderBaseStyle ]; __decorate([ n$1({ type: Number, reflect: true }) ], SliderBase.prototype, "min", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], SliderBase.prototype, "max", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], SliderBase.prototype, "step", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SliderBase.prototype, "tickmarks", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SliderBase.prototype, "nolabel", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SliderBase.prototype, "disabled", void 0); __decorate([ n$1({ reflect: true }) ], SliderBase.prototype, "form", void 0); __decorate([ n$1({ reflect: true }) ], SliderBase.prototype, "name", void 0); __decorate([ r$1() ], SliderBase.prototype, "invalid", void 0); __decorate([ r$1() ], SliderBase.prototype, "labelVisible", void 0); __decorate([ n$1({ attribute: false }) ], SliderBase.prototype, "labelFormatter", void 0); __decorate([ watch("disabled", true) ], SliderBase.prototype, "onDisabledChange", null); let RangeSlider = class RangeSlider2 extends SliderBase { constructor() { super(...arguments); this.defaultValue = []; this.currentHandle = "start"; this.rippleStartRef = ii(); this.rippleEndRef = ii(); this.handleStartRef = ii(); this.handleEndRef = ii(); this.formController = new FormController(this); this._value = []; this.getRippleIndex = () => { if (this.hoverHandle) { return this.hoverHandle === "start" ? 0 : 1; } return this.currentHandle === "start" ? 0 : 1; }; } /** * 滑块的值，为数组格式，将于表单数据一起提交。 * * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。 */ get value() { return this._value; } set value(_value) { const oldValue = [...this._value]; this._value = [this.fixValue(_value[0]), this.fixValue(_value[1])]; this.requestUpdate("value", oldValue); this.updateComplete.then(() => { var _a2; this.updateStyle(); const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.inputRef.value.checkValidity(); } }); } get rippleElement() { return [this.rippleStartRef.value, this.rippleEndRef.value]; } connectedCallback() { super.connectedCallback(); if (!this.value.length) { this.value = [this.min, this.max]; } this.value[0] = this.fixValue(this.value[0]); this.value[1] = this.fixValue(this.value[1]); if (!this.defaultValue.length) { this.defaultValue = [...this.value]; } } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); const getCurrentHandle = (event) => { const $this = $$1(this); const paddingLeft = parseFloat($this.css("padding-left")); const paddingRight = parseFloat($this.css("padding-right")); const percent = (event.offsetX - paddingLeft) / (this.clientWidth - paddingLeft - paddingRight); const pointerValue = (this.max - this.min) * percent + this.min; const middleValue = (this.value[1] - this.value[0]) / 2 + this.value[0]; return pointerValue > middleValue ? "end" : "start"; }; const onTouchStart = () => { if (!this.disabled) { this.labelVisible = true; } }; const onTouchEnd = () => { if (!this.disabled) { this.labelVisible = false; } }; this.addEventListener("touchstart", onTouchStart); this.addEventListener("mousedown", onTouchStart); this.addEventListener("touchend", onTouchEnd); this.addEventListener("mouseup", onTouchEnd); this.addEventListener("pointerdown", (event) => { this.currentHandle = getCurrentHandle(event); }); this.addEventListener("pointermove", (event) => { const currentHandle = getCurrentHandle(event); if (this.hoverHandle !== currentHandle) { this.endHover(event); this.hoverHandle = currentHandle; this.startHover(event); } }); this.updateStyle(); } /** * <input /> 用于提供拖拽操作 * <input class="invalid" /> 用于提供 html5 自带的表单错误提示 */ render() { return ke`<label class="${Rt({ invalid: this.invalid })}"><input ${Kt(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${Kt(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${Kt(this.handleStartRef)} part="handle" class="handle start" style="${se({ "z-index": this.currentHandle === "start" ? "2" : "1" })}"><div class="elevation"></div><mdui-ripple ${Kt(this.rippleStartRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[0])}</div><div ${Kt(this.handleEndRef)} part="handle" class="handle end" style="${se({ "z-index": this.currentHandle === "end" ? "2" : "1" })}"><div class="elevation"></div><mdui-ripple ${Kt(this.rippleEndRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[1])}</div>${nn(this.tickmarks, () => oo(this.getCandidateValues(), (value) => ke`<div part="tickmark" class="tickmark ${Rt({ active: value > this.value[0] && value < this.value[1] })}" style="${se({ left: `${(value - this.min) / this.max * 100}%`, display: value === this.value[0] || value === this.value[1] ? "none" : "block" })}"></div>`))}</label>`; } updateStyle() { const getPercent = (value) => (value - this.min) / (this.max - this.min) * 100; const startPercent = getPercent(this.value[0]); const endPercent = getPercent(this.value[1]); this.trackActiveRef.value.style.width = `${endPercent - startPercent}%`; this.trackActiveRef.value.style.left = `${startPercent}%`; this.handleStartRef.value.style.left = `${startPercent}%`; this.handleEndRef.value.style.left = `${endPercent}%`; } onInput() { const isStart = this.currentHandle === "start"; const value = parseFloat(this.inputRef.value.value); const startValue = this.value[0]; const endValue = this.value[1]; const doInput = () => { this.updateStyle(); }; if (isStart) { if (value <= endValue) { this.value = [value, endValue]; doInput(); } else if (startValue !== endValue) { this.value = [endValue, endValue]; doInput(); } } else { if (value >= startValue) { this.value = [startValue, value]; doInput(); } else if (startValue !== endValue) { this.value = [startValue, startValue]; doInput(); } } } }; RangeSlider.styles = [SliderBase.styles]; __decorate([ defaultValue() ], RangeSlider.prototype, "defaultValue", void 0); __decorate([ r$1() ], RangeSlider.prototype, "currentHandle", void 0); __decorate([ n$1({ type: Array, attribute: false }) ], RangeSlider.prototype, "value", null); RangeSlider = __decorate([ t$1("mdui-range-slider") ], RangeSlider); const segmentedButtonStyle = i$3`:host{position:relative;display:inline-flex;flex-grow:1;flex-shrink:0;float:left;height:100%;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;border:.0625rem solid rgb(var(--mdui-color-outline))}.button{width:100%;padding:0 .75rem}:host([invalid]){color:rgb(var(--mdui-color-error));border-color:rgb(var(--mdui-color-error))}:host([invalid]) .button{background-color:rgb(var(--mdui-color-error-container))}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var( --mdui-color-on-secondary-container )}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none;color:rgba(var(--mdui-color-on-surface),38%);border-color:rgba(var(--mdui-color-on-surface),12%)}:host([loading]){cursor:default;pointer-events:none}:host(:not(.mdui-segmented-button-first)){margin-left:-.0625rem}:host(.mdui-segmented-button-first){border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host(.mdui-segmented-button-last){border-radius:0 var(--shape-corner) var(--shape-corner) 0}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}mdui-circular-progress{width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{opacity:.38}.label{display:inline-flex}.has-icon .label{padding-left:.5rem}.has-end-icon .label{padding-right:.5rem}`; let SegmentedButton = class SegmentedButton2 extends ButtonBase { constructor() { super(...arguments); this.selected = false; this.invalid = false; this.groupDisabled = false; this.key = uniqueId(); this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "[default]", "icon", "end-icon"); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.isDisabled() || this.loading; } get focusDisabled() { return this.isDisabled() || this.loading; } render() { const className2 = cc({ button: true, "has-icon": this.icon || this.selected || this.loading || this.hasSlotController.test("icon"), "has-end-icon": this.endIcon || this.hasSlotController.test("end-icon") }); return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton() ? this.renderButton({ className: className2, part: "button", content: this.renderInner() }) : this.isDisabled() || this.loading ? ke`<span part="button" class="_a ${className2}">${this.renderInner()}</span>` : this.renderAnchor({ className: className2, part: "button", content: this.renderInner() })}`; } isDisabled() { return this.disabled || this.groupDisabled; } renderIcon() { if (this.loading) { return this.renderLoading(); } if (this.selected) { return ke`<slot name="selected-icon" part="selected-icon" class="selected-icon">${this.selectedIcon ? ke`<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-check class="i"></mdui-icon-check>`}</slot>`; } return ke`<slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}" class="i"></mdui-icon>` : nothingTemplate}</slot>`; } renderLabel() { const hasLabel = this.hasSlotController.test("[default]"); if (!hasLabel) { return nothingTemplate; } return ke`<slot part="label" class="label"></slot>`; } renderEndIcon() { return ke`<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon ? ke`<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>` : nothingTemplate}</slot>`; } renderInner() { return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()]; } }; SegmentedButton.styles = [ ButtonBase.styles, segmentedButtonStyle ]; __decorate([ n$1({ reflect: true }) ], SegmentedButton.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], SegmentedButton.prototype, "endIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "selected-icon" }) ], SegmentedButton.prototype, "selectedIcon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SegmentedButton.prototype, "selected", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SegmentedButton.prototype, "invalid", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "group-disabled" }) ], SegmentedButton.prototype, "groupDisabled", void 0); SegmentedButton = __decorate([ t$1("mdui-segmented-button") ], SegmentedButton); const segmentedButtonGroupStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;vertical-align:middle;height:2.5rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`; let SegmentedButtonGroup = class SegmentedButtonGroup2 extends MduiElement { constructor() { super(...arguments); this.fullWidth = false; this.disabled = false; this.required = false; this.name = ""; this.value = ""; this.defaultValue = ""; this.selectedKeys = []; this.invalid = false; this.isInitial = true; this.inputRef = ii(); this.formController = new FormController(this); this.definedController = new DefinedController(this, { relatedElements: ["mdui-segmented-button"] }); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.inputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.inputRef.value.validationMessage; } // 为了使 <mdui-segmented-button> 可以不是该组件的直接子元素，这里不用 @queryAssignedElements() get items() { return $$1(this).find("mdui-segmented-button").get(); } // 所有的子项元素（不包含已禁用的） get itemsEnabled() { return $$1(this).find("mdui-segmented-button:not([disabled])").get(); } // 是否为单选 get isSingle() { return this.selects === "single"; } // 是否为多选 get isMultiple() { return this.selects === "multiple"; } // 是否可选择 get isSelectable() { return this.isSingle || this.isMultiple; } async onSelectsChange() { if (!this.isSelectable) { this.setSelectedKeys([]); } else if (this.isSingle) { this.setSelectedKeys(this.selectedKeys.slice(0, 1)); } await this.onSelectedKeysChange(); } async onSelectedKeysChange() { await this.definedController.whenDefined(); const values = this.itemsEnabled.filter((item) => this.selectedKeys.includes(item.key)).map((item) => item.value); const value = this.isMultiple ? values : values[0] || ""; this.setValue(value); if (!this.isInitial) { this.emit("change"); } } async onValueChange() { var _a2; this.isInitial = !this.hasUpdated; await this.definedController.whenDefined(); if (!this.isSelectable) { this.updateItems(); return; } const values = (this.isSingle ? [this.value] : ( // 多选时，传入的值可能是字符串（通过 attribute 属性设置）；或字符串数组（通过 property 属性设置） isString(this.value) ? [this.value] : this.value )).filter((i3) => i3); if (!values.length) { this.setSelectedKeys([]); } else if (this.isSingle) { const firstItem = this.itemsEnabled.find((item) => item.value === values[0]); this.setSelectedKeys(firstItem ? [firstItem.key] : []); } else if (this.isMultiple) { this.setSelectedKeys(this.itemsEnabled.filter((item) => values.includes(item.value)).map((item) => item.key)); } this.updateItems(); if (!this.isInitial) { const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.inputRef.value.checkValidity(); } } } async onInvalidChange() { await this.definedController.whenDefined(); this.updateItems(); } connectedCallback() { super.connectedCallback(); this.value = this.isMultiple && isString(this.value) ? this.value ? [this.value] : [] : this.value; this.defaultValue = this.selects === "multiple" ? [] : ""; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.inputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.inputRef.value.reportValidity(); if (this.invalid) { const eventProceeded = this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); if (!eventProceeded) { this.inputRef.value.blur(); this.inputRef.value.focus(); } } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.inputRef.value.setCustomValidity(message); this.invalid = !this.inputRef.value.checkValidity(); } render() { return ke`${nn(this.isSelectable && this.isSingle, () => ke`<input ${Kt(this.inputRef)} type="radio" name="${to(this.name)}" value="1" .disabled="${this.disabled}" .required="${this.required}" .checked="${!!this.value}" tabindex="-1" @keydown="${this.onInputKeyDown}">`)}${nn(this.isSelectable && this.isMultiple, () => ke`<select ${Kt(this.inputRef)} name="${to(this.name)}" .disabled="${this.disabled}" .required="${this.required}" multiple="multiple" tabindex="-1" @keydown="${this.onInputKeyDown}">${oo(this.value, (value) => ke`<option selected="selected" value="${value}"></option>`)}</select>`)}<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`; } // 切换一个元素的选中状态 selectOne(item) { if (this.isMultiple) { const selectedKeys = [...this.selectedKeys]; if (selectedKeys.includes(item.key)) { selectedKeys.splice(selectedKeys.indexOf(item.key), 1); } else { selectedKeys.push(item.key); } this.setSelectedKeys(selectedKeys); } if (this.isSingle) { if (this.selectedKeys.includes(item.key)) { this.setSelectedKeys([]); } else { this.setSelectedKeys([item.key]); } } this.isInitial = false; this.updateItems(); } async onClick(event) { if (event.button) { return; } await this.definedController.whenDefined(); const target = event.target; const item = target.closest("mdui-segmented-button"); if (!item || item.disabled) { return; } if (this.isSelectable && item.value) { this.selectOne(item); } } /** * 在隐藏的 `<input>` 或 `<select>` 上按下按键时，切换选中状态 * 通常为验证不通过时，默认聚焦到 `<input>` 或 `<select>` 上，此时按下按键，切换第一个元素的选中状态 */ async onInputKeyDown(event) { if (!["Enter", " "].includes(event.key)) { return; } event.preventDefault(); await this.definedController.whenDefined(); if (this.isSingle) { const input = event.target; input.checked = !input.checked; this.selectOne(this.itemsEnabled[0]); this.itemsEnabled[0].focus(); } if (this.isMultiple) { this.selectOne(this.itemsEnabled[0]); this.itemsEnabled[0].focus(); } } async onSlotChange() { await this.definedController.whenDefined(); this.updateItems(true); } setSelectedKeys(selectedKeys) { if (!arraysEqualIgnoreOrder(this.selectedKeys, selectedKeys)) { this.selectedKeys = selectedKeys; } } setValue(value) { if (this.isSingle) { this.value = value; } else if (!arraysEqualIgnoreOrder(this.value, value)) { this.value = value; } } updateItems(slotChange = false) { const items = this.items; items.forEach((item, index) => { item.invalid = this.invalid; item.groupDisabled = this.disabled; item.selected = this.selectedKeys.includes(item.key); if (slotChange) { item.classList.toggle("mdui-segmented-button-first", index === 0); item.classList.toggle("mdui-segmented-button-last", index === items.length - 1); } }); } }; SegmentedButtonGroup.styles = [ componentStyle, segmentedButtonGroupStyle ]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "full-width" }) ], SegmentedButtonGroup.prototype, "fullWidth", void 0); __decorate([ n$1({ reflect: true }) // eslint-disable-next-line prettier/prettier ], SegmentedButtonGroup.prototype, "selects", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SegmentedButtonGroup.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], SegmentedButtonGroup.prototype, "required", void 0); __decorate([ n$1({ reflect: true }) ], SegmentedButtonGroup.prototype, "form", void 0); __decorate([ n$1({ reflect: true }) ], SegmentedButtonGroup.prototype, "name", void 0); __decorate([ n$1() ], SegmentedButtonGroup.prototype, "value", void 0); __decorate([ defaultValue() ], SegmentedButtonGroup.prototype, "defaultValue", void 0); __decorate([ r$1() ], SegmentedButtonGroup.prototype, "selectedKeys", void 0); __decorate([ r$1() ], SegmentedButtonGroup.prototype, "invalid", void 0); __decorate([ watch("selects", true) ], SegmentedButtonGroup.prototype, "onSelectsChange", null); __decorate([ watch("selectedKeys", true) ], SegmentedButtonGroup.prototype, "onSelectedKeysChange", null); __decorate([ watch("value") ], SegmentedButtonGroup.prototype, "onValueChange", null); __decorate([ watch("invalid", true), watch("disabled") ], SegmentedButtonGroup.prototype, "onInvalidChange", null); SegmentedButtonGroup = __decorate([ t$1("mdui-segmented-button-group") ], SegmentedButtonGroup); const i2 = /* @__PURE__ */ new WeakMap(); let o = 0; const r = /* @__PURE__ */ new Map(), n2 = /* @__PURE__ */ new WeakSet(), a = () => new Promise((t2) => requestAnimationFrame(t2)), g = (t2, i3) => { const s2 = t2 - i3; return 0 === s2 ? void 0 : s2; }, w = (t2, i3) => { const s2 = t2 / i3; return 1 === s2 ? void 0 : s2; }, N = { left: (t2, i3) => { const s2 = g(t2, i3); return { value: s2, transform: null == s2 || isNaN(s2) ? void 0 : `translateX(${s2}px)` }; }, top: (t2, i3) => { const s2 = g(t2, i3); return { value: s2, transform: null == s2 || isNaN(s2) ? void 0 : `translateY(${s2}px)` }; }, width: (t2, i3) => { let s2; 0 === i3 && (i3 = 1, s2 = { width: "1px" }); const e2 = w(t2, i3); return { value: e2, overrideFrom: s2, transform: null == e2 || isNaN(e2) ? void 0 : `scaleX(${e2})` }; }, height: (t2, i3) => { let s2; 0 === i3 && (i3 = 1, s2 = { height: "1px" }); const e2 = w(t2, i3); return { value: e2, overrideFrom: s2, transform: null == e2 || isNaN(e2) ? void 0 : `scaleY(${e2})` }; } }, A = { duration: 333, easing: "ease-in-out" }, b2 = ["left", "top", "width", "height", "opacity", "color", "background"], j = /* @__PURE__ */ new WeakMap(); class x extends $t { constructor(t$12) { if (super(t$12), this.t = false, this.i = null, this.o = null, this.h = true, this.shouldLog = false, t$12.type === t.CHILD) throw Error("The `animate` directive must be used in attribute position."); this.createFinished(); } createFinished() { var _a2; (_a2 = this.resolveFinished) == null ? void 0 : _a2.call(this), this.finished = new Promise((t2) => { this.l = t2; }); } async resolveFinished() { var _a2; (_a2 = this.l) == null ? void 0 : _a2.call(this), this.l = void 0; } render(i3) { return D; } getController() { return i2.get(this.u); } isDisabled() { var _a2; return this.options.disabled || ((_a2 = this.getController()) == null ? void 0 : _a2.disabled); } update(t2, [i3]) { var _a2; const s2 = void 0 === this.u; return s2 && (this.u = (_a2 = t2.options) == null ? void 0 : _a2.host, this.u.addController(this), this.u.updateComplete.then((t3) => this.t = true), this.element = t2.element, j.set(this.element, this)), this.optionsOrCallback = i3, (s2 || "function" != typeof i3) && this.p(i3), this.render(i3); } p(t2) { t2 = t2 ?? {}; const i3 = this.getController(); void 0 !== i3 && ((t2 = { ...i3.defaultOptions, ...t2 }).keyframeOptions = { ...i3.defaultOptions.keyframeOptions, ...t2.keyframeOptions }), t2.properties ?? (t2.properties = b2), this.options = t2; } m() { const t2 = {}, i3 = this.element.getBoundingClientRect(), s2 = getComputedStyle(this.element); return this.options.properties.forEach((e2) => { const h2 = i3[e2] ?? (N[e2] ? void 0 : s2[e2]), o2 = Number(h2); t2[e2] = isNaN(o2) ? h2 + "" : o2; }), t2; } v() { let t2, i3 = true; return this.options.guard && (t2 = this.options.guard(), i3 = ((t3, i4) => { if (Array.isArray(t3)) { if (Array.isArray(i4) && i4.length === t3.length && t3.every((t4, s2) => t4 === i4[s2])) return false; } else if (i4 === t3) return false; return true; })(t2, this._)), this.h = this.t && !this.isDisabled() && !this.isAnimating() && i3 && this.element.isConnected, this.h && (this._ = Array.isArray(t2) ? Array.from(t2) : t2), this.h; } hostUpdate() { "function" == typeof this.optionsOrCallback && this.p(this.optionsOrCallback()), this.v() && (this.A = this.m(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling); } async hostUpdated() { if (!this.h || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered) return; let t2; this.prepare(), await a; const i3 = this.O(), s2 = this.j(this.options.keyframeOptions, i3), e2 = this.m(); if (void 0 !== this.A) { const { from: s3, to: h2 } = this.N(this.A, e2, i3); this.log("measured", [this.A, e2, s3, h2]), t2 = this.calculateKeyframes(s3, h2); } else { const s3 = r.get(this.options.inId); if (s3) { r.delete(this.options.inId); const { from: h2, to: n3 } = this.N(s3, e2, i3); t2 = this.calculateKeyframes(h2, n3), t2 = this.options.in ? [{ ...this.options.in[0], ...t2[0] }, ...this.options.in.slice(1), t2[1]] : t2, o++, t2.forEach((t3) => t3.zIndex = o); } else this.options.in && (t2 = [...this.options.in, {}]); } this.animate(t2, s2); } resetStyles() { void 0 !== this.P && (this.element.setAttribute("style", this.P ?? ""), this.P = void 0); } commitStyles() { var _a2, _b; this.P = this.element.getAttribute("style"), (_a2 = this.webAnimation) == null ? void 0 : _a2.commitStyles(), (_b = this.webAnimation) == null ? void 0 : _b.cancel(); } reconnected() { } async disconnected() { var _a2; if (!this.h) return; if (void 0 !== this.options.id && r.set(this.options.id, this.A), void 0 === this.options.out) return; if (this.prepare(), await a(), (_a2 = this.i) == null ? void 0 : _a2.isConnected) { const t3 = this.o && this.o.parentNode === this.i ? this.o : null; if (this.i.insertBefore(this.element, t3), this.options.stabilizeOut) { const t4 = this.m(); this.log("stabilizing out"); const i3 = this.A.left - t4.left, s2 = this.A.top - t4.top; !("static" === getComputedStyle(this.element).position) || 0 === i3 && 0 === s2 || (this.element.style.position = "relative"), 0 !== i3 && (this.element.style.left = i3 + "px"), 0 !== s2 && (this.element.style.top = s2 + "px"); } } const t2 = this.j(this.options.keyframeOptions); await this.animate(this.options.out, t2), this.element.remove(); } prepare() { this.createFinished(); } start() { var _a2, _b; (_b = (_a2 = this.options).onStart) == null ? void 0 : _b.call(_a2, this); } didFinish(t2) { var _a2, _b; t2 && ((_b = (_a2 = this.options).onComplete) == null ? void 0 : _b.call(_a2, this)), this.A = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished(); } O() { const t2 = []; for (let i3 = this.element.parentNode; i3; i3 = i3 == null ? void 0 : i3.parentNode) { const s2 = j.get(i3); s2 && !s2.isDisabled() && s2 && t2.push(s2); } return t2; } get isHostRendered() { const t2 = n2.has(this.u); return t2 || this.u.updateComplete.then(() => { n2.add(this.u); }), t2; } j(t2, i3 = this.O()) { const s2 = { ...A }; return i3.forEach((t3) => Object.assign(s2, t3.options.keyframeOptions)), Object.assign(s2, t2), s2; } N(t2, i3, s2) { t2 = { ...t2 }, i3 = { ...i3 }; const e2 = s2.map((t3) => t3.animatingProperties).filter((t3) => void 0 !== t3); let h2 = 1, o2 = 1; return e2.length > 0 && (e2.forEach((t3) => { t3.width && (h2 /= t3.width), t3.height && (o2 /= t3.height); }), void 0 !== t2.left && void 0 !== i3.left && (t2.left = h2 * t2.left, i3.left = h2 * i3.left), void 0 !== t2.top && void 0 !== i3.top && (t2.top = o2 * t2.top, i3.top = o2 * i3.top)), { from: t2, to: i3 }; } calculateKeyframes(t2, i3, s2 = false) { const e2 = {}, h2 = {}; let o2 = false; const r2 = {}; for (const s3 in i3) { const n3 = t2[s3], a2 = i3[s3]; if (s3 in N) { const t3 = N[s3]; if (void 0 === n3 || void 0 === a2) continue; const i4 = t3(n3, a2); void 0 !== i4.transform && (r2[s3] = i4.value, o2 = true, e2.transform = `${e2.transform ?? ""} ${i4.transform}`, void 0 !== i4.overrideFrom && Object.assign(e2, i4.overrideFrom)); } else n3 !== a2 && void 0 !== n3 && void 0 !== a2 && (o2 = true, e2[s3] = n3, h2[s3] = a2); } return e2.transformOrigin = h2.transformOrigin = s2 ? "center center" : "top left", this.animatingProperties = r2, o2 ? [e2, h2] : void 0; } async animate(t2, i3 = this.options.keyframeOptions) { this.start(), this.frames = t2; let s2 = false; if (!this.isAnimating() && !this.isDisabled() && (this.options.onFrames && (this.frames = t2 = this.options.onFrames(this), this.log("modified frames", t2)), void 0 !== t2)) { this.log("animate", [t2, i3]), s2 = true, this.webAnimation = this.element.animate(t2, i3); const e2 = this.getController(); e2 == null ? void 0 : e2.add(this); try { await this.webAnimation.finished; } catch (t3) { } e2 == null ? void 0 : e2.remove(this); } return this.didFinish(s2), s2; } isAnimating() { var _a2, _b; return "running" === ((_a2 = this.webAnimation) == null ? void 0 : _a2.playState) || ((_b = this.webAnimation) == null ? void 0 : _b.pending); } log(t2, i3) { this.shouldLog && !this.isDisabled() && console.log(t2, this.options.id, i3); } } const F2 = e(x); let IconCancel_Outlined = class IconCancel_Outlined2 extends h { render() { return svgTag('<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/>'); } }; IconCancel_Outlined.styles = style$e; IconCancel_Outlined = __decorate([ t$1("mdui-icon-cancel--outlined") ], IconCancel_Outlined); let IconError = class IconError2 extends h { render() { return svgTag('<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>'); } }; IconError.styles = style$e; IconError = __decorate([ t$1("mdui-icon-error") ], IconError); let IconVisibilityOff = class IconVisibilityOff2 extends h { render() { return svgTag('<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>'); } }; IconVisibilityOff.styles = style$e; IconVisibilityOff = __decorate([ t$1("mdui-icon-visibility-off") ], IconVisibilityOff); let IconVisibility = class IconVisibility2 extends h { render() { return svgTag('<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>'); } }; IconVisibility.styles = style$e; IconVisibility = __decorate([ t$1("mdui-icon-visibility") ], IconVisibility); const style$5 = i$3`:host{display:inline-block;width:100%}:host([disabled]){pointer-events:none}:host([type=hidden]){display:none}.container{position:relative;display:flex;align-items:center;height:100%;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);padding:0 1rem}.container.has-icon{padding-left:.75rem}.container.has-end-icon,.container.has-error-icon{padding-right:.75rem}:host([variant=filled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));border-radius:var(--mdui-shape-corner-extra-small) var(--mdui-shape-corner-extra-small) 0 0}:host([variant=filled]) .container.invalid,:host([variant=filled]) .container.invalid-style{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled]:hover) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface))}:host([variant=filled]:hover) .container.invalid,:host([variant=filled]:hover) .container.invalid-style{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .container,:host([variant=filled][focused]) .container{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-primary))}:host([variant=filled][focused-style]) .container.invalid,:host([variant=filled][focused-style]) .container.invalid-style,:host([variant=filled][focused]) .container.invalid,:host([variant=filled][focused]) .container.invalid-style{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),4%)}:host([variant=outlined]) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-outline));border-radius:var(--mdui-shape-corner-extra-small)}:host([variant=outlined]) .container.invalid,:host([variant=outlined]) .container.invalid-style{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-error))}:host([variant=outlined]:hover) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-surface))}:host([variant=outlined]:hover) .container.invalid,:host([variant=outlined]:hover) .container.invalid-style{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-error-container))}:host([variant=outlined][focused-style]) .container,:host([variant=outlined][focused]) .container{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-primary))}:host([variant=outlined][focused-style]) .container.invalid,:host([variant=outlined][focused-style]) .container.invalid-style,:host([variant=outlined][focused]) .container.invalid,:host([variant=outlined][focused]) .container.invalid-style{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-error))}:host([variant=outlined][disabled]) .container{box-shadow:inset 0 0 0 .125rem rgba(var(--mdui-color-on-surface),12%)}.icon,.prefix,.right-icon,.suffix{display:flex;-webkit-user-select:none;user-select:none;color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .icon,:host([disabled]) .prefix,:host([disabled]) .right-icon,:host([disabled]) .suffix{color:rgba(var(--mdui-color-on-surface),38%)}.invalid .right-icon,.invalid .suffix,.invalid-style .right-icon,.invalid-style .suffix{color:rgb(var(--mdui-color-error))}:host(:hover) .invalid .right-icon,:host(:hover) .invalid .suffix,:host(:hover) .invalid-style .right-icon,:host(:hover) .invalid-style .suffix{color:rgb(var(--mdui-color-on-error-container))}:host([focused-style]) .invalid .right-icon,:host([focused-style]) .invalid .suffix,:host([focused-style]) .invalid-style .right-icon,:host([focused-style]) .invalid-style .suffix,:host([focused]) .invalid .right-icon,:host([focused]) .invalid .suffix,:host([focused]) .invalid-style .right-icon,:host([focused]) .invalid-style .suffix{color:rgb(var(--mdui-color-error))}.icon,.right-icon{font-size:1.5rem}.icon mdui-button-icon,.right-icon mdui-button-icon,::slotted(mdui-button-icon[slot]){margin-left:-.5rem;margin-right:-.5rem}.icon .i,.right-icon .i,::slotted([slot$=icon]){font-size:inherit}.has-icon .icon{margin-right:1rem}.has-end-icon .end-icon,.right-icon:not(.end-icon){margin-left:1rem}.prefix,.suffix{display:none;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([variant=filled][label]) .prefix,:host([variant=filled][label]) .suffix{padding-top:1rem}.has-value .prefix,.has-value .suffix,:host([focused-style]) .prefix,:host([focused-style]) .suffix,:host([focused]) .prefix,:host([focused]) .suffix{display:flex}.has-prefix .prefix{padding-right:.125rem}.has-suffix .suffix{padding-left:.125rem}.input-container{width:100%;height:100%}.label{position:absolute;pointer-events:none;max-width:calc(100% - 1rem);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;top:1rem;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}.invalid .label,.invalid-style .label{color:rgb(var(--mdui-color-error))}:host([variant=outlined]) .label{padding:0 .25rem;margin:0 -.25rem}:host([variant=outlined]:hover) .label{color:rgb(var(--mdui-color-on-surface))}:host([variant=filled]:hover) .invalid .label,:host([variant=filled]:hover) .invalid-style .label,:host([variant=outlined]:hover) .invalid .label,:host([variant=outlined]:hover) .invalid-style .label{color:rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label{color:rgb(var(--mdui-color-primary))}:host([variant=filled]) .has-value .label,:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=filled][type=date]) .label,:host([variant=filled][type=datetime-local]) .label,:host([variant=filled][type=month]) .label,:host([variant=filled][type=time]) .label,:host([variant=filled][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:.25rem}:host([variant=outlined]) .has-value .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label,:host([variant=outlined][type=date]) .label,:host([variant=outlined][type=datetime-local]) .label,:host([variant=outlined][type=month]) .label,:host([variant=outlined][type=time]) .label,:host([variant=outlined][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:-.5rem;left:.75rem;background-color:rgb(var(--mdui-color-background))}:host([variant=filled][focused-style]) .invalid .label,:host([variant=filled][focused-style]) .invalid-style .label,:host([variant=filled][focused]) .invalid .label,:host([variant=filled][focused]) .invalid-style .label,:host([variant=outlined][focused-style]) .invalid .label,:host([variant=outlined][focused-style]) .invalid-style .label,:host([variant=outlined][focused]) .invalid .label,:host([variant=outlined][focused]) .invalid-style .label{color:rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .label,:host([variant=outlined][disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}.input{display:flex;flex-wrap:wrap;width:100%;height:100%;min-height:100%;border:none;outline:0;background:0 0;appearance:none;resize:none;cursor:inherit;font-family:inherit;padding:1rem 0;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height);color:rgb(var(--mdui-color-on-surface));caret-color:rgb(var(--mdui-color-primary))}.input.hide-input{opacity:0;height:0;min-height:0;padding:0!important;overflow:hidden}.input::placeholder{color:rgb(var(--mdui-color-on-surface-variant))}.invalid .input,.invalid-style .input{caret-color:rgb(var(--mdui-color-error))}:host([disabled]) .input{color:rgba(var(--mdui-color-on-surface),38%)}:host([end-aligned]) .input{text-align:right}:host([variant=filled]) .label+.input{padding:1.5rem 0 .5rem 0}.supporting{display:flex;justify-content:space-between;padding:.25rem 1rem;color:rgb(var(--mdui-color-on-surface-variant))}.supporting.invalid,.supporting.invalid-style{color:rgb(var(--mdui-color-error))}.helper{display:block;opacity:1;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}:host([disabled]) .helper{color:rgba(var(--mdui-color-on-surface),38%)}:host([helper-on-focus]) .helper{opacity:0}:host([helper-on-focus][focused-style]) .helper,:host([helper-on-focus][focused]) .helper{opacity:1}.error{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}.counter{flex-wrap:nowrap;padding-left:1rem;font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}::-ms-reveal{display:none}.is-firefox .input[type=date],.is-firefox .input[type=datetime-local],.is-firefox .input[type=time]{clip-path:inset(0 2em 0 0)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}`; let TextField = class TextField2 extends FocusableMixin(MduiElement) { constructor() { super(...arguments); this.variant = "filled"; this.type = "text"; this.name = ""; this.value = ""; this.defaultValue = ""; this.helperOnFocus = false; this.clearable = false; this.endAligned = false; this.readonly = false; this.disabled = false; this.required = false; this.autosize = false; this.counter = false; this.togglePassword = false; this.spellcheck = false; this.invalid = false; this.invalidStyle = false; this.focusedStyle = false; this.isPasswordVisible = false; this.hasValue = false; this.error = ""; this.inputRef = ii(); this.formController = new FormController(this); this.hasSlotController = new HasSlotController(this, "icon", "end-icon", "helper", "input"); this.readonlyButClearable = false; } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.inputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.inputRef.value.validationMessage; } /** * 获取当前值，并转换为 `number` 类型；或设置一个 `number` 类型的值。 * 如果值无法被转换为 `number` 类型，则会返回 `NaN`。 */ get valueAsNumber() { var _a2; return ((_a2 = this.inputRef.value) == null ? void 0 : _a2.valueAsNumber) ?? parseFloat(this.value); } set valueAsNumber(newValue) { const input = document.createElement("input"); input.type = "number"; input.valueAsNumber = newValue; this.value = input.value; } get focusElement() { return this.inputRef.value; } get focusDisabled() { return this.disabled; } /** * 是否显示聚焦状态样式 */ get isFocusedStyle() { return this.focused || this.focusedStyle; } /** * 是否渲染为 textarea。为 false 时渲染为 input */ get isTextarea() { return this.rows && this.rows > 1 || this.autosize; } onDisabledChange() { this.inputRef.value.disabled = this.disabled; this.invalid = !this.inputRef.value.checkValidity(); } async onValueChange() { var _a2; this.hasValue = !["", null].includes(this.value); if (this.hasUpdated) { await this.updateComplete; const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.inputRef.value.checkValidity(); } } } onRowsChange() { this.setTextareaHeight(); } async onMaxRowsChange() { if (!this.autosize) { return; } if (!this.hasUpdated) { await this.updateComplete; } const $input = $$1(this.inputRef.value); $input.css("max-height", parseFloat($input.css("line-height")) * (this.maxRows ?? 1) + parseFloat($input.css("padding-top")) + parseFloat($input.css("padding-bottom"))); } async onMinRowsChange() { if (!this.autosize) { return; } if (!this.hasUpdated) { await this.updateComplete; } const $input = $$1(this.inputRef.value); $input.css("min-height", parseFloat($input.css("line-height")) * (this.minRows ?? 1) + parseFloat($input.css("padding-top")) + parseFloat($input.css("padding-bottom"))); } disconnectedCallback() { var _a2; super.disconnectedCallback(); (_a2 = this.observeResize) == null ? void 0 : _a2.unobserve(); offLocaleReady(this); } /** * 选中文本框中的文本 */ select() { this.inputRef.value.select(); } /** * 选中文本框中特定范围的内容 * * @param start 被选中的第一个字符的位置索引，从 `0` 开始。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引 * @param end 被选中的最后一个字符的*下一个*位置索引。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引 * @param direction 一个表示选择方向的字符串，可能的值有：`forward`、`backward`、`none` */ setSelectionRange(start, end, direction = "none") { this.inputRef.value.setSelectionRange(start, end, direction); } /** * 将文本框中特定范围的文本替换为新的文本 * @param replacement 要插入的字符串 * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引 * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引 * @param selectMode 文本被替换后，选取的状态。可选值为： * * `select`：选择新插入的文本 * * `start`：将光标移动到新插入的文本的起始位置 * * `end`：将光标移动到新插入的文本的结束位置 * * `preserve`：默认值。尝试保留选取 */ setRangeText(replacement, start, end, selectMode = "preserve") { this.inputRef.value.setRangeText(replacement, start, end, selectMode); if (this.value !== this.inputRef.value.value) { this.value = this.inputRef.value.value; this.setTextareaHeight(); this.emit("input"); this.emit("change"); } } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.inputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.inputRef.value.reportValidity(); if (this.invalid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); this.focus(); } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.setCustomValidityInternal(message); offLocaleReady(this); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.setTextareaHeight(); this.observeResize = observeResize(this.inputRef.value, () => this.setTextareaHeight()); } render() { const hasIcon = !!this.icon || this.hasSlotController.test("icon"); const hasEndIcon = !!this.endIcon || this.hasSlotController.test("end-icon"); const hasErrorIcon = this.invalid || this.invalidStyle; const hasPrefix = !!this.prefix || this.hasSlotController.test("prefix"); const hasSuffix = !!this.suffix || this.hasSlotController.test("suffix"); const hasHelper = !!this.helper || this.hasSlotController.test("helper"); const hasError = hasErrorIcon && !!(this.error || this.inputRef.value.validationMessage); const hasCounter = this.counter && !!this.maxlength; const hasInputSlot = this.hasSlotController.test("input"); const invalidClassNameObj = { invalid: this.invalid, "invalid-style": this.invalidStyle }; const className2 = Rt({ container: true, "has-value": this.hasValue, "has-icon": hasIcon, "has-end-icon": hasEndIcon, "has-error-icon": hasErrorIcon, "has-prefix": hasPrefix, "has-suffix": hasSuffix, "is-firefox": navigator.userAgent.includes("Firefox"), ...invalidClassNameObj }); return ke`<div part="container" class="${className2}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea ? this.renderTextArea(hasInputSlot) : this.renderInput(hasInputSlot)} ${nn(hasInputSlot, () => ke`<slot name="input" class="input"></slot>`)}</div>${this.renderClearButton()}${this.renderTogglePasswordButton()} ${this.renderSuffix(hasErrorIcon)}</div>${nn(hasError || hasHelper || hasCounter, () => ke`<div part="supporting" class="${Rt({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`; } setCustomValidityInternal(message) { this.inputRef.value.setCustomValidity(message); this.invalid = !this.inputRef.value.checkValidity(); this.requestUpdate(); } onChange() { this.value = this.inputRef.value.value; if (this.isTextarea) { this.setTextareaHeight(); } this.emit("change"); } onClear(event) { this.value = ""; this.emit("clear"); this.emit("input"); this.emit("change"); this.focus(); event.stopPropagation(); } onInput() { this.value = this.inputRef.value.value; if (this.isTextarea) { this.setTextareaHeight(); } this.emit("input"); } onInvalid(event) { event.preventDefault(); } onKeyDown(event) { const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey; if (event.key === "Enter" && !hasModifier) { setTimeout(() => { if (!event.defaultPrevented) { this.formController.submit(); } }); } } /** * textarea 不支持 pattern 属性，所以在 keyup 时执行验证 */ onTextAreaKeyUp() { if (this.pattern) { const patternRegex = new RegExp(this.pattern); const hasError = this.value && !this.value.match(patternRegex); if (hasError) { this.setCustomValidityInternal(this.getPatternErrorMsg()); onLocaleReady(this, () => { this.setCustomValidityInternal(this.getPatternErrorMsg()); }); } else { this.setCustomValidityInternal(""); offLocaleReady(this); } } } onTogglePassword() { this.isPasswordVisible = !this.isPasswordVisible; } getPatternErrorMsg() { return msg("Please match the requested format."); } setTextareaHeight() { if (this.autosize) { this.inputRef.value.style.height = "auto"; this.inputRef.value.style.height = `${this.inputRef.value.scrollHeight}px`; } else { this.inputRef.value.style.height = void 0; } } renderLabel() { return this.label ? ke`<label part="label" class="label" ${F2({ keyframeOptions: { duration: getDuration(this, "short4"), easing: getEasing(this, "standard") } })}>${this.label}</label>` : nothingTemplate; } renderPrefix() { return ke`<slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}" class="i"></mdui-icon>` : nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`; } renderSuffix(hasErrorIcon) { return ke`<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>${hasErrorIcon ? ke`<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon ? ke`<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-error class="i"></mdui-icon-error>`}</slot>` : ke`<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon ? ke`<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>` : nothingTemplate}</slot>`}`; } renderClearButton() { const hasClearButton = this.clearable && !this.disabled && (!this.readonly || this.readonlyButClearable) && (typeof this.value === "number" || this.value.length > 0); return nn(hasClearButton, () => ke`<slot name="clear-button" part="clear-button" class="right-icon" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon ? ke`<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`); } renderTogglePasswordButton() { const hasTogglePasswordButton = this.type === "password" && this.togglePassword && !this.disabled; return nn(hasTogglePasswordButton, () => ke`<slot name="toggle-password-button" part="toggle-password-button" class="right-icon" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible ? ke`<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon ? ke`<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>` : ke`<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon ? ke`<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`); } renderInput(hasInputSlot) { return ke`<input ${Kt(this.inputRef)} part="input" class="input ${Rt({ "hide-input": hasInputSlot })}" type="${this.type === "password" && this.isPasswordVisible ? "text" : this.type}" name="${to(this.name)}" .value="${Ft(this.value)}" placeholder="${to( // @ts-ignore !this.label || this.isFocusedStyle || this.hasValue ? this.placeholder : void 0 )}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${to(this.minlength)}" maxlength="${to(this.maxlength)}" min="${to(this.min)}" max="${to(this.max)}" step="${to(this.step)}" autocapitalize="${to(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${to(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${to(this.type === "password" ? "off" : this.autocorrect)}" spellcheck="${to(this.spellcheck)}" pattern="${to(this.pattern)}" enterkeyhint="${to(this.enterkeyhint)}" inputmode="${to(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`; } renderTextArea(hasInputSlot) { return ke`<textarea ${Kt(this.inputRef)} part="input" class="input ${Rt({ "hide-input": hasInputSlot })}" name="${to(this.name)}" .value="${Ft(this.value)}" placeholder="${to( // @ts-ignore !this.label || this.isFocusedStyle || this.hasValue ? this.placeholder : void 0 )}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${to(this.minlength)}" maxlength="${to(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${to(this.autocapitalize)}" autocorrect="${to(this.autocorrect)}" spellcheck="${to(this.spellcheck)}" enterkeyhint="${to(this.enterkeyhint)}" inputmode="${to(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`; } /** * @param hasError 是否包含错误提示 * @param hasHelper 是否含 helper 属性或 helper slot */ renderHelper(hasError, hasHelper) { return hasError ? ke`<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>` : hasHelper ? ke`<slot name="helper" part="helper" class="helper">${this.helper}</slot>` : ( // 右边有 counter，需要占位 ke`<span></span>` ); } renderCounter(hasCounter) { return hasCounter ? ke`<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>` : nothingTemplate; } }; TextField.styles = [componentStyle, style$5]; __decorate([ n$1({ reflect: true }) ], TextField.prototype, "variant", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "type", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "name", void 0); __decorate([ n$1() ], TextField.prototype, "value", void 0); __decorate([ defaultValue() ], TextField.prototype, "defaultValue", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "label", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "placeholder", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "helper", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "helper-on-focus" }) ], TextField.prototype, "helperOnFocus", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "clearable", void 0); __decorate([ n$1({ reflect: true, attribute: "clear-icon" }) ], TextField.prototype, "clearIcon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "end-aligned" }) ], TextField.prototype, "endAligned", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "prefix", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "suffix", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], TextField.prototype, "endIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "error-icon" }) ], TextField.prototype, "errorIcon", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "form", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "readonly", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "required", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], TextField.prototype, "rows", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "autosize", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "min-rows" }) ], TextField.prototype, "minRows", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "max-rows" }) ], TextField.prototype, "maxRows", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], TextField.prototype, "minlength", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], TextField.prototype, "maxlength", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "counter", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], TextField.prototype, "min", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], TextField.prototype, "max", void 0); __decorate([ n$1({ type: Number, reflect: true }) ], TextField.prototype, "step", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "pattern", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "toggle-password" }) ], TextField.prototype, "togglePassword", void 0); __decorate([ n$1({ reflect: true, attribute: "show-password-icon" }) ], TextField.prototype, "showPasswordIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "hide-password-icon" }) ], TextField.prototype, "hidePasswordIcon", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "autocapitalize", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "autocorrect", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "autocomplete", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "enterkeyhint", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TextField.prototype, "spellcheck", void 0); __decorate([ n$1({ reflect: true }) ], TextField.prototype, "inputmode", void 0); __decorate([ r$1() ], TextField.prototype, "invalid", void 0); __decorate([ r$1() ], TextField.prototype, "invalidStyle", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "focused-style" }) ], TextField.prototype, "focusedStyle", void 0); __decorate([ r$1() ], TextField.prototype, "isPasswordVisible", void 0); __decorate([ r$1() ], TextField.prototype, "hasValue", void 0); __decorate([ r$1() ], TextField.prototype, "error", void 0); __decorate([ watch("disabled", true) ], TextField.prototype, "onDisabledChange", null); __decorate([ watch("value") ], TextField.prototype, "onValueChange", null); __decorate([ watch("rows", true) ], TextField.prototype, "onRowsChange", null); __decorate([ watch("maxRows") ], TextField.prototype, "onMaxRowsChange", null); __decorate([ watch("minRows") ], TextField.prototype, "onMinRowsChange", null); TextField = __decorate([ t$1("mdui-text-field") ], TextField); const style$4 = i$3`:host{display:inline-block;width:100%}.hidden-input{display:none}.text-field{cursor:pointer}.chips{display:flex;flex-wrap:wrap;margin:-.5rem -.25rem;min-height:2.5rem}:host([variant=filled][label]) .chips{margin:0 -.25rem -1rem -.25rem}.chip{margin:.25rem}mdui-menu{max-width:none}`; let Select = class Select2 extends FocusableMixin(MduiElement) { constructor() { super(...arguments); this.variant = "filled"; this.multiple = false; this.name = ""; this.value = ""; this.defaultValue = ""; this.clearable = false; this.placement = "auto"; this.endAligned = false; this.readonly = false; this.disabled = false; this.required = false; this.invalid = false; this.menuRef = ii(); this.textFieldRef = ii(); this.hiddenInputRef = ii(); this.formController = new FormController(this); this.hasSlotController = new HasSlotController(this, "icon", "end-icon", "error-icon", "prefix", "suffix", "clear-button", "clear-icon", "helper"); this.definedController = new DefinedController(this, { relatedElements: ["mdui-menu-item"] }); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.hiddenInputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.hiddenInputRef.value.validationMessage; } get focusElement() { return this.textFieldRef.value; } get focusDisabled() { return this.disabled; } connectedCallback() { super.connectedCallback(); this.value = this.multiple && isString(this.value) ? this.value ? [this.value] : [] : this.value; this.defaultValue = this.multiple ? [] : ""; this.definedController.whenDefined().then(() => { this.requestUpdate(); }); } disconnectedCallback() { var _a2; super.disconnectedCallback(); (_a2 = this.observeResize) == null ? void 0 : _a2.unobserve(); } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.hiddenInputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.hiddenInputRef.value.reportValidity(); if (this.invalid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); this.focus(); } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.hiddenInputRef.value.setCustomValidity(message); this.invalid = !this.hiddenInputRef.value.checkValidity(); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.observeResize = observeResize(this.textFieldRef.value, () => this.resizeMenu()); } render() { var _a2; const hasSelection = this.multiple ? !!this.value.length : !!this.value; return ke`${this.multiple ? ke`<select ${Kt(this.hiddenInputRef)} class="hidden-input" name="${to(this.name)}" value="${to(this.value)}" .required="${this.required}" .disabled="${this.disabled}" multiple="multiple" tabindex="-1">${oo(this.value, (value) => ke`<option selected="selected" value="${value}"></option>`)}</select>` : ke`<input ${Kt(this.hiddenInputRef)} type="radio" class="hidden-input" name="${to(this.name)}" value="${to(this.value)}" .required="${this.required}" .disabled="${this.disabled}" .checked="${hasSelection}" tabindex="-1">`}<mdui-dropdown .stayOpenOnClick="${this.multiple}" .disabled="${this.readonly || this.disabled}" .placement="${this.placement === "top" ? "top-start" : this.placement === "bottom" ? "bottom-start" : "auto"}" @open="${this.onDropdownOpen}" @close="${this.onDropdownClose}"><mdui-text-field ${Kt(this.textFieldRef)} slot="trigger" part="text-field" class="text-field" exportparts="${[ "container", "icon", "end-icon", "error-icon", "prefix", "suffix", "label", "input", "clear-button", "clear-icon", "supporting", "helper", "error" ].map((v2) => `${v2}:text-field__${v2}`).join(",")}" readonly="readonly" .readonlyButClearable="${true}" .variant="${this.variant}" .name="${this.name}" .value="${this.multiple ? this.value.length ? " " : "" : this.getMenuItemLabelByValue(this.value)}" .label="${this.label}" .placeholder="${this.placeholder}" .helper="${this.helper}" .error="${(_a2 = this.hiddenInputRef.value) == null ? void 0 : _a2.validationMessage}" .clearable="${this.clearable}" .clearIcon="${this.clearIcon}" .endAligned="${this.endAligned}" .prefix="${this.prefix}" .suffix="${this.suffix}" .icon="${this.icon}" .endIcon="${this.endIcon}" .errorIcon="${this.errorIcon}" .form="${this.form}" .disabled="${this.disabled}" .required="${this.required}" .invalidStyle="${this.invalid}" @clear="${this.onClear}" @change="${(e2) => e2.stopPropagation()}" @keydown="${this.onTextFieldKeyDown}">${oo([ "icon", "end-icon", "error-icon", "prefix", "suffix", "clear-button", "clear-icon", "helper" ], (slotName) => this.hasSlotController.test(slotName) ? ke`<slot name="${slotName}" slot="${slotName}"></slot>` : D)} ${nn(this.multiple && this.value.length, () => ke`<div slot="input" class="chips" part="chips">${oo(this.value, (valueItem) => ke`<mdui-chip class="chip" part="chip" exportparts="${["button", "label", "delete-icon"].map((v2) => `${v2}:chip__${v2}`).join(",")}" variant="input" deletable tabindex="-1" @delete="${() => this.onDeleteOneValue(valueItem)}">${this.getMenuItemLabelByValue(valueItem)}</mdui-chip>`)}</div>`)}</mdui-text-field><mdui-menu ${Kt(this.menuRef)} part="menu" .selects="${this.multiple ? "multiple" : "single"}" .value="${this.value}" @change="${this.onValueChange}"><slot></slot></mdui-menu></mdui-dropdown>`; } getMenuItemLabelByValue(valueItem) { var _a2, _b; if (!this.menuItems.length) { return valueItem; } return ((_b = (_a2 = this.menuItems.find((item) => item.value === valueItem)) == null ? void 0 : _a2.textContent) == null ? void 0 : _b.trim()) || valueItem; } resizeMenu() { this.menuRef.value.style.width = `${this.textFieldRef.value.clientWidth}px`; } async onDropdownOpen() { this.textFieldRef.value.focusedStyle = true; } onDropdownClose() { var _a2; this.textFieldRef.value.focusedStyle = false; if (this.contains(document.activeElement) || this.contains(((_a2 = document.activeElement) == null ? void 0 : _a2.assignedSlot) ?? null)) { setTimeout(() => { this.focus(); }); } } async onValueChange(e2) { var _a2; const menu = e2.target; this.value = this.multiple ? menu.value.map((v2) => v2 ?? "") : menu.value ?? ""; await this.updateComplete; const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.hiddenInputRef.value.checkValidity(); } } /** * multiple 为 true 时，点 chip 的删除按钮，删除其中一个值 */ onDeleteOneValue(valueItem) { const value = [...this.value]; if (value.includes(valueItem)) { value.splice(value.indexOf(valueItem), 1); } this.value = value; } onClear() { this.value = this.multiple ? [] : ""; } /** * 焦点在 text-field 上时，按下回车键，打开下拉选项 */ onTextFieldKeyDown(event) { if (event.key === "Enter") { event.preventDefault(); this.textFieldRef.value.click(); } } }; Select.styles = [componentStyle, style$4]; __decorate([ n$1({ reflect: true }) ], Select.prototype, "variant", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Select.prototype, "multiple", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "name", void 0); __decorate([ n$1() ], Select.prototype, "value", void 0); __decorate([ defaultValue() ], Select.prototype, "defaultValue", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "label", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "placeholder", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "helper", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Select.prototype, "clearable", void 0); __decorate([ n$1({ reflect: true, attribute: "clear-icon" }) ], Select.prototype, "clearIcon", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "placement", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "end-aligned" }) ], Select.prototype, "endAligned", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "prefix", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "suffix", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "icon", void 0); __decorate([ n$1({ reflect: true, attribute: "end-icon" }) ], Select.prototype, "endIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "error-icon" }) ], Select.prototype, "errorIcon", void 0); __decorate([ n$1({ reflect: true }) ], Select.prototype, "form", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Select.prototype, "readonly", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Select.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Select.prototype, "required", void 0); __decorate([ r$1() ], Select.prototype, "invalid", void 0); __decorate([ o$1({ flatten: true, selector: "mdui-menu-item" }) ], Select.prototype, "menuItems", void 0); Select = __decorate([ t$1("mdui-select") ], Select); const style$3 = i$3`.track-active{left:-.125rem;border-radius:var(--mdui-shape-corner-full) 0 0 var(--mdui-shape-corner-full)}`; let Slider = class Slider2 extends SliderBase { constructor() { super(...arguments); this.value = 0; this.defaultValue = 0; this.rippleRef = ii(); this.handleRef = ii(); this.formController = new FormController(this); } get rippleElement() { return this.rippleRef.value; } async onValueChange() { var _a2; this.value = this.fixValue(this.value); const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { await this.updateComplete; this.invalid = !this.inputRef.value.checkValidity(); } this.updateStyle(); } connectedCallback() { super.connectedCallback(); this.value = this.fixValue(this.value); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); const onTouchStart = () => { if (!this.disabled) { this.labelVisible = true; } }; const onTouchEnd = () => { if (!this.disabled) { this.labelVisible = false; } }; this.addEventListener("touchstart", onTouchStart); this.addEventListener("mousedown", onTouchStart); this.addEventListener("touchend", onTouchEnd); this.addEventListener("mouseup", onTouchEnd); this.updateStyle(); } /** * <input /> 用于提供拖拽操作 * <input class="invalid" /> 用于提供 html5 自带的表单错误提示 */ render() { return ke`<label class="${Rt({ invalid: this.invalid })}"><input ${Kt(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" .value="${Ft(this.value.toString())}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${Kt(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${Kt(this.handleRef)} part="handle" class="handle"><div class="elevation"></div><mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value)}</div>${nn(this.tickmarks, () => oo(this.getCandidateValues(), (value) => ke`<div part="tickmark" class="tickmark ${Rt({ active: value < this.value })}" style="${se({ left: `${(value - this.min) / this.max * 100}%`, display: value === this.value ? "none" : "block" })}"></div>`))}</label>`; } updateStyle() { const percent = (this.value - this.min) / (this.max - this.min) * 100; this.trackActiveRef.value.style.width = `${percent}%`; this.handleRef.value.style.left = `${percent}%`; } onInput() { this.value = parseFloat(this.inputRef.value.value); this.updateStyle(); } }; Slider.styles = [SliderBase.styles, style$3]; __decorate([ n$1({ type: Number }) ], Slider.prototype, "value", void 0); __decorate([ defaultValue() ], Slider.prototype, "defaultValue", void 0); __decorate([ watch("value", true) ], Slider.prototype, "onValueChange", null); Slider = __decorate([ t$1("mdui-slider") ], Slider); const style$2 = i$3`:host{--shape-corner:var(--mdui-shape-corner-extra-small);--z-index:2400;position:fixed;z-index:var(--z-index);display:none;align-items:center;flex-wrap:wrap;border-radius:var(--shape-corner);min-width:20rem;max-width:36rem;padding:.25rem 0;box-shadow:var(--mdui-elevation-level3);background-color:rgb(var(--mdui-color-inverse-surface));color:rgb(var(--mdui-color-inverse-on-surface));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([placement^=top]){transform-origin:top;top:1rem}:host([placement^=bottom]){transform-origin:bottom;bottom:1rem}:host([placement=bottom-start]),:host([placement=top-start]){left:1rem}:host([placement=bottom-end]),:host([placement=top-end]){right:1rem}.message{display:block;margin:.625rem 1rem}:host([message-line='1']) .message{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([message-line='2']) .message{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}.action-group{display:flex;align-items:center;margin-left:auto;padding-right:.5rem}.action,.close-button{display:inline-flex;align-items:center;justify-content:center}.action{color:rgb(var(--mdui-color-inverse-primary));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.action mdui-button,::slotted(mdui-button[slot=action][variant=outlined]),::slotted(mdui-button[slot=action][variant=text]){color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-primary)}.action mdui-button::part(button){padding:0 .5rem}.close-button{margin:0 -.25rem 0 .25rem;font-size:1.5rem;color:rgb(var(--mdui-color-inverse-on-surface))}.close-button mdui-button-icon,::slotted(mdui-button-icon[slot=close-button][variant=outlined]),::slotted(mdui-button-icon[slot=close-button][variant=standard]){font-size:inherit;color:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}.close-button .i,::slotted([slot=close-icon]){font-size:inherit}`; let Snackbar = class Snackbar2 extends MduiElement { constructor() { super(); this.open = false; this.placement = "bottom"; this.actionLoading = false; this.closeable = false; this.autoCloseDelay = 5e3; this.closeOnOutsideClick = false; this.onDocumentClick = this.onDocumentClick.bind(this); } async onOpenChange() { const isMobile = breakpoint().down("sm"); const isCenteredHorizontally = ["top", "bottom"].includes(this.placement); const easingLinear = getEasing(this, "linear"); const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate"); const children = Array.from(this.renderRoot.querySelectorAll(".message, .action-group")); const commonStyle = isMobile ? { left: "1rem", right: "1rem", minWidth: 0 } : isCenteredHorizontally ? { left: "50%" } : {}; if (this.open) { const hasUpdated = this.hasUpdated; if (!hasUpdated) { await this.updateComplete; } if (hasUpdated) { const eventProceeded = this.emit("open", { cancelable: true }); if (!eventProceeded) { return; } } window.clearTimeout(this.closeTimeout); if (this.autoCloseDelay) { this.closeTimeout = window.setTimeout(() => { this.open = false; }, this.autoCloseDelay); } this.style.display = "flex"; await Promise.all([ stopAnimations(this), ...children.map((child) => stopAnimations(child)) ]); const duration = getDuration(this, "medium4"); const getOpenStyle = (ident) => { const scaleY = `scaleY(${ident === "start" ? 0 : 1})`; if (isMobile) { return { transform: scaleY }; } else { return { transform: [ scaleY, isCenteredHorizontally ? "translateX(-50%)" : "" ].filter((i3) => i3).join(" ") }; } }; await Promise.all([ animateTo(this, [ { ...getOpenStyle("start"), ...commonStyle }, { ...getOpenStyle("end"), ...commonStyle } ], { duration: hasUpdated ? duration : 0, easing: easingEmphasizedDecelerate, fill: "forwards" }), animateTo(this, [{ opacity: 0 }, { opacity: 1, offset: 0.5 }, { opacity: 1 }], { duration: hasUpdated ? duration : 0, easing: easingLinear, fill: "forwards" }), ...children.map((child) => animateTo(child, [ { opacity: 0 }, { opacity: 0, offset: 0.2 }, { opacity: 1, offset: 0.8 }, { opacity: 1 } ], { duration: hasUpdated ? duration : 0, easing: easingLinear })) ]); if (hasUpdated) { this.emit("opened"); } return; } if (!this.open && this.hasUpdated) { const eventProceeded = this.emit("close", { cancelable: true }); if (!eventProceeded) { return; } window.clearTimeout(this.closeTimeout); await Promise.all([ stopAnimations(this), ...children.map((child) => stopAnimations(child)) ]); const duration = getDuration(this, "short4"); const getCloseStyle = (ident) => { const opacity = ident === "start" ? 1 : 0; const styles = { opacity }; if (!isMobile && isCenteredHorizontally) { Object.assign(styles, { transform: "translateX(-50%)" }); } return styles; }; await Promise.all([ animateTo(this, [ { ...getCloseStyle("start"), ...commonStyle }, { ...getCloseStyle("end"), ...commonStyle } ], { duration, easing: easingLinear, fill: "forwards" }), ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })) ]); this.style.display = "none"; this.emit("closed"); return; } } connectedCallback() { super.connectedCallback(); document.addEventListener("pointerdown", this.onDocumentClick); } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener("pointerdown", this.onDocumentClick); } render() { return ke`<slot part="message" class="message"></slot><div class="action-group"><slot name="action" part="action" class="action" @click="${this.onActionClick}">${this.action ? ke`<mdui-button variant="text" loading="${this.actionLoading}">${this.action}</mdui-button>` : nothingTemplate}</slot>${nn(this.closeable, () => ke`<slot name="close-button" part="close-button" class="close-button" @click="${this.onCloseClick}"><mdui-button-icon><slot name="close-icon" part="close-icon">${this.closeIcon ? ke`<mdui-icon name="${this.closeIcon}" class="i"></mdui-icon>` : ke`<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot></mdui-button-icon></slot>`)}</div>`; } /** * 在 document 上点击时，根据条件判断是否要关闭 snackbar */ onDocumentClick(e2) { if (!this.open || !this.closeOnOutsideClick) { return; } const target = e2.target; if (!this.contains(target) && this !== target) { this.open = false; } } onActionClick(event) { event.stopPropagation(); this.emit("action-click"); } onCloseClick() { this.open = false; } }; Snackbar.styles = [componentStyle, style$2]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Snackbar.prototype, "open", void 0); __decorate([ n$1({ reflect: true }) ], Snackbar.prototype, "placement", void 0); __decorate([ n$1({ reflect: true, attribute: "action" }) ], Snackbar.prototype, "action", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "action-loading" }) ], Snackbar.prototype, "actionLoading", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Snackbar.prototype, "closeable", void 0); __decorate([ n$1({ reflect: true, attribute: "close-icon" }) ], Snackbar.prototype, "closeIcon", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "message-line" }) // eslint-disable-next-line prettier/prettier ], Snackbar.prototype, "messageLine", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "auto-close-delay" }) ], Snackbar.prototype, "autoCloseDelay", void 0); __decorate([ n$1({ type: Boolean, reflect: true, attribute: "close-on-outside-click", converter: booleanConverter }) ], Snackbar.prototype, "closeOnOutsideClick", void 0); __decorate([ watch("open") ], Snackbar.prototype, "onOpenChange", null); Snackbar = __decorate([ t$1("mdui-snackbar") ], Snackbar); const style$1 = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);--shape-corner-thumb:var(--mdui-shape-corner-full);position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;height:2.5rem}:host([disabled]){cursor:default;pointer-events:none}label{display:inline-flex;align-items:center;width:100%;height:100%;white-space:nowrap;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}.track{position:relative;display:flex;align-items:center;border-radius:var(--shape-corner);transition-property:background-color,border-width;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:2rem;width:3.25rem;border:.125rem solid rgb(var(--mdui-color-outline));background-color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .track{background-color:rgb(var(--mdui-color-primary));border-width:0}.invalid .track{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error))}:host([disabled]) .track{background-color:rgba(var(--mdui-color-surface-container-highest),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled][checked]) .track{background-color:rgba(var(--mdui-color-on-surface),.12)}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}mdui-ripple{border-radius:50%;transition-property:left,top;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);width:2.5rem;height:2.5rem}.thumb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-thumb);transition-property:width,height,left,background-color;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:1rem;width:1rem;left:.375rem;background-color:rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.thumb mdui-ripple{left:-.75rem;top:-.75rem}.has-unchecked-icon .thumb{height:1.5rem;width:1.5rem;left:.125rem}.has-unchecked-icon .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([focus-visible]) .thumb,:host([hover]) .thumb,:host([pressed]) .thumb{background-color:rgb(var(--mdui-color-on-surface-variant))}:host([checked]) .thumb{height:1.5rem;width:1.5rem;left:1.5rem;background-color:rgb(var(--mdui-color-on-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([pressed]) .thumb{height:1.75rem;width:1.75rem;left:0}:host([pressed]) .thumb mdui-ripple{left:-.375rem;top:-.375rem}:host([pressed][checked]) .thumb{left:1.375rem}:host([focus-visible][checked]) .thumb,:host([hover][checked]) .thumb,:host([pressed][checked]) .thumb{background-color:rgb(var(--mdui-color-primary-container))}.invalid .thumb{background-color:rgb(var(--mdui-color-error));--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([focus-visible]) .invalid .thumb,:host([hover]) .invalid .thumb,:host([pressed]) .invalid .thumb{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .thumb{background-color:rgba(var(--mdui-color-on-surface),.38)}:host([disabled][checked]) .thumb{background-color:rgb(var(--mdui-color-surface))}.checked-icon,.unchecked-icon{display:flex;position:absolute;transition-property:opacity,transform;font-size:1rem}.unchecked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .unchecked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([disabled]) .unchecked-icon{color:rgba(var(--mdui-color-surface-container-highest),.38)}.checked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-on-primary-container))}:host([checked]) .checked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3)}.invalid .checked-icon{color:rgb(var(--mdui-color-error-container))}:host([disabled]) .checked-icon{color:rgba(var(--mdui-color-on-surface),.38)}.checked-icon .i,.unchecked-icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){font-size:inherit;color:inherit}`; let Switch = class Switch2 extends RippleMixin(FocusableMixin(MduiElement)) { constructor() { super(...arguments); this.disabled = false; this.checked = false; this.defaultChecked = false; this.required = false; this.name = ""; this.value = "on"; this.invalid = false; this.rippleRef = ii(); this.inputRef = ii(); this.formController = new FormController(this, { value: (control) => control.checked ? control.value : void 0, defaultValue: (control) => control.defaultChecked, setValue: (control, checked) => control.checked = checked }); this.hasSlotController = new HasSlotController(this, "unchecked-icon"); } /** * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState) */ get validity() { return this.inputRef.value.validity; } /** * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串 */ get validationMessage() { return this.inputRef.value.validationMessage; } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return this.disabled; } get focusElement() { return this.inputRef.value; } get focusDisabled() { return this.disabled; } async onDisabledChange() { await this.updateComplete; this.invalid = !this.inputRef.value.checkValidity(); } async onCheckedChange() { var _a2; await this.updateComplete; const form = this.formController.getForm(); if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) { this.invalid = false; formResets.get(form).delete(this); } else { this.invalid = !this.inputRef.value.checkValidity(); } } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true` */ checkValidity() { const valid = this.inputRef.value.checkValidity(); if (!valid) { this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); } return valid; } /** * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。 * * 如果验证未通过，还会在组件上显示验证失败的提示。 */ reportValidity() { this.invalid = !this.inputRef.value.reportValidity(); if (this.invalid) { const eventProceeded = this.emit("invalid", { bubbles: false, cancelable: true, composed: false }); if (!eventProceeded) { this.blur(); this.focus(); } } return !this.invalid; } /** * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证 * * @param message 自定义的错误提示文本 */ setCustomValidity(message) { this.inputRef.value.setCustomValidity(message); this.invalid = !this.inputRef.value.checkValidity(); } render() { return ke`<label class="${Rt({ invalid: this.invalid, "has-unchecked-icon": this.uncheckedIcon || this.hasSlotController.test("unchecked-icon") })}"><input ${Kt(this.inputRef)} type="checkbox" name="${to(this.name)}" value="${to(this.value)}" .disabled="${this.disabled}" .checked="${Ft(this.checked)}" .required="${this.required}" @change="${this.onChange}"><div part="track" class="track"><div part="thumb" class="thumb"><mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="checked-icon" part="checked-icon" class="checked-icon">${this.checkedIcon ? ke`<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>` : this.checkedIcon === "" ? nothingTemplate : ke`<mdui-icon-check class="i"></mdui-icon-check>`}</slot><slot name="unchecked-icon" part="unchecked-icon" class="unchecked-icon">${this.uncheckedIcon ? ke`<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>` : nothingTemplate}</slot></div></div></label>`; } /** * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom */ onChange() { this.checked = this.inputRef.value.checked; this.emit("change"); } }; Switch.styles = [componentStyle, style$1]; __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Switch.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Switch.prototype, "checked", void 0); __decorate([ defaultValue("checked") ], Switch.prototype, "defaultChecked", void 0); __decorate([ n$1({ reflect: true, attribute: "unchecked-icon" }) ], Switch.prototype, "uncheckedIcon", void 0); __decorate([ n$1({ reflect: true, attribute: "checked-icon" }) ], Switch.prototype, "checkedIcon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Switch.prototype, "required", void 0); __decorate([ n$1({ reflect: true }) ], Switch.prototype, "form", void 0); __decorate([ n$1({ reflect: true }) ], Switch.prototype, "name", void 0); __decorate([ n$1({ reflect: true }) ], Switch.prototype, "value", void 0); __decorate([ r$1() ], Switch.prototype, "invalid", void 0); __decorate([ watch("disabled", true), watch("required", true) ], Switch.prototype, "onDisabledChange", null); __decorate([ watch("checked", true) ], Switch.prototype, "onCheckedChange", null); Switch = __decorate([ t$1("mdui-switch") ], Switch); const tabStyle = i$3`:host{position:relative;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.container{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%}.preset{flex-direction:column;min-height:3rem;padding:.625rem 1rem}:host([inline]) .preset{flex-direction:row}.icon-container,.label-container{position:relative;display:flex;align-items:center;justify-content:center}.icon-container ::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.icon-container ::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.label-container ::slotted([slot=badge]){position:absolute;left:100%;bottom:100%;transform:translate(-.75rem,.625rem)}.label-container ::slotted([slot=badge][variant=small]){transform:translate(-.375rem,.375rem)}.icon,.label{display:flex;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .icon,:host([focused]) .label,:host([hover]) .icon,:host([hover]) .label,:host([pressed]) .icon,:host([pressed]) .label{color:rgb(var(--mdui-color-on-surface))}:host([active]) .icon,:host([active]) .label{color:rgb(var(--mdui-color-primary))}:host([active]) .variant-secondary .icon,:host([active]) .variant-secondary .label{color:rgb(var(--mdui-color-on-surface))}.icon{font-size:1.5rem}.label{font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit;color:inherit}`; let Tab = class Tab2 extends RippleMixin(FocusableMixin(MduiElement)) { constructor() { super(...arguments); this.inline = false; this.active = false; this.variant = "primary"; this.key = uniqueId(); this.rippleRef = ii(); this.hasSlotController = new HasSlotController(this, "icon", "custom"); } get rippleElement() { return this.rippleRef.value; } get rippleDisabled() { return false; } get focusElement() { return this; } get focusDisabled() { return false; } render() { const hasIcon = this.icon || this.hasSlotController.test("icon"); const hasCustomSlot = this.hasSlotController.test("custom"); const renderBadge = () => ke`<slot name="badge"></slot>`; return ke`<mdui-ripple ${Kt(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><div part="container" class="${Rt({ container: true, preset: !hasCustomSlot, "variant-secondary": this.variant === "secondary" })}"><slot name="custom"><div class="icon-container">${nn(hasIcon || this.icon, renderBadge)}<slot name="icon" part="icon" class="icon">${this.icon ? ke`<mdui-icon name="${this.icon}"></mdui-icon>` : nothingTemplate}</slot></div><div class="label-container">${nn(!hasIcon, renderBadge)}<slot part="label" class="label"></slot></div></slot></div>`; } }; Tab.styles = [componentStyle, tabStyle]; __decorate([ n$1({ reflect: true }) ], Tab.prototype, "value", void 0); __decorate([ n$1({ reflect: true }) ], Tab.prototype, "icon", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Tab.prototype, "inline", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Tab.prototype, "active", void 0); __decorate([ r$1() ], Tab.prototype, "variant", void 0); Tab = __decorate([ t$1("mdui-tab") ], Tab); const tabPanelStyle = i$3`:host{display:block;overflow-y:auto;flex:1 1 auto}:host(:not([active])){display:none}`; let TabPanel = class TabPanel2 extends MduiElement { constructor() { super(...arguments); this.active = false; } render() { return ke`<slot></slot>`; } }; TabPanel.styles = [ componentStyle, tabPanelStyle ]; __decorate([ n$1({ reflect: true }) ], TabPanel.prototype, "value", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TabPanel.prototype, "active", void 0); TabPanel = __decorate([ t$1("mdui-tab-panel") ], TabPanel); const tabsStyle = i$3`:host{position:relative;display:flex}:host([placement^=top]){flex-direction:column}:host([placement^=bottom]){flex-direction:column-reverse}:host([placement^=left]){flex-direction:row}:host([placement^=right]){flex-direction:row-reverse}.container{position:relative;display:flex;flex:0 0 auto;overflow-x:auto;background-color:rgb(var(--mdui-color-surface))}:host([placement^=bottom]) .container,:host([placement^=top]) .container{flex-direction:row}:host([placement^=left]) .container,:host([placement^=right]) .container{flex-direction:column}:host([placement$='-start']) .container{justify-content:flex-start}:host([placement=bottom]) .container,:host([placement=left]) .container,:host([placement=right]) .container,:host([placement=top]) .container{justify-content:center}:host([placement$='-end']) .container{justify-content:flex-end}.container::after{content:' ';position:absolute;background-color:rgb(var(--mdui-color-surface-variant))}:host([placement^=bottom]) .container::after,:host([placement^=top]) .container::after{left:0;width:100%;height:.0625rem}:host([placement^=top]) .container::after{bottom:0}:host([placement^=bottom]) .container::after{top:0}:host([placement^=left]) .container::after,:host([placement^=right]) .container::after{top:0;height:100%;width:.0625rem}:host([placement^=left]) .container::after{right:0}:host([placement^=right]) .container::after{left:0}.indicator{position:absolute;z-index:1;background-color:rgb(var(--mdui-color-primary))}.container:not(.initial) .indicator{transition-duration:var(--mdui-motion-duration-medium2);transition-timing-function:var(--mdui-motion-easing-standard-decelerate)}:host([placement^=bottom]) .indicator,:host([placement^=top]) .indicator{transition-property:transform,left,width}:host([placement^=left]) .indicator,:host([placement^=right]) .indicator{transition-property:transform,top,height}:host([placement^=top]) .indicator{bottom:0}:host([placement^=bottom]) .indicator{top:0}:host([placement^=left]) .indicator{right:0}:host([placement^=right]) .indicator{left:0}:host([placement^=bottom][variant=primary]) .indicator,:host([placement^=top][variant=primary]) .indicator{height:.1875rem}:host([placement^=bottom][variant=secondary]) .indicator,:host([placement^=top][variant=secondary]) .indicator{height:.125rem}:host([placement^=left][variant=primary]) .indicator,:host([placement^=right][variant=primary]) .indicator{width:.1875rem}:host([placement^=left][variant=secondary]) .indicator,:host([placement^=right][variant=secondary]) .indicator{width:.125rem}:host([placement^=top][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-top-right-radius:.1875rem}:host([placement^=bottom][variant=primary]) .indicator{border-bottom-right-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=left][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=right][variant=primary]) .indicator{border-top-right-radius:.1875rem;border-bottom-right-radius:.1875rem}:host([full-width]) ::slotted(mdui-tab){flex:1}`; let Tabs = class Tabs2 extends MduiElement { constructor() { super(...arguments); this.variant = "primary"; this.placement = "top-start"; this.fullWidth = false; this.activeKey = 0; this.isInitial = true; this.containerRef = ii(); this.indicatorRef = ii(); this.definedController = new DefinedController(this, { relatedElements: ["mdui-tab", "mdui-tab-panel"] }); } async onActiveKeyChange() { var _a2; await this.definedController.whenDefined(); this.value = (_a2 = this.tabs.find((tab) => tab.key === this.activeKey)) == null ? void 0 : _a2.value; this.updateActive(); if (!this.isInitial) { this.emit("change"); } } async onValueChange() { this.isInitial = !this.hasUpdated; await this.definedController.whenDefined(); const tab = this.tabs.find((tab2) => tab2.value === this.value); this.activeKey = (tab == null ? void 0 : tab.key) ?? 0; } async onIndicatorChange() { await this.updateComplete; this.updateIndicator(); } disconnectedCallback() { var _a2; super.disconnectedCallback(); (_a2 = this.observeResize) == null ? void 0 : _a2.unobserve(); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.observeResize = observeResize(this.containerRef.value, () => this.updateIndicator()); } render() { return ke`<div ${Kt(this.containerRef)} part="container" class="container ${Rt({ initial: this.isInitial })}"><slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><div ${Kt(this.indicatorRef)} part="indicator" class="indicator"></div></div><slot name="panel" @slotchange="${this.onSlotChange}"></slot>`; } async onSlotChange() { await this.definedController.whenDefined(); this.updateActive(); } async onClick(event) { if (event.button) { return; } await this.definedController.whenDefined(); const target = event.target; const tab = target.closest("mdui-tab"); if (!tab) { return; } this.activeKey = tab.key; this.isInitial = false; this.updateActive(); } updateActive() { this.activeTab = this.tabs.map((tab) => { tab.active = this.activeKey === tab.key; return tab; }).find((tab) => tab.active); this.panels.forEach((panel) => { var _a2; return panel.active = panel.value === ((_a2 = this.activeTab) == null ? void 0 : _a2.value); }); this.updateIndicator(); } updateIndicator() { const activeTab = this.activeTab; const $indicator = $$1(this.indicatorRef.value); const isVertical = this.placement.startsWith("left") || this.placement.startsWith("right"); if (!activeTab) { $indicator.css({ transform: isVertical ? "scaleY(0)" : "scaleX(0)" }); return; } const $activeTab = $$1(activeTab); const offsetTop = activeTab.offsetTop; const offsetLeft = activeTab.offsetLeft; const commonStyle = isVertical ? { transform: "scaleY(1)", width: "", left: "" } : { transform: "scaleX(1)", height: "", top: "" }; let shownStyle = {}; if (this.variant === "primary") { const $customSlots = $activeTab.find(':scope > [slot="custom"]'); const children = $customSlots.length ? $customSlots.get() : $$1(activeTab.renderRoot).find('slot[name="custom"]').children().get(); if (isVertical) { const top = Math.min(...children.map((child) => child.offsetTop)) + offsetTop; const bottom = Math.max(...children.map((child) => child.offsetTop + child.offsetHeight)) + offsetTop; shownStyle = { top, height: bottom - top }; } else { const left = Math.min(...children.map((child) => child.offsetLeft)) + offsetLeft; const right = Math.max(...children.map((child) => child.offsetLeft + child.offsetWidth)) + offsetLeft; shownStyle = { left, width: right - left }; } } if (this.variant === "secondary") { shownStyle = isVertical ? { top: offsetTop, height: activeTab.offsetHeight } : { left: offsetLeft, width: activeTab.offsetWidth }; } $indicator.css({ ...commonStyle, ...shownStyle }); } }; Tabs.styles = [componentStyle, tabsStyle]; __decorate([ n$1({ reflect: true }) ], Tabs.prototype, "variant", void 0); __decorate([ n$1({ reflect: true }) ], Tabs.prototype, "value", void 0); __decorate([ n$1({ reflect: true }) ], Tabs.prototype, "placement", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter, attribute: "full-width" }) ], Tabs.prototype, "fullWidth", void 0); __decorate([ r$1() ], Tabs.prototype, "activeKey", void 0); __decorate([ r$1() ], Tabs.prototype, "isInitial", void 0); __decorate([ o$1({ selector: "mdui-tab", flatten: true }) ], Tabs.prototype, "tabs", void 0); __decorate([ o$1({ selector: "mdui-tab-panel", slot: "panel", flatten: true }) ], Tabs.prototype, "panels", void 0); __decorate([ watch("activeKey", true) ], Tabs.prototype, "onActiveKeyChange", null); __decorate([ watch("value") ], Tabs.prototype, "onValueChange", null); __decorate([ watch("variant", true), watch("placement", true), watch("fullWidth", true) ], Tabs.prototype, "onIndicatorChange", null); Tabs = __decorate([ t$1("mdui-tabs") ], Tabs); class HoverController { /** * @param host * @param elementRef 检查鼠标是否放在该元素上 */ constructor(host, elementRef) { this.isHover = false; this.uniqueID = uniqueId(); this.enterEventName = `mouseenter.${this.uniqueID}.hoverController`; this.leaveEventName = `mouseleave.${this.uniqueID}.hoverController`; this.mouseEnterItems = []; this.mouseLeaveItems = []; (this.host = host).addController(this); this.elementRef = elementRef; } hostConnected() { this.host.updateComplete.then(() => { $$1(this.elementRef.value).on(this.enterEventName, () => { this.isHover = true; for (let i3 = this.mouseEnterItems.length - 1; i3 >= 0; i3--) { const item = this.mouseEnterItems[i3]; item.callback(); if (item.one) { this.mouseEnterItems.splice(i3, 1); } } }).on(this.leaveEventName, () => { this.isHover = false; for (let i3 = this.mouseLeaveItems.length - 1; i3 >= 0; i3--) { const item = this.mouseLeaveItems[i3]; item.callback(); if (item.one) { this.mouseLeaveItems.splice(i3, 1); } } }); }); } hostDisconnected() { $$1(this.elementRef.value).off(this.enterEventName).off(this.leaveEventName); } /** * 指定鼠标移入时的回调函数 * @param callback 要执行的回调函数 * @param one 是否仅执行一次 */ onMouseEnter(callback, one = false) { this.mouseEnterItems.push({ callback, one }); } /** * 指定鼠标移出时的回调函数 * @param callback 要执行的回调函数 * @param one 是否仅执行一次 */ onMouseLeave(callback, one = false) { this.mouseLeaveItems.push({ callback, one }); } } const style = i$3`:host{--shape-corner-plain:var(--mdui-shape-corner-extra-small);--shape-corner-rich:var(--mdui-shape-corner-medium);--z-index:2500;display:contents}.popup{position:fixed;display:flex;flex-direction:column;z-index:var(--z-index);border-radius:var(--shape-corner-plain);background-color:rgb(var(--mdui-color-inverse-surface));padding:0 .5rem;min-width:1.75rem;max-width:20rem}:host([variant=rich]) .popup{border-radius:var(--shape-corner-rich);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);padding:.75rem 1rem .5rem 1rem}.headline{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.content{display:flex;padding:.25rem 0;color:rgb(var(--mdui-color-inverse-on-surface));font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}:host([variant=rich]) .content{color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}.action{display:flex;justify-content:flex-start;padding-top:.5rem}.action ::slotted(:not(:last-child)){margin-right:.5rem}`; let Tooltip = class Tooltip2 extends MduiElement { constructor() { super(); this.variant = "plain"; this.placement = "auto"; this.openDelay = 150; this.closeDelay = 150; this.trigger = "hover focus"; this.disabled = false; this.open = false; this.popupRef = ii(); this.hasSlotController = new HasSlotController(this, "headline", "action"); this.hoverController = new HoverController(this, this.popupRef); this.definedController = new DefinedController(this, { needDomReady: true }); this.onDocumentClick = this.onDocumentClick.bind(this); this.onWindowScroll = this.onWindowScroll.bind(this); this.onFocus = this.onFocus.bind(this); this.onBlur = this.onBlur.bind(this); this.onClick = this.onClick.bind(this); this.onKeydown = this.onKeydown.bind(this); this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); } /** * 获取第一个非 <style> 和 content slot 的子元素，作为 tooltip 的目标元素 */ get target() { return [...this.children].find((el) => el.tagName.toLowerCase() !== "style" && el.getAttribute("slot") !== "content"); } async onPositionChange() { if (this.open) { await this.definedController.whenDefined(); this.updatePositioner(); } } async onOpenChange() { const hasUpdated = this.hasUpdated; const duration = getDuration(this, "short4"); const easing = getEasing(this, "standard"); if (this.open) { await this.definedController.whenDefined(); $$1(`mdui-tooltip[variant="${this.variant}"]`).filter((_2, element) => element !== this).prop("open", false); if (!hasUpdated) { await this.updateComplete; } if (hasUpdated) { const eventProceeded = this.emit("open", { cancelable: true }); if (!eventProceeded) { return; } } await stopAnimations(this.popupRef.value); this.popupRef.value.hidden = false; this.updatePositioner(); await animateTo(this.popupRef.value, [{ transform: "scale(0)" }, { transform: "scale(1)" }], { duration: hasUpdated ? duration : 0, easing }); if (hasUpdated) { this.emit("opened"); } return; } if (!this.open && hasUpdated) { const eventProceeded = this.emit("close", { cancelable: true }); if (!eventProceeded) { return; } await stopAnimations(this.popupRef.value); await animateTo(this.popupRef.value, [{ transform: "scale(1)" }, { transform: "scale(0)" }], { duration, easing }); this.popupRef.value.hidden = true; this.emit("closed"); } } connectedCallback() { super.connectedCallback(); document.addEventListener("pointerdown", this.onDocumentClick); this.overflowAncestors = getOverflowAncestors(this.target); this.overflowAncestors.forEach((ancestor) => { ancestor.addEventListener("scroll", this.onWindowScroll); }); } disconnectedCallback() { var _a2, _b; super.disconnectedCallback(); document.removeEventListener("pointerdown", this.onDocumentClick); (_a2 = this.overflowAncestors) == null ? void 0 : _a2.forEach((ancestor) => { ancestor.removeEventListener("scroll", this.onWindowScroll); }); (_b = this.observeResize) == null ? void 0 : _b.unobserve(); } firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.definedController.whenDefined().then(() => { const target = this.target; target.addEventListener("focus", this.onFocus); target.addEventListener("blur", this.onBlur); target.addEventListener("pointerdown", this.onClick); target.addEventListener("keydown", this.onKeydown); target.addEventListener("mouseenter", this.onMouseEnter); target.addEventListener("mouseleave", this.onMouseLeave); this.observeResize = observeResize(target, () => { this.updatePositioner(); }); }); } render() { const hasHeadline = this.isRich() && (this.headline || this.hasSlotController.test("headline")); const hasAction = this.isRich() && this.hasSlotController.test("action"); return ke`<slot></slot><div ${Kt(this.popupRef)} part="popup" class="popup" hidden>${nn(hasHeadline, () => ke`<slot name="headline" part="headline" class="headline">${this.headline}</slot>`)}<slot name="content" part="content" class="content">${this.content}</slot>${nn(hasAction, () => ke`<slot name="action" part="action" class="action"></slot>`)}</div>`; } isRich() { return this.variant === "rich"; } /** * 请求关闭 tooltip。鼠标未悬浮在 tooltip 上时，直接关闭；否则等鼠标移走再关闭 */ requestClose() { if (!this.hoverController.isHover) { this.open = false; return; } this.hoverController.onMouseLeave(() => { if (this.hasTrigger("hover")) { this.hoverTimeout = window.setTimeout(() => { this.open = false; }, this.closeDelay || 50); } else { this.open = false; } }, true); } hasTrigger(trigger) { const triggers = this.trigger.split(" "); return triggers.includes(trigger); } onFocus() { if (this.disabled || this.open || !this.hasTrigger("focus")) { return; } this.open = true; } onBlur() { if (this.disabled || !this.open || !this.hasTrigger("focus")) { return; } this.requestClose(); } onClick(e2) { if (this.disabled || e2.button || !this.hasTrigger("click")) { return; } if (this.open && (this.hasTrigger("hover") || this.hasTrigger("focus"))) { return; } this.open = !this.open; } onKeydown(e2) { if (this.disabled || !this.open || e2.key !== "Escape") { return; } e2.stopPropagation(); this.requestClose(); } onMouseEnter() { if (this.disabled || this.open || !this.hasTrigger("hover")) { return; } if (this.openDelay) { window.clearTimeout(this.hoverTimeout); this.hoverTimeout = window.setTimeout(() => { this.open = true; }, this.openDelay); } else { this.open = true; } } onMouseLeave() { window.clearTimeout(this.hoverTimeout); if (this.disabled || !this.open || !this.hasTrigger("hover")) { return; } this.hoverTimeout = window.setTimeout(() => { this.requestClose(); }, this.closeDelay || 50); } /** * 在 document 上点击时，根据条件判断是否关闭 tooltip */ onDocumentClick(e2) { if (this.disabled || !this.open) { return; } const path = e2.composedPath(); if (!path.includes(this)) { this.requestClose(); } } onWindowScroll() { window.requestAnimationFrame(() => this.updatePositioner()); } updatePositioner() { const $popup = $$1(this.popupRef.value); const targetMargin = this.isRich() ? 0 : 4; const popupMargin = 4; const targetRect = this.target.getBoundingClientRect(); const targetTop = targetRect.top; const targetLeft = targetRect.left; const targetHeight = targetRect.height; const targetWidth = targetRect.width; const popupHeight = this.popupRef.value.offsetHeight; const popupWidth = this.popupRef.value.offsetWidth; const popupXSpace = popupWidth + targetMargin + popupMargin; const popupYSpace = popupHeight + targetMargin + popupMargin; let transformOriginX; let transformOriginY; let top; let left; let placement = this.placement; if (placement === "auto") { const $window = $$1(window); const hasTopSpace = targetTop > popupYSpace; const hasBottomSpace = $window.height() - targetTop - targetHeight > popupYSpace; const hasLeftSpace = targetLeft > popupXSpace; const hasRightSpace = $window.width() - targetLeft - targetWidth > popupXSpace; if (this.isRich()) { placement = "bottom-right"; if (hasBottomSpace && hasRightSpace) { placement = "bottom-right"; } else if (hasBottomSpace && hasLeftSpace) { placement = "bottom-left"; } else if (hasTopSpace && hasRightSpace) { placement = "top-right"; } else if (hasTopSpace && hasLeftSpace) { placement = "top-left"; } else if (hasBottomSpace) { placement = "bottom"; } else if (hasTopSpace) { placement = "top"; } else if (hasRightSpace) { placement = "right"; } else if (hasLeftSpace) { placement = "left"; } } else { placement = "top"; if (hasTopSpace) { placement = "top"; } else if (hasBottomSpace) { placement = "bottom"; } else if (hasLeftSpace) { placement = "left"; } else if (hasRightSpace) { placement = "right"; } } } const [position, alignment] = placement.split("-"); switch (position) { case "top": transformOriginY = "bottom"; top = targetTop - popupHeight - targetMargin; break; case "bottom": transformOriginY = "top"; top = targetTop + targetHeight + targetMargin; break; default: transformOriginY = "center"; switch (alignment) { case "start": top = targetTop; break; case "end": top = targetTop + targetHeight - popupHeight; break; default: top = targetTop + targetHeight / 2 - popupHeight / 2; break; } break; } switch (position) { case "left": transformOriginX = "right"; left = targetLeft - popupWidth - targetMargin; break; case "right": transformOriginX = "left"; left = targetLeft + targetWidth + targetMargin; break; default: transformOriginX = "center"; switch (alignment) { case "start": left = targetLeft; break; case "end": left = targetLeft + targetWidth - popupWidth; break; case "left": transformOriginX = "right"; left = targetLeft - popupWidth - targetMargin; break; case "right": transformOriginX = "left"; left = targetLeft + targetWidth + targetMargin; break; default: left = targetLeft + targetWidth / 2 - popupWidth / 2; break; } break; } $popup.css({ top, left, transformOrigin: [transformOriginX, transformOriginY].join(" ") }); } }; Tooltip.styles = [componentStyle, style]; __decorate([ n$1({ reflect: true }) ], Tooltip.prototype, "variant", void 0); __decorate([ n$1({ reflect: true }) ], Tooltip.prototype, "placement", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "open-delay" }) ], Tooltip.prototype, "openDelay", void 0); __decorate([ n$1({ type: Number, reflect: true, attribute: "close-delay" }) ], Tooltip.prototype, "closeDelay", void 0); __decorate([ n$1({ reflect: true }) ], Tooltip.prototype, "headline", void 0); __decorate([ n$1({ reflect: true }) ], Tooltip.prototype, "content", void 0); __decorate([ n$1({ reflect: true }) ], Tooltip.prototype, "trigger", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Tooltip.prototype, "disabled", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], Tooltip.prototype, "open", void 0); __decorate([ watch("placement", true), watch("content", true) ], Tooltip.prototype, "onPositionChange", null); __decorate([ watch("open") ], Tooltip.prototype, "onOpenChange", null); Tooltip = __decorate([ t$1("mdui-tooltip") ], Tooltip); const getInnerHtmlFromSlot = (slot) => { const nodes = slot.assignedNodes({ flatten: true }); let html = ""; [...nodes].forEach((node) => { if (node.nodeType === Node.ELEMENT_NODE) { html += node.outerHTML; } if (node.nodeType === Node.TEXT_NODE) { html += node.textContent; } }); return html; }; const topAppBarTitleStyle = i$3`:host{display:block;width:100%;flex-shrink:initial!important;overflow:hidden;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-title-large-size);font-weight:var(--mdui-typescale-title-large-weight);letter-spacing:var(--mdui-typescale-title-large-tracking);line-height:var(--mdui-typescale-title-large-line-height);line-height:2.5rem}.label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}.label.variant-center-aligned{text-align:center}.label.variant-large:not(.shrink),.label.variant-medium:not(.shrink){opacity:0}.label.variant-large.shrink,.label.variant-medium.shrink{transition-delay:var(--mdui-motion-duration-short2)}.label-large{display:none;position:absolute;width:100%;left:0;margin-right:0;padding:0 1rem;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}.label-large.variant-large,.label-large.variant-medium{display:block}.label-large.variant-medium{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;bottom:.75rem;font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.label-large.variant-large{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;bottom:1.25rem;font-size:var(--mdui-typescale-headline-medium-size);font-weight:var(--mdui-typescale-headline-medium-weight);letter-spacing:var(--mdui-typescale-headline-medium-tracking);line-height:var(--mdui-typescale-headline-medium-line-height)}.label-large.variant-large:not(.shrink),.label-large.variant-medium:not(.shrink){opacity:1;transition-delay:var(--mdui-motion-duration-short2)}.label-large.variant-large.shrink,.label-large.variant-medium.shrink{opacity:0;z-index:-1}`; let TopAppBarTitle = class TopAppBarTitle2 extends MduiElement { constructor() { super(...arguments); this.variant = "small"; this.shrink = false; this.hasSlotController = new HasSlotController(this, "label-large"); this.labelLargeRef = ii(); this.defaultSlotRef = ii(); } render() { const hasLabelLargeSlot = this.hasSlotController.test("label-large"); const className2 = Rt({ shrink: this.shrink, "variant-center-aligned": this.variant === "center-aligned", "variant-small": this.variant === "small", "variant-medium": this.variant === "medium", "variant-large": this.variant === "large" }); return ke`<slot part="label" class="label ${className2}" ${Kt(this.defaultSlotRef)} @slotchange="${() => this.onSlotChange(hasLabelLargeSlot)}"></slot>${hasLabelLargeSlot ? ke`<slot name="label-large" part="label-large" class="label-large ${className2}"></slot>` : ke`<div ${Kt(this.labelLargeRef)} part="label-large" class="label-large ${className2}"></div>`}`; } /** * default slot 变化时，同步到 label-large 中 * @param hasLabelLargeSlot * @private */ onSlotChange(hasLabelLargeSlot) { if (!hasLabelLargeSlot) { this.labelLargeRef.value.innerHTML = getInnerHtmlFromSlot(this.defaultSlotRef.value); } } }; TopAppBarTitle.styles = [ componentStyle, topAppBarTitleStyle ]; __decorate([ r$1() ], TopAppBarTitle.prototype, "variant", void 0); __decorate([ r$1() ], TopAppBarTitle.prototype, "shrink", void 0); TopAppBarTitle = __decorate([ t$1("mdui-top-app-bar-title") ], TopAppBarTitle); const topAppBarStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;right:0;left:0;display:flex;flex:0 0 auto;align-items:flex-start;justify-content:flex-start;border-bottom-left-radius:var(--shape-corner);border-bottom-right-radius:var(--shape-corner);z-index:var(--z-index);transition:top var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear),background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);padding:.75rem .5rem;height:4rem;background-color:rgb(var(--mdui-color-surface))}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([scroll-behavior~=shrink]){transition-duration:var(--mdui-motion-duration-short4)}:host([scrolling]){background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}::slotted(mdui-button-icon){color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}::slotted(mdui-button-icon:first-child){color:rgb(var(--mdui-color-on-surface))}::slotted(mdui-avatar){width:1.875rem;height:1.875rem;margin-top:.3125rem;margin-bottom:.3125rem}::slotted(*){flex-shrink:0}::slotted(:not(:last-child)){margin-right:.5rem}:host([variant=medium]){height:7rem}:host([variant=large]){height:9.5rem}:host([hide]){transition-duration:var(--mdui-motion-duration-short4);top:-4.625rem}:host([hide][variant=medium]){top:-7.625rem}:host([hide][variant=large]){top:-10.125rem}:host([shrink][variant=large]),:host([shrink][variant=medium]){transition-duration:var(--mdui-motion-duration-short4);height:4rem}`; let TopAppBar = class TopAppBar2 extends ScrollBehaviorMixin(LayoutItemBase) { constructor() { super(...arguments); this.variant = "small"; this.hide = false; this.shrink = false; this.scrolling = false; } get scrollPaddingPosition() { return "top"; } get layoutPlacement() { return "top"; } async onVariantChange() { if (this.hasUpdated) { this.addEventListener("transitionend", async () => { await this.scrollBehaviorDefinedController.whenDefined(); this.updateContainerPadding(); }, { once: true }); } else { await this.updateComplete; } this.titleElements.forEach((titleElement) => { titleElement.variant = this.variant; }); } async onShrinkChange() { if (!this.hasUpdated) { await this.updateComplete; } this.titleElements.forEach((titleElement) => { titleElement.shrink = this.shrink; }); } firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); this.addEventListener("transitionend", (e2) => { if (e2.target === this) { this.emit(this.hide ? "hidden" : "shown"); } }); } render() { return ke`<slot></slot>`; } runScrollNoThreshold(isScrollingUp, scrollTop) { if (this.hasScrollBehavior("shrink")) { if (isScrollingUp && scrollTop < 8) { this.shrink = false; } } } runScrollThreshold(isScrollingUp, scrollTop) { if (this.hasScrollBehavior("elevate")) { this.scrolling = !!scrollTop; } if (this.hasScrollBehavior("shrink")) { if (!isScrollingUp) { this.shrink = true; } } if (this.hasScrollBehavior("hide")) { if (!isScrollingUp && !this.hide) { const eventProceeded = this.emit("hide", { cancelable: true }); if (eventProceeded) { this.hide = true; } } if (isScrollingUp && this.hide) { const eventProceeded = this.emit("show", { cancelable: true }); if (eventProceeded) { this.hide = false; } } } } }; TopAppBar.styles = [ componentStyle, topAppBarStyle ]; __decorate([ n$1({ reflect: true }) ], TopAppBar.prototype, "variant", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TopAppBar.prototype, "hide", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TopAppBar.prototype, "shrink", void 0); __decorate([ n$1({ reflect: true, attribute: "scroll-behavior" }) ], TopAppBar.prototype, "scrollBehavior", void 0); __decorate([ n$1({ type: Boolean, reflect: true, converter: booleanConverter }) ], TopAppBar.prototype, "scrolling", void 0); __decorate([ o$1({ selector: "mdui-top-app-bar-title", flatten: true }) ], TopAppBar.prototype, "titleElements", void 0); __decorate([ watch("variant") ], TopAppBar.prototype, "onVariantChange", null); __decorate([ watch("shrink") ], TopAppBar.prototype, "onShrinkChange", null); TopAppBar = __decorate([ t$1("mdui-top-app-bar") ], TopAppBar); function isPromise(obj) { return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function"; } const container = {}; function queue(name, func) { if (isUndefined(container[name])) { container[name] = []; } if (isUndefined(func)) { return container[name]; } container[name].push(func); } function dequeue(name) { if (isUndefined(container[name])) { return; } if (!container[name].length) { return; } const func = container[name].shift(); func(); } const defaultAction = { onClick: returnTrue }; const queueName$1 = "mdui.functions.dialog."; let currentDialog = void 0; const dialog = (options) => { const dialog2 = new Dialog(); const $dialog = $$1(dialog2); const properties = [ "headline", "description", "icon", "closeOnEsc", "closeOnOverlayClick", "stackedActions" ]; const callbacks = ["onOpen", "onOpened", "onClose", "onClosed", "onOverlayClick"]; Object.entries(options).forEach(([key2, value]) => { if (properties.includes(key2)) { dialog2[key2] = value; } else if (callbacks.includes(key2)) { const eventName = toKebabCase(key2.slice(2)); $dialog.on(eventName, () => { value.call(dialog2, dialog2); }); } }); if (options.body) { $dialog.append(options.body); } if (options.actions) { options.actions.forEach((action) => { const mergedAction = Object.assign({}, defaultAction, action); $$1(`<mdui-button slot="action" variant="text" >${mergedAction.text}</mdui-button>`).appendTo($dialog).on("click", function() { const clickResult = mergedAction.onClick.call(dialog2, dialog2); if (isPromise(clickResult)) { this.loading = true; clickResult.then(() => { dialog2.open = false; }).finally(() => { this.loading = false; }); } else if (clickResult !== false) { dialog2.open = false; } }); }); } $dialog.appendTo("body").on("closed", () => { $dialog.remove(); if (options.queue) { currentDialog = void 0; dequeue(queueName$1 + options.queue); } }); if (!options.queue) { setTimeout(() => { dialog2.open = true; }); } else if (currentDialog) { queue(queueName$1 + options.queue, () => { dialog2.open = true; currentDialog = dialog2; }); } else { setTimeout(() => { dialog2.open = true; }); currentDialog = dialog2; } return dialog2; }; /** * @license * Copyright 2021 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ function signum(num) { if (num < 0) { return -1; } else if (num === 0) { return 0; } else { return 1; } } function lerp(start, stop, amount) { return (1 - amount) * start + amount * stop; } function clampInt(min, max, input) { if (input < min) { return min; } else if (input > max) { return max; } return input; } function clampDouble(min, max, input) { if (input < min) { return min; } else if (input > max) { return max; } return input; } function sanitizeDegreesDouble(degrees) { degrees = degrees % 360; if (degrees < 0) { degrees = degrees + 360; } return degrees; } function matrixMultiply(row, matrix) { const a2 = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2]; const b3 = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2]; const c2 = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2]; return [a2, b3, c2]; } /** * @license * Copyright 2021 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ const SRGB_TO_XYZ = [ [0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.0722], [0.01932141, 0.11916382, 0.95034478] ]; const XYZ_TO_SRGB = [ [ 3.2413774792388685, -1.5376652402851851, -0.49885366846268053 ], [ -0.9691452513005321, 1.8758853451067872, 0.04156585616912061 ], [ 0.05562093689691305, -0.20395524564742123, 1.0571799111220335 ] ]; const WHITE_POINT_D65 = [95.047, 100, 108.883]; function argbFromRgb(red, green, blue) { return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0; } function argbFromLinrgb(linrgb) { const r2 = delinearized(linrgb[0]); const g2 = delinearized(linrgb[1]); const b3 = delinearized(linrgb[2]); return argbFromRgb(r2, g2, b3); } function redFromArgb(argb) { return argb >> 16 & 255; } function greenFromArgb(argb) { return argb >> 8 & 255; } function blueFromArgb(argb) { return argb & 255; } function argbFromXyz(x2, y2, z2) { const matrix = XYZ_TO_SRGB; const linearR = matrix[0][0] * x2 + matrix[0][1] * y2 + matrix[0][2] * z2; const linearG = matrix[1][0] * x2 + matrix[1][1] * y2 + matrix[1][2] * z2; const linearB = matrix[2][0] * x2 + matrix[2][1] * y2 + matrix[2][2] * z2; const r2 = delinearized(linearR); const g2 = delinearized(linearG); const b3 = delinearized(linearB); return argbFromRgb(r2, g2, b3); } function xyzFromArgb(argb) { const r2 = linearized(redFromArgb(argb)); const g2 = linearized(greenFromArgb(argb)); const b3 = linearized(blueFromArgb(argb)); return matrixMultiply([r2, g2, b3], SRGB_TO_XYZ); } function argbFromLstar(lstar) { const y2 = yFromLstar(lstar); const component = delinearized(y2); return argbFromRgb(component, component, component); } function lstarFromArgb(argb) { const y2 = xyzFromArgb(argb)[1]; return 116 * labF(y2 / 100) - 16; } function yFromLstar(lstar) { return 100 * labInvf((lstar + 16) / 116); } function lstarFromY(y2) { return labF(y2 / 100) * 116 - 16; } function linearized(rgbComponent) { const normalized = rgbComponent / 255; if (normalized <= 0.040449936) { return normalized / 12.92 * 100; } else { return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100; } } function delinearized(rgbComponent) { const normalized = rgbComponent / 100; let delinearized2 = 0; if (normalized <= 31308e-7) { delinearized2 = normalized * 12.92; } else { delinearized2 = 1.055 * Math.pow(normalized, 1 / 2.4) - 0.055; } return clampInt(0, 255, Math.round(delinearized2 * 255)); } function whitePointD65() { return WHITE_POINT_D65; } function labF(t2) { const e2 = 216 / 24389; const kappa = 24389 / 27; if (t2 > e2) { return Math.pow(t2, 1 / 3); } else { return (kappa * t2 + 16) / 116; } } function labInvf(ft) { const e2 = 216 / 24389; const kappa = 24389 / 27; const ft3 = ft * ft * ft; if (ft3 > e2) { return ft3; } else { return (116 * ft - 16) / kappa; } } /** * @license * Copyright 2021 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class ViewingConditions { /** * Create ViewingConditions from a simple, physically relevant, set of * parameters. * * @param whitePoint White point, measured in the XYZ color space. * default = D65, or sunny day afternoon * @param adaptingLuminance The luminance of the adapting field. Informally, * how bright it is in the room where the color is viewed. Can be * calculated from lux by multiplying lux by 0.0586. default = 11.72, * or 200 lux. * @param backgroundLstar The lightness of the area surrounding the color. * measured by L* in L*a*b*. default = 50.0 * @param surround A general description of the lighting surrounding the * color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a * dimly light room, like watching TV at home at night. 2.0 means there * is no difference between the lighting on the color and around it. * default = 2.0 * @param discountingIlluminant Whether the eye accounts for the tint of the * ambient lighting, such as knowing an apple is still red in green light. * default = false, the eye does not perform this process on * self-luminous objects like displays. */ static make(whitePoint = whitePointD65(), adaptingLuminance = 200 / Math.PI * yFromLstar(50) / 100, backgroundLstar = 50, surround = 2, discountingIlluminant = false) { const xyz = whitePoint; const rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461; const gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854; const bW = xyz[0] * -2079e-6 + xyz[1] * 0.048952 + xyz[2] * 0.953127; const f2 = 0.8 + surround / 10; const c2 = f2 >= 0.9 ? lerp(0.59, 0.69, (f2 - 0.9) * 10) : lerp(0.525, 0.59, (f2 - 0.8) * 10); let d2 = discountingIlluminant ? 1 : f2 * (1 - 1 / 3.6 * Math.exp((-adaptingLuminance - 42) / 92)); d2 = d2 > 1 ? 1 : d2 < 0 ? 0 : d2; const nc = f2; const rgbD = [ d2 * (100 / rW) + 1 - d2, d2 * (100 / gW) + 1 - d2, d2 * (100 / bW) + 1 - d2 ]; const k2 = 1 / (5 * adaptingLuminance + 1); const k4 = k2 * k2 * k2 * k2; const k4F = 1 - k4; const fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5 * adaptingLuminance); const n3 = yFromLstar(backgroundLstar) / whitePoint[1]; const z2 = 1.48 + Math.sqrt(n3); const nbb = 0.725 / Math.pow(n3, 0.2); const ncb = nbb; const rgbAFactors = [ Math.pow(fl * rgbD[0] * rW / 100, 0.42), Math.pow(fl * rgbD[1] * gW / 100, 0.42), Math.pow(fl * rgbD[2] * bW / 100, 0.42) ]; const rgbA = [ 400 * rgbAFactors[0] / (rgbAFactors[0] + 27.13), 400 * rgbAFactors[1] / (rgbAFactors[1] + 27.13), 400 * rgbAFactors[2] / (rgbAFactors[2] + 27.13) ]; const aw = (2 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb; return new ViewingConditions(n3, aw, nbb, ncb, c2, nc, rgbD, fl, Math.pow(fl, 0.25), z2); } /** * Parameters are intermediate values of the CAM16 conversion process. Their * names are shorthand for technical color science terminology, this class * would not benefit from documenting them individually. A brief overview * is available in the CAM16 specification, and a complete overview requires * a color science textbook, such as Fairchild's Color Appearance Models. */ constructor(n3, aw, nbb, ncb, c2, nc, rgbD, fl, fLRoot, z2) { this.n = n3; this.aw = aw; this.nbb = nbb; this.ncb = ncb; this.c = c2; this.nc = nc; this.rgbD = rgbD; this.fl = fl; this.fLRoot = fLRoot; this.z = z2; } } ViewingConditions.DEFAULT = ViewingConditions.make(); /** * @license * Copyright 2021 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class Cam16 { /** * All of the CAM16 dimensions can be calculated from 3 of the dimensions, in * the following combinations: * - {j or q} and {c, m, or s} and hue * - jstar, astar, bstar * Prefer using a static method that constructs from 3 of those dimensions. * This constructor is intended for those methods to use to return all * possible dimensions. * * @param hue * @param chroma informally, colorfulness / color intensity. like saturation * in HSL, except perceptually accurate. * @param j lightness * @param q brightness; ratio of lightness to white point's lightness * @param m colorfulness * @param s saturation; ratio of chroma to white point's chroma * @param jstar CAM16-UCS J coordinate * @param astar CAM16-UCS a coordinate * @param bstar CAM16-UCS b coordinate */ constructor(hue, chroma, j2, q2, m2, s2, jstar, astar, bstar) { this.hue = hue; this.chroma = chroma; this.j = j2; this.q = q2; this.m = m2; this.s = s2; this.jstar = jstar; this.astar = astar; this.bstar = bstar; } /** * CAM16 instances also have coordinates in the CAM16-UCS space, called J*, * a*, b*, or jstar, astar, bstar in code. CAM16-UCS is included in the CAM16 * specification, and is used to measure distances between colors. */ distance(other) { const dJ = this.jstar - other.jstar; const dA = this.astar - other.astar; const dB = this.bstar - other.bstar; const dEPrime = Math.sqrt(dJ * dJ + dA * dA + dB * dB); const dE = 1.41 * Math.pow(dEPrime, 0.63); return dE; } /** * @param argb ARGB representation of a color. * @return CAM16 color, assuming the color was viewed in default viewing * conditions. */ static fromInt(argb) { return Cam16.fromIntInViewingConditions(argb, ViewingConditions.DEFAULT); } /** * @param argb ARGB representation of a color. * @param viewingConditions Information about the environment where the color * was observed. * @return CAM16 color. */ static fromIntInViewingConditions(argb, viewingConditions) { const red = (argb & 16711680) >> 16; const green = (argb & 65280) >> 8; const blue = argb & 255; const redL = linearized(red); const greenL = linearized(green); const blueL = linearized(blue); const x2 = 0.41233895 * redL + 0.35762064 * greenL + 0.18051042 * blueL; const y2 = 0.2126 * redL + 0.7152 * greenL + 0.0722 * blueL; const z2 = 0.01932141 * redL + 0.11916382 * greenL + 0.95034478 * blueL; const rC = 0.401288 * x2 + 0.650173 * y2 - 0.051461 * z2; const gC = -0.250268 * x2 + 1.204414 * y2 + 0.045854 * z2; const bC = -2079e-6 * x2 + 0.048952 * y2 + 0.953127 * z2; const rD = viewingConditions.rgbD[0] * rC; const gD = viewingConditions.rgbD[1] * gC; const bD = viewingConditions.rgbD[2] * bC; const rAF = Math.pow(viewingConditions.fl * Math.abs(rD) / 100, 0.42); const gAF = Math.pow(viewingConditions.fl * Math.abs(gD) / 100, 0.42); const bAF = Math.pow(viewingConditions.fl * Math.abs(bD) / 100, 0.42); const rA = signum(rD) * 400 * rAF / (rAF + 27.13); const gA = signum(gD) * 400 * gAF / (gAF + 27.13); const bA = signum(bD) * 400 * bAF / (bAF + 27.13); const a2 = (11 * rA + -12 * gA + bA) / 11; const b3 = (rA + gA - 2 * bA) / 9; const u2 = (20 * rA + 20 * gA + 21 * bA) / 20; const p2 = (40 * rA + 20 * gA + bA) / 20; const atan2 = Math.atan2(b3, a2); const atanDegrees = atan2 * 180 / Math.PI; const hue = atanDegrees < 0 ? atanDegrees + 360 : atanDegrees >= 360 ? atanDegrees - 360 : atanDegrees; const hueRadians = hue * Math.PI / 180; const ac = p2 * viewingConditions.nbb; const j2 = 100 * Math.pow(ac / viewingConditions.aw, viewingConditions.c * viewingConditions.z); const q2 = 4 / viewingConditions.c * Math.sqrt(j2 / 100) * (viewingConditions.aw + 4) * viewingConditions.fLRoot; const huePrime = hue < 20.14 ? hue + 360 : hue; const eHue = 0.25 * (Math.cos(huePrime * Math.PI / 180 + 2) + 3.8); const p1 = 5e4 / 13 * eHue * viewingConditions.nc * viewingConditions.ncb; const t2 = p1 * Math.sqrt(a2 * a2 + b3 * b3) / (u2 + 0.305); const alpha = Math.pow(t2, 0.9) * Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73); const c2 = alpha * Math.sqrt(j2 / 100); const m2 = c2 * viewingConditions.fLRoot; const s2 = 50 * Math.sqrt(alpha * viewingConditions.c / (viewingConditions.aw + 4)); const jstar = (1 + 100 * 7e-3) * j2 / (1 + 7e-3 * j2); const mstar = 1 / 0.0228 * Math.log(1 + 0.0228 * m2); const astar = mstar * Math.cos(hueRadians); const bstar = mstar * Math.sin(hueRadians); return new Cam16(hue, c2, j2, q2, m2, s2, jstar, astar, bstar); } /** * @param j CAM16 lightness * @param c CAM16 chroma * @param h CAM16 hue */ static fromJch(j2, c2, h2) { return Cam16.fromJchInViewingConditions(j2, c2, h2, ViewingConditions.DEFAULT); } /** * @param j CAM16 lightness * @param c CAM16 chroma * @param h CAM16 hue * @param viewingConditions Information about the environment where the color * was observed. */ static fromJchInViewingConditions(j2, c2, h2, viewingConditions) { const q2 = 4 / viewingConditions.c * Math.sqrt(j2 / 100) * (viewingConditions.aw + 4) * viewingConditions.fLRoot; const m2 = c2 * viewingConditions.fLRoot; const alpha = c2 / Math.sqrt(j2 / 100); const s2 = 50 * Math.sqrt(alpha * viewingConditions.c / (viewingConditions.aw + 4)); const hueRadians = h2 * Math.PI / 180; const jstar = (1 + 100 * 7e-3) * j2 / (1 + 7e-3 * j2); const mstar = 1 / 0.0228 * Math.log(1 + 0.0228 * m2); const astar = mstar * Math.cos(hueRadians); const bstar = mstar * Math.sin(hueRadians); return new Cam16(h2, c2, j2, q2, m2, s2, jstar, astar, bstar); } /** * @param jstar CAM16-UCS lightness. * @param astar CAM16-UCS a dimension. Like a* in L*a*b*, it is a Cartesian * coordinate on the Y axis. * @param bstar CAM16-UCS b dimension. Like a* in L*a*b*, it is a Cartesian * coordinate on the X axis. */ static fromUcs(jstar, astar, bstar) { return Cam16.fromUcsInViewingConditions(jstar, astar, bstar, ViewingConditions.DEFAULT); } /** * @param jstar CAM16-UCS lightness. * @param astar CAM16-UCS a dimension. Like a* in L*a*b*, it is a Cartesian * coordinate on the Y axis. * @param bstar CAM16-UCS b dimension. Like a* in L*a*b*, it is a Cartesian * coordinate on the X axis. * @param viewingConditions Information about the environment where the color * was observed. */ static fromUcsInViewingConditions(jstar, astar, bstar, viewingConditions) { const a2 = astar; const b3 = bstar; const m2 = Math.sqrt(a2 * a2 + b3 * b3); const M2 = (Math.exp(m2 * 0.0228) - 1) / 0.0228; const c2 = M2 / viewingConditions.fLRoot; let h2 = Math.atan2(b3, a2) * (180 / Math.PI); if (h2 < 0) { h2 += 360; } const j2 = jstar / (1 - (jstar - 100) * 7e-3); return Cam16.fromJchInViewingConditions(j2, c2, h2, viewingConditions); } /** * @return ARGB representation of color, assuming the color was viewed in * default viewing conditions, which are near-identical to the default * viewing conditions for sRGB. */ toInt() { return this.viewed(ViewingConditions.DEFAULT); } /** * @param viewingConditions Information about the environment where the color * will be viewed. * @return ARGB representation of color */ viewed(viewingConditions) { const alpha = this.chroma === 0 || this.j === 0 ? 0 : this.chroma / Math.sqrt(this.j / 100); const t2 = Math.pow(alpha / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73), 1 / 0.9); const hRad = this.hue * Math.PI / 180; const eHue = 0.25 * (Math.cos(hRad + 2) + 3.8); const ac = viewingConditions.aw * Math.pow(this.j / 100, 1 / viewingConditions.c / viewingConditions.z); const p1 = eHue * (5e4 / 13) * viewingConditions.nc * viewingConditions.ncb; const p2 = ac / viewingConditions.nbb; const hSin = Math.sin(hRad); const hCos = Math.cos(hRad); const gamma = 23 * (p2 + 0.305) * t2 / (23 * p1 + 11 * t2 * hCos + 108 * t2 * hSin); const a2 = gamma * hCos; const b3 = gamma * hSin; const rA = (460 * p2 + 451 * a2 + 288 * b3) / 1403; const gA = (460 * p2 - 891 * a2 - 261 * b3) / 1403; const bA = (460 * p2 - 220 * a2 - 6300 * b3) / 1403; const rCBase = Math.max(0, 27.13 * Math.abs(rA) / (400 - Math.abs(rA))); const rC = signum(rA) * (100 / viewingConditions.fl) * Math.pow(rCBase, 1 / 0.42); const gCBase = Math.max(0, 27.13 * Math.abs(gA) / (400 - Math.abs(gA))); const gC = signum(gA) * (100 / viewingConditions.fl) * Math.pow(gCBase, 1 / 0.42); const bCBase = Math.max(0, 27.13 * Math.abs(bA) / (400 - Math.abs(bA))); const bC = signum(bA) * (100 / viewingConditions.fl) * Math.pow(bCBase, 1 / 0.42); const rF = rC / viewingConditions.rgbD[0]; const gF = gC / viewingConditions.rgbD[1]; const bF = bC / viewingConditions.rgbD[2]; const x2 = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF; const y2 = 0.38752654 * rF + 0.62144744 * gF - 897398e-8 * bF; const z2 = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF; const argb = argbFromXyz(x2, y2, z2); return argb; } /// Given color expressed in XYZ and viewed in [viewingConditions], convert to /// CAM16. static fromXyzInViewingConditions(x2, y2, z2, viewingConditions) { const rC = 0.401288 * x2 + 0.650173 * y2 - 0.051461 * z2; const gC = -0.250268 * x2 + 1.204414 * y2 + 0.045854 * z2; const bC = -2079e-6 * x2 + 0.048952 * y2 + 0.953127 * z2; const rD = viewingConditions.rgbD[0] * rC; const gD = viewingConditions.rgbD[1] * gC; const bD = viewingConditions.rgbD[2] * bC; const rAF = Math.pow(viewingConditions.fl * Math.abs(rD) / 100, 0.42); const gAF = Math.pow(viewingConditions.fl * Math.abs(gD) / 100, 0.42); const bAF = Math.pow(viewingConditions.fl * Math.abs(bD) / 100, 0.42); const rA = signum(rD) * 400 * rAF / (rAF + 27.13); const gA = signum(gD) * 400 * gAF / (gAF + 27.13); const bA = signum(bD) * 400 * bAF / (bAF + 27.13); const a2 = (11 * rA + -12 * gA + bA) / 11; const b3 = (rA + gA - 2 * bA) / 9; const u2 = (20 * rA + 20 * gA + 21 * bA) / 20; const p2 = (40 * rA + 20 * gA + bA) / 20; const atan2 = Math.atan2(b3, a2); const atanDegrees = atan2 * 180 / Math.PI; const hue = atanDegrees < 0 ? atanDegrees + 360 : atanDegrees >= 360 ? atanDegrees - 360 : atanDegrees; const hueRadians = hue * Math.PI / 180; const ac = p2 * viewingConditions.nbb; const J = 100 * Math.pow(ac / viewingConditions.aw, viewingConditions.c * viewingConditions.z); const Q2 = 4 / viewingConditions.c * Math.sqrt(J / 100) * (viewingConditions.aw + 4) * viewingConditions.fLRoot; const huePrime = hue < 20.14 ? hue + 360 : hue; const eHue = 1 / 4 * (Math.cos(huePrime * Math.PI / 180 + 2) + 3.8); const p1 = 5e4 / 13 * eHue * viewingConditions.nc * viewingConditions.ncb; const t2 = p1 * Math.sqrt(a2 * a2 + b3 * b3) / (u2 + 0.305); const alpha = Math.pow(t2, 0.9) * Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73); const C = alpha * Math.sqrt(J / 100); const M2 = C * viewingConditions.fLRoot; const s2 = 50 * Math.sqrt(alpha * viewingConditions.c / (viewingConditions.aw + 4)); const jstar = (1 + 100 * 7e-3) * J / (1 + 7e-3 * J); const mstar = Math.log(1 + 0.0228 * M2) / 0.0228; const astar = mstar * Math.cos(hueRadians); const bstar = mstar * Math.sin(hueRadians); return new Cam16(hue, C, J, Q2, M2, s2, jstar, astar, bstar); } /// XYZ representation of CAM16 seen in [viewingConditions]. xyzInViewingConditions(viewingConditions) { const alpha = this.chroma === 0 || this.j === 0 ? 0 : this.chroma / Math.sqrt(this.j / 100); const t2 = Math.pow(alpha / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73), 1 / 0.9); const hRad = this.hue * Math.PI / 180; const eHue = 0.25 * (Math.cos(hRad + 2) + 3.8); const ac = viewingConditions.aw * Math.pow(this.j / 100, 1 / viewingConditions.c / viewingConditions.z); const p1 = eHue * (5e4 / 13) * viewingConditions.nc * viewingConditions.ncb; const p2 = ac / viewingConditions.nbb; const hSin = Math.sin(hRad); const hCos = Math.cos(hRad); const gamma = 23 * (p2 + 0.305) * t2 / (23 * p1 + 11 * t2 * hCos + 108 * t2 * hSin); const a2 = gamma * hCos; const b3 = gamma * hSin; const rA = (460 * p2 + 451 * a2 + 288 * b3) / 1403; const gA = (460 * p2 - 891 * a2 - 261 * b3) / 1403; const bA = (460 * p2 - 220 * a2 - 6300 * b3) / 1403; const rCBase = Math.max(0, 27.13 * Math.abs(rA) / (400 - Math.abs(rA))); const rC = signum(rA) * (100 / viewingConditions.fl) * Math.pow(rCBase, 1 / 0.42); const gCBase = Math.max(0, 27.13 * Math.abs(gA) / (400 - Math.abs(gA))); const gC = signum(gA) * (100 / viewingConditions.fl) * Math.pow(gCBase, 1 / 0.42); const bCBase = Math.max(0, 27.13 * Math.abs(bA) / (400 - Math.abs(bA))); const bC = signum(bA) * (100 / viewingConditions.fl) * Math.pow(bCBase, 1 / 0.42); const rF = rC / viewingConditions.rgbD[0]; const gF = gC / viewingConditions.rgbD[1]; const bF = bC / viewingConditions.rgbD[2]; const x2 = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF; const y2 = 0.38752654 * rF + 0.62144744 * gF - 897398e-8 * bF; const z2 = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF; return [x2, y2, z2]; } } /** * @license * Copyright 2021 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class HctSolver { /** * Sanitizes a small enough angle in radians. * * @param angle An angle in radians; must not deviate too much * from 0. * @return A coterminal angle between 0 and 2pi. */ static sanitizeRadians(angle) { return (angle + Math.PI * 8) % (Math.PI * 2); } /** * Delinearizes an RGB component, returning a floating-point * number. * * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents * linear R/G/B channel * @return 0.0 <= output <= 255.0, color channel converted to * regular RGB space */ static trueDelinearized(rgbComponent) { const normalized = rgbComponent / 100; let delinearized2 = 0; if (normalized <= 31308e-7) { delinearized2 = normalized * 12.92; } else { delinearized2 = 1.055 * Math.pow(normalized, 1 / 2.4) - 0.055; } return delinearized2 * 255; } static chromaticAdaptation(component) { const af = Math.pow(Math.abs(component), 0.42); return signum(component) * 400 * af / (af + 27.13); } /** * Returns the hue of a linear RGB color in CAM16. * * @param linrgb The linear RGB coordinates of a color. * @return The hue of the color in CAM16, in radians. */ static hueOf(linrgb) { const scaledDiscount = matrixMultiply(linrgb, HctSolver.SCALED_DISCOUNT_FROM_LINRGB); const rA = HctSolver.chromaticAdaptation(scaledDiscount[0]); const gA = HctSolver.chromaticAdaptation(scaledDiscount[1]); const bA = HctSolver.chromaticAdaptation(scaledDiscount[2]); const a2 = (11 * rA + -12 * gA + bA) / 11; const b3 = (rA + gA - 2 * bA) / 9; return Math.atan2(b3, a2); } static areInCyclicOrder(a2, b3, c2) { const deltaAB = HctSolver.sanitizeRadians(b3 - a2); const deltaAC = HctSolver.sanitizeRadians(c2 - a2); return deltaAB < deltaAC; } /** * Solves the lerp equation. * * @param source The starting number. * @param mid The number in the middle. * @param target The ending number. * @return A number t such that lerp(source, target, t) = mid. */ static intercept(source2, mid, target) { return (mid - source2) / (target - source2); } static lerpPoint(source2, t2, target) { return [ source2[0] + (target[0] - source2[0]) * t2, source2[1] + (target[1] - source2[1]) * t2, source2[2] + (target[2] - source2[2]) * t2 ]; } /** * Intersects a segment with a plane. * * @param source The coordinates of point A. * @param coordinate The R-, G-, or B-coordinate of the plane. * @param target The coordinates of point B. * @param axis The axis the plane is perpendicular with. (0: R, 1: * G, 2: B) * @return The intersection point of the segment AB with the plane * R=coordinate, G=coordinate, or B=coordinate */ static setCoordinate(source2, coordinate, target, axis) { const t2 = HctSolver.intercept(source2[axis], coordinate, target[axis]); return HctSolver.lerpPoint(source2, t2, target); } static isBounded(x2) { return 0 <= x2 && x2 <= 100; } /** * Returns the nth possible vertex of the polygonal intersection. * * @param y The Y value of the plane. * @param n The zero-based index of the point. 0 <= n <= 11. * @return The nth possible vertex of the polygonal intersection * of the y plane and the RGB cube, in linear RGB coordinates, if * it exists. If this possible vertex lies outside of the cube, * [-1.0, -1.0, -1.0] is returned. */ static nthVertex(y2, n3) { const kR = HctSolver.Y_FROM_LINRGB[0]; const kG = HctSolver.Y_FROM_LINRGB[1]; const kB = HctSolver.Y_FROM_LINRGB[2]; const coordA = n3 % 4 <= 1 ? 0 : 100; const coordB = n3 % 2 === 0 ? 0 : 100; if (n3 < 4) { const g2 = coordA; const b3 = coordB; const r2 = (y2 - g2 * kG - b3 * kB) / kR; if (HctSolver.isBounded(r2)) { return [r2, g2, b3]; } else { return [-1, -1, -1]; } } else if (n3 < 8) { const b3 = coordA; const r2 = coordB; const g2 = (y2 - r2 * kR - b3 * kB) / kG; if (HctSolver.isBounded(g2)) { return [r2, g2, b3]; } else { return [-1, -1, -1]; } } else { const r2 = coordA; const g2 = coordB; const b3 = (y2 - r2 * kR - g2 * kG) / kB; if (HctSolver.isBounded(b3)) { return [r2, g2, b3]; } else { return [-1, -1, -1]; } } } /** * Finds the segment containing the desired color. * * @param y The Y value of the color. * @param targetHue The hue of the color. * @return A list of two sets of linear RGB coordinates, each * corresponding to an endpoint of the segment containing the * desired color. */ static bisectToSegment(y2, targetHue) { let left = [-1, -1, -1]; let right = left; let leftHue = 0; let rightHue = 0; let initialized = false; let uncut = true; for (let n3 = 0; n3 < 12; n3++) { const mid = HctSolver.nthVertex(y2, n3); if (mid[0] < 0) { continue; } const midHue = HctSolver.hueOf(mid); if (!initialized) { left = mid; right = mid; leftHue = midHue; rightHue = midHue; initialized = true; continue; } if (uncut || HctSolver.areInCyclicOrder(leftHue, midHue, rightHue)) { uncut = false; if (HctSolver.areInCyclicOrder(leftHue, targetHue, midHue)) { right = mid; rightHue = midHue; } else { left = mid; leftHue = midHue; } } } return [left, right]; } static midpoint(a2, b3) { return [ (a2[0] + b3[0]) / 2, (a2[1] + b3[1]) / 2, (a2[2] + b3[2]) / 2 ]; } static criticalPlaneBelow(x2) { return Math.floor(x2 - 0.5); } static criticalPlaneAbove(x2) { return Math.ceil(x2 - 0.5); } /** * Finds a color with the given Y and hue on the boundary of the * cube. * * @param y The Y value of the color. * @param targetHue The hue of the color. * @return The desired color, in linear RGB coordinates. */ static bisectToLimit(y2, targetHue) { const segment = HctSolver.bisectToSegment(y2, targetHue); let left = segment[0]; let leftHue = HctSolver.hueOf(left); let right = segment[1]; for (let axis = 0; axis < 3; axis++) { if (left[axis] !== right[axis]) { let lPlane = -1; let rPlane = 255; if (left[axis] < right[axis]) { lPlane = HctSolver.criticalPlaneBelow(HctSolver.trueDelinearized(left[axis])); rPlane = HctSolver.criticalPlaneAbove(HctSolver.trueDelinearized(right[axis])); } else { lPlane = HctSolver.criticalPlaneAbove(HctSolver.trueDelinearized(left[axis])); rPlane = HctSolver.criticalPlaneBelow(HctSolver.trueDelinearized(right[axis])); } for (let i3 = 0; i3 < 8; i3++) { if (Math.abs(rPlane - lPlane) <= 1) { break; } else { const mPlane = Math.floor((lPlane + rPlane) / 2); const midPlaneCoordinate = HctSolver.CRITICAL_PLANES[mPlane]; const mid = HctSolver.setCoordinate(left, midPlaneCoordinate, right, axis); const midHue = HctSolver.hueOf(mid); if (HctSolver.areInCyclicOrder(leftHue, targetHue, midHue)) { right = mid; rPlane = mPlane; } else { left = mid; leftHue = midHue; lPlane = mPlane; } } } } } return HctSolver.midpoint(left, right); } static inverseChromaticAdaptation(adapted) { const adaptedAbs = Math.abs(adapted); const base = Math.max(0, 27.13 * adaptedAbs / (400 - adaptedAbs)); return signum(adapted) * Math.pow(base, 1 / 0.42); } /** * Finds a color with the given hue, chroma, and Y. * * @param hueRadians The desired hue in radians. * @param chroma The desired chroma. * @param y The desired Y. * @return The desired color as a hexadecimal integer, if found; 0 * otherwise. */ static findResultByJ(hueRadians, chroma, y2) { let j2 = Math.sqrt(y2) * 11; const viewingConditions = ViewingConditions.DEFAULT; const tInnerCoeff = 1 / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73); const eHue = 0.25 * (Math.cos(hueRadians + 2) + 3.8); const p1 = eHue * (5e4 / 13) * viewingConditions.nc * viewingConditions.ncb; const hSin = Math.sin(hueRadians); const hCos = Math.cos(hueRadians); for (let iterationRound = 0; iterationRound < 5; iterationRound++) { const jNormalized = j2 / 100; const alpha = chroma === 0 || j2 === 0 ? 0 : chroma / Math.sqrt(jNormalized); const t2 = Math.pow(alpha * tInnerCoeff, 1 / 0.9); const ac = viewingConditions.aw * Math.pow(jNormalized, 1 / viewingConditions.c / viewingConditions.z); const p2 = ac / viewingConditions.nbb; const gamma = 23 * (p2 + 0.305) * t2 / (23 * p1 + 11 * t2 * hCos + 108 * t2 * hSin); const a2 = gamma * hCos; const b3 = gamma * hSin; const rA = (460 * p2 + 451 * a2 + 288 * b3) / 1403; const gA = (460 * p2 - 891 * a2 - 261 * b3) / 1403; const bA = (460 * p2 - 220 * a2 - 6300 * b3) / 1403; const rCScaled = HctSolver.inverseChromaticAdaptation(rA); const gCScaled = HctSolver.inverseChromaticAdaptation(gA); const bCScaled = HctSolver.inverseChromaticAdaptation(bA); const linrgb = matrixMultiply([rCScaled, gCScaled, bCScaled], HctSolver.LINRGB_FROM_SCALED_DISCOUNT); if (linrgb[0] < 0 || linrgb[1] < 0 || linrgb[2] < 0) { return 0; } const kR = HctSolver.Y_FROM_LINRGB[0]; const kG = HctSolver.Y_FROM_LINRGB[1]; const kB = HctSolver.Y_FROM_LINRGB[2]; const fnj = kR * linrgb[0] + kG * linrgb[1] + kB * linrgb[2]; if (fnj <= 0) { return 0; } if (iterationRound === 4 || Math.abs(fnj - y2) < 2e-3) { if (linrgb[0] > 100.01 || linrgb[1] > 100.01 || linrgb[2] > 100.01) { return 0; } return argbFromLinrgb(linrgb); } j2 = j2 - (fnj - y2) * j2 / (2 * fnj); } return 0; } /** * Finds an sRGB color with the given hue, chroma, and L*, if * possible. * * @param hueDegrees The desired hue, in degrees. * @param chroma The desired chroma. * @param lstar The desired L*. * @return A hexadecimal representing the sRGB color. The color * has sufficiently close hue, chroma, and L* to the desired * values, if possible; otherwise, the hue and L* will be * sufficiently close, and chroma will be maximized. */ static solveToInt(hueDegrees, chroma, lstar) { if (chroma < 1e-4 || lstar < 1e-4 || lstar > 99.9999) { return argbFromLstar(lstar); } hueDegrees = sanitizeDegreesDouble(hueDegrees); const hueRadians = hueDegrees / 180 * Math.PI; const y2 = yFromLstar(lstar); const exactAnswer = HctSolver.findResultByJ(hueRadians, chroma, y2); if (exactAnswer !== 0) { return exactAnswer; } const linrgb = HctSolver.bisectToLimit(y2, hueRadians); return argbFromLinrgb(linrgb); } /** * Finds an sRGB color with the given hue, chroma, and L*, if * possible. * * @param hueDegrees The desired hue, in degrees. * @param chroma The desired chroma. * @param lstar The desired L*. * @return An CAM16 object representing the sRGB color. The color * has sufficiently close hue, chroma, and L* to the desired * values, if possible; otherwise, the hue and L* will be * sufficiently close, and chroma will be maximized. */ static solveToCam(hueDegrees, chroma, lstar) { return Cam16.fromInt(HctSolver.solveToInt(hueDegrees, chroma, lstar)); } } HctSolver.SCALED_DISCOUNT_FROM_LINRGB = [ [ 0.001200833568784504, 0.002389694492170889, 2795742885861124e-19 ], [ 5891086651375999e-19, 0.0029785502573438758, 3270666104008398e-19 ], [ 10146692491640572e-20, 5364214359186694e-19, 0.0032979401770712076 ] ]; HctSolver.LINRGB_FROM_SCALED_DISCOUNT = [ [ 1373.2198709594231, -1100.4251190754821, -7.278681089101213 ], [ -271.815969077903, 559.6580465940733, -32.46047482791194 ], [ 1.9622899599665666, -57.173814538844006, 308.7233197812385 ] ]; HctSolver.Y_FROM_LINRGB = [0.2126, 0.7152, 0.0722]; HctSolver.CRITICAL_PLANES = [ 0.015176349177441876, 0.045529047532325624, 0.07588174588720938, 0.10623444424209313, 0.13658714259697685, 0.16693984095186062, 0.19729253930674434, 0.2276452376616281, 0.2579979360165119, 0.28835063437139563, 0.3188300904430532, 0.350925934958123, 0.3848314933096426, 0.42057480301049466, 0.458183274052838, 0.4976837250274023, 0.5391024159806381, 0.5824650784040898, 0.6277969426914107, 0.6751227633498623, 0.7244668422128921, 0.775853049866786, 0.829304845476233, 0.8848452951698498, 0.942497089126609, 1.0022825574869039, 1.0642236851973577, 1.1283421258858297, 1.1946592148522128, 1.2631959812511864, 1.3339731595349034, 1.407011200216447, 1.4823302800086415, 1.5599503113873272, 1.6398909516233677, 1.7221716113234105, 1.8068114625156377, 1.8938294463134073, 1.9832442801866852, 2.075074464868551, 2.1693382909216234, 2.2660538449872063, 2.36523901573795, 2.4669114995532007, 2.5710888059345764, 2.6777882626779785, 2.7870270208169257, 2.898822059350997, 3.0131901897720907, 3.1301480604002863, 3.2497121605402226, 3.3718988244681087, 3.4967242352587946, 3.624204428461639, 3.754355295633311, 3.887192587735158, 4.022731918402185, 4.160988767090289, 4.301978482107941, 4.445716283538092, 4.592217266055746, 4.741496401646282, 4.893568542229298, 5.048448422192488, 5.20615066083972, 5.3666897647573375, 5.5300801301023865, 5.696336044816294, 5.865471690767354, 6.037501145825082, 6.212438385869475, 6.390297286737924, 6.571091626112461, 6.7548350853498045, 6.941541251256611, 7.131223617812143, 7.323895587840543, 7.5195704746346665, 7.7182615035334345, 7.919981813454504, 8.124744458384042, 8.332562408825165, 8.543448553206703, 8.757415699253682, 8.974476575321063, 9.194643831691977, 9.417930041841839, 9.644347703669503, 9.873909240696694, 10.106627003236781, 10.342513269534024, 10.58158024687427, 10.8238400726681, 11.069304815507364, 11.317986476196008, 11.569896988756009, 11.825048221409341, 12.083451977536606, 12.345119996613247, 12.610063955123938, 12.878295467455942, 13.149826086772048, 13.42466730586372, 13.702830557985108, 13.984327217668513, 14.269168601521828, 14.55736596900856, 14.848930523210871, 15.143873411576273, 15.44220572664832, 15.743938506781891, 16.04908273684337, 16.35764934889634, 16.66964922287304, 16.985093187232053, 17.30399201960269, 17.62635644741625, 17.95219714852476, 18.281524751807332, 18.614349837764564, 18.95068293910138, 19.290534541298456, 19.633915083172692, 19.98083495742689, 20.331304511189067, 20.685334046541502, 21.042933821039977, 21.404114048223256, 21.76888489811322, 22.137256497705877, 22.50923893145328, 22.884842241736916, 23.264076429332462, 23.6469514538663, 24.033477234264016, 24.42366364919083, 24.817520537484558, 25.21505769858089, 25.61628489293138, 26.021211842414342, 26.429848230738664, 26.842203703840827, 27.258287870275353, 27.678110301598522, 28.10168053274597, 28.529008062403893, 28.96010235337422, 29.39497283293396, 29.83362889318845, 30.276079891419332, 30.722335150426627, 31.172403958865512, 31.62629557157785, 32.08401920991837, 32.54558406207592, 33.010999283389665, 33.4802739966603, 33.953417292456834, 34.430438229418264, 34.911345834551085, 35.39614910352207, 35.88485700094671, 36.37747846067349, 36.87402238606382, 37.37449765026789, 37.87891309649659, 38.38727753828926, 38.89959975977785, 39.41588851594697, 39.93615253289054, 40.460400508064545, 40.98864111053629, 41.520882981230194, 42.05713473317016, 42.597404951718396, 43.141702194811224, 43.6900349931913, 44.24241185063697, 44.798841244188324, 45.35933162437017, 45.92389141541209, 46.49252901546552, 47.065252796817916, 47.64207110610409, 48.22299226451468, 48.808024568002054, 49.3971762874833, 49.9904556690408, 50.587870934119984, 51.189430279724725, 51.79514187861014, 52.40501387947288, 53.0190544071392, 53.637271562750364, 54.259673423945976, 54.88626804504493, 55.517063457223934, 56.15206766869424, 56.79128866487574, 57.43473440856916, 58.08241284012621, 58.734331877617365, 59.39049941699807, 60.05092333227251, 60.715611475655585, 61.38457167773311, 62.057811747619894, 62.7353394731159, 63.417162620860914, 64.10328893648692, 64.79372614476921, 65.48848194977529, 66.18756403501224, 66.89098006357258, 67.59873767827808, 68.31084450182222, 69.02730813691093, 69.74813616640164, 70.47333615344107, 71.20291564160104, 71.93688215501312, 72.67524319850172, 73.41800625771542, 74.16517879925733, 74.9167682708136, 75.67278210128072, 76.43322770089146, 77.1981124613393, 77.96744375590167, 78.74122893956174, 79.51947534912904, 80.30219030335869, 81.08938110306934, 81.88105503125999, 82.67721935322541, 83.4778813166706, 84.28304815182372, 85.09272707154808, 85.90692527145302, 86.72564993000343, 87.54890820862819, 88.3767072518277, 89.2090541872801, 90.04595612594655, 90.88742016217518, 91.73345337380438, 92.58406282226491, 93.43925555268066, 94.29903859396902, 95.16341895893969, 96.03240364439274, 96.9059996312159, 97.78421388448044, 98.6670533535366, 99.55452497210776 ]; /** * @license * Copyright 2021 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class Hct { static from(hue, chroma, tone) { return new Hct(HctSolver.solveToInt(hue, chroma, tone)); } /** * @param argb ARGB representation of a color. * @return HCT representation of a color in default viewing conditions */ static fromInt(argb) { return new Hct(argb); } toInt() { return this.argb; } /** * A number, in degrees, representing ex. red, orange, yellow, etc. * Ranges from 0 <= hue < 360. */ get hue() { return this.internalHue; } /** * @param newHue 0 <= newHue < 360; invalid values are corrected. * Chroma may decrease because chroma has a different maximum for any given * hue and tone. */ set hue(newHue) { this.setInternalState(HctSolver.solveToInt(newHue, this.internalChroma, this.internalTone)); } get chroma() { return this.internalChroma; } /** * @param newChroma 0 <= newChroma < ? * Chroma may decrease because chroma has a different maximum for any given * hue and tone. */ set chroma(newChroma) { this.setInternalState(HctSolver.solveToInt(this.internalHue, newChroma, this.internalTone)); } /** Lightness. Ranges from 0 to 100. */ get tone() { return this.internalTone; } /** * @param newTone 0 <= newTone <= 100; invalid valids are corrected. * Chroma may decrease because chroma has a different maximum for any given * hue and tone. */ set tone(newTone) { this.setInternalState(HctSolver.solveToInt(this.internalHue, this.internalChroma, newTone)); } constructor(argb) { this.argb = argb; const cam = Cam16.fromInt(argb); this.internalHue = cam.hue; this.internalChroma = cam.chroma; this.internalTone = lstarFromArgb(argb); this.argb = argb; } setInternalState(argb) { const cam = Cam16.fromInt(argb); this.internalHue = cam.hue; this.internalChroma = cam.chroma; this.internalTone = lstarFromArgb(argb); this.argb = argb; } /** * Translates a color into different [ViewingConditions]. * * Colors change appearance. They look different with lights on versus off, * the same color, as in hex code, on white looks different when on black. * This is called color relativity, most famously explicated by Josef Albers * in Interaction of Color. * * In color science, color appearance models can account for this and * calculate the appearance of a color in different settings. HCT is based on * CAM16, a color appearance model, and uses it to make these calculations. * * See [ViewingConditions.make] for parameters affecting color appearance. */ inViewingConditions(vc) { const cam = Cam16.fromInt(this.toInt()); const viewedInVc = cam.xyzInViewingConditions(vc); const recastInVc = Cam16.fromXyzInViewingConditions(viewedInVc[0], viewedInVc[1], viewedInVc[2], ViewingConditions.make()); const recastHct = Hct.from(recastInVc.hue, recastInVc.chroma, lstarFromY(viewedInVc[1])); return recastHct; } } /** * @license * Copyright 2022 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class Contrast { /** * Returns a contrast ratio, which ranges from 1 to 21. * * @param toneA Tone between 0 and 100. Values outside will be clamped. * @param toneB Tone between 0 and 100. Values outside will be clamped. */ static ratioOfTones(toneA, toneB) { toneA = clampDouble(0, 100, toneA); toneB = clampDouble(0, 100, toneB); return Contrast.ratioOfYs(yFromLstar(toneA), yFromLstar(toneB)); } static ratioOfYs(y1, y2) { const lighter = y1 > y2 ? y1 : y2; const darker = lighter === y2 ? y1 : y2; return (lighter + 5) / (darker + 5); } /** * Returns a tone >= tone parameter that ensures ratio parameter. * Return value is between 0 and 100. * Returns -1 if ratio cannot be achieved with tone parameter. * * @param tone Tone return value must contrast with. * Range is 0 to 100. Invalid values will result in -1 being returned. * @param ratio Contrast ratio of return value and tone. * Range is 1 to 21, invalid values have undefined behavior. */ static lighter(tone, ratio) { if (tone < 0 || tone > 100) { return -1; } const darkY = yFromLstar(tone); const lightY = ratio * (darkY + 5) - 5; const realContrast = Contrast.ratioOfYs(lightY, darkY); const delta = Math.abs(realContrast - ratio); if (realContrast < ratio && delta > 0.04) { return -1; } const returnValue = lstarFromY(lightY) + 0.4; if (returnValue < 0 || returnValue > 100) { return -1; } return returnValue; } /** * Returns a tone <= tone parameter that ensures ratio parameter. * Return value is between 0 and 100. * Returns -1 if ratio cannot be achieved with tone parameter. * * @param tone Tone return value must contrast with. * Range is 0 to 100. Invalid values will result in -1 being returned. * @param ratio Contrast ratio of return value and tone. * Range is 1 to 21, invalid values have undefined behavior. */ static darker(tone, ratio) { if (tone < 0 || tone > 100) { return -1; } const lightY = yFromLstar(tone); const darkY = (lightY + 5) / ratio - 5; const realContrast = Contrast.ratioOfYs(lightY, darkY); const delta = Math.abs(realContrast - ratio); if (realContrast < ratio && delta > 0.04) { return -1; } const returnValue = lstarFromY(darkY) - 0.4; if (returnValue < 0 || returnValue > 100) { return -1; } return returnValue; } /** * Returns a tone >= tone parameter that ensures ratio parameter. * Return value is between 0 and 100. * Returns 100 if ratio cannot be achieved with tone parameter. * * This method is unsafe because the returned value is guaranteed to be in * bounds for tone, i.e. between 0 and 100. However, that value may not reach * the ratio with tone. For example, there is no color lighter than T100. * * @param tone Tone return value must contrast with. * Range is 0 to 100. Invalid values will result in 100 being returned. * @param ratio Desired contrast ratio of return value and tone parameter. * Range is 1 to 21, invalid values have undefined behavior. */ static lighterUnsafe(tone, ratio) { const lighterSafe = Contrast.lighter(tone, ratio); return lighterSafe < 0 ? 100 : lighterSafe; } /** * Returns a tone >= tone parameter that ensures ratio parameter. * Return value is between 0 and 100. * Returns 100 if ratio cannot be achieved with tone parameter. * * This method is unsafe because the returned value is guaranteed to be in * bounds for tone, i.e. between 0 and 100. However, that value may not reach * the [ratio with [tone]. For example, there is no color darker than T0. * * @param tone Tone return value must contrast with. * Range is 0 to 100. Invalid values will result in 0 being returned. * @param ratio Desired contrast ratio of return value and tone parameter. * Range is 1 to 21, invalid values have undefined behavior. */ static darkerUnsafe(tone, ratio) { const darkerSafe = Contrast.darker(tone, ratio); return darkerSafe < 0 ? 0 : darkerSafe; } } /** * @license * Copyright 2023 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class DislikeAnalyzer { /** * Returns true if a color is disliked. * * @param hct A color to be judged. * @return Whether the color is disliked. * * Disliked is defined as a dark yellow-green that is not neutral. */ static isDisliked(hct) { const huePasses = Math.round(hct.hue) >= 90 && Math.round(hct.hue) <= 111; const chromaPasses = Math.round(hct.chroma) > 16; const tonePasses = Math.round(hct.tone) < 65; return huePasses && chromaPasses && tonePasses; } /** * If a color is disliked, lighten it to make it likable. * * @param hct A color to be judged. * @return A new color if the original color is disliked, or the original * color if it is acceptable. */ static fixIfDisliked(hct) { if (DislikeAnalyzer.isDisliked(hct)) { return Hct.from(hct.hue, hct.chroma, 70); } return hct; } } /** * @license * Copyright 2022 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class DynamicColor { /** * Create a DynamicColor defined by a TonalPalette and HCT tone. * * @param args Functions with DynamicScheme as input. Must provide a palette * and tone. May provide a background DynamicColor and ToneDeltaConstraint. */ static fromPalette(args) { return new DynamicColor(args.name ?? "", args.palette, args.tone, args.isBackground ?? false, args.background, args.secondBackground, args.contrastCurve, args.toneDeltaPair); } /** * The base constructor for DynamicColor. * * _Strongly_ prefer using one of the convenience constructors. This class is * arguably too flexible to ensure it can support any scenario. Functional * arguments allow overriding without risks that come with subclasses. * * For example, the default behavior of adjust tone at max contrast * to be at a 7.0 ratio with its background is principled and * matches accessibility guidance. That does not mean it's the desired * approach for _every_ design system, and every color pairing, * always, in every case. * * @param name The name of the dynamic color. Defaults to empty. * @param palette Function that provides a TonalPalette given * DynamicScheme. A TonalPalette is defined by a hue and chroma, so this * replaces the need to specify hue/chroma. By providing a tonal palette, when * contrast adjustments are made, intended chroma can be preserved. * @param tone Function that provides a tone, given a DynamicScheme. * @param isBackground Whether this dynamic color is a background, with * some other color as the foreground. Defaults to false. * @param background The background of the dynamic color (as a function of a * `DynamicScheme`), if it exists. * @param secondBackground A second background of the dynamic color (as a * function of a `DynamicScheme`), if it * exists. * @param contrastCurve A `ContrastCurve` object specifying how its contrast * against its background should behave in various contrast levels options. * @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta * constraint between two colors. One of them must be the color being * constructed. */ constructor(name, palette, tone, isBackground, background, secondBackground, contrastCurve, toneDeltaPair) { this.name = name; this.palette = palette; this.tone = tone; this.isBackground = isBackground; this.background = background; this.secondBackground = secondBackground; this.contrastCurve = contrastCurve; this.toneDeltaPair = toneDeltaPair; this.hctCache = /* @__PURE__ */ new Map(); if (!background && secondBackground) { throw new Error(`Color ${name} has secondBackgrounddefined, but background is not defined.`); } if (!background && contrastCurve) { throw new Error(`Color ${name} has contrastCurvedefined, but background is not defined.`); } if (background && !contrastCurve) { throw new Error(`Color ${name} has backgrounddefined, but contrastCurve is not defined.`); } } /** * Return a ARGB integer (i.e. a hex code). * * @param scheme Defines the conditions of the user interface, for example, * whether or not it is dark mode or light mode, and what the desired * contrast level is. */ getArgb(scheme) { return this.getHct(scheme).toInt(); } /** * Return a color, expressed in the HCT color space, that this * DynamicColor is under the conditions in scheme. * * @param scheme Defines the conditions of the user interface, for example, * whether or not it is dark mode or light mode, and what the desired * contrast level is. */ getHct(scheme) { const cachedAnswer = this.hctCache.get(scheme); if (cachedAnswer != null) { return cachedAnswer; } const tone = this.getTone(scheme); const answer = this.palette(scheme).getHct(tone); if (this.hctCache.size > 4) { this.hctCache.clear(); } this.hctCache.set(scheme, answer); return answer; } /** * Return a tone, T in the HCT color space, that this DynamicColor is under * the conditions in scheme. * * @param scheme Defines the conditions of the user interface, for example, * whether or not it is dark mode or light mode, and what the desired * contrast level is. */ getTone(scheme) { const decreasingContrast = scheme.contrastLevel < 0; if (this.toneDeltaPair) { const toneDeltaPair = this.toneDeltaPair(scheme); const roleA = toneDeltaPair.roleA; const roleB = toneDeltaPair.roleB; const delta = toneDeltaPair.delta; const polarity = toneDeltaPair.polarity; const stayTogether = toneDeltaPair.stayTogether; const bg = this.background(scheme); const bgTone = bg.getTone(scheme); const aIsNearer = polarity === "nearer" || polarity === "lighter" && !scheme.isDark || polarity === "darker" && scheme.isDark; const nearer = aIsNearer ? roleA : roleB; const farther = aIsNearer ? roleB : roleA; const amNearer = this.name === nearer.name; const expansionDir = scheme.isDark ? 1 : -1; const nContrast = nearer.contrastCurve.get(scheme.contrastLevel); const fContrast = farther.contrastCurve.get(scheme.contrastLevel); const nInitialTone = nearer.tone(scheme); let nTone = Contrast.ratioOfTones(bgTone, nInitialTone) >= nContrast ? nInitialTone : DynamicColor.foregroundTone(bgTone, nContrast); const fInitialTone = farther.tone(scheme); let fTone = Contrast.ratioOfTones(bgTone, fInitialTone) >= fContrast ? fInitialTone : DynamicColor.foregroundTone(bgTone, fContrast); if (decreasingContrast) { nTone = DynamicColor.foregroundTone(bgTone, nContrast); fTone = DynamicColor.foregroundTone(bgTone, fContrast); } if ((fTone - nTone) * expansionDir >= delta) ; else { fTone = clampDouble(0, 100, nTone + delta * expansionDir); if ((fTone - nTone) * expansionDir >= delta) ; else { nTone = clampDouble(0, 100, fTone - delta * expansionDir); } } if (50 <= nTone && nTone < 60) { if (expansionDir > 0) { nTone = 60; fTone = Math.max(fTone, nTone + delta * expansionDir); } else { nTone = 49; fTone = Math.min(fTone, nTone + delta * expansionDir); } } else if (50 <= fTone && fTone < 60) { if (stayTogether) { if (expansionDir > 0) { nTone = 60; fTone = Math.max(fTone, nTone + delta * expansionDir); } else { nTone = 49; fTone = Math.min(fTone, nTone + delta * expansionDir); } } else { if (expansionDir > 0) { fTone = 60; } else { fTone = 49; } } } return amNearer ? nTone : fTone; } else { let answer = this.tone(scheme); if (this.background == null) { return answer; } const bgTone = this.background(scheme).getTone(scheme); const desiredRatio = this.contrastCurve.get(scheme.contrastLevel); if (Contrast.ratioOfTones(bgTone, answer) >= desiredRatio) ; else { answer = DynamicColor.foregroundTone(bgTone, desiredRatio); } if (decreasingContrast) { answer = DynamicColor.foregroundTone(bgTone, desiredRatio); } if (this.isBackground && 50 <= answer && answer < 60) { if (Contrast.ratioOfTones(49, bgTone) >= desiredRatio) { answer = 49; } else { answer = 60; } } if (this.secondBackground) { const [bg1, bg2] = [this.background, this.secondBackground]; const [bgTone1, bgTone2] = [bg1(scheme).getTone(scheme), bg2(scheme).getTone(scheme)]; const [upper, lower] = [Math.max(bgTone1, bgTone2), Math.min(bgTone1, bgTone2)]; if (Contrast.ratioOfTones(upper, answer) >= desiredRatio && Contrast.ratioOfTones(lower, answer) >= desiredRatio) { return answer; } const lightOption = Contrast.lighter(upper, desiredRatio); const darkOption = Contrast.darker(lower, desiredRatio); const availables = []; if (lightOption !== -1) availables.push(lightOption); if (darkOption !== -1) availables.push(darkOption); const prefersLight = DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2); if (prefersLight) { return lightOption < 0 ? 100 : lightOption; } if (availables.length === 1) { return availables[0]; } return darkOption < 0 ? 0 : darkOption; } return answer; } } /** * Given a background tone, find a foreground tone, while ensuring they reach * a contrast ratio that is as close to [ratio] as possible. * * @param bgTone Tone in HCT. Range is 0 to 100, undefined behavior when it * falls outside that range. * @param ratio The contrast ratio desired between bgTone and the return * value. */ static foregroundTone(bgTone, ratio) { const lighterTone = Contrast.lighterUnsafe(bgTone, ratio); const darkerTone = Contrast.darkerUnsafe(bgTone, ratio); const lighterRatio = Contrast.ratioOfTones(lighterTone, bgTone); const darkerRatio = Contrast.ratioOfTones(darkerTone, bgTone); const preferLighter = DynamicColor.tonePrefersLightForeground(bgTone); if (preferLighter) { const negligibleDifference = Math.abs(lighterRatio - darkerRatio) < 0.1 && lighterRatio < ratio && darkerRatio < ratio; return lighterRatio >= ratio || lighterRatio >= darkerRatio || negligibleDifference ? lighterTone : darkerTone; } else { return darkerRatio >= ratio || darkerRatio >= lighterRatio ? darkerTone : lighterTone; } } /** * Returns whether [tone] prefers a light foreground. * * People prefer white foregrounds on ~T60-70. Observed over time, and also * by Andrew Somers during research for APCA. * * T60 used as to create the smallest discontinuity possible when skipping * down to T49 in order to ensure light foregrounds. * Since `tertiaryContainer` in dark monochrome scheme requires a tone of * 60, it should not be adjusted. Therefore, 60 is excluded here. */ static tonePrefersLightForeground(tone) { return Math.round(tone) < 60; } /** * Returns whether [tone] can reach a contrast ratio of 4.5 with a lighter * color. */ static toneAllowsLightForeground(tone) { return Math.round(tone) <= 49; } /** * Adjust a tone such that white has 4.5 contrast, if the tone is * reasonably close to supporting it. */ static enableLightForeground(tone) { if (DynamicColor.tonePrefersLightForeground(tone) && !DynamicColor.toneAllowsLightForeground(tone)) { return 49; } return tone; } } /** * @license * Copyright 2023 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class ContrastCurve { /** * Creates a `ContrastCurve` object. * * @param low Value for contrast level -1.0 * @param normal Value for contrast level 0.0 * @param medium Value for contrast level 0.5 * @param high Value for contrast level 1.0 */ constructor(low, normal, medium, high) { this.low = low; this.normal = normal; this.medium = medium; this.high = high; } /** * Returns the value at a given contrast level. * * @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0 * is the lowest; 1.0 is the highest. * @return The value. For contrast ratios, a number between 1.0 and 21.0. */ get(contrastLevel) { if (contrastLevel <= -1) { return this.low; } else if (contrastLevel < 0) { return lerp(this.low, this.normal, (contrastLevel - -1) / 1); } else if (contrastLevel < 0.5) { return lerp(this.normal, this.medium, (contrastLevel - 0) / 0.5); } else if (contrastLevel < 1) { return lerp(this.medium, this.high, (contrastLevel - 0.5) / 0.5); } else { return this.high; } } } /** * @license * Copyright 2023 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class ToneDeltaPair { /** * Documents a constraint in tone distance between two DynamicColors. * * The polarity is an adjective that describes "A", compared to "B". * * For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that * A's tone should be at least 15 darker than B's. * * 'nearer' and 'farther' describes closeness to the surface roles. For * instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A * should be 10 lighter than B in light mode, and 10 darker than B in dark * mode. * * @param roleA The first role in a pair. * @param roleB The second role in a pair. * @param delta Required difference between tones. Absolute value, negative * values have undefined behavior. * @param polarity The relative relation between tones of roleA and roleB, * as described above. * @param stayTogether Whether these two roles should stay on the same side of * the "awkward zone" (T50-59). This is necessary for certain cases where * one role has two backgrounds. */ constructor(roleA, roleB, delta, polarity, stayTogether) { this.roleA = roleA; this.roleB = roleB; this.delta = delta; this.polarity = polarity; this.stayTogether = stayTogether; } } /** * @license * Copyright 2022 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ var Variant; (function(Variant2) { Variant2[Variant2["MONOCHROME"] = 0] = "MONOCHROME"; Variant2[Variant2["NEUTRAL"] = 1] = "NEUTRAL"; Variant2[Variant2["TONAL_SPOT"] = 2] = "TONAL_SPOT"; Variant2[Variant2["VIBRANT"] = 3] = "VIBRANT"; Variant2[Variant2["EXPRESSIVE"] = 4] = "EXPRESSIVE"; Variant2[Variant2["FIDELITY"] = 5] = "FIDELITY"; Variant2[Variant2["CONTENT"] = 6] = "CONTENT"; Variant2[Variant2["RAINBOW"] = 7] = "RAINBOW"; Variant2[Variant2["FRUIT_SALAD"] = 8] = "FRUIT_SALAD"; })(Variant || (Variant = {})); /** * @license * Copyright 2022 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ function isFidelity(scheme) { return scheme.variant === Variant.FIDELITY || scheme.variant === Variant.CONTENT; } function isMonochrome(scheme) { return scheme.variant === Variant.MONOCHROME; } function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) { let answer = tone; let closestToChroma = Hct.from(hue, chroma, tone); if (closestToChroma.chroma < chroma) { let chromaPeak = closestToChroma.chroma; while (closestToChroma.chroma < chroma) { answer += byDecreasingTone ? -1 : 1; const potentialSolution = Hct.from(hue, chroma, answer); if (chromaPeak > potentialSolution.chroma) { break; } if (Math.abs(potentialSolution.chroma - chroma) < 0.4) { break; } const potentialDelta = Math.abs(potentialSolution.chroma - chroma); const currentDelta = Math.abs(closestToChroma.chroma - chroma); if (potentialDelta < currentDelta) { closestToChroma = potentialSolution; } chromaPeak = Math.max(chromaPeak, potentialSolution.chroma); } } return answer; } class MaterialDynamicColors { static highestSurface(s2) { return s2.isDark ? MaterialDynamicColors.surfaceBright : MaterialDynamicColors.surfaceDim; } } MaterialDynamicColors.contentAccentToneDelta = 15; MaterialDynamicColors.primaryPaletteKeyColor = DynamicColor.fromPalette({ name: "primary_palette_key_color", palette: (s2) => s2.primaryPalette, tone: (s2) => s2.primaryPalette.keyColor.tone }); MaterialDynamicColors.secondaryPaletteKeyColor = DynamicColor.fromPalette({ name: "secondary_palette_key_color", palette: (s2) => s2.secondaryPalette, tone: (s2) => s2.secondaryPalette.keyColor.tone }); MaterialDynamicColors.tertiaryPaletteKeyColor = DynamicColor.fromPalette({ name: "tertiary_palette_key_color", palette: (s2) => s2.tertiaryPalette, tone: (s2) => s2.tertiaryPalette.keyColor.tone }); MaterialDynamicColors.neutralPaletteKeyColor = DynamicColor.fromPalette({ name: "neutral_palette_key_color", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.neutralPalette.keyColor.tone }); MaterialDynamicColors.neutralVariantPaletteKeyColor = DynamicColor.fromPalette({ name: "neutral_variant_palette_key_color", palette: (s2) => s2.neutralVariantPalette, tone: (s2) => s2.neutralVariantPalette.keyColor.tone }); MaterialDynamicColors.background = DynamicColor.fromPalette({ name: "background", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 6 : 98, isBackground: true }); MaterialDynamicColors.onBackground = DynamicColor.fromPalette({ name: "on_background", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 90 : 10, background: (s2) => MaterialDynamicColors.background, contrastCurve: new ContrastCurve(3, 3, 4.5, 7) }); MaterialDynamicColors.surface = DynamicColor.fromPalette({ name: "surface", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 6 : 98, isBackground: true }); MaterialDynamicColors.surfaceDim = DynamicColor.fromPalette({ name: "surface_dim", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 6 : new ContrastCurve(87, 87, 80, 75).get(s2.contrastLevel), isBackground: true }); MaterialDynamicColors.surfaceBright = DynamicColor.fromPalette({ name: "surface_bright", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? new ContrastCurve(24, 24, 29, 34).get(s2.contrastLevel) : 98, isBackground: true }); MaterialDynamicColors.surfaceContainerLowest = DynamicColor.fromPalette({ name: "surface_container_lowest", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? new ContrastCurve(4, 4, 2, 0).get(s2.contrastLevel) : 100, isBackground: true }); MaterialDynamicColors.surfaceContainerLow = DynamicColor.fromPalette({ name: "surface_container_low", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? new ContrastCurve(10, 10, 11, 12).get(s2.contrastLevel) : new ContrastCurve(96, 96, 96, 95).get(s2.contrastLevel), isBackground: true }); MaterialDynamicColors.surfaceContainer = DynamicColor.fromPalette({ name: "surface_container", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? new ContrastCurve(12, 12, 16, 20).get(s2.contrastLevel) : new ContrastCurve(94, 94, 92, 90).get(s2.contrastLevel), isBackground: true }); MaterialDynamicColors.surfaceContainerHigh = DynamicColor.fromPalette({ name: "surface_container_high", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? new ContrastCurve(17, 17, 21, 25).get(s2.contrastLevel) : new ContrastCurve(92, 92, 88, 85).get(s2.contrastLevel), isBackground: true }); MaterialDynamicColors.surfaceContainerHighest = DynamicColor.fromPalette({ name: "surface_container_highest", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? new ContrastCurve(22, 22, 26, 30).get(s2.contrastLevel) : new ContrastCurve(90, 90, 84, 80).get(s2.contrastLevel), isBackground: true }); MaterialDynamicColors.onSurface = DynamicColor.fromPalette({ name: "on_surface", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 90 : 10, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.surfaceVariant = DynamicColor.fromPalette({ name: "surface_variant", palette: (s2) => s2.neutralVariantPalette, tone: (s2) => s2.isDark ? 30 : 90, isBackground: true }); MaterialDynamicColors.onSurfaceVariant = DynamicColor.fromPalette({ name: "on_surface_variant", palette: (s2) => s2.neutralVariantPalette, tone: (s2) => s2.isDark ? 80 : 30, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.inverseSurface = DynamicColor.fromPalette({ name: "inverse_surface", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 90 : 20 }); MaterialDynamicColors.inverseOnSurface = DynamicColor.fromPalette({ name: "inverse_on_surface", palette: (s2) => s2.neutralPalette, tone: (s2) => s2.isDark ? 20 : 95, background: (s2) => MaterialDynamicColors.inverseSurface, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.outline = DynamicColor.fromPalette({ name: "outline", palette: (s2) => s2.neutralVariantPalette, tone: (s2) => s2.isDark ? 60 : 50, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7) }); MaterialDynamicColors.outlineVariant = DynamicColor.fromPalette({ name: "outline_variant", palette: (s2) => s2.neutralVariantPalette, tone: (s2) => s2.isDark ? 30 : 80, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5) }); MaterialDynamicColors.shadow = DynamicColor.fromPalette({ name: "shadow", palette: (s2) => s2.neutralPalette, tone: (s2) => 0 }); MaterialDynamicColors.scrim = DynamicColor.fromPalette({ name: "scrim", palette: (s2) => s2.neutralPalette, tone: (s2) => 0 }); MaterialDynamicColors.surfaceTint = DynamicColor.fromPalette({ name: "surface_tint", palette: (s2) => s2.primaryPalette, tone: (s2) => s2.isDark ? 80 : 40, isBackground: true }); MaterialDynamicColors.primary = DynamicColor.fromPalette({ name: "primary", palette: (s2) => s2.primaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 100 : 0; } return s2.isDark ? 80 : 40; }, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(3, 4.5, 7, 7), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 10, "nearer", false) }); MaterialDynamicColors.onPrimary = DynamicColor.fromPalette({ name: "on_primary", palette: (s2) => s2.primaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 10 : 90; } return s2.isDark ? 20 : 100; }, background: (s2) => MaterialDynamicColors.primary, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.primaryContainer = DynamicColor.fromPalette({ name: "primary_container", palette: (s2) => s2.primaryPalette, tone: (s2) => { if (isFidelity(s2)) { return s2.sourceColorHct.tone; } if (isMonochrome(s2)) { return s2.isDark ? 85 : 25; } return s2.isDark ? 30 : 90; }, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 10, "nearer", false) }); MaterialDynamicColors.onPrimaryContainer = DynamicColor.fromPalette({ name: "on_primary_container", palette: (s2) => s2.primaryPalette, tone: (s2) => { if (isFidelity(s2)) { return DynamicColor.foregroundTone(MaterialDynamicColors.primaryContainer.tone(s2), 4.5); } if (isMonochrome(s2)) { return s2.isDark ? 0 : 100; } return s2.isDark ? 90 : 30; }, background: (s2) => MaterialDynamicColors.primaryContainer, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.inversePrimary = DynamicColor.fromPalette({ name: "inverse_primary", palette: (s2) => s2.primaryPalette, tone: (s2) => s2.isDark ? 40 : 80, background: (s2) => MaterialDynamicColors.inverseSurface, contrastCurve: new ContrastCurve(3, 4.5, 7, 7) }); MaterialDynamicColors.secondary = DynamicColor.fromPalette({ name: "secondary", palette: (s2) => s2.secondaryPalette, tone: (s2) => s2.isDark ? 80 : 40, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(3, 4.5, 7, 7), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 10, "nearer", false) }); MaterialDynamicColors.onSecondary = DynamicColor.fromPalette({ name: "on_secondary", palette: (s2) => s2.secondaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 10 : 100; } else { return s2.isDark ? 20 : 100; } }, background: (s2) => MaterialDynamicColors.secondary, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.secondaryContainer = DynamicColor.fromPalette({ name: "secondary_container", palette: (s2) => s2.secondaryPalette, tone: (s2) => { const initialTone = s2.isDark ? 30 : 90; if (isMonochrome(s2)) { return s2.isDark ? 30 : 85; } if (!isFidelity(s2)) { return initialTone; } return findDesiredChromaByTone(s2.secondaryPalette.hue, s2.secondaryPalette.chroma, initialTone, s2.isDark ? false : true); }, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 10, "nearer", false) }); MaterialDynamicColors.onSecondaryContainer = DynamicColor.fromPalette({ name: "on_secondary_container", palette: (s2) => s2.secondaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 90 : 10; } if (!isFidelity(s2)) { return s2.isDark ? 90 : 30; } return DynamicColor.foregroundTone(MaterialDynamicColors.secondaryContainer.tone(s2), 4.5); }, background: (s2) => MaterialDynamicColors.secondaryContainer, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.tertiary = DynamicColor.fromPalette({ name: "tertiary", palette: (s2) => s2.tertiaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 90 : 25; } return s2.isDark ? 80 : 40; }, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(3, 4.5, 7, 7), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 10, "nearer", false) }); MaterialDynamicColors.onTertiary = DynamicColor.fromPalette({ name: "on_tertiary", palette: (s2) => s2.tertiaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 10 : 90; } return s2.isDark ? 20 : 100; }, background: (s2) => MaterialDynamicColors.tertiary, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.tertiaryContainer = DynamicColor.fromPalette({ name: "tertiary_container", palette: (s2) => s2.tertiaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 60 : 49; } if (!isFidelity(s2)) { return s2.isDark ? 30 : 90; } const proposedHct = s2.tertiaryPalette.getHct(s2.sourceColorHct.tone); return DislikeAnalyzer.fixIfDisliked(proposedHct).tone; }, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 10, "nearer", false) }); MaterialDynamicColors.onTertiaryContainer = DynamicColor.fromPalette({ name: "on_tertiary_container", palette: (s2) => s2.tertiaryPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 0 : 100; } if (!isFidelity(s2)) { return s2.isDark ? 90 : 30; } return DynamicColor.foregroundTone(MaterialDynamicColors.tertiaryContainer.tone(s2), 4.5); }, background: (s2) => MaterialDynamicColors.tertiaryContainer, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.error = DynamicColor.fromPalette({ name: "error", palette: (s2) => s2.errorPalette, tone: (s2) => s2.isDark ? 80 : 40, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(3, 4.5, 7, 7), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 10, "nearer", false) }); MaterialDynamicColors.onError = DynamicColor.fromPalette({ name: "on_error", palette: (s2) => s2.errorPalette, tone: (s2) => s2.isDark ? 20 : 100, background: (s2) => MaterialDynamicColors.error, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.errorContainer = DynamicColor.fromPalette({ name: "error_container", palette: (s2) => s2.errorPalette, tone: (s2) => s2.isDark ? 30 : 90, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 10, "nearer", false) }); MaterialDynamicColors.onErrorContainer = DynamicColor.fromPalette({ name: "on_error_container", palette: (s2) => s2.errorPalette, tone: (s2) => { if (isMonochrome(s2)) { return s2.isDark ? 90 : 10; } return s2.isDark ? 90 : 30; }, background: (s2) => MaterialDynamicColors.errorContainer, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.primaryFixed = DynamicColor.fromPalette({ name: "primary_fixed", palette: (s2) => s2.primaryPalette, tone: (s2) => isMonochrome(s2) ? 40 : 90, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, "lighter", true) }); MaterialDynamicColors.primaryFixedDim = DynamicColor.fromPalette({ name: "primary_fixed_dim", palette: (s2) => s2.primaryPalette, tone: (s2) => isMonochrome(s2) ? 30 : 80, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, "lighter", true) }); MaterialDynamicColors.onPrimaryFixed = DynamicColor.fromPalette({ name: "on_primary_fixed", palette: (s2) => s2.primaryPalette, tone: (s2) => isMonochrome(s2) ? 100 : 10, background: (s2) => MaterialDynamicColors.primaryFixedDim, secondBackground: (s2) => MaterialDynamicColors.primaryFixed, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.onPrimaryFixedVariant = DynamicColor.fromPalette({ name: "on_primary_fixed_variant", palette: (s2) => s2.primaryPalette, tone: (s2) => isMonochrome(s2) ? 90 : 30, background: (s2) => MaterialDynamicColors.primaryFixedDim, secondBackground: (s2) => MaterialDynamicColors.primaryFixed, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.secondaryFixed = DynamicColor.fromPalette({ name: "secondary_fixed", palette: (s2) => s2.secondaryPalette, tone: (s2) => isMonochrome(s2) ? 80 : 90, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, "lighter", true) }); MaterialDynamicColors.secondaryFixedDim = DynamicColor.fromPalette({ name: "secondary_fixed_dim", palette: (s2) => s2.secondaryPalette, tone: (s2) => isMonochrome(s2) ? 70 : 80, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, "lighter", true) }); MaterialDynamicColors.onSecondaryFixed = DynamicColor.fromPalette({ name: "on_secondary_fixed", palette: (s2) => s2.secondaryPalette, tone: (s2) => 10, background: (s2) => MaterialDynamicColors.secondaryFixedDim, secondBackground: (s2) => MaterialDynamicColors.secondaryFixed, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.onSecondaryFixedVariant = DynamicColor.fromPalette({ name: "on_secondary_fixed_variant", palette: (s2) => s2.secondaryPalette, tone: (s2) => isMonochrome(s2) ? 25 : 30, background: (s2) => MaterialDynamicColors.secondaryFixedDim, secondBackground: (s2) => MaterialDynamicColors.secondaryFixed, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); MaterialDynamicColors.tertiaryFixed = DynamicColor.fromPalette({ name: "tertiary_fixed", palette: (s2) => s2.tertiaryPalette, tone: (s2) => isMonochrome(s2) ? 40 : 90, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, "lighter", true) }); MaterialDynamicColors.tertiaryFixedDim = DynamicColor.fromPalette({ name: "tertiary_fixed_dim", palette: (s2) => s2.tertiaryPalette, tone: (s2) => isMonochrome(s2) ? 30 : 80, isBackground: true, background: (s2) => MaterialDynamicColors.highestSurface(s2), contrastCurve: new ContrastCurve(1, 1, 3, 4.5), toneDeltaPair: (s2) => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, "lighter", true) }); MaterialDynamicColors.onTertiaryFixed = DynamicColor.fromPalette({ name: "on_tertiary_fixed", palette: (s2) => s2.tertiaryPalette, tone: (s2) => isMonochrome(s2) ? 100 : 10, background: (s2) => MaterialDynamicColors.tertiaryFixedDim, secondBackground: (s2) => MaterialDynamicColors.tertiaryFixed, contrastCurve: new ContrastCurve(4.5, 7, 11, 21) }); MaterialDynamicColors.onTertiaryFixedVariant = DynamicColor.fromPalette({ name: "on_tertiary_fixed_variant", palette: (s2) => s2.tertiaryPalette, tone: (s2) => isMonochrome(s2) ? 90 : 30, background: (s2) => MaterialDynamicColors.tertiaryFixedDim, secondBackground: (s2) => MaterialDynamicColors.tertiaryFixed, contrastCurve: new ContrastCurve(3, 4.5, 7, 11) }); const getConfirmText = () => { return msg("OK"); }; const getCancelText = () => { return msg("Cancel"); }; const prompt = (options) => { const mergedOptions = Object.assign({}, { confirmText: getConfirmText(), cancelText: getCancelText(), onConfirm: returnTrue, onCancel: returnTrue, validator: returnTrue, textFieldOptions: {} }, options); const properties = [ "headline", "description", "icon", "closeOnEsc", "closeOnOverlayClick", "stackedActions", "queue", "onOpen", "onOpened", "onClose", "onClosed", "onOverlayClick" ]; const textField = new TextField(); Object.entries(mergedOptions.textFieldOptions).forEach(([key2, value]) => { textField[key2] = value; }); return new Promise((resolve, reject) => { let isResolve = false; const dialog$1 = dialog({ ...Object.fromEntries(properties.filter((key2) => !isUndefined(mergedOptions[key2])).map((key2) => [key2, mergedOptions[key2]])), body: textField, actions: [ { text: mergedOptions.cancelText, onClick: (dialog2) => { return mergedOptions.onCancel.call(dialog2, textField.value, dialog2); } }, { text: mergedOptions.confirmText, onClick: (dialog2) => { const onConfirm = () => { const clickResult = mergedOptions.onConfirm.call(dialog2, textField.value, dialog2); if (isPromise(clickResult)) { clickResult.then(() => { isResolve = true; }); } else if (clickResult !== false) { isResolve = true; } return clickResult; }; textField.setCustomValidity(""); if (!textField.reportValidity()) { return false; } const validateResult = mergedOptions.validator.call(textField, textField.value); if (isBoolean(validateResult) && !validateResult) { textField.setCustomValidity(" "); return false; } if (isString(validateResult)) { textField.setCustomValidity(validateResult); return false; } if (isPromise(validateResult)) { return new Promise((resolve2, reject2) => { validateResult.then(resolve2).catch((reason) => { textField.setCustomValidity(reason); reject2(reason); }); }); } return onConfirm(); } } ] }); if (!options.confirmText) { onLocaleReady(dialog$1, () => { $$1(dialog$1).find('[slot="action"]').last().text(getConfirmText()); }); } if (!options.cancelText) { onLocaleReady(dialog$1, () => { $$1(dialog$1).find('[slot="action"]').first().text(getCancelText()); }); } $$1(dialog$1).on("close", () => { isResolve ? resolve(textField.value) : reject(); offLocaleReady(dialog$1); }); }); }; const queueName = "mdui.functions.snackbar."; let currentSnackbar = void 0; const snackbar = (options) => { const snackbar2 = new Snackbar(); const $snackbar = $$1(snackbar2); Object.entries(options).forEach(([key2, value]) => { if (key2 === "message") { snackbar2.innerHTML = value; } else if ([ "onClick", "onActionClick", "onOpen", "onOpened", "onClose", "onClosed" ].includes(key2)) { const eventName = toKebabCase(key2.slice(2)); $snackbar.on(eventName, () => { if (key2 === "onActionClick") { const actionClick = (options.onActionClick ?? returnTrue).call(snackbar2, snackbar2); if (isPromise(actionClick)) { snackbar2.actionLoading = true; actionClick.then(() => { snackbar2.open = false; }).finally(() => { snackbar2.actionLoading = false; }); } else if (actionClick !== false) { snackbar2.open = false; } } else { value.call(snackbar2, snackbar2); } }); } else { snackbar2[key2] = value; } }); $snackbar.appendTo("body").on("closed", () => { $snackbar.remove(); if (options.queue) { currentSnackbar = void 0; dequeue(queueName + options.queue); } }); if (!options.queue) { setTimeout(() => { snackbar2.open = true; }); } else if (currentSnackbar) { queue(queueName + options.queue, () => { snackbar2.open = true; currentSnackbar = snackbar2; }); } else { setTimeout(() => { snackbar2.open = true; }); currentSnackbar = snackbar2; } return snackbar2; }; if (!window.localStorage.getItem("selectors")) window.localStorage.setItem("selectors", "[]"); const observeElement = (selector, callback, continuous = false) => { let elementExists = false; try { const timer = setInterval(() => { const element = document.querySelector(selector); if (element && !elementExists) { elementExists = true; callback(); } else if (!element) elementExists = false; if (element && !continuous) { clearInterval(timer); } }, 100); } catch (e2) { console.log(e2); } }; observeElement(".n-message__content", () => { const isNodeLost = document.querySelector(".n-message__content"); if (isNodeLost) { const content = isNodeLost.innerHTML; const searchResult = content.match(/的([0-9])+个/); if (searchResult) { const lostNodeNum = Number(searchResult[0].slice(1, -1)); const showSizeURL = new URL(window.location.href); showSizeURL.searchParams.set("showSize", String(lostNodeNum + 2e3)); window.location.href = showSizeURL.toString(); } } }); var Space_Separator = /[\u1680\u2000-\u200A\u202F\u205F\u3000]/; var ID_Start = /[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]/; var ID_Continue = /[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u08D4-\u08E1\u08E3-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u09FC\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0AF9-\u0AFF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58-\u0C5A\u0C60-\u0C63\u0C66-\u0C6F\u0C80-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D00-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D54-\u0D57\u0D5F-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19D9\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1C80-\u1C88\u1CD0-\u1CD2\u1CD4-\u1CF9\u1D00-\u1DF9\u1DFB-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u2E2F\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099\u309A\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C5\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA8FD\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2F\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDDFD\uDE80-\uDE9C\uDEA0-\uDED0\uDEE0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF7A\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00-\uDE03\uDE05\uDE06\uDE0C-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE38-\uDE3A\uDE3F\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE6\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDCA-\uDDCC\uDDD0-\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE37\uDE3E\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF00-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF50\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC00-\uDC4A\uDC50-\uDC59\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDDD8-\uDDDD\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9\uDF00-\uDF19\uDF1D-\uDF2B\uDF30-\uDF39]|\uD806[\uDCA0-\uDCE9\uDCFF\uDE00-\uDE3E\uDE47\uDE50-\uDE83\uDE86-\uDE99\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC36\uDC38-\uDC40\uDC50-\uDC59\uDC72-\uDC8F\uDC92-\uDCA7\uDCA9-\uDCB6\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD36\uDD3A\uDD3C\uDD3D\uDD3F-\uDD47\uDD50-\uDD59]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDEF0-\uDEF4\uDF00-\uDF36\uDF40-\uDF43\uDF50-\uDF59\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50-\uDF7E\uDF8F-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD836[\uDE00-\uDE36\uDE3B-\uDE6C\uDE75\uDE84\uDE9B-\uDE9F\uDEA1-\uDEAF]|\uD838[\uDC00-\uDC06\uDC08-\uDC18\uDC1B-\uDC21\uDC23\uDC24\uDC26-\uDC2A]|\uD83A[\uDC00-\uDCC4\uDCD0-\uDCD6\uDD00-\uDD4A\uDD50-\uDD59]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/; var unicode = { Space_Separator, ID_Start, ID_Continue }; var util = { isSpaceSeparator(c2) { return typeof c2 === "string" && unicode.Space_Separator.test(c2); }, isIdStartChar(c2) { return typeof c2 === "string" && (c2 >= "a" && c2 <= "z" || c2 >= "A" && c2 <= "Z" || c2 === "$" || c2 === "_" || unicode.ID_Start.test(c2)); }, isIdContinueChar(c2) { return typeof c2 === "string" && (c2 >= "a" && c2 <= "z" || c2 >= "A" && c2 <= "Z" || c2 >= "0" && c2 <= "9" || c2 === "$" || c2 === "_" || c2 === "" || c2 === "" || unicode.ID_Continue.test(c2)); }, isDigit(c2) { return typeof c2 === "string" && /[0-9]/.test(c2); }, isHexDigit(c2) { return typeof c2 === "string" && /[0-9A-Fa-f]/.test(c2); } }; let source; let parseState; let stack; let pos; let line; let column; let token; let key$1; let root; var parse = function parse2(text, reviver) { source = String(text); parseState = "start"; stack = []; pos = 0; line = 1; column = 0; token = void 0; key$1 = void 0; root = void 0; do { token = lex(); parseStates[parseState](); } while (token.type !== "eof"); if (typeof reviver === "function") { return internalize({ "": root }, "", reviver); } return root; }; function internalize(holder, name, reviver) { const value = holder[name]; if (value != null && typeof value === "object") { if (Array.isArray(value)) { for (let i3 = 0; i3 < value.length; i3++) { const key2 = String(i3); const replacement = internalize(value, key2, reviver); if (replacement === void 0) { delete value[key2]; } else { Object.defineProperty(value, key2, { value: replacement, writable: true, enumerable: true, configurable: true }); } } } else { for (const key2 in value) { const replacement = internalize(value, key2, reviver); if (replacement === void 0) { delete value[key2]; } else { Object.defineProperty(value, key2, { value: replacement, writable: true, enumerable: true, configurable: true }); } } } } return reviver.call(holder, name, value); } let lexState; let buffer; let doubleQuote; let sign; let c; function lex() { lexState = "default"; buffer = ""; doubleQuote = false; sign = 1; for (; ; ) { c = peek(); const token2 = lexStates[lexState](); if (token2) { return token2; } } } function peek() { if (source[pos]) { return String.fromCodePoint(source.codePointAt(pos)); } } function read() { const c2 = peek(); if (c2 === "\n") { line++; column = 0; } else if (c2) { column += c2.length; } else { column++; } if (c2) { pos += c2.length; } return c2; } const lexStates = { default() { switch (c) { case " ": case "\v": case "\f": case " ": case " ": case "\uFEFF": case "\n": case "\r": case "\u2028": case "\u2029": read(); return; case "/": read(); lexState = "comment"; return; case void 0: read(); return newToken("eof"); } if (util.isSpaceSeparator(c)) { read(); return; } return lexStates[parseState](); }, comment() { switch (c) { case "*": read(); lexState = "multiLineComment"; return; case "/": read(); lexState = "singleLineComment"; return; } throw invalidChar(read()); }, multiLineComment() { switch (c) { case "*": read(); lexState = "multiLineCommentAsterisk"; return; case void 0: throw invalidChar(read()); } read(); }, multiLineCommentAsterisk() { switch (c) { case "*": read(); return; case "/": read(); lexState = "default"; return; case void 0: throw invalidChar(read()); } read(); lexState = "multiLineComment"; }, singleLineComment() { switch (c) { case "\n": case "\r": case "\u2028": case "\u2029": read(); lexState = "default"; return; case void 0: read(); return newToken("eof"); } read(); }, value() { switch (c) { case "{": case "[": return newToken("punctuator", read()); case "n": read(); literal("ull"); return newToken("null", null); case "t": read(); literal("rue"); return newToken("boolean", true); case "f": read(); literal("alse"); return newToken("boolean", false); case "-": case "+": if (read() === "-") { sign = -1; } lexState = "sign"; return; case ".": buffer = read(); lexState = "decimalPointLeading"; return; case "0": buffer = read(); lexState = "zero"; return; case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": buffer = read(); lexState = "decimalInteger"; return; case "I": read(); literal("nfinity"); return newToken("numeric", Infinity); case "N": read(); literal("aN"); return newToken("numeric", NaN); case '"': case "'": doubleQuote = read() === '"'; buffer = ""; lexState = "string"; return; } throw invalidChar(read()); }, identifierNameStartEscape() { if (c !== "u") { throw invalidChar(read()); } read(); const u2 = unicodeEscape(); switch (u2) { case "$": case "_": break; default: if (!util.isIdStartChar(u2)) { throw invalidIdentifier(); } break; } buffer += u2; lexState = "identifierName"; }, identifierName() { switch (c) { case "$": case "_": case "": case "": buffer += read(); return; case "\\": read(); lexState = "identifierNameEscape"; return; } if (util.isIdContinueChar(c)) { buffer += read(); return; } return newToken("identifier", buffer); }, identifierNameEscape() { if (c !== "u") { throw invalidChar(read()); } read(); const u2 = unicodeEscape(); switch (u2) { case "$": case "_": case "": case "": break; default: if (!util.isIdContinueChar(u2)) { throw invalidIdentifier(); } break; } buffer += u2; lexState = "identifierName"; }, sign() { switch (c) { case ".": buffer = read(); lexState = "decimalPointLeading"; return; case "0": buffer = read(); lexState = "zero"; return; case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": buffer = read(); lexState = "decimalInteger"; return; case "I": read(); literal("nfinity"); return newToken("numeric", sign * Infinity); case "N": read(); literal("aN"); return newToken("numeric", NaN); } throw invalidChar(read()); }, zero() { switch (c) { case ".": buffer += read(); lexState = "decimalPoint"; return; case "e": case "E": buffer += read(); lexState = "decimalExponent"; return; case "x": case "X": buffer += read(); lexState = "hexadecimal"; return; } return newToken("numeric", sign * 0); }, decimalInteger() { switch (c) { case ".": buffer += read(); lexState = "decimalPoint"; return; case "e": case "E": buffer += read(); lexState = "decimalExponent"; return; } if (util.isDigit(c)) { buffer += read(); return; } return newToken("numeric", sign * Number(buffer)); }, decimalPointLeading() { if (util.isDigit(c)) { buffer += read(); lexState = "decimalFraction"; return; } throw invalidChar(read()); }, decimalPoint() { switch (c) { case "e": case "E": buffer += read(); lexState = "decimalExponent"; return; } if (util.isDigit(c)) { buffer += read(); lexState = "decimalFraction"; return; } return newToken("numeric", sign * Number(buffer)); }, decimalFraction() { switch (c) { case "e": case "E": buffer += read(); lexState = "decimalExponent"; return; } if (util.isDigit(c)) { buffer += read(); return; } return newToken("numeric", sign * Number(buffer)); }, decimalExponent() { switch (c) { case "+": case "-": buffer += read(); lexState = "decimalExponentSign"; return; } if (util.isDigit(c)) { buffer += read(); lexState = "decimalExponentInteger"; return; } throw invalidChar(read()); }, decimalExponentSign() { if (util.isDigit(c)) { buffer += read(); lexState = "decimalExponentInteger"; return; } throw invalidChar(read()); }, decimalExponentInteger() { if (util.isDigit(c)) { buffer += read(); return; } return newToken("numeric", sign * Number(buffer)); }, hexadecimal() { if (util.isHexDigit(c)) { buffer += read(); lexState = "hexadecimalInteger"; return; } throw invalidChar(read()); }, hexadecimalInteger() { if (util.isHexDigit(c)) { buffer += read(); return; } return newToken("numeric", sign * Number(buffer)); }, string() { switch (c) { case "\\": read(); buffer += escape(); return; case '"': if (doubleQuote) { read(); return newToken("string", buffer); } buffer += read(); return; case "'": if (!doubleQuote) { read(); return newToken("string", buffer); } buffer += read(); return; case "\n": case "\r": throw invalidChar(read()); case "\u2028": case "\u2029": separatorChar(c); break; case void 0: throw invalidChar(read()); } buffer += read(); }, start() { switch (c) { case "{": case "[": return newToken("punctuator", read()); } lexState = "value"; }, beforePropertyName() { switch (c) { case "$": case "_": buffer = read(); lexState = "identifierName"; return; case "\\": read(); lexState = "identifierNameStartEscape"; return; case "}": return newToken("punctuator", read()); case '"': case "'": doubleQuote = read() === '"'; lexState = "string"; return; } if (util.isIdStartChar(c)) { buffer += read(); lexState = "identifierName"; return; } throw invalidChar(read()); }, afterPropertyName() { if (c === ":") { return newToken("punctuator", read()); } throw invalidChar(read()); }, beforePropertyValue() { lexState = "value"; }, afterPropertyValue() { switch (c) { case ",": case "}": return newToken("punctuator", read()); } throw invalidChar(read()); }, beforeArrayValue() { if (c === "]") { return newToken("punctuator", read()); } lexState = "value"; }, afterArrayValue() { switch (c) { case ",": case "]": return newToken("punctuator", read()); } throw invalidChar(read()); }, end() { throw invalidChar(read()); } }; function newToken(type, value) { return { type, value, line, column }; } function literal(s2) { for (const c2 of s2) { const p2 = peek(); if (p2 !== c2) { throw invalidChar(read()); } read(); } } function escape() { const c2 = peek(); switch (c2) { case "b": read(); return "\b"; case "f": read(); return "\f"; case "n": read(); return "\n"; case "r": read(); return "\r"; case "t": read(); return " "; case "v": read(); return "\v"; case "0": read(); if (util.isDigit(peek())) { throw invalidChar(read()); } return "\0"; case "x": read(); return hexEscape(); case "u": read(); return unicodeEscape(); case "\n": case "\u2028": case "\u2029": read(); return ""; case "\r": read(); if (peek() === "\n") { read(); } return ""; case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": throw invalidChar(read()); case void 0: throw invalidChar(read()); } return read(); } function hexEscape() { let buffer2 = ""; let c2 = peek(); if (!util.isHexDigit(c2)) { throw invalidChar(read()); } buffer2 += read(); c2 = peek(); if (!util.isHexDigit(c2)) { throw invalidChar(read()); } buffer2 += read(); return String.fromCodePoint(parseInt(buffer2, 16)); } function unicodeEscape() { let buffer2 = ""; let count = 4; while (count-- > 0) { const c2 = peek(); if (!util.isHexDigit(c2)) { throw invalidChar(read()); } buffer2 += read(); } return String.fromCodePoint(parseInt(buffer2, 16)); } const parseStates = { start() { if (token.type === "eof") { throw invalidEOF(); } push(); }, beforePropertyName() { switch (token.type) { case "identifier": case "string": key$1 = token.value; parseState = "afterPropertyName"; return; case "punctuator": pop(); return; case "eof": throw invalidEOF(); } }, afterPropertyName() { if (token.type === "eof") { throw invalidEOF(); } parseState = "beforePropertyValue"; }, beforePropertyValue() { if (token.type === "eof") { throw invalidEOF(); } push(); }, beforeArrayValue() { if (token.type === "eof") { throw invalidEOF(); } if (token.type === "punctuator" && token.value === "]") { pop(); return; } push(); }, afterPropertyValue() { if (token.type === "eof") { throw invalidEOF(); } switch (token.value) { case ",": parseState = "beforePropertyName"; return; case "}": pop(); } }, afterArrayValue() { if (token.type === "eof") { throw invalidEOF(); } switch (token.value) { case ",": parseState = "beforeArrayValue"; return; case "]": pop(); } }, end() { } }; function push() { let value; switch (token.type) { case "punctuator": switch (token.value) { case "{": value = {}; break; case "[": value = []; break; } break; case "null": case "boolean": case "numeric": case "string": value = token.value; break; } if (root === void 0) { root = value; } else { const parent = stack[stack.length - 1]; if (Array.isArray(parent)) { parent.push(value); } else { Object.defineProperty(parent, key$1, { value, writable: true, enumerable: true, configurable: true }); } } if (value !== null && typeof value === "object") { stack.push(value); if (Array.isArray(value)) { parseState = "beforeArrayValue"; } else { parseState = "beforePropertyName"; } } else { const current = stack[stack.length - 1]; if (current == null) { parseState = "end"; } else if (Array.isArray(current)) { parseState = "afterArrayValue"; } else { parseState = "afterPropertyValue"; } } } function pop() { stack.pop(); const current = stack[stack.length - 1]; if (current == null) { parseState = "end"; } else if (Array.isArray(current)) { parseState = "afterArrayValue"; } else { parseState = "afterPropertyValue"; } } function invalidChar(c2) { if (c2 === void 0) { return syntaxError(`JSON5: invalid end of input at ${line}:${column}`); } return syntaxError(`JSON5: invalid character '${formatChar(c2)}' at ${line}:${column}`); } function invalidEOF() { return syntaxError(`JSON5: invalid end of input at ${line}:${column}`); } function invalidIdentifier() { column -= 5; return syntaxError(`JSON5: invalid identifier character at ${line}:${column}`); } function separatorChar(c2) { console.warn(`JSON5: '${formatChar(c2)}' in strings is not valid ECMAScript; consider escaping`); } function formatChar(c2) { const replacements = { "'": "\\'", '"': '\\"', "\\": "\\\\", "\b": "\\b", "\f": "\\f", "\n": "\\n", "\r": "\\r", " ": "\\t", "\v": "\\v", "\0": "\\0", "\u2028": "\\u2028", "\u2029": "\\u2029" }; if (replacements[c2]) { return replacements[c2]; } if (c2 < " ") { const hexString = c2.charCodeAt(0).toString(16); return "\\x" + ("00" + hexString).substring(hexString.length); } return c2; } function syntaxError(message) { const err = new SyntaxError(message); err.lineNumber = line; err.columnNumber = column; return err; } var stringify = function stringify2(value, replacer, space) { const stack2 = []; let indent = ""; let propertyList; let replacerFunc; let gap = ""; let quote; if (replacer != null && typeof replacer === "object" && !Array.isArray(replacer)) { space = replacer.space; quote = replacer.quote; replacer = replacer.replacer; } if (typeof replacer === "function") { replacerFunc = replacer; } else if (Array.isArray(replacer)) { propertyList = []; for (const v2 of replacer) { let item; if (typeof v2 === "string") { item = v2; } else if (typeof v2 === "number" || v2 instanceof String || v2 instanceof Number) { item = String(v2); } if (item !== void 0 && propertyList.indexOf(item) < 0) { propertyList.push(item); } } } if (space instanceof Number) { space = Number(space); } else if (space instanceof String) { space = String(space); } if (typeof space === "number") { if (space > 0) { space = Math.min(10, Math.floor(space)); gap = " ".substr(0, space); } } else if (typeof space === "string") { gap = space.substr(0, 10); } return serializeProperty("", { "": value }); function serializeProperty(key2, holder) { let value2 = holder[key2]; if (value2 != null) { if (typeof value2.toJSON5 === "function") { value2 = value2.toJSON5(key2); } else if (typeof value2.toJSON === "function") { value2 = value2.toJSON(key2); } } if (replacerFunc) { value2 = replacerFunc.call(holder, key2, value2); } if (value2 instanceof Number) { value2 = Number(value2); } else if (value2 instanceof String) { value2 = String(value2); } else if (value2 instanceof Boolean) { value2 = value2.valueOf(); } switch (value2) { case null: return "null"; case true: return "true"; case false: return "false"; } if (typeof value2 === "string") { return quoteString(value2); } if (typeof value2 === "number") { return String(value2); } if (typeof value2 === "object") { return Array.isArray(value2) ? serializeArray(value2) : serializeObject(value2); } return void 0; } function quoteString(value2) { const quotes = { "'": 0.1, '"': 0.2 }; const replacements = { "'": "\\'", '"': '\\"', "\\": "\\\\", "\b": "\\b", "\f": "\\f", "\n": "\\n", "\r": "\\r", " ": "\\t", "\v": "\\v", "\0": "\\0", "\u2028": "\\u2028", "\u2029": "\\u2029" }; let product = ""; for (let i3 = 0; i3 < value2.length; i3++) { const c2 = value2[i3]; switch (c2) { case "'": case '"': quotes[c2]++; product += c2; continue; case "\0": if (util.isDigit(value2[i3 + 1])) { product += "\\x00"; continue; } } if (replacements[c2]) { product += replacements[c2]; continue; } if (c2 < " ") { let hexString = c2.charCodeAt(0).toString(16); product += "\\x" + ("00" + hexString).substring(hexString.length); continue; } product += c2; } const quoteChar = quote || Object.keys(quotes).reduce((a2, b3) => quotes[a2] < quotes[b3] ? a2 : b3); product = product.replace(new RegExp(quoteChar, "g"), replacements[quoteChar]); return quoteChar + product + quoteChar; } function serializeObject(value2) { if (stack2.indexOf(value2) >= 0) { throw TypeError("Converting circular structure to JSON5"); } stack2.push(value2); let stepback = indent; indent = indent + gap; let keys = propertyList || Object.keys(value2); let partial = []; for (const key2 of keys) { const propertyString = serializeProperty(key2, value2); if (propertyString !== void 0) { let member = serializeKey(key2) + ":"; if (gap !== "") { member += " "; } member += propertyString; partial.push(member); } } let final; if (partial.length === 0) { final = "{}"; } else { let properties; if (gap === "") { properties = partial.join(","); final = "{" + properties + "}"; } else { let separator = ",\n" + indent; properties = partial.join(separator); final = "{\n" + indent + properties + ",\n" + stepback + "}"; } } stack2.pop(); indent = stepback; return final; } function serializeKey(key2) { if (key2.length === 0) { return quoteString(key2); } const firstChar = String.fromCodePoint(key2.codePointAt(0)); if (!util.isIdStartChar(firstChar)) { return quoteString(key2); } for (let i3 = firstChar.length; i3 < key2.length; i3++) { if (!util.isIdContinueChar(String.fromCodePoint(key2.codePointAt(i3)))) { return quoteString(key2); } } return key2; } function serializeArray(value2) { if (stack2.indexOf(value2) >= 0) { throw TypeError("Converting circular structure to JSON5"); } stack2.push(value2); let stepback = indent; indent = indent + gap; let partial = []; for (let i3 = 0; i3 < value2.length; i3++) { const propertyString = serializeProperty(String(i3), value2); partial.push(propertyString !== void 0 ? propertyString : "null"); } let final; if (partial.length === 0) { final = "[]"; } else { if (gap === "") { let properties = partial.join(","); final = "[" + properties + "]"; } else { let separator = ",\n" + indent; let properties = partial.join(separator); final = "[\n" + indent + properties + ",\n" + stepback + "]"; } } stack2.pop(); indent = stepback; return final; } }; const JSON5 = { parse, stringify }; var lib = JSON5; const send = (channal) => { const event = new Event(channal); window.dispatchEvent(event); }; const receive = (channal, callback) => { window.addEventListener(channal, callback); }; const attrList = [ "id", "vid", "text", "text.length", "desc", "desc.length", "clickable", "focusable", "checkable", "checked", "editable", "longClickable", "visibleToUser", "left", "top", "right", "bottom", "width", "height", "childCount", "index" ]; const copyProxy = new Proxy(navigator.clipboard.writeText, { apply: async (target, thisArg, args) => { const data2 = args[0]; if (data2.startsWith("{") && data2.endsWith("}")) { window.originRule = args[0]; send("copyEvent"); await new Promise((resolve) => { receive("modifyEnd", async () => { await Reflect.apply(target, thisArg, [window.returnResult]); snackbar({ message: "注入修改成功", placement: "top", onClosed: () => resolve(true) }); }); }); } else if (data2.startsWith("name=")) { if (window.localStorage.getItem("simplyName") == "true") { const fullname = data2.split('"')[1]; const splitedName = fullname.split("."); const name = splitedName[splitedName.length - 1]; await Reflect.apply(target, thisArg, [name]); } else await Reflect.apply(target, thisArg, [data2]); } else if (attrList.filter((attr) => data2.startsWith(`${attr}=`)).length != 0) { await Reflect.apply(target, thisArg, [`[${data2}]`]); } else if (data2.startsWith(window.origin)) { const selectors = window.localStorage.getItem("selectors"); if (selectors) { const copiedUrl = new URL(data2); if (copiedUrl.searchParams.has("gkd")) { const selectorBase64 = copiedUrl.searchParams.get("gkd"); const parsedSelectors = lib.parse(selectors); prompt({ headline: "备注", description: "给该选择器的备注，留空就用默认的了哦~", confirmText: "就决定是你了！", cancelText: "这个不要保存！", closeOnEsc: true, closeOnOverlayClick: true, onConfirm: (value) => { parsedSelectors.push({ name: value ? value : selectorBase64, base64: selectorBase64 }); window.localStorage.setItem("selectors", lib.stringify(parsedSelectors)); } }).catch(); } } await Reflect.apply(target, thisArg, [data2]); } else await Reflect.apply(target, thisArg, [data2]); } }); navigator.clipboard.writeText = copyProxy; observeElement(".n-radio-group > div", () => { const radioGroup = document.querySelector(".n-radio-group > div"); const UseSelectorIcon = document.createElement("mdui-button-icon"); UseSelectorIcon.icon = "search"; UseSelectorIcon.onclick = () => { send("openUseSelector"); }; const AddSelectorIcon = document.createElement("mdui-button-icon"); AddSelectorIcon.icon = "add"; AddSelectorIcon.onclick = () => { send("openAddSelector"); }; const ManageSelectorsIcon = document.createElement("mdui-button-icon"); ManageSelectorsIcon.icon = "edit"; ManageSelectorsIcon.onclick = () => { send("openManageSelectors"); }; const SettingsIcon = document.createElement("mdui-button-icon"); SettingsIcon.icon = "settings"; SettingsIcon.onclick = () => { send("openSettings"); }; radioGroup.append(UseSelectorIcon, AddSelectorIcon, ManageSelectorsIcon, SettingsIcon); }); const iArrayToArray = (array = []) => { return Array().concat(array); }; const checkPositionLegal = (position) => { const { top, left, right, bottom } = position; if (top) { if (bottom || !left && !right) { snackbar({ message: "非法坐标", placement: "top" }); return false; } } if (left) { if (right || !top && !bottom) { snackbar({ message: "非法坐标", placement: "top" }); return false; } } if (right) { if (left || !top && !bottom) { snackbar({ message: "非法坐标", placement: "top" }); return false; } } if (bottom) { if (top || !left && !right) { snackbar({ message: "非法坐标", placement: "top" }); return false; } } return true; }; const finish = () => { const mode = document.querySelector("#mode").value; const ruleName = document.querySelector("#ruleName").value; const ruleDesc = document.querySelector("#ruleDesc").value; const category = window.currentCategory; const isLimit = document.querySelector("#limit").checked; const isNoExample = document.querySelector("#noExample").checked; const isUseFastQuery = document.querySelector("#fastQuery").checked; const position = document.querySelector("#position").value; const origin = lib.parse(window.originRule); if (ruleName) origin.groups[0].name = ruleName; else origin.groups[0].name = ""; if (ruleDesc) origin.groups[0].desc = ruleDesc; else delete origin.groups[0].desc; if (category) { if (!ruleName) origin.groups[0].name = category; else origin.groups[0].name = `${category}-${origin.groups[0].name}`; const rule = iArrayToArray(origin.groups[0].rules)[0]; delete rule.activityIds; origin.groups[0].rules = [rule]; } if (isLimit) { origin.groups[0].actionMaximum = 1; origin.groups[0].resetMatch = "app"; origin.groups[0].matchTime = 1e4; } if (isNoExample) { const rule = iArrayToArray(origin.groups[0].rules)[0]; delete rule.exampleUrls; origin.groups[0].rules = [rule]; } if (isUseFastQuery) { const rule = iArrayToArray(origin.groups[0].rules)[0]; if (rule.quickFind) { delete rule.quickFind; rule.fastQuery = true; } origin.groups[0].rules = [rule]; } if (position) { if (position.startsWith("[") && position.endsWith("]")) { const purePosition = position.slice(1, position.length - 1); const positionArray = purePosition.split(","); const positionName = ["top", "left", "right", "bottom"]; const positionObject = {}; positionArray.forEach((position2, index) => { if (position2) { positionObject[positionName[index]] = position2; } }); if (!checkPositionLegal(positionObject)) { snackbar({ message: "非法坐标", placement: "top" }); return; } const rule = iArrayToArray(origin.groups[0].rules)[0]; rule.position = positionObject; origin.groups[0].rules = [rule]; } else { snackbar({ message: "非法坐标", placement: "top" }); return; } } const stringify3 = lib.stringify(origin, null, 2); if (mode == "ts") { const text = `import { defineGkdApp } from '@gkd-kit/define';\r\rexport default defineGkdApp(${stringify3});\r`; window.returnResult = text; } else if (mode == "app") window.returnResult = stringify3; else if (mode == "groups") window.returnResult = lib.stringify(origin.groups[0], null, 2); else if (mode == "rules") window.returnResult = lib.stringify(iArrayToArray(origin.groups[0].rules)[0], null, 2); document.querySelector("#page").open = false; send("modifyEnd"); }; const key = () => { const mode = document.querySelector("#mode").value; const key2 = document.querySelector("#key").value; const origin = lib.parse(window.originRule); if (key2) { if (mode == "rules") { const rule = iArrayToArray(origin.groups[0].rules)[0]; rule.key = Number(key2); origin.groups[0].rules = [rule]; } else origin.groups[0].key = Number(key2); window.originRule = lib.stringify(origin, null, 2); snackbar({ message: "key值修改成功！", placement: "top" }); } }; const generateCategories = () => { const categoriesString = window.localStorage.getItem("categories"); const categoriesGroup = document.querySelector("#category"); if (categoriesString) { const categories = lib.parse(categoriesString); let innerHtmlString = ""; categories.forEach((category) => { innerHtmlString += `<mdui-radio value=${category.name}>${category.name}</mdui-radio>`; }); categoriesGroup.innerHTML = innerHtmlString; } }; const _sfc_main$5 = vue.defineComponent({ methods: { finish() { finish(); }, key() { key(); } }, data() { return { originRule: lib.parse(window.originRule) }; }, mounted() { window.currentCategory = ""; generateCategories(); document.querySelector("#category").addEventListener("change", (e2) => { window.currentCategory = e2.target.value; }); document.querySelector("#page").open = true; receive("MainOpen", () => { document.querySelector("#page").open = true; }); } }); const _export_sfc = (sfc, props) => { const target = sfc.__vccOpts || sfc; for (const [key2, val] of props) { target[key2] = val; } return target; }; const _hoisted_1$3 = { id: "page", headline: "配置", "close-on-overlay-click": "", "close-on-esc": "" }; const _hoisted_2$3 = /* @__PURE__ */ vue.createStaticVNode('<div><span>选择模式：</span><mdui-radio-group id="mode" value="app"><mdui-radio value="ts">ts模式</mdui-radio><mdui-radio value="app">app模式</mdui-radio><mdui-radio value="groups">groups模式</mdui-radio><mdui-radio value="rules">rules模式</mdui-radio></mdui-radio-group></div><div><span>选择分类：</span><mdui-radio-group id="category"></mdui-radio-group></div><div><span>插入限制字段：</span><mdui-switch id="limit"></mdui-switch><span class="introduction">插入matchTime、resetMatch和actionMaximum</span></div><div><span>去除exampleUrls：</span><mdui-switch id="noExample"></mdui-switch></div><div><span>使用fastQuery：</span><mdui-switch id="fastQuery"></mdui-switch><span class="introduction">使用fastQuery替换quickFind</span></div>', 5); const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", null, "修改key值为：", -1); const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "坐标："), /* @__PURE__ */ vue.createElementVNode("mdui-text-field", { variant: "filled", id: "position", label: "坐标", placeholder: "填入[top,left,right,bottom]的合法坐标，空出无用项" }) ], -1); const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", null, "规则组名称：", -1); const _hoisted_10 = ["placeholder"]; const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "规则组描述："), /* @__PURE__ */ vue.createElementVNode("mdui-text-field", { id: "ruleDesc", variant: "filled", label: "描述", placeholder: "没有描述不填" }) ], -1); function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1$3, [ _hoisted_2$3, vue.createElementVNode("div", null, [ _hoisted_7, vue.createElementVNode("mdui-text-field", { id: "key", variant: "filled", type: "number", label: "key", placeholder: "填写一个数字", helper: "必须在其他修改前修改！rules模式修改ruleKey，其余修改groupKey。请提前选好模式，失焦保存！", onChange: _cache[0] || (_cache[0] = (...args) => _ctx.key && _ctx.key(...args)) }, null, 32) ]), _hoisted_8, vue.createElementVNode("div", null, [ _hoisted_9, vue.createElementVNode("mdui-text-field", { id: "ruleName", variant: "filled", label: "名称", placeholder: _ctx.originRule.groups[0].name }, null, 8, _hoisted_10) ]), _hoisted_11, vue.createElementVNode("div", null, [ vue.createElementVNode("mdui-button", { slot: "action", variant: "tonal", onClick: _cache[1] || (_cache[1] = (...args) => _ctx.finish && _ctx.finish(...args)) }, "确定") ]) ]); } const Main = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]); const settings = () => { const isSimplyName = document.querySelector("#simplyName").checked; const isAutoAddSelector = document.querySelector("#autoAddSelector").checked; window.localStorage.setItem("categories", document.querySelector("#categories").value); window.localStorage.setItem("simplyName", isSimplyName ? "true" : "false"); window.localStorage.setItem("autoAddSelector", isAutoAddSelector ? "true" : "false"); document.querySelector("#page").open = false; }; const _sfc_main$4 = vue.defineComponent({ methods: { settings() { settings(); } }, mounted() { if (window.localStorage.getItem("categories")) { document.querySelector("#categories").value = window.localStorage.getItem("categories"); } if (window.localStorage.getItem("simplyName") == "true") document.querySelector("#simplyName").checked = true; document.querySelector("#page").open = true; receive("SettingsOpen", () => { document.querySelector("#page").open = true; }); } }); const _hoisted_1$2 = { id: "page", headline: "设置", "close-on-overlay-click": "", "close-on-esc": "" }; const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "分类设置："), /* @__PURE__ */ vue.createElementVNode("mdui-text-field", { variant: "filled", id: "categories", label: "分类", placeholder: "填入合法的分类", rows: "10" }) ], -1); const _hoisted_3$1 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "name属性复制优化："), /* @__PURE__ */ vue.createElementVNode("mdui-switch", { id: "simplyName" }), /* @__PURE__ */ vue.createElementVNode("span", { class: "introduction" }, "在复制name属性时，会自动优化复制的内容。如复制 android.widget.TextView 时会优化为 TextView") ], -1); const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "选择器分享自动添加快捷搜索："), /* @__PURE__ */ vue.createElementVNode("mdui-switch", { id: "autoAddSelector" }), /* @__PURE__ */ vue.createElementVNode("span", { class: "introduction" }, "在分享选择器时，自动添加到快捷搜索列表中") ], -1); function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1$2, [ _hoisted_2$2, _hoisted_3$1, _hoisted_4$1, vue.createElementVNode("div", null, [ vue.createElementVNode("mdui-button", { slot: "action", variant: "tonal", onClick: _cache[0] || (_cache[0] = (...args) => _ctx.settings && _ctx.settings(...args)) }, "确定") ]) ]); } const Settings = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3]]); const generateSelectors$1 = () => { const selectors = lib.parse(window.localStorage.getItem("selectors")); const selectorsGroup = document.querySelector("#selectors"); let innerHtmlString = ""; selectors.forEach(({ name, base64 }, index) => { innerHtmlString += `<mdui-radio id="selector" value=${base64} data-index="${String(index)}">${name}</mdui-radio>`; }); selectorsGroup.innerHTML = innerHtmlString; document.querySelectorAll("#selector").forEach((radio) => { radio.addEventListener("click", (e2) => { window.currentUseSelectorIndex = Number(e2.target.getAttribute("data-index")); }); }); }; const search = () => { const selectors = lib.parse(window.localStorage.getItem("selectors")); const target = new URL(window.location.href); target.searchParams.set("gkd", selectors[window.currentUseSelectorIndex].base64); window.location.href = target.toString(); }; const _sfc_main$3 = vue.defineComponent({ methods: { search() { search(); } }, mounted() { generateSelectors$1(); document.querySelector("#page").open = true; receive("ManageSelectorsOpen", () => { document.querySelector("#page").open = true; }); } }); const _hoisted_1$1 = { id: "page", headline: "使用选择器", "close-on-overlay-click": "", "close-on-esc": "" }; const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "选择选择器："), /* @__PURE__ */ vue.createElementVNode("mdui-radio-group", { id: "selectors" }) ], -1); function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1$1, [ _hoisted_2$1, vue.createElementVNode("div", null, [ vue.createElementVNode("mdui-button", { slot: "action", variant: "tonal", onClick: _cache[0] || (_cache[0] = (...args) => _ctx.search && _ctx.search(...args)) }, "搜索") ]) ]); } const UseSelector = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]); const _hasBuffer = typeof Buffer === "function"; const _TD = typeof TextDecoder === "function" ? new TextDecoder() : void 0; const _TE = typeof TextEncoder === "function" ? new TextEncoder() : void 0; const b64ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; const b64chs = Array.prototype.slice.call(b64ch); const b64tab = ((a2) => { let tab = {}; a2.forEach((c2, i3) => tab[c2] = i3); return tab; })(b64chs); const b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/; const _fromCC = String.fromCharCode.bind(String); const _U8Afrom = typeof Uint8Array.from === "function" ? Uint8Array.from.bind(Uint8Array) : (it) => new Uint8Array(Array.prototype.slice.call(it, 0)); const _mkUriSafe = (src) => src.replace(/=/g, "").replace(/[+\/]/g, (m0) => m0 == "+" ? "-" : "_"); const _tidyB64 = (s2) => s2.replace(/[^A-Za-z0-9\+\/]/g, ""); const btoaPolyfill = (bin) => { let u32, c0, c1, c2, asc = ""; const pad = bin.length % 3; for (let i3 = 0; i3 < bin.length; ) { if ((c0 = bin.charCodeAt(i3++)) > 255 || (c1 = bin.charCodeAt(i3++)) > 255 || (c2 = bin.charCodeAt(i3++)) > 255) throw new TypeError("invalid character found"); u32 = c0 << 16 | c1 << 8 | c2; asc += b64chs[u32 >> 18 & 63] + b64chs[u32 >> 12 & 63] + b64chs[u32 >> 6 & 63] + b64chs[u32 & 63]; } return pad ? asc.slice(0, pad - 3) + "===".substring(pad) : asc; }; const _btoa = typeof btoa === "function" ? (bin) => btoa(bin) : _hasBuffer ? (bin) => Buffer.from(bin, "binary").toString("base64") : btoaPolyfill; const _fromUint8Array = _hasBuffer ? (u8a) => Buffer.from(u8a).toString("base64") : (u8a) => { const maxargs = 4096; let strs = []; for (let i3 = 0, l2 = u8a.length; i3 < l2; i3 += maxargs) { strs.push(_fromCC.apply(null, u8a.subarray(i3, i3 + maxargs))); } return _btoa(strs.join("")); }; const cb_utob = (c2) => { if (c2.length < 2) { var cc2 = c2.charCodeAt(0); return cc2 < 128 ? c2 : cc2 < 2048 ? _fromCC(192 | cc2 >>> 6) + _fromCC(128 | cc2 & 63) : _fromCC(224 | cc2 >>> 12 & 15) + _fromCC(128 | cc2 >>> 6 & 63) + _fromCC(128 | cc2 & 63); } else { var cc2 = 65536 + (c2.charCodeAt(0) - 55296) * 1024 + (c2.charCodeAt(1) - 56320); return _fromCC(240 | cc2 >>> 18 & 7) + _fromCC(128 | cc2 >>> 12 & 63) + _fromCC(128 | cc2 >>> 6 & 63) + _fromCC(128 | cc2 & 63); } }; const re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g; const utob = (u2) => u2.replace(re_utob, cb_utob); const _encode = _hasBuffer ? (s2) => Buffer.from(s2, "utf8").toString("base64") : _TE ? (s2) => _fromUint8Array(_TE.encode(s2)) : (s2) => _btoa(utob(s2)); const encode = (src, urlsafe = false) => urlsafe ? _mkUriSafe(_encode(src)) : _encode(src); const encodeURI = (src) => encode(src, true); const re_btou = /[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3}/g; const cb_btou = (cccc) => { switch (cccc.length) { case 4: var cp = (7 & cccc.charCodeAt(0)) << 18 | (63 & cccc.charCodeAt(1)) << 12 | (63 & cccc.charCodeAt(2)) << 6 | 63 & cccc.charCodeAt(3), offset = cp - 65536; return _fromCC((offset >>> 10) + 55296) + _fromCC((offset & 1023) + 56320); case 3: return _fromCC((15 & cccc.charCodeAt(0)) << 12 | (63 & cccc.charCodeAt(1)) << 6 | 63 & cccc.charCodeAt(2)); default: return _fromCC((31 & cccc.charCodeAt(0)) << 6 | 63 & cccc.charCodeAt(1)); } }; const btou = (b3) => b3.replace(re_btou, cb_btou); const atobPolyfill = (asc) => { asc = asc.replace(/\s+/g, ""); if (!b64re.test(asc)) throw new TypeError("malformed base64."); asc += "==".slice(2 - (asc.length & 3)); let u24, bin = "", r1, r2; for (let i3 = 0; i3 < asc.length; ) { u24 = b64tab[asc.charAt(i3++)] << 18 | b64tab[asc.charAt(i3++)] << 12 | (r1 = b64tab[asc.charAt(i3++)]) << 6 | (r2 = b64tab[asc.charAt(i3++)]); bin += r1 === 64 ? _fromCC(u24 >> 16 & 255) : r2 === 64 ? _fromCC(u24 >> 16 & 255, u24 >> 8 & 255) : _fromCC(u24 >> 16 & 255, u24 >> 8 & 255, u24 & 255); } return bin; }; const _atob = typeof atob === "function" ? (asc) => atob(_tidyB64(asc)) : _hasBuffer ? (asc) => Buffer.from(asc, "base64").toString("binary") : atobPolyfill; const _toUint8Array = _hasBuffer ? (a2) => _U8Afrom(Buffer.from(a2, "base64")) : (a2) => _U8Afrom(_atob(a2).split("").map((c2) => c2.charCodeAt(0))); const _decode = _hasBuffer ? (a2) => Buffer.from(a2, "base64").toString("utf8") : _TD ? (a2) => _TD.decode(_toUint8Array(a2)) : (a2) => btou(_atob(a2)); const _unURI = (a2) => _tidyB64(a2.replace(/[-_]/g, (m0) => m0 == "-" ? "+" : "/")); const decode = (src) => _decode(_unURI(src)); const _sfc_main$2 = vue.defineComponent({ mounted() { receive("AddSelectorOpen", () => { prompt({ headline: "请输入选择器备注", description: "对该选择器的备注，方便辨认", confirmText: "就决定是你了！", cancelText: "算了", closeOnEsc: true, closeOnOverlayClick: true, onConfirm: (name) => { if (!name) { snackbar({ message: "请不要留空哦~", placement: "top" }); return false; } else { prompt({ headline: "请输入选择器", description: "输入选择器", confirmText: "好了~", cancelText: "算了", closeOnEsc: true, closeOnOverlayClick: true, onConfirm: (selector) => { if (!selector) { snackbar({ message: "请不要留空哦~", placement: "top" }); return false; } else { const savedSelectors = lib.parse(window.localStorage.getItem("selectors")); savedSelectors.push({ name, base64: encodeURI(selector) }); window.localStorage.setItem("selectors", lib.stringify(savedSelectors)); } } }).catch(); } } }).catch(); }); } }); const generateSelectors = () => { const selectors = lib.parse(window.localStorage.getItem("selectors")); const selectorsGroup = document.querySelector("#selectors"); let innerHtmlString = ""; selectors.forEach(({ name, base64 }, index) => { innerHtmlString += `<mdui-radio id="selectorRadio" value=${base64} data-index="${String(index)}">${name}</mdui-radio>`; }); selectorsGroup.innerHTML = innerHtmlString; document.querySelectorAll("#selectorRadio").forEach((radio) => { radio.addEventListener("click", (e2) => { const nameTextField = document.querySelector("#name"); const selectorTextField = document.querySelector("#selector"); nameTextField.value = e2.target.innerText; selectorTextField.value = decode(e2.target.value); window.currentSelector = { index: Number(e2.target.getAttribute("data-index")), name: e2.target.innerText, base64: e2.target.value }; }); }); }; const editSelector = () => { let selectors = lib.parse(window.localStorage.getItem("selectors")); const nameTextField = document.querySelector("#name"); const selectorTextField = document.querySelector("#selector"); if (selectorTextField.value) { selectors[window.currentSelector.index] = { name: nameTextField.value, base64: encodeURI(selectorTextField.value) }; } else selectors.splice(window.currentSelector.index, 1); window.localStorage.setItem("selectors", lib.stringify(selectors)); }; const _sfc_main$1 = vue.defineComponent({ methods: { editSelector() { editSelector(); }, close() { document.querySelector("#page").open = false; } }, mounted() { generateSelectors(); document.querySelector("#page").open = true; receive("ManageSelectorsOpen", () => { generateSelectors(); document.querySelector("#page").open = true; }); } }); const _hoisted_1 = { id: "page", headline: "管理选择器", "close-on-overlay-click": "", "close-on-esc": "" }; const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", null, [ /* @__PURE__ */ vue.createElementVNode("span", null, "选择选择器："), /* @__PURE__ */ vue.createElementVNode("mdui-radio-group", { id: "selectors" }) ], -1); const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("span", null, "备注：", -1); const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("span", { class: "introduction" }, "失焦保存", -1); const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("span", null, "选择器：", -1); const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "introduction" }, "留空删除。失焦保存", -1); function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1, [ _hoisted_2, vue.createElementVNode("div", null, [ _hoisted_3, vue.createElementVNode("mdui-text-field", { variant: "filled", id: "name", label: "备注", onChange: _cache[0] || (_cache[0] = (...args) => _ctx.editSelector && _ctx.editSelector(...args)) }, null, 32), _hoisted_4 ]), vue.createElementVNode("div", null, [ _hoisted_5, vue.createElementVNode("mdui-text-field", { variant: "filled", id: "selector", label: "选择器", onChange: _cache[1] || (_cache[1] = (...args) => _ctx.editSelector && _ctx.editSelector(...args)) }, null, 32), _hoisted_6 ]), vue.createElementVNode("div", null, [ vue.createElementVNode("mdui-button", { slot: "action", variant: "tonal", onClick: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args)) }, "关闭") ]) ]); } const ManageSelectors = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]); const _sfc_main = vue.defineComponent({ components: { Main, Settings, UseSelector, AddSelector: _sfc_main$2, ManageSelectors }, data() { return { currentComponent: "" }; }, created() { receive("copyEvent", () => { if (this.currentComponent != "Main") this.currentComponent = "Main"; else send("MainOpen"); }); receive("openSettings", () => { if (this.currentComponent != "Settings") this.currentComponent = "Settings"; else send("SettingsOpen"); }); receive("openUseSelector", () => { if (this.currentComponent != "UseSelector") this.currentComponent = "UseSelector"; else send("UseSelectorOpen"); }); receive("openAddSelector", () => { if (this.currentComponent != "AddSelector") this.currentComponent = "AddSelector"; else send("AddSelectorOpen"); }); receive("openManageSelectors", () => { if (this.currentComponent != "ManageSelectors") this.currentComponent = "ManageSelectors"; else send("ManageSelectorsOpen"); }); } }); function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.currentComponent)); } const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); vue.createApp(App).mount( (() => { const icon = document.createElement("link"); icon.rel = "stylesheet"; icon.href = "https://fonts.font.im/icon?family=Material+Icons"; document.head.append(icon); const app = document.createElement("div"); document.body.append(app); return app; })() ); })(Vue);
