GKD网页审查工具增强
// ==UserScript==
// @name GKD网页审查工具增强
// @name:en-US Make GKDInspect Better
// @namespace https://blog.adproqwq.xyz
// @version 2.4.1
// @author Adpro
// @description 让GKD网页审查工具再次强大!
// @description:en-US Let GKD Inspect Better Again!
// @license MIT
// @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Im0yMyA0bC01IDMuNzV2Ni41TDE1IDEybC01IDMuNzV2Ni41TDcgMjBsLTUgMy43NVYzMGgydi01LjI1bDMtMi4yNWwzIDIuMjVWMzBoMlYxNi43NWwzLTIuMjVsMyAyLjI1VjMwaDJWOC43NWwzLTIuMjVsMyAyLjI1VjMwaDJWNy43NXoiLz48L3N2Zz4=
// @homepage https://github.com/adproqwq/MakeGKDInspectBetter
// @supportURL https://github.com/adproqwq/MakeGKDInspectBetter/issues
// @match https://i.gkd.li/*
// @exclude https://i.gkd.li
// @require https://cdn.jsdelivr.net/npm/vue@3.5.6/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: global2 } = 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 (global2) {
$$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 hasWindow() {
return typeof window !== "undefined";
}
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) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || 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", "[]");
snackbar({
message: "低声问向谁行宿,城上已三更。",
autoCloseDelay: 3e3,
placement: "top"
});
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 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 send = (channal) => {
const event = new Event(channal);
window.dispatchEvent(event);
};
const receive = (channal, callback) => {
window.addEventListener(channal, callback);
};
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;
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
function getDefaultExportFromCjs(x2) {
return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
}
function commonjsRequire(path) {
throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
}
var localforage$1 = { exports: {} };
/*!
localForage -- Offline Storage, Improved
Version 1.10.0
https://localforage.github.io/localForage
(c) 2013-2017 Mozilla, Apache License 2.0
*/
(function(module, exports) {
(function(f2) {
{
module.exports = f2();
}
})(function() {
return function e2(t2, n3, r2) {
function s2(o3, u2) {
if (!n3[o3]) {
if (!t2[o3]) {
var a2 = typeof commonjsRequire == "function" && commonjsRequire;
if (!u2 && a2) return a2(o3, true);
if (i3) return i3(o3, true);
var f2 = new Error("Cannot find module '" + o3 + "'");
throw f2.code = "MODULE_NOT_FOUND", f2;
}
var l2 = n3[o3] = { exports: {} };
t2[o3][0].call(l2.exports, function(e3) {
var n4 = t2[o3][1][e3];
return s2(n4 ? n4 : e3);
}, l2, l2.exports, e2, t2, n3, r2);
}
return n3[o3].exports;
}
var i3 = typeof commonjsRequire == "function" && commonjsRequire;
for (var o2 = 0; o2 < r2.length; o2++) s2(r2[o2]);
return s2;
}({ 1: [function(_dereq_, module2, exports2) {
(function(global2) {
var Mutation = global2.MutationObserver || global2.WebKitMutationObserver;
var scheduleDrain;
{
if (Mutation) {
var called = 0;
var observer2 = new Mutation(nextTick);
var element = global2.document.createTextNode("");
observer2.observe(element, {
characterData: true
});
scheduleDrain = function() {
element.data = called = ++called % 2;
};
} else if (!global2.setImmediate && typeof global2.MessageChannel !== "undefined") {
var channel = new global2.MessageChannel();
channel.port1.onmessage = nextTick;
scheduleDrain = function() {
channel.port2.postMessage(0);
};
} else if ("document" in global2 && "onreadystatechange" in global2.document.createElement("script")) {
scheduleDrain = function() {
var scriptEl = global2.document.createElement("script");
scriptEl.onreadystatechange = function() {
nextTick();
scriptEl.onreadystatechange = null;
scriptEl.parentNode.removeChild(scriptEl);
scriptEl = null;
};
global2.document.documentElement.appendChild(scriptEl);
};
} else {
scheduleDrain = function() {
setTimeout(nextTick, 0);
};
}
}
var draining;
var queue2 = [];
function nextTick() {
draining = true;
var i3, oldQueue;
var len = queue2.length;
while (len) {
oldQueue = queue2;
queue2 = [];
i3 = -1;
while (++i3 < len) {
oldQueue[i3]();
}
len = queue2.length;
}
draining = false;
}
module2.exports = immediate;
function immediate(task) {
if (queue2.push(task) === 1 && !draining) {
scheduleDrain();
}
}
}).call(this, typeof commonjsGlobal !== "undefined" ? commonjsGlobal : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {});
}, {}], 2: [function(_dereq_, module2, exports2) {
var immediate = _dereq_(1);
function INTERNAL() {
}
var handlers = {};
var REJECTED = ["REJECTED"];
var FULFILLED = ["FULFILLED"];
var PENDING = ["PENDING"];
module2.exports = Promise2;
function Promise2(resolver) {
if (typeof resolver !== "function") {
throw new TypeError("resolver must be a function");
}
this.state = PENDING;
this.queue = [];
this.outcome = void 0;
if (resolver !== INTERNAL) {
safelyResolveThenable(this, resolver);
}
}
Promise2.prototype["catch"] = function(onRejected) {
return this.then(null, onRejected);
};
Promise2.prototype.then = function(onFulfilled, onRejected) {
if (typeof onFulfilled !== "function" && this.state === FULFILLED || typeof onRejected !== "function" && this.state === REJECTED) {
return this;
}
var promise = new this.constructor(INTERNAL);
if (this.state !== PENDING) {
var resolver = this.state === FULFILLED ? onFulfilled : onRejected;
unwrap(promise, resolver, this.outcome);
} else {
this.queue.push(new QueueItem(promise, onFulfilled, onRejected));
}
return promise;
};
function QueueItem(promise, onFulfilled, onRejected) {
this.promise = promise;
if (typeof onFulfilled === "function") {
this.onFulfilled = onFulfilled;
this.callFulfilled = this.otherCallFulfilled;
}
if (typeof onRejected === "function") {
this.onRejected = onRejected;
this.callRejected = this.otherCallRejected;
}
}
QueueItem.prototype.callFulfilled = function(value) {
handlers.resolve(this.promise, value);
};
QueueItem.prototype.otherCallFulfilled = function(value) {
unwrap(this.promise, this.onFulfilled, value);
};
QueueItem.prototype.callRejected = function(value) {
handlers.reject(this.promise, value);
};
QueueItem.prototype.otherCallRejected = function(value) {
unwrap(this.promise, this.onRejected, value);
};
function unwrap(promise, func, value) {
immediate(function() {
var returnValue;
try {
returnValue = func(value);
} catch (e2) {
return handlers.reject(promise, e2);
}
if (returnValue === promise) {
handlers.reject(promise, new TypeError("Cannot resolve promise with itself"));
} else {
handlers.resolve(promise, returnValue);
}
});
}
handlers.resolve = function(self2, value) {
var result = tryCatch(getThen, value);
if (result.status === "error") {
return handlers.reject(self2, result.value);
}
var thenable = result.value;
if (thenable) {
safelyResolveThenable(self2, thenable);
} else {
self2.state = FULFILLED;
self2.outcome = value;
var i3 = -1;
var len = self2.queue.length;
while (++i3 < len) {
self2.queue[i3].callFulfilled(value);
}
}
return self2;
};
handlers.reject = function(self2, error) {
self2.state = REJECTED;
self2.outcome = error;
var i3 = -1;
var len = self2.queue.length;
while (++i3 < len) {
self2.queue[i3].callRejected(error);
}
return self2;
};
function getThen(obj) {
var then = obj && obj.then;
if (obj && (typeof obj === "object" || typeof obj === "function") && typeof then === "function") {
return function appyThen() {
then.apply(obj, arguments);
};
}
}
function safelyResolveThenable(self2, thenable) {
var called = false;
function onError(value) {
if (called) {
return;
}
called = true;
handlers.reject(self2, value);
}
function onSuccess(value) {
if (called) {
return;
}
called = true;
handlers.resolve(self2, value);
}
function tryToUnwrap() {
thenable(onSuccess, onError);
}
var result = tryCatch(tryToUnwrap);
if (result.status === "error") {
onError(result.value);
}
}
function tryCatch(func, value) {
var out = {};
try {
out.value = func(value);
out.status = "success";
} catch (e2) {
out.status = "error";
out.value = e2;
}
return out;
}
Promise2.resolve = resolve;
function resolve(value) {
if (value instanceof this) {
return value;
}
return handlers.resolve(new this(INTERNAL), value);
}
Promise2.reject = reject;
function reject(reason) {
var promise = new this(INTERNAL);
return handlers.reject(promise, reason);
}
Promise2.all = all;
function all(iterable) {
var self2 = this;
if (Object.prototype.toString.call(iterable) !== "[object Array]") {
return this.reject(new TypeError("must be an array"));
}
var len = iterable.length;
var called = false;
if (!len) {
return this.resolve([]);
}
var values = new Array(len);
var resolved = 0;
var i3 = -1;
var promise = new this(INTERNAL);
while (++i3 < len) {
allResolver(iterable[i3], i3);
}
return promise;
function allResolver(value, i4) {
self2.resolve(value).then(resolveFromAll, function(error) {
if (!called) {
called = true;
handlers.reject(promise, error);
}
});
function resolveFromAll(outValue) {
values[i4] = outValue;
if (++resolved === len && !called) {
called = true;
handlers.resolve(promise, values);
}
}
}
}
Promise2.race = race;
function race(iterable) {
var self2 = this;
if (Object.prototype.toString.call(iterable) !== "[object Array]") {
return this.reject(new TypeError("must be an array"));
}
var len = iterable.length;
var called = false;
if (!len) {
return this.resolve([]);
}
var i3 = -1;
var promise = new this(INTERNAL);
while (++i3 < len) {
resolver(iterable[i3]);
}
return promise;
function resolver(value) {
self2.resolve(value).then(function(response) {
if (!called) {
called = true;
handlers.resolve(promise, response);
}
}, function(error) {
if (!called) {
called = true;
handlers.reject(promise, error);
}
});
}
}
}, { "1": 1 }], 3: [function(_dereq_, module2, exports2) {
(function(global2) {
if (typeof global2.Promise !== "function") {
global2.Promise = _dereq_(2);
}
}).call(this, typeof commonjsGlobal !== "undefined" ? commonjsGlobal : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {});
}, { "2": 2 }], 4: [function(_dereq_, module2, exports2) {
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
return typeof obj;
} : function(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function getIDB() {
try {
if (typeof indexedDB !== "undefined") {
return indexedDB;
}
if (typeof webkitIndexedDB !== "undefined") {
return webkitIndexedDB;
}
if (typeof mozIndexedDB !== "undefined") {
return mozIndexedDB;
}
if (typeof OIndexedDB !== "undefined") {
return OIndexedDB;
}
if (typeof msIndexedDB !== "undefined") {
return msIndexedDB;
}
} catch (e2) {
return;
}
}
var idb = getIDB();
function isIndexedDBValid() {
try {
if (!idb || !idb.open) {
return false;
}
var isSafari = typeof openDatabase !== "undefined" && /(Safari|iPhone|iPad|iPod)/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) && !/BlackBerry/.test(navigator.platform);
var hasFetch = typeof fetch === "function" && fetch.toString().indexOf("[native code") !== -1;
return (!isSafari || hasFetch) && typeof indexedDB !== "undefined" && // some outdated implementations of IDB that appear on Samsung
// and HTC Android devices <4.4 are missing IDBKeyRange
// See: https://github.com/mozilla/localForage/issues/128
// See: https://github.com/mozilla/localForage/issues/272
typeof IDBKeyRange !== "undefined";
} catch (e2) {
return false;
}
}
function createBlob(parts, properties) {
parts = parts || [];
properties = properties || {};
try {
return new Blob(parts, properties);
} catch (e2) {
if (e2.name !== "TypeError") {
throw e2;
}
var Builder = typeof BlobBuilder !== "undefined" ? BlobBuilder : typeof MSBlobBuilder !== "undefined" ? MSBlobBuilder : typeof MozBlobBuilder !== "undefined" ? MozBlobBuilder : WebKitBlobBuilder;
var builder = new Builder();
for (var i3 = 0; i3 < parts.length; i3 += 1) {
builder.append(parts[i3]);
}
return builder.getBlob(properties.type);
}
}
if (typeof Promise === "undefined") {
_dereq_(3);
}
var Promise$1 = Promise;
function executeCallback(promise, callback) {
if (callback) {
promise.then(function(result) {
callback(null, result);
}, function(error) {
callback(error);
});
}
}
function executeTwoCallbacks(promise, callback, errorCallback) {
if (typeof callback === "function") {
promise.then(callback);
}
if (typeof errorCallback === "function") {
promise["catch"](errorCallback);
}
}
function normalizeKey(key3) {
if (typeof key3 !== "string") {
console.warn(key3 + " used as a key, but it is not a string.");
key3 = String(key3);
}
return key3;
}
function getCallback() {
if (arguments.length && typeof arguments[arguments.length - 1] === "function") {
return arguments[arguments.length - 1];
}
}
var DETECT_BLOB_SUPPORT_STORE = "local-forage-detect-blob-support";
var supportsBlobs = void 0;
var dbContexts = {};
var toString = Object.prototype.toString;
var READ_ONLY = "readonly";
var READ_WRITE = "readwrite";
function _binStringToArrayBuffer(bin) {
var length2 = bin.length;
var buf = new ArrayBuffer(length2);
var arr = new Uint8Array(buf);
for (var i3 = 0; i3 < length2; i3++) {
arr[i3] = bin.charCodeAt(i3);
}
return buf;
}
function _checkBlobSupportWithoutCaching(idb2) {
return new Promise$1(function(resolve) {
var txn = idb2.transaction(DETECT_BLOB_SUPPORT_STORE, READ_WRITE);
var blob = createBlob([""]);
txn.objectStore(DETECT_BLOB_SUPPORT_STORE).put(blob, "key");
txn.onabort = function(e2) {
e2.preventDefault();
e2.stopPropagation();
resolve(false);
};
txn.oncomplete = function() {
var matchedChrome = navigator.userAgent.match(/Chrome\/(\d+)/);
var matchedEdge = navigator.userAgent.match(/Edge\//);
resolve(matchedEdge || !matchedChrome || parseInt(matchedChrome[1], 10) >= 43);
};
})["catch"](function() {
return false;
});
}
function _checkBlobSupport(idb2) {
if (typeof supportsBlobs === "boolean") {
return Promise$1.resolve(supportsBlobs);
}
return _checkBlobSupportWithoutCaching(idb2).then(function(value) {
supportsBlobs = value;
return supportsBlobs;
});
}
function _deferReadiness(dbInfo) {
var dbContext = dbContexts[dbInfo.name];
var deferredOperation = {};
deferredOperation.promise = new Promise$1(function(resolve, reject) {
deferredOperation.resolve = resolve;
deferredOperation.reject = reject;
});
dbContext.deferredOperations.push(deferredOperation);
if (!dbContext.dbReady) {
dbContext.dbReady = deferredOperation.promise;
} else {
dbContext.dbReady = dbContext.dbReady.then(function() {
return deferredOperation.promise;
});
}
}
function _advanceReadiness(dbInfo) {
var dbContext = dbContexts[dbInfo.name];
var deferredOperation = dbContext.deferredOperations.pop();
if (deferredOperation) {
deferredOperation.resolve();
return deferredOperation.promise;
}
}
function _rejectReadiness(dbInfo, err) {
var dbContext = dbContexts[dbInfo.name];
var deferredOperation = dbContext.deferredOperations.pop();
if (deferredOperation) {
deferredOperation.reject(err);
return deferredOperation.promise;
}
}
function _getConnection(dbInfo, upgradeNeeded) {
return new Promise$1(function(resolve, reject) {
dbContexts[dbInfo.name] = dbContexts[dbInfo.name] || createDbContext();
if (dbInfo.db) {
if (upgradeNeeded) {
_deferReadiness(dbInfo);
dbInfo.db.close();
} else {
return resolve(dbInfo.db);
}
}
var dbArgs = [dbInfo.name];
if (upgradeNeeded) {
dbArgs.push(dbInfo.version);
}
var openreq = idb.open.apply(idb, dbArgs);
if (upgradeNeeded) {
openreq.onupgradeneeded = function(e2) {
var db = openreq.result;
try {
db.createObjectStore(dbInfo.storeName);
if (e2.oldVersion <= 1) {
db.createObjectStore(DETECT_BLOB_SUPPORT_STORE);
}
} catch (ex) {
if (ex.name === "ConstraintError") {
console.warn('The database "' + dbInfo.name + '" has been upgraded from version ' + e2.oldVersion + " to version " + e2.newVersion + ', but the storage "' + dbInfo.storeName + '" already exists.');
} else {
throw ex;
}
}
};
}
openreq.onerror = function(e2) {
e2.preventDefault();
reject(openreq.error);
};
openreq.onsuccess = function() {
var db = openreq.result;
db.onversionchange = function(e2) {
e2.target.close();
};
resolve(db);
_advanceReadiness(dbInfo);
};
});
}
function _getOriginalConnection(dbInfo) {
return _getConnection(dbInfo, false);
}
function _getUpgradedConnection(dbInfo) {
return _getConnection(dbInfo, true);
}
function _isUpgradeNeeded(dbInfo, defaultVersion) {
if (!dbInfo.db) {
return true;
}
var isNewStore = !dbInfo.db.objectStoreNames.contains(dbInfo.storeName);
var isDowngrade = dbInfo.version < dbInfo.db.version;
var isUpgrade = dbInfo.version > dbInfo.db.version;
if (isDowngrade) {
if (dbInfo.version !== defaultVersion) {
console.warn('The database "' + dbInfo.name + `" can't be downgraded from version ` + dbInfo.db.version + " to version " + dbInfo.version + ".");
}
dbInfo.version = dbInfo.db.version;
}
if (isUpgrade || isNewStore) {
if (isNewStore) {
var incVersion = dbInfo.db.version + 1;
if (incVersion > dbInfo.version) {
dbInfo.version = incVersion;
}
}
return true;
}
return false;
}
function _encodeBlob(blob) {
return new Promise$1(function(resolve, reject) {
var reader = new FileReader();
reader.onerror = reject;
reader.onloadend = function(e2) {
var base64 = btoa(e2.target.result || "");
resolve({
__local_forage_encoded_blob: true,
data: base64,
type: blob.type
});
};
reader.readAsBinaryString(blob);
});
}
function _decodeBlob(encodedBlob) {
var arrayBuff = _binStringToArrayBuffer(atob(encodedBlob.data));
return createBlob([arrayBuff], { type: encodedBlob.type });
}
function _isEncodedBlob(value) {
return value && value.__local_forage_encoded_blob;
}
function _fullyReady(callback) {
var self2 = this;
var promise = self2._initReady().then(function() {
var dbContext = dbContexts[self2._dbInfo.name];
if (dbContext && dbContext.dbReady) {
return dbContext.dbReady;
}
});
executeTwoCallbacks(promise, callback, callback);
return promise;
}
function _tryReconnect(dbInfo) {
_deferReadiness(dbInfo);
var dbContext = dbContexts[dbInfo.name];
var forages = dbContext.forages;
for (var i3 = 0; i3 < forages.length; i3++) {
var forage = forages[i3];
if (forage._dbInfo.db) {
forage._dbInfo.db.close();
forage._dbInfo.db = null;
}
}
dbInfo.db = null;
return _getOriginalConnection(dbInfo).then(function(db) {
dbInfo.db = db;
if (_isUpgradeNeeded(dbInfo)) {
return _getUpgradedConnection(dbInfo);
}
return db;
}).then(function(db) {
dbInfo.db = dbContext.db = db;
for (var i4 = 0; i4 < forages.length; i4++) {
forages[i4]._dbInfo.db = db;
}
})["catch"](function(err) {
_rejectReadiness(dbInfo, err);
throw err;
});
}
function createTransaction(dbInfo, mode, callback, retries) {
if (retries === void 0) {
retries = 1;
}
try {
var tx = dbInfo.db.transaction(dbInfo.storeName, mode);
callback(null, tx);
} catch (err) {
if (retries > 0 && (!dbInfo.db || err.name === "InvalidStateError" || err.name === "NotFoundError")) {
return Promise$1.resolve().then(function() {
if (!dbInfo.db || err.name === "NotFoundError" && !dbInfo.db.objectStoreNames.contains(dbInfo.storeName) && dbInfo.version <= dbInfo.db.version) {
if (dbInfo.db) {
dbInfo.version = dbInfo.db.version + 1;
}
return _getUpgradedConnection(dbInfo);
}
}).then(function() {
return _tryReconnect(dbInfo).then(function() {
createTransaction(dbInfo, mode, callback, retries - 1);
});
})["catch"](callback);
}
callback(err);
}
}
function createDbContext() {
return {
// Running localForages sharing a database.
forages: [],
// Shared database.
db: null,
// Database readiness (promise).
dbReady: null,
// Deferred operations on the database.
deferredOperations: []
};
}
function _initStorage(options) {
var self2 = this;
var dbInfo = {
db: null
};
if (options) {
for (var i3 in options) {
dbInfo[i3] = options[i3];
}
}
var dbContext = dbContexts[dbInfo.name];
if (!dbContext) {
dbContext = createDbContext();
dbContexts[dbInfo.name] = dbContext;
}
dbContext.forages.push(self2);
if (!self2._initReady) {
self2._initReady = self2.ready;
self2.ready = _fullyReady;
}
var initPromises = [];
function ignoreErrors() {
return Promise$1.resolve();
}
for (var j2 = 0; j2 < dbContext.forages.length; j2++) {
var forage = dbContext.forages[j2];
if (forage !== self2) {
initPromises.push(forage._initReady()["catch"](ignoreErrors));
}
}
var forages = dbContext.forages.slice(0);
return Promise$1.all(initPromises).then(function() {
dbInfo.db = dbContext.db;
return _getOriginalConnection(dbInfo);
}).then(function(db) {
dbInfo.db = db;
if (_isUpgradeNeeded(dbInfo, self2._defaultConfig.version)) {
return _getUpgradedConnection(dbInfo);
}
return db;
}).then(function(db) {
dbInfo.db = dbContext.db = db;
self2._dbInfo = dbInfo;
for (var k2 = 0; k2 < forages.length; k2++) {
var forage2 = forages[k2];
if (forage2 !== self2) {
forage2._dbInfo.db = dbInfo.db;
forage2._dbInfo.version = dbInfo.version;
}
}
});
}
function getItem(key3, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_ONLY, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var req = store.get(key3);
req.onsuccess = function() {
var value = req.result;
if (value === void 0) {
value = null;
}
if (_isEncodedBlob(value)) {
value = _decodeBlob(value);
}
resolve(value);
};
req.onerror = function() {
reject(req.error);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function iterate(iterator, callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_ONLY, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var req = store.openCursor();
var iterationNumber = 1;
req.onsuccess = function() {
var cursor = req.result;
if (cursor) {
var value = cursor.value;
if (_isEncodedBlob(value)) {
value = _decodeBlob(value);
}
var result = iterator(value, cursor.key, iterationNumber++);
if (result !== void 0) {
resolve(result);
} else {
cursor["continue"]();
}
} else {
resolve();
}
};
req.onerror = function() {
reject(req.error);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function setItem(key3, value, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = new Promise$1(function(resolve, reject) {
var dbInfo;
self2.ready().then(function() {
dbInfo = self2._dbInfo;
if (toString.call(value) === "[object Blob]") {
return _checkBlobSupport(dbInfo.db).then(function(blobSupport) {
if (blobSupport) {
return value;
}
return _encodeBlob(value);
});
}
return value;
}).then(function(value2) {
createTransaction(self2._dbInfo, READ_WRITE, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
if (value2 === null) {
value2 = void 0;
}
var req = store.put(value2, key3);
transaction.oncomplete = function() {
if (value2 === void 0) {
value2 = null;
}
resolve(value2);
};
transaction.onabort = transaction.onerror = function() {
var err2 = req.error ? req.error : req.transaction.error;
reject(err2);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function removeItem(key3, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_WRITE, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var req = store["delete"](key3);
transaction.oncomplete = function() {
resolve();
};
transaction.onerror = function() {
reject(req.error);
};
transaction.onabort = function() {
var err2 = req.error ? req.error : req.transaction.error;
reject(err2);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function clear(callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_WRITE, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var req = store.clear();
transaction.oncomplete = function() {
resolve();
};
transaction.onabort = transaction.onerror = function() {
var err2 = req.error ? req.error : req.transaction.error;
reject(err2);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function length(callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_ONLY, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var req = store.count();
req.onsuccess = function() {
resolve(req.result);
};
req.onerror = function() {
reject(req.error);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function key2(n3, callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
if (n3 < 0) {
resolve(null);
return;
}
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_ONLY, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var advanced = false;
var req = store.openKeyCursor();
req.onsuccess = function() {
var cursor = req.result;
if (!cursor) {
resolve(null);
return;
}
if (n3 === 0) {
resolve(cursor.key);
} else {
if (!advanced) {
advanced = true;
cursor.advance(n3);
} else {
resolve(cursor.key);
}
}
};
req.onerror = function() {
reject(req.error);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function keys(callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
createTransaction(self2._dbInfo, READ_ONLY, function(err, transaction) {
if (err) {
return reject(err);
}
try {
var store = transaction.objectStore(self2._dbInfo.storeName);
var req = store.openKeyCursor();
var keys2 = [];
req.onsuccess = function() {
var cursor = req.result;
if (!cursor) {
resolve(keys2);
return;
}
keys2.push(cursor.key);
cursor["continue"]();
};
req.onerror = function() {
reject(req.error);
};
} catch (e2) {
reject(e2);
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function dropInstance(options, callback) {
callback = getCallback.apply(this, arguments);
var currentConfig = this.config();
options = typeof options !== "function" && options || {};
if (!options.name) {
options.name = options.name || currentConfig.name;
options.storeName = options.storeName || currentConfig.storeName;
}
var self2 = this;
var promise;
if (!options.name) {
promise = Promise$1.reject("Invalid arguments");
} else {
var isCurrentDb = options.name === currentConfig.name && self2._dbInfo.db;
var dbPromise = isCurrentDb ? Promise$1.resolve(self2._dbInfo.db) : _getOriginalConnection(options).then(function(db) {
var dbContext = dbContexts[options.name];
var forages = dbContext.forages;
dbContext.db = db;
for (var i3 = 0; i3 < forages.length; i3++) {
forages[i3]._dbInfo.db = db;
}
return db;
});
if (!options.storeName) {
promise = dbPromise.then(function(db) {
_deferReadiness(options);
var dbContext = dbContexts[options.name];
var forages = dbContext.forages;
db.close();
for (var i3 = 0; i3 < forages.length; i3++) {
var forage = forages[i3];
forage._dbInfo.db = null;
}
var dropDBPromise = new Promise$1(function(resolve, reject) {
var req = idb.deleteDatabase(options.name);
req.onerror = function() {
var db2 = req.result;
if (db2) {
db2.close();
}
reject(req.error);
};
req.onblocked = function() {
console.warn('dropInstance blocked for database "' + options.name + '" until all open connections are closed');
};
req.onsuccess = function() {
var db2 = req.result;
if (db2) {
db2.close();
}
resolve(db2);
};
});
return dropDBPromise.then(function(db2) {
dbContext.db = db2;
for (var i4 = 0; i4 < forages.length; i4++) {
var _forage = forages[i4];
_advanceReadiness(_forage._dbInfo);
}
})["catch"](function(err) {
(_rejectReadiness(options, err) || Promise$1.resolve())["catch"](function() {
});
throw err;
});
});
} else {
promise = dbPromise.then(function(db) {
if (!db.objectStoreNames.contains(options.storeName)) {
return;
}
var newVersion = db.version + 1;
_deferReadiness(options);
var dbContext = dbContexts[options.name];
var forages = dbContext.forages;
db.close();
for (var i3 = 0; i3 < forages.length; i3++) {
var forage = forages[i3];
forage._dbInfo.db = null;
forage._dbInfo.version = newVersion;
}
var dropObjectPromise = new Promise$1(function(resolve, reject) {
var req = idb.open(options.name, newVersion);
req.onerror = function(err) {
var db2 = req.result;
db2.close();
reject(err);
};
req.onupgradeneeded = function() {
var db2 = req.result;
db2.deleteObjectStore(options.storeName);
};
req.onsuccess = function() {
var db2 = req.result;
db2.close();
resolve(db2);
};
});
return dropObjectPromise.then(function(db2) {
dbContext.db = db2;
for (var j2 = 0; j2 < forages.length; j2++) {
var _forage2 = forages[j2];
_forage2._dbInfo.db = db2;
_advanceReadiness(_forage2._dbInfo);
}
})["catch"](function(err) {
(_rejectReadiness(options, err) || Promise$1.resolve())["catch"](function() {
});
throw err;
});
});
}
}
executeCallback(promise, callback);
return promise;
}
var asyncStorage = {
_driver: "asyncStorage",
_initStorage,
_support: isIndexedDBValid(),
iterate,
getItem,
setItem,
removeItem,
clear,
length,
key: key2,
keys,
dropInstance
};
function isWebSQLValid() {
return typeof openDatabase === "function";
}
var BASE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var BLOB_TYPE_PREFIX = "~~local_forage_type~";
var BLOB_TYPE_PREFIX_REGEX = /^~~local_forage_type~([^~]+)~/;
var SERIALIZED_MARKER = "__lfsc__:";
var SERIALIZED_MARKER_LENGTH = SERIALIZED_MARKER.length;
var TYPE_ARRAYBUFFER = "arbf";
var TYPE_BLOB = "blob";
var TYPE_INT8ARRAY = "si08";
var TYPE_UINT8ARRAY = "ui08";
var TYPE_UINT8CLAMPEDARRAY = "uic8";
var TYPE_INT16ARRAY = "si16";
var TYPE_INT32ARRAY = "si32";
var TYPE_UINT16ARRAY = "ur16";
var TYPE_UINT32ARRAY = "ui32";
var TYPE_FLOAT32ARRAY = "fl32";
var TYPE_FLOAT64ARRAY = "fl64";
var TYPE_SERIALIZED_MARKER_LENGTH = SERIALIZED_MARKER_LENGTH + TYPE_ARRAYBUFFER.length;
var toString$1 = Object.prototype.toString;
function stringToBuffer(serializedString) {
var bufferLength = serializedString.length * 0.75;
var len = serializedString.length;
var i3;
var p2 = 0;
var encoded1, encoded2, encoded3, encoded4;
if (serializedString[serializedString.length - 1] === "=") {
bufferLength--;
if (serializedString[serializedString.length - 2] === "=") {
bufferLength--;
}
}
var buffer2 = new ArrayBuffer(bufferLength);
var bytes = new Uint8Array(buffer2);
for (i3 = 0; i3 < len; i3 += 4) {
encoded1 = BASE_CHARS.indexOf(serializedString[i3]);
encoded2 = BASE_CHARS.indexOf(serializedString[i3 + 1]);
encoded3 = BASE_CHARS.indexOf(serializedString[i3 + 2]);
encoded4 = BASE_CHARS.indexOf(serializedString[i3 + 3]);
bytes[p2++] = encoded1 << 2 | encoded2 >> 4;
bytes[p2++] = (encoded2 & 15) << 4 | encoded3 >> 2;
bytes[p2++] = (encoded3 & 3) << 6 | encoded4 & 63;
}
return buffer2;
}
function bufferToString(buffer2) {
var bytes = new Uint8Array(buffer2);
var base64String = "";
var i3;
for (i3 = 0; i3 < bytes.length; i3 += 3) {
base64String += BASE_CHARS[bytes[i3] >> 2];
base64String += BASE_CHARS[(bytes[i3] & 3) << 4 | bytes[i3 + 1] >> 4];
base64String += BASE_CHARS[(bytes[i3 + 1] & 15) << 2 | bytes[i3 + 2] >> 6];
base64String += BASE_CHARS[bytes[i3 + 2] & 63];
}
if (bytes.length % 3 === 2) {
base64String = base64String.substring(0, base64String.length - 1) + "=";
} else if (bytes.length % 3 === 1) {
base64String = base64String.substring(0, base64String.length - 2) + "==";
}
return base64String;
}
function serialize(value, callback) {
var valueType = "";
if (value) {
valueType = toString$1.call(value);
}
if (value && (valueType === "[object ArrayBuffer]" || value.buffer && toString$1.call(value.buffer) === "[object ArrayBuffer]")) {
var buffer2;
var marker = SERIALIZED_MARKER;
if (value instanceof ArrayBuffer) {
buffer2 = value;
marker += TYPE_ARRAYBUFFER;
} else {
buffer2 = value.buffer;
if (valueType === "[object Int8Array]") {
marker += TYPE_INT8ARRAY;
} else if (valueType === "[object Uint8Array]") {
marker += TYPE_UINT8ARRAY;
} else if (valueType === "[object Uint8ClampedArray]") {
marker += TYPE_UINT8CLAMPEDARRAY;
} else if (valueType === "[object Int16Array]") {
marker += TYPE_INT16ARRAY;
} else if (valueType === "[object Uint16Array]") {
marker += TYPE_UINT16ARRAY;
} else if (valueType === "[object Int32Array]") {
marker += TYPE_INT32ARRAY;
} else if (valueType === "[object Uint32Array]") {
marker += TYPE_UINT32ARRAY;
} else if (valueType === "[object Float32Array]") {
marker += TYPE_FLOAT32ARRAY;
} else if (valueType === "[object Float64Array]") {
marker += TYPE_FLOAT64ARRAY;
} else {
callback(new Error("Failed to get type for BinaryArray"));
}
}
callback(marker + bufferToString(buffer2));
} else if (valueType === "[object Blob]") {
var fileReader = new FileReader();
fileReader.onload = function() {
var str = BLOB_TYPE_PREFIX + value.type + "~" + bufferToString(this.result);
callback(SERIALIZED_MARKER + TYPE_BLOB + str);
};
fileReader.readAsArrayBuffer(value);
} else {
try {
callback(JSON.stringify(value));
} catch (e2) {
console.error("Couldn't convert value into a JSON string: ", value);
callback(null, e2);
}
}
}
function deserialize(value) {
if (value.substring(0, SERIALIZED_MARKER_LENGTH) !== SERIALIZED_MARKER) {
return JSON.parse(value);
}
var serializedString = value.substring(TYPE_SERIALIZED_MARKER_LENGTH);
var type = value.substring(SERIALIZED_MARKER_LENGTH, TYPE_SERIALIZED_MARKER_LENGTH);
var blobType;
if (type === TYPE_BLOB && BLOB_TYPE_PREFIX_REGEX.test(serializedString)) {
var matcher = serializedString.match(BLOB_TYPE_PREFIX_REGEX);
blobType = matcher[1];
serializedString = serializedString.substring(matcher[0].length);
}
var buffer2 = stringToBuffer(serializedString);
switch (type) {
case TYPE_ARRAYBUFFER:
return buffer2;
case TYPE_BLOB:
return createBlob([buffer2], { type: blobType });
case TYPE_INT8ARRAY:
return new Int8Array(buffer2);
case TYPE_UINT8ARRAY:
return new Uint8Array(buffer2);
case TYPE_UINT8CLAMPEDARRAY:
return new Uint8ClampedArray(buffer2);
case TYPE_INT16ARRAY:
return new Int16Array(buffer2);
case TYPE_UINT16ARRAY:
return new Uint16Array(buffer2);
case TYPE_INT32ARRAY:
return new Int32Array(buffer2);
case TYPE_UINT32ARRAY:
return new Uint32Array(buffer2);
case TYPE_FLOAT32ARRAY:
return new Float32Array(buffer2);
case TYPE_FLOAT64ARRAY:
return new Float64Array(buffer2);
default:
throw new Error("Unkown type: " + type);
}
}
var localforageSerializer = {
serialize,
deserialize,
stringToBuffer,
bufferToString
};
function createDbTable(t2, dbInfo, callback, errorCallback) {
t2.executeSql("CREATE TABLE IF NOT EXISTS " + dbInfo.storeName + " (id INTEGER PRIMARY KEY, key unique, value)", [], callback, errorCallback);
}
function _initStorage$1(options) {
var self2 = this;
var dbInfo = {
db: null
};
if (options) {
for (var i3 in options) {
dbInfo[i3] = typeof options[i3] !== "string" ? options[i3].toString() : options[i3];
}
}
var dbInfoPromise = new Promise$1(function(resolve, reject) {
try {
dbInfo.db = openDatabase(dbInfo.name, String(dbInfo.version), dbInfo.description, dbInfo.size);
} catch (e2) {
return reject(e2);
}
dbInfo.db.transaction(function(t2) {
createDbTable(t2, dbInfo, function() {
self2._dbInfo = dbInfo;
resolve();
}, function(t3, error) {
reject(error);
});
}, reject);
});
dbInfo.serializer = localforageSerializer;
return dbInfoPromise;
}
function tryExecuteSql(t2, dbInfo, sqlStatement, args, callback, errorCallback) {
t2.executeSql(sqlStatement, args, callback, function(t3, error) {
if (error.code === error.SYNTAX_ERR) {
t3.executeSql("SELECT name FROM sqlite_master WHERE type='table' AND name = ?", [dbInfo.storeName], function(t4, results) {
if (!results.rows.length) {
createDbTable(t4, dbInfo, function() {
t4.executeSql(sqlStatement, args, callback, errorCallback);
}, errorCallback);
} else {
errorCallback(t4, error);
}
}, errorCallback);
} else {
errorCallback(t3, error);
}
}, errorCallback);
}
function getItem$1(key3, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "SELECT * FROM " + dbInfo.storeName + " WHERE key = ? LIMIT 1", [key3], function(t3, results) {
var result = results.rows.length ? results.rows.item(0).value : null;
if (result) {
result = dbInfo.serializer.deserialize(result);
}
resolve(result);
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function iterate$1(iterator, callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "SELECT * FROM " + dbInfo.storeName, [], function(t3, results) {
var rows = results.rows;
var length2 = rows.length;
for (var i3 = 0; i3 < length2; i3++) {
var item = rows.item(i3);
var result = item.value;
if (result) {
result = dbInfo.serializer.deserialize(result);
}
result = iterator(result, item.key, i3 + 1);
if (result !== void 0) {
resolve(result);
return;
}
}
resolve();
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function _setItem(key3, value, callback, retriesLeft) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
if (value === void 0) {
value = null;
}
var originalValue = value;
var dbInfo = self2._dbInfo;
dbInfo.serializer.serialize(value, function(value2, error) {
if (error) {
reject(error);
} else {
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "INSERT OR REPLACE INTO " + dbInfo.storeName + " (key, value) VALUES (?, ?)", [key3, value2], function() {
resolve(originalValue);
}, function(t3, error2) {
reject(error2);
});
}, function(sqlError) {
if (sqlError.code === sqlError.QUOTA_ERR) {
if (retriesLeft > 0) {
resolve(_setItem.apply(self2, [key3, originalValue, callback, retriesLeft - 1]));
return;
}
reject(sqlError);
}
});
}
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function setItem$1(key3, value, callback) {
return _setItem.apply(this, [key3, value, callback, 1]);
}
function removeItem$1(key3, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "DELETE FROM " + dbInfo.storeName + " WHERE key = ?", [key3], function() {
resolve();
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function clear$1(callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "DELETE FROM " + dbInfo.storeName, [], function() {
resolve();
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function length$1(callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "SELECT COUNT(key) as c FROM " + dbInfo.storeName, [], function(t3, results) {
var result = results.rows.item(0).c;
resolve(result);
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function key$12(n3, callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "SELECT key FROM " + dbInfo.storeName + " WHERE id = ? LIMIT 1", [n3 + 1], function(t3, results) {
var result = results.rows.length ? results.rows.item(0).key : null;
resolve(result);
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function keys$1(callback) {
var self2 = this;
var promise = new Promise$1(function(resolve, reject) {
self2.ready().then(function() {
var dbInfo = self2._dbInfo;
dbInfo.db.transaction(function(t2) {
tryExecuteSql(t2, dbInfo, "SELECT key FROM " + dbInfo.storeName, [], function(t3, results) {
var keys2 = [];
for (var i3 = 0; i3 < results.rows.length; i3++) {
keys2.push(results.rows.item(i3).key);
}
resolve(keys2);
}, function(t3, error) {
reject(error);
});
});
})["catch"](reject);
});
executeCallback(promise, callback);
return promise;
}
function getAllStoreNames(db) {
return new Promise$1(function(resolve, reject) {
db.transaction(function(t2) {
t2.executeSql("SELECT name FROM sqlite_master WHERE type='table' AND name <> '__WebKitDatabaseInfoTable__'", [], function(t3, results) {
var storeNames = [];
for (var i3 = 0; i3 < results.rows.length; i3++) {
storeNames.push(results.rows.item(i3).name);
}
resolve({
db,
storeNames
});
}, function(t3, error) {
reject(error);
});
}, function(sqlError) {
reject(sqlError);
});
});
}
function dropInstance$1(options, callback) {
callback = getCallback.apply(this, arguments);
var currentConfig = this.config();
options = typeof options !== "function" && options || {};
if (!options.name) {
options.name = options.name || currentConfig.name;
options.storeName = options.storeName || currentConfig.storeName;
}
var self2 = this;
var promise;
if (!options.name) {
promise = Promise$1.reject("Invalid arguments");
} else {
promise = new Promise$1(function(resolve) {
var db;
if (options.name === currentConfig.name) {
db = self2._dbInfo.db;
} else {
db = openDatabase(options.name, "", "", 0);
}
if (!options.storeName) {
resolve(getAllStoreNames(db));
} else {
resolve({
db,
storeNames: [options.storeName]
});
}
}).then(function(operationInfo) {
return new Promise$1(function(resolve, reject) {
operationInfo.db.transaction(function(t2) {
function dropTable(storeName) {
return new Promise$1(function(resolve2, reject2) {
t2.executeSql("DROP TABLE IF EXISTS " + storeName, [], function() {
resolve2();
}, function(t3, error) {
reject2(error);
});
});
}
var operations = [];
for (var i3 = 0, len = operationInfo.storeNames.length; i3 < len; i3++) {
operations.push(dropTable(operationInfo.storeNames[i3]));
}
Promise$1.all(operations).then(function() {
resolve();
})["catch"](function(e2) {
reject(e2);
});
}, function(sqlError) {
reject(sqlError);
});
});
});
}
executeCallback(promise, callback);
return promise;
}
var webSQLStorage = {
_driver: "webSQLStorage",
_initStorage: _initStorage$1,
_support: isWebSQLValid(),
iterate: iterate$1,
getItem: getItem$1,
setItem: setItem$1,
removeItem: removeItem$1,
clear: clear$1,
length: length$1,
key: key$12,
keys: keys$1,
dropInstance: dropInstance$1
};
function isLocalStorageValid() {
try {
return typeof localStorage !== "undefined" && "setItem" in localStorage && // in IE8 typeof localStorage.setItem === 'object'
!!localStorage.setItem;
} catch (e2) {
return false;
}
}
function _getKeyPrefix(options, defaultConfig) {
var keyPrefix = options.name + "/";
if (options.storeName !== defaultConfig.storeName) {
keyPrefix += options.storeName + "/";
}
return keyPrefix;
}
function checkIfLocalStorageThrows() {
var localStorageTestKey = "_localforage_support_test";
try {
localStorage.setItem(localStorageTestKey, true);
localStorage.removeItem(localStorageTestKey);
return false;
} catch (e2) {
return true;
}
}
function _isLocalStorageUsable() {
return !checkIfLocalStorageThrows() || localStorage.length > 0;
}
function _initStorage$2(options) {
var self2 = this;
var dbInfo = {};
if (options) {
for (var i3 in options) {
dbInfo[i3] = options[i3];
}
}
dbInfo.keyPrefix = _getKeyPrefix(options, self2._defaultConfig);
if (!_isLocalStorageUsable()) {
return Promise$1.reject();
}
self2._dbInfo = dbInfo;
dbInfo.serializer = localforageSerializer;
return Promise$1.resolve();
}
function clear$2(callback) {
var self2 = this;
var promise = self2.ready().then(function() {
var keyPrefix = self2._dbInfo.keyPrefix;
for (var i3 = localStorage.length - 1; i3 >= 0; i3--) {
var key3 = localStorage.key(i3);
if (key3.indexOf(keyPrefix) === 0) {
localStorage.removeItem(key3);
}
}
});
executeCallback(promise, callback);
return promise;
}
function getItem$2(key3, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = self2.ready().then(function() {
var dbInfo = self2._dbInfo;
var result = localStorage.getItem(dbInfo.keyPrefix + key3);
if (result) {
result = dbInfo.serializer.deserialize(result);
}
return result;
});
executeCallback(promise, callback);
return promise;
}
function iterate$2(iterator, callback) {
var self2 = this;
var promise = self2.ready().then(function() {
var dbInfo = self2._dbInfo;
var keyPrefix = dbInfo.keyPrefix;
var keyPrefixLength = keyPrefix.length;
var length2 = localStorage.length;
var iterationNumber = 1;
for (var i3 = 0; i3 < length2; i3++) {
var key3 = localStorage.key(i3);
if (key3.indexOf(keyPrefix) !== 0) {
continue;
}
var value = localStorage.getItem(key3);
if (value) {
value = dbInfo.serializer.deserialize(value);
}
value = iterator(value, key3.substring(keyPrefixLength), iterationNumber++);
if (value !== void 0) {
return value;
}
}
});
executeCallback(promise, callback);
return promise;
}
function key$2(n3, callback) {
var self2 = this;
var promise = self2.ready().then(function() {
var dbInfo = self2._dbInfo;
var result;
try {
result = localStorage.key(n3);
} catch (error) {
result = null;
}
if (result) {
result = result.substring(dbInfo.keyPrefix.length);
}
return result;
});
executeCallback(promise, callback);
return promise;
}
function keys$2(callback) {
var self2 = this;
var promise = self2.ready().then(function() {
var dbInfo = self2._dbInfo;
var length2 = localStorage.length;
var keys2 = [];
for (var i3 = 0; i3 < length2; i3++) {
var itemKey = localStorage.key(i3);
if (itemKey.indexOf(dbInfo.keyPrefix) === 0) {
keys2.push(itemKey.substring(dbInfo.keyPrefix.length));
}
}
return keys2;
});
executeCallback(promise, callback);
return promise;
}
function length$2(callback) {
var self2 = this;
var promise = self2.keys().then(function(keys2) {
return keys2.length;
});
executeCallback(promise, callback);
return promise;
}
function removeItem$2(key3, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = self2.ready().then(function() {
var dbInfo = self2._dbInfo;
localStorage.removeItem(dbInfo.keyPrefix + key3);
});
executeCallback(promise, callback);
return promise;
}
function setItem$2(key3, value, callback) {
var self2 = this;
key3 = normalizeKey(key3);
var promise = self2.ready().then(function() {
if (value === void 0) {
value = null;
}
var originalValue = value;
return new Promise$1(function(resolve, reject) {
var dbInfo = self2._dbInfo;
dbInfo.serializer.serialize(value, function(value2, error) {
if (error) {
reject(error);
} else {
try {
localStorage.setItem(dbInfo.keyPrefix + key3, value2);
resolve(originalValue);
} catch (e2) {
if (e2.name === "QuotaExceededError" || e2.name === "NS_ERROR_DOM_QUOTA_REACHED") {
reject(e2);
}
reject(e2);
}
}
});
});
});
executeCallback(promise, callback);
return promise;
}
function dropInstance$2(options, callback) {
callback = getCallback.apply(this, arguments);
options = typeof options !== "function" && options || {};
if (!options.name) {
var currentConfig = this.config();
options.name = options.name || currentConfig.name;
options.storeName = options.storeName || currentConfig.storeName;
}
var self2 = this;
var promise;
if (!options.name) {
promise = Promise$1.reject("Invalid arguments");
} else {
promise = new Promise$1(function(resolve) {
if (!options.storeName) {
resolve(options.name + "/");
} else {
resolve(_getKeyPrefix(options, self2._defaultConfig));
}
}).then(function(keyPrefix) {
for (var i3 = localStorage.length - 1; i3 >= 0; i3--) {
var key3 = localStorage.key(i3);
if (key3.indexOf(keyPrefix) === 0) {
localStorage.removeItem(key3);
}
}
});
}
executeCallback(promise, callback);
return promise;
}
var localStorageWrapper = {
_driver: "localStorageWrapper",
_initStorage: _initStorage$2,
_support: isLocalStorageValid(),
iterate: iterate$2,
getItem: getItem$2,
setItem: setItem$2,
removeItem: removeItem$2,
clear: clear$2,
length: length$2,
key: key$2,
keys: keys$2,
dropInstance: dropInstance$2
};
var sameValue = function sameValue2(x2, y2) {
return x2 === y2 || typeof x2 === "number" && typeof y2 === "number" && isNaN(x2) && isNaN(y2);
};
var includes = function includes2(array, searchElement) {
var len = array.length;
var i3 = 0;
while (i3 < len) {
if (sameValue(array[i3], searchElement)) {
return true;
}
i3++;
}
return false;
};
var isArray = Array.isArray || function(arg) {
return Object.prototype.toString.call(arg) === "[object Array]";
};
var DefinedDrivers = {};
var DriverSupport = {};
var DefaultDrivers = {
INDEXEDDB: asyncStorage,
WEBSQL: webSQLStorage,
LOCALSTORAGE: localStorageWrapper
};
var DefaultDriverOrder = [DefaultDrivers.INDEXEDDB._driver, DefaultDrivers.WEBSQL._driver, DefaultDrivers.LOCALSTORAGE._driver];
var OptionalDriverMethods = ["dropInstance"];
var LibraryMethods = ["clear", "getItem", "iterate", "key", "keys", "length", "removeItem", "setItem"].concat(OptionalDriverMethods);
var DefaultConfig = {
description: "",
driver: DefaultDriverOrder.slice(),
name: "localforage",
// Default DB size is _JUST UNDER_ 5MB, as it's the highest size
// we can use without a prompt.
size: 4980736,
storeName: "keyvaluepairs",
version: 1
};
function callWhenReady(localForageInstance, libraryMethod) {
localForageInstance[libraryMethod] = function() {
var _args = arguments;
return localForageInstance.ready().then(function() {
return localForageInstance[libraryMethod].apply(localForageInstance, _args);
});
};
}
function extend2() {
for (var i3 = 1; i3 < arguments.length; i3++) {
var arg = arguments[i3];
if (arg) {
for (var _key in arg) {
if (arg.hasOwnProperty(_key)) {
if (isArray(arg[_key])) {
arguments[0][_key] = arg[_key].slice();
} else {
arguments[0][_key] = arg[_key];
}
}
}
}
}
return arguments[0];
}
var LocalForage = function() {
function LocalForage2(options) {
_classCallCheck(this, LocalForage2);
for (var driverTypeKey in DefaultDrivers) {
if (DefaultDrivers.hasOwnProperty(driverTypeKey)) {
var driver = DefaultDrivers[driverTypeKey];
var driverName = driver._driver;
this[driverTypeKey] = driverName;
if (!DefinedDrivers[driverName]) {
this.defineDriver(driver);
}
}
}
this._defaultConfig = extend2({}, DefaultConfig);
this._config = extend2({}, this._defaultConfig, options);
this._driverSet = null;
this._initDriver = null;
this._ready = false;
this._dbInfo = null;
this._wrapLibraryMethodsWithReady();
this.setDriver(this._config.driver)["catch"](function() {
});
}
LocalForage2.prototype.config = function config(options) {
if ((typeof options === "undefined" ? "undefined" : _typeof(options)) === "object") {
if (this._ready) {
return new Error("Can't call config() after localforage has been used.");
}
for (var i3 in options) {
if (i3 === "storeName") {
options[i3] = options[i3].replace(/\W/g, "_");
}
if (i3 === "version" && typeof options[i3] !== "number") {
return new Error("Database version must be a number.");
}
this._config[i3] = options[i3];
}
if ("driver" in options && options.driver) {
return this.setDriver(this._config.driver);
}
return true;
} else if (typeof options === "string") {
return this._config[options];
} else {
return this._config;
}
};
LocalForage2.prototype.defineDriver = function defineDriver(driverObject, callback, errorCallback) {
var promise = new Promise$1(function(resolve, reject) {
try {
var driverName = driverObject._driver;
var complianceError = new Error("Custom driver not compliant; see https://mozilla.github.io/localForage/#definedriver");
if (!driverObject._driver) {
reject(complianceError);
return;
}
var driverMethods = LibraryMethods.concat("_initStorage");
for (var i3 = 0, len = driverMethods.length; i3 < len; i3++) {
var driverMethodName = driverMethods[i3];
var isRequired = !includes(OptionalDriverMethods, driverMethodName);
if ((isRequired || driverObject[driverMethodName]) && typeof driverObject[driverMethodName] !== "function") {
reject(complianceError);
return;
}
}
var configureMissingMethods = function configureMissingMethods2() {
var methodNotImplementedFactory = function methodNotImplementedFactory2(methodName) {
return function() {
var error = new Error("Method " + methodName + " is not implemented by the current driver");
var promise2 = Promise$1.reject(error);
executeCallback(promise2, arguments[arguments.length - 1]);
return promise2;
};
};
for (var _i = 0, _len = OptionalDriverMethods.length; _i < _len; _i++) {
var optionalDriverMethod = OptionalDriverMethods[_i];
if (!driverObject[optionalDriverMethod]) {
driverObject[optionalDriverMethod] = methodNotImplementedFactory(optionalDriverMethod);
}
}
};
configureMissingMethods();
var setDriverSupport = function setDriverSupport2(support) {
if (DefinedDrivers[driverName]) {
console.info("Redefining LocalForage driver: " + driverName);
}
DefinedDrivers[driverName] = driverObject;
DriverSupport[driverName] = support;
resolve();
};
if ("_support" in driverObject) {
if (driverObject._support && typeof driverObject._support === "function") {
driverObject._support().then(setDriverSupport, reject);
} else {
setDriverSupport(!!driverObject._support);
}
} else {
setDriverSupport(true);
}
} catch (e2) {
reject(e2);
}
});
executeTwoCallbacks(promise, callback, errorCallback);
return promise;
};
LocalForage2.prototype.driver = function driver() {
return this._driver || null;
};
LocalForage2.prototype.getDriver = function getDriver(driverName, callback, errorCallback) {
var getDriverPromise = DefinedDrivers[driverName] ? Promise$1.resolve(DefinedDrivers[driverName]) : Promise$1.reject(new Error("Driver not found."));
executeTwoCallbacks(getDriverPromise, callback, errorCallback);
return getDriverPromise;
};
LocalForage2.prototype.getSerializer = function getSerializer(callback) {
var serializerPromise = Promise$1.resolve(localforageSerializer);
executeTwoCallbacks(serializerPromise, callback);
return serializerPromise;
};
LocalForage2.prototype.ready = function ready(callback) {
var self2 = this;
var promise = self2._driverSet.then(function() {
if (self2._ready === null) {
self2._ready = self2._initDriver();
}
return self2._ready;
});
executeTwoCallbacks(promise, callback, callback);
return promise;
};
LocalForage2.prototype.setDriver = function setDriver(drivers, callback, errorCallback) {
var self2 = this;
if (!isArray(drivers)) {
drivers = [drivers];
}
var supportedDrivers = this._getSupportedDrivers(drivers);
function setDriverToConfig() {
self2._config.driver = self2.driver();
}
function extendSelfWithDriver(driver) {
self2._extend(driver);
setDriverToConfig();
self2._ready = self2._initStorage(self2._config);
return self2._ready;
}
function initDriver(supportedDrivers2) {
return function() {
var currentDriverIndex = 0;
function driverPromiseLoop() {
while (currentDriverIndex < supportedDrivers2.length) {
var driverName = supportedDrivers2[currentDriverIndex];
currentDriverIndex++;
self2._dbInfo = null;
self2._ready = null;
return self2.getDriver(driverName).then(extendSelfWithDriver)["catch"](driverPromiseLoop);
}
setDriverToConfig();
var error = new Error("No available storage method found.");
self2._driverSet = Promise$1.reject(error);
return self2._driverSet;
}
return driverPromiseLoop();
};
}
var oldDriverSetDone = this._driverSet !== null ? this._driverSet["catch"](function() {
return Promise$1.resolve();
}) : Promise$1.resolve();
this._driverSet = oldDriverSetDone.then(function() {
var driverName = supportedDrivers[0];
self2._dbInfo = null;
self2._ready = null;
return self2.getDriver(driverName).then(function(driver) {
self2._driver = driver._driver;
setDriverToConfig();
self2._wrapLibraryMethodsWithReady();
self2._initDriver = initDriver(supportedDrivers);
});
})["catch"](function() {
setDriverToConfig();
var error = new Error("No available storage method found.");
self2._driverSet = Promise$1.reject(error);
return self2._driverSet;
});
executeTwoCallbacks(this._driverSet, callback, errorCallback);
return this._driverSet;
};
LocalForage2.prototype.supports = function supports(driverName) {
return !!DriverSupport[driverName];
};
LocalForage2.prototype._extend = function _extend(libraryMethodsAndProperties) {
extend2(this, libraryMethodsAndProperties);
};
LocalForage2.prototype._getSupportedDrivers = function _getSupportedDrivers(drivers) {
var supportedDrivers = [];
for (var i3 = 0, len = drivers.length; i3 < len; i3++) {
var driverName = drivers[i3];
if (this.supports(driverName)) {
supportedDrivers.push(driverName);
}
}
return supportedDrivers;
};
LocalForage2.prototype._wrapLibraryMethodsWithReady = function _wrapLibraryMethodsWithReady() {
for (var i3 = 0, len = LibraryMethods.length; i3 < len; i3++) {
callWhenReady(this, LibraryMethods[i3]);
}
};
LocalForage2.prototype.createInstance = function createInstance(options) {
return new LocalForage2(options);
};
return LocalForage2;
}();
var localforage_js = new LocalForage();
module2.exports = localforage_js;
}, { "3": 3 }] }, {}, [4])(4);
});
})(localforage$1);
var localforageExports = localforage$1.exports;
const localforage = /* @__PURE__ */ getDefaultExportFromCjs(localforageExports);
const snapshotStorage = localforage.createInstance({
name: "snapshot",
version: 1
});
const simplyActivityIds = async (snapshotId) => {
const snapshotInfo = await snapshotStorage.getItem(snapshotId);
if (snapshotInfo == null ? void 0 : snapshotInfo.activityId.startsWith(snapshotInfo.appId)) {
const simplyActivityIds2 = snapshotInfo.activityId.replace(snapshotInfo.appId, "");
return simplyActivityIds2;
} else return false;
};
const editNode = async (snapshotId, nodeId, options) => {
try {
const snapshotInfo = await snapshotStorage.getItem(snapshotId);
const nodes = snapshotInfo.nodes;
const nodeAttr = nodes[nodeId].attr;
options.forEach((option) => nodeAttr[option.target] = option.value);
nodes[nodeId].attr = nodeAttr;
snapshotInfo.nodes = nodes;
await snapshotStorage.setItem(snapshotId, snapshotInfo);
return true;
} catch {
return false;
}
};
const getSnapshotId = () => {
return location.pathname.split("/")[2];
};
const replaceNodeInfo = () => {
const snapshotId = getSnapshotId();
const nodeId = Number(document.querySelectorAll("tr > td > span")[23].textContent);
editNode(snapshotId, nodeId, [
{
target: "text",
value: "本节点信息已由 GKD网页审查工具增强 脚本修改"
},
{
target: "desc",
value: "本节点信息已由 GKD网页审查工具增强 脚本修改"
}
]).then((result) => {
if (result) snackbar({
message: "修改成功!你可以选择上传获取导入链接或下载快照分享",
placement: "top"
});
});
};
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);
});
observeElement(".z-1.box-shadow-dim.bg-white", () => {
const app = document.querySelector("#app");
const editNodeIcon = document.createElement("mdui-fab");
editNodeIcon.icon = "edit";
editNodeIcon.variant = "secondary";
editNodeIcon.extended = true;
editNodeIcon.textContent = "替换当前节点信息";
editNodeIcon.style.right = "16px";
editNodeIcon.style.bottom = "120px";
editNodeIcon.setAttribute("fixed", "");
editNodeIcon.onclick = replaceNodeInfo;
app.append(editNodeIcon);
});
const iArrayToArray = (array = []) => {
return Array().concat(array);
};
const groupsKeyOrder = [
"key",
"name",
"desc",
"matchTime",
"actionMaximum",
"resetMatch",
"rules"
];
const rulesKeyOrder = [
"key",
"preKeys",
"fastQuery",
"quickFind",
"activityIds",
"position",
"matches",
"exampleUrls",
"snapshotUrls"
];
const sort = (groups) => {
const groupsKeyValue = [];
const rulesKeyValue = [];
groupsKeyOrder.forEach((groupsKey) => {
if (groups[groupsKey] !== void 0) groupsKeyValue.push(groups[groupsKey]);
else groupsKeyValue.push(void 0);
});
rulesKeyOrder.forEach((rulesKey) => {
if (groups.rules[0][rulesKey] !== void 0) rulesKeyValue.push(groups.rules[0][rulesKey]);
else rulesKeyValue.push(void 0);
});
const sortedRules = {
key: rulesKeyValue[0],
preKeys: rulesKeyValue[1],
fastQuery: rulesKeyValue[2],
quickFind: rulesKeyValue[3],
activityIds: rulesKeyValue[4],
position: rulesKeyValue[5],
matches: rulesKeyValue[6],
exampleUrls: rulesKeyValue[7],
snapshotUrls: rulesKeyValue[8]
};
const sortedGroups = {
key: groupsKeyValue[0],
name: groupsKeyValue[1],
desc: groupsKeyValue[2],
matchTime: groupsKeyValue[3],
actionMaximum: groupsKeyValue[4],
resetMatch: groupsKeyValue[5],
rules: [sortedRules]
};
return sortedGroups;
};
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 = async () => {
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 preKeys = document.querySelector("#preKeys").value;
const position = document.querySelector("#position").value;
const isSimplyActivityIds = window.localStorage.getItem("activityIdsSimply");
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}`;
if (category == "开屏广告") {
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 (preKeys) {
const preKeysArray = preKeys.split(",");
const preKeysNumberArray = [];
preKeysArray.forEach((preKey) => {
preKeysNumberArray.push(Number(preKey));
});
const rule = iArrayToArray(origin.groups[0].rules)[0];
rule.preKeys = preKeysNumberArray;
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;
}
}
if (isSimplyActivityIds === "true") {
const snapshotId = getSnapshotId();
const rule = iArrayToArray(origin.groups[0].rules)[0];
const result = await simplyActivityIds(snapshotId);
if (result && rule.activityIds) {
rule.activityIds = result;
origin.groups[0].rules = [rule];
}
}
origin.groups[0] = sort(origin.groups[0]);
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: {
async finish() {
await 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 = ["placeholder"];
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1$3, [
_cache[4] || (_cache[4] = 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" checked></mdui-switch><span class="introduction">使用fastQuery替换quickFind</span></div>', 5)),
vue.createElementVNode("div", null, [
_cache[2] || (_cache[2] = vue.createElementVNode("span", null, "修改key值为:", -1)),
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)
]),
_cache[5] || (_cache[5] = vue.createElementVNode("div", null, [
vue.createElementVNode("span", null, "修改preKeys值为:"),
vue.createElementVNode("mdui-text-field", {
id: "preKeys",
variant: "filled",
label: "preKeys",
placeholder: "填写多个以英文逗号分隔的数字",
helper: "失焦保存"
})
], -1)),
_cache[6] || (_cache[6] = vue.createElementVNode("div", null, [
vue.createElementVNode("span", null, "坐标:"),
vue.createElementVNode("mdui-text-field", {
variant: "filled",
id: "position",
label: "坐标",
placeholder: "填入[top,left,right,bottom]的合法坐标,空出无用项"
})
], -1)),
vue.createElementVNode("div", null, [
_cache[3] || (_cache[3] = vue.createElementVNode("span", null, "规则组名称:", -1)),
vue.createElementVNode("mdui-text-field", {
id: "ruleName",
variant: "filled",
label: "名称",
placeholder: _ctx.originRule.groups[0].name
}, null, 8, _hoisted_2)
]),
_cache[7] || (_cache[7] = vue.createElementVNode("div", null, [
vue.createElementVNode("span", null, "规则组描述:"),
vue.createElementVNode("mdui-text-field", {
id: "ruleDesc",
variant: "filled",
label: "描述",
placeholder: "没有描述不填"
})
], -1)),
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;
const isActivityIdsSimply = document.querySelector("#activityIdsSimply").checked;
window.localStorage.setItem("categories", document.querySelector("#categories").value);
window.localStorage.setItem("simplyName", isSimplyName ? "true" : "false");
window.localStorage.setItem("autoAddSelector", isAutoAddSelector ? "true" : "false");
window.localStorage.setItem("activityIdsSimply", isActivityIdsSimply ? "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": ""
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1$2, [
_cache[1] || (_cache[1] = vue.createElementVNode("div", null, [
vue.createElementVNode("span", null, "分类设置:"),
vue.createElementVNode("mdui-text-field", {
variant: "filled",
id: "categories",
label: "分类",
placeholder: "填入合法的分类",
rows: "10"
})
], -1)),
_cache[2] || (_cache[2] = vue.createStaticVNode('<div><span>name属性复制优化:</span><mdui-switch id="simplyName"></mdui-switch><span class="introduction">在复制name属性时,会自动优化复制的内容。如复制 android.widget.TextView 时会优化为 TextView</span></div><div><span>选择器分享自动添加快捷搜索:</span><mdui-switch id="autoAddSelector"></mdui-switch><span class="introduction">在分享选择器时,自动添加到快捷搜索列表中</span></div><div><span>activityIds规则复制优化:</span><mdui-switch id="activityIdsSimply"></mdui-switch><span class="introduction">在复制规则代码时,若activityIds满足简写条件时,使用简写</span></div>', 3)),
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": ""
};
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1$1, [
_cache[1] || (_cache[1] = vue.createElementVNode("div", null, [
vue.createElementVNode("span", null, "选择选择器:"),
vue.createElementVNode("mdui-radio-group", { id: "selectors" })
], -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": ""
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("mdui-dialog", _hoisted_1, [
_cache[7] || (_cache[7] = vue.createElementVNode("div", null, [
vue.createElementVNode("span", null, "选择选择器:"),
vue.createElementVNode("mdui-radio-group", { id: "selectors" })
], -1)),
vue.createElementVNode("div", null, [
_cache[3] || (_cache[3] = vue.createElementVNode("span", null, "备注:", -1)),
vue.createElementVNode("mdui-text-field", {
variant: "filled",
id: "name",
label: "备注",
onChange: _cache[0] || (_cache[0] = (...args) => _ctx.editSelector && _ctx.editSelector(...args))
}, null, 32),
_cache[4] || (_cache[4] = vue.createElementVNode("span", { class: "introduction" }, "失焦保存", -1))
]),
vue.createElementVNode("div", null, [
_cache[5] || (_cache[5] = vue.createElementVNode("span", null, "选择器:", -1)),
vue.createElementVNode("mdui-text-field", {
variant: "filled",
id: "selector",
label: "选择器",
onChange: _cache[1] || (_cache[1] = (...args) => _ctx.editSelector && _ctx.editSelector(...args))
}, null, 32),
_cache[6] || (_cache[6] = vue.createElementVNode("span", { class: "introduction" }, "留空删除。失焦保存", -1))
]),
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);