@schalkneethling/miyagi-core 4.5.1 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/iframe.css +1 -1
- package/dist/css/main.css +1 -1
- package/dist/js/iframe.js +1 -1
- package/dist/js/main.build.js +1 -1
- package/dist/js/main.js +1 -1
- package/frontend/assets/css/main/controls.css +91 -0
- package/frontend/assets/css/main.css +5 -1
- package/frontend/assets/css/tokens.css +7 -0
- package/frontend/assets/js/_controls.js +206 -0
- package/frontend/assets/js/_main.js +2 -0
- package/frontend/assets/js/_socket.js +23 -0
- package/frontend/assets/js/iframe.js +12 -0
- package/frontend/views/component_variation.twig.miyagi +3 -0
- package/frontend/views/main.twig.miyagi +9 -0
- package/lib/init/router.js +56 -1
- package/lib/render/helpers/apply-overrides.js +36 -0
- package/lib/render/views/iframe/variation.js +19 -1
- package/lib/render/views/iframe/variation.standalone.js +9 -0
- package/package.json +2 -2
package/dist/css/iframe.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer miyagi{html{--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}}@layer miyagi{@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}.Code{--color:light-dark(#000,#fff);--text-shadow:light-dark(#fff,#000);--background:light-dark(#f5f2f0,#4d4033);--color-comment:light-dark(#666,#999);--color-property:light-dark(#d9173e,#ff5c7c);--color-selector:light-dark(#527a00,#8dd203);--color-operator:light-dark(#7a4613,#dd7f22);--color-atrule:light-dark(#07a,#d1949e);--color-function:#dd4a68;--color-regex:#e90;--color-deleted:red}code[class*=language-],pre[class*=language-]{background:none;color:var(--color);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;hyphens:none;line-height:1.5;overflow-wrap:normal;tab-size:4;text-align:start;text-shadow:0 -.1em .2em var(--text-shadow);white-space:pre;word-break:normal;word-spacing:normal}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--background)}pre[class*=language-]{border-radius:.5em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.15em .2em .05em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--color-comment)}.token.namespace,.token.punctuation{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:var(--color-property)}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:var(--color-selector)}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:var(--color-operator)}.token.atrule,.token.attr-value,.token.keyword{color:var(--color-atrule)}.token.class-name,.token.function{color:var(--color-function)}.token.important,.token.regex,.token.variable{color:var(--color-regex)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:var(--color-deleted)}accordion-tabs{display:flex;flex-direction:column;overflow:hidden}accordion-tabs details{border-block-end:var(--divider)}accordion-tabs details:first-child{border-block-start:var(--divider)}accordion-tabs summary{align-items:center;display:flex;font-weight:600;justify-content:space-between;list-style:none;padding-block:.75em}}@layer miyagi{}@layer miyagi{accordion-tabs summary::-webkit-details-marker{display:none}accordion-tabs summary:after{background-image:light-dark(url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"));block-size:.5625em;content:"";display:block;inline-size:1em}accordion-tabs details p{margin-block-start:0}accordion-tabs [open]>summary:after{rotate:-180deg}accordion-tabs [role=tablist]{display:flex;list-style:none;margin-block:0 -.0625rem;padding-inline:0;position:relative}accordion-tabs [role=tab]{appearance:none;background:none;border:.0625rem solid transparent;color:inherit;font:inherit;padding:.5em 1em}accordion-tabs [role=tab][aria-selected=true]{background:var(--color-Code-background);border-color:var(--color-Outline);border-block-end-color:var(--color-Code-background)}accordion-tabs [role=tabpanel] .Code{margin-block-start:0}accordion-tabs [role=tabpanel][hidden]{display:none}.json-tree-js{--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:700;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(
|
|
1
|
+
@layer miyagi{html{--send-to-back:-1;--bring-to-front:9999;--bottom-layer:100;--middle-layer:200;--top-layer:300;--backdrop:400;--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}}@layer miyagi{@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}.Code{--color:light-dark(#000,#fff);--text-shadow:light-dark(#fff,#000);--background:light-dark(#f5f2f0,#4d4033);--color-comment:light-dark(#666,#999);--color-property:light-dark(#d9173e,#ff5c7c);--color-selector:light-dark(#527a00,#8dd203);--color-operator:light-dark(#7a4613,#dd7f22);--color-atrule:light-dark(#07a,#d1949e);--color-function:#dd4a68;--color-regex:#e90;--color-deleted:red}code[class*=language-],pre[class*=language-]{background:none;color:var(--color);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;hyphens:none;line-height:1.5;overflow-wrap:normal;tab-size:4;text-align:start;text-shadow:0 -.1em .2em var(--text-shadow);white-space:pre;word-break:normal;word-spacing:normal}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--background)}pre[class*=language-]{border-radius:.5em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.15em .2em .05em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--color-comment)}.token.namespace,.token.punctuation{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:var(--color-property)}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:var(--color-selector)}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:var(--color-operator)}.token.atrule,.token.attr-value,.token.keyword{color:var(--color-atrule)}.token.class-name,.token.function{color:var(--color-function)}.token.important,.token.regex,.token.variable{color:var(--color-regex)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:var(--color-deleted)}accordion-tabs{display:flex;flex-direction:column;overflow:hidden}accordion-tabs details{border-block-end:var(--divider)}accordion-tabs details:first-child{border-block-start:var(--divider)}accordion-tabs summary{align-items:center;display:flex;font-weight:600;justify-content:space-between;list-style:none;padding-block:.75em}}@layer miyagi{}@layer miyagi{accordion-tabs summary::-webkit-details-marker{display:none}accordion-tabs summary:after{background-image:light-dark(url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 1 8 8 1 1'/%3E%3C/svg%3E"));block-size:.5625em;content:"";display:block;inline-size:1em}accordion-tabs details p{margin-block-start:0}accordion-tabs [open]>summary:after{rotate:-180deg}accordion-tabs [role=tablist]{display:flex;list-style:none;margin-block:0 -.0625rem;padding-inline:0;position:relative}accordion-tabs [role=tab]{appearance:none;background:none;border:.0625rem solid transparent;color:inherit;font:inherit;padding:.5em 1em}accordion-tabs [role=tab][aria-selected=true]{background:var(--color-Code-background);border-color:var(--color-Outline);border-block-end-color:var(--color-Code-background)}accordion-tabs [role=tabpanel] .Code{margin-block-start:0}accordion-tabs [role=tabpanel][hidden]{display:none}.json-tree-js{--json-tree-js-text-bold-weight:400;--json-tree-js-header-bold-weight:700;--json-tree-js-title-bold-weight:var(--json-tree-js-header-bold-weight);--json-tree-js-text-bold-weight-active:var(
|
|
2
2
|
--json-tree-js-header-bold-weight
|
|
3
3
|
);--json-tree-js-color-black:#3b3a3a;--json-tree-js-color-white:currentcolor;--json-tree-js-color-snow-white:currentcolor;--json-tree-js-color-boolean:light-dark(#d9173e,#ff5c7c);--json-tree-js-color-decimal:#e3c868;--json-tree-js-color-number:#666bf9;--json-tree-js-color-string:light-dark(#527a00,#8dd203);--json-tree-js-color-date:#a656f5;--json-tree-js-color-array:light-dark(#7a4613,#dd7f22);--json-tree-js-color-object:currentcolor;--json-tree-js-color-null:#bbb;--json-tree-js-color-function:var(--json-tree-js-color-null);--json-tree-js-color-unknown:var(--json-tree-js-color-null);--json-tree-js-container-background-color:#22272e;--json-tree-js-container-border-color:#454c56;--json-tree-js-button-background-color:#2d333b;--json-tree-js-button-border-color:var(
|
|
4
4
|
--json-tree-js-container-border-color
|
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html{--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:initial}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button,input,textarea{background:none;border:none;color:inherit;font:inherit;margin:0;padding:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:normal}a{color:inherit}::-webkit-input-placeholder{color:inherit;opacity:.618}::-moz-placeholder{color:inherit;opacity:.618}:-ms-input-placeholder{color:inherit;opacity:.618}::placeholder{color:inherit;opacity:.618}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{display:block;resize:vertical}a,button,input,label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important}}.ConfigSwitcher-options{display:flex;gap:.5rem;margin-block-start:.25rem}.ConfigSwitcher-option{position:relative}.ConfigSwitcher [type=radio]{inset-block-start:0;inset-inline-start:0;opacity:.01;position:absolute}.ConfigSwitcher label{cursor:pointer;display:flex;padding:.25em}.ConfigSwitcher :checked+label{outline:.0625em solid currentcolor}.ConfigSwitcher input:focus-visible+label{outline:var(--outline);outline-offset:var(--outline-offset)}.ConfigSwitcher svg{block-size:1em;fill:var(--color-Link);inline-size:1em}.ConfigSwitcher :checked+label svg{fill:var(--color-Link-active,var(--color-Link))}@media (width <= 40rem){.ConfigSwitchers{margin-block-start:1rem}}.ConfigSwitchers{background:var(--bar-background);display:flex}.ConfigSwitchers-toggle{--size:var(--bar-size);align-items:center;border-block-start:var(--divider);color:var(--color-Icon);cursor:pointer;display:flex;flex-shrink:0;gap:.5em;inline-size:100%;svg{block-size:var(--size);display:block;inline-size:var(--size);padding:.45em}}.ConfigSwitchers-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.ConfigSwitchers-toggleClose{block-size:75%;fill:currentcolor;inline-size:75%}.ConfigSwitchers-toggle[aria-expanded=false] .ConfigSwitchers-toggleClose,.ConfigSwitchers-toggle[aria-expanded=true] .ConfigSwitchers-toggleOpen{display:none}.ConfigSwitchers-container{background:var(--bar-background);flex:1;inset-block:0 calc(var(--bar-size) + .0625rem);inset-inline:0;padding:var(--bar-size);padding-inline-start:calc(var(--bar-size)*2);position:absolute;z-index:2}.ConfigSwitchers-container>*+*{margin-block-start:var(--menu-spacing)}.ConfigSwitchers-toggle[aria-expanded=false]~.ConfigSwitchers-container{display:none}.ConfigSwitchers-toggle[aria-expanded=true]~.ConfigSwitchers-container{display:block}.GoTo{background:var(--color-Menu-background);box-shadow:0 0 1rem rgba(0,0,0,.5);inline-size:calc(100% - 1rem);inset-block-start:50%;inset-inline-start:50%;max-inline-size:20em;padding:.25em .5em .5em;position:fixed;transform:translate(-50%,-50%)}.GoTo-label{display:block}.GoTo-input{background:var(--color-Menu-background);box-shadow:inset .1em .1em .3em rgba(0,0,0,.2);inline-size:100%;margin-block-start:.25em;outline:var(--divider);padding:.35em .5em}.Nav-entry{position:relative}.Nav-entry:not(.Nav-entry--lvl0):before{background:var(--color-MenuBar-background);content:"";display:block;inline-size:var(--bar-size);inset-block:0;inset-inline-start:0;position:absolute}.Nav-entry--directory{border-block-start:var(--divider)}.Nav-entry--lvl0:last-child{border-block-end:var(--divider)}.Nav-wrapper{position:relative}.Nav-toggle{inline-size:var(--bar-size);inset-block:0;inset-inline-end:0;z-index:1}.Nav-toggle,.Nav-toggle:after{display:block;position:absolute}.Nav-toggle:after{block-size:var(--toggle-height);border:var(--toggle-border);border-block-start-width:var(--toggle-borderWidth);border-inline-end-width:var(--toggle-borderWidth);content:"";font-size:var(--toggle-fontSize);inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;transition:var(--toggle-transition)}.Nav-toggle[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Nav-toggle[aria-expanded=true]:after{border-color:var(--color-Text);transform:var(--toggle-transition-opened)}.Nav-item,.Nav-variant{display:block;margin-inline-start:var(--bar-size);padding-block:var(--menu-spacing);padding-inline-start:calc(var(--level, 1)*1em + var(--menu-spacing))}:where(.Nav-item,.Nav-variant) mark,:where(.Nav-item,.Nav-variant):not(:has(mark)){text-transform:capitalize}:where(.Nav-item,.Nav-variant)[aria-current=page]{background:var(--color-Link-active-background);color:var(--color-Link-active,var(--color-Link))}.is-no-match:not(:has(.is-match)){display:none}.Nav-entry--directory.has-match>.Nav-toggle,.Nav-entry--directory.is-match *{opacity:1!important}.Nav-item--directory{color:var(--color-Link);cursor:default;opacity:.75}.Nav-item--link{font-weight:600}.Nav-item--link,.Nav-variant{color:var(--color-Link);text-decoration:none}.Nav-item--link:where(:hover,:focus),.Nav-variant:where(:hover,:focus){text-decoration:underline}.Nav-item:focus-visible,.Nav-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Search{border-block:var(--divider);display:flex;margin-block-end:var(--spacing-x);position:relative}.Search-label{flex-shrink:0}.Search-clear:not([hidden]),.Search-label{--size:var(--bar-size);align-items:center;block-size:var(--size);display:flex;inline-size:var(--size);justify-content:center}.Search-clear:not([hidden]){border-radius:50%;inset-block-start:0;inset-inline-end:0;position:absolute}.Search-icon{block-size:50%;color:var(--color-Icon);display:block;inline-size:50%}.Search-icon path{fill:currentcolor}.Search-icon circle{fill:none;stroke:currentcolor}.Search-input{inline-size:calc(100% - var(--bar-size));padding:.35em var(--menu-spacing);padding-inline-end:2.5em}.Search-input:focus{background:var(--color-Link-active-background);outline:none}.Search-clear:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Title{display:flex;justify-content:center;margin-inline-end:var(--menu-spacing);margin-inline-start:calc(var(--menu-spacing) + var(--bar-size))}.Title-link{display:inline-block;font-size:.875em;font-weight:500}.Title-link:focus-visible{outline-offset:var(--outline-offset)}.Title-logo img{max-inline-size:100%;min-inline-size:50%;vertical-align:middle}.Title-logo+.Title-name{display:none}@media (width <= 40rem){.Title-logo img{block-size:2rem}}@media (width > 40rem){.Title{margin-block:1.5rem}}.Menu{--bar-size:2rem;--bar-background:var(--color-Menu-background) linear-gradient(to right,var(--color-MenuBar-background) var(--bar-size),transparent var(--bar-size));--menu-spacing:0.5rem;--outline:0.1875rem solid var(--color-Text);--outline-offset:0.125rem;background:var(--bar-background);display:flex;font-size:.875em;grid-area:nav;position:relative}.Menu :where(:focus-visible){outline:var(--outline)}.Menu-content{display:flex;flex-direction:column}.Menu-nav{flex:1;overflow-y:auto}@media (width <= 40rem){.Menu{--toggle-size:4rem;align-items:center;flex-wrap:wrap;justify-content:space-between}.Menu-content{background:var(--bar-background);block-size:calc(100dvb - var(--toggle-size));flex:0 0 100%;inset-block-start:var(--toggle-size);inset-inline:0;position:fixed}.Menu-search{position:relative}.Menu-toggleMobileMenu{block-size:var(--toggle-size);display:block;inline-size:var(--toggle-size);padding:1rem;position:relative}.Menu-toggleMobileMenu[aria-expanded=false]~.Menu-content{display:none}.Menu-toggleMobileMenu:after{block-size:var(--toggle-height);border:var(--toggle-border);border-inline-end-width:var(--toggle-borderWidth);border-top-width:var(--toggle-borderWidth);content:"";display:block;font-size:.75em;inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;position:absolute;transition:var(--toggle-transition)}.Menu-toggleMobileMenu[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Menu-toggleMobileMenu[aria-expanded=true]:after{transform:var(--toggle-transition-opened)}}@media (width > 40rem){.Menu{block-size:100vh;flex-direction:column}.Menu-toggleMobileMenu{display:none}.Menu-content{flex:1;overflow:hidden}}html{height:100%}body{background:var(--color-Menu-background);color:var(--color-Text);display:grid;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);min-height:100%}.Content{grid-area:iframe}.Frame,.FrameWrapper{height:100%;width:100%}.Frame{display:block}@media (width <= 40rem){html{--spacing-x:1rem;--spacing-y:1rem}body{grid-template:"nav" "iframe" 1fr}}@media (width > 40rem){html{--spacing-x:2rem;--spacing-y:4rem}body{grid-template-areas:"nav iframe";grid-template-columns:16rem 1fr}}.u-hiddenVisually{border:0;clip-path:inset(100%);height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}
|
|
1
|
+
html{--send-to-back:-1;--bring-to-front:9999;--bottom-layer:100;--middle-layer:200;--top-layer:300;--backdrop:400;--font-family:-apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial",sans-serif;--font-size:1rem;--line-height:1.5;--divider:0.0625rem solid var(--color-Divider);--color-Code-background:light-dark(var(--color-Code-background--light),var(--color-Code-background--dark));--color-Divider:light-dark(var(--color-Divider--light),var(--color-Divider--dark));--color-Icon:light-dark(var(--color-Icon--light),var(--color-Icon--dark));--color-Iframe-background:light-dark(var(--color-Iframe-background--light),var(--color-Iframe-background--dark));--color-Iframe-link:light-dark(var(--color-Iframe-link--light),var(--color-Iframe-link--dark));--color-Iframe-text-secondary:light-dark(var(--color-Iframe-text-secondary--light),var(--color-Iframe-text-secondary--dark));--color-Iframe-text-tertiary:light-dark(var(--color-Iframe-text-tertiary--light),var(--color-Iframe-text-tertiary--dark));--color-Iframe-text:light-dark(var(--color-Iframe-text--light),var(--color-Iframe-text--dark));--color-Link-active-background:light-dark(var(--color-Link-active-background--light),var(--color-Link-active-background--dark));--color-Link:light-dark(var(--color-Link--light),var(--color-Link--dark));--color-Menu-background:light-dark(var(--color-Menu-background--light),var(--color-Menu-background--dark));--color-MenuBar-background:light-dark(var(--color-MenuBar-background--light),var(--color-MenuBar-background--dark));--color-Negative:light-dark(var(--color-Negative--light),var(--color-Negative--dark));--color-Outline:light-dark(var(--color-Outline--light),var(--color-Outline--dark));--color-Positive:light-dark(var(--color-Positive--light),var(--color-Positive--dark));--color-Text:light-dark(var(--color-Text--light),var(--color-Text--dark));--color-Tooltip-background:light-dark(var(--color-Tooltip-background--light),var(--color-Tooltip-background--dark));--color-Tooltip-outline:light-dark(var(--color-Tooltip-outline--light),var(--color-Tooltip-outline--dark));--color-Code-background--light:#f5f5f5;--color-Divider--light:rgba(0,0,0,.1);--color-Icon--light:#8f8f8f;--color-Iframe-background--light:#fff;--color-Iframe-link--light:#1f1f1f;--color-Iframe-text--light:#1f1f1f;--color-Iframe-text-secondary--light:#5c5c5c;--color-Iframe-text-tertiary--light:#8f8f8f;--color-Link--light:#1f1f1f;--color-Link-active-background--light:#fff;--color-Menu-background--light:#f5f5f5;--color-MenuBar-background--light:rgb(0 0 0/5%);--color-Negative--light:#d9173e;--color-Outline--light:#dbdbdb;--color-Positive--light:#558000;--color-Text--light:#5c5c5c;--color-Tooltip-background--light:#f5f5f5;--color-Tooltip-outline--light:#ddd;--color-Code-background--dark:#292929;--color-Divider--dark:hsla(0,0%,100%,.05);--color-Icon--dark:#999;--color-Iframe-background--dark:#1f1f1f;--color-Iframe-link--dark:#fff;--color-Iframe-text--dark:#fff;--color-Iframe-text-secondary--dark:#ccc;--color-Iframe-text-tertiary--dark:#999;--color-Link--dark:#fff;--color-Link-active-background--dark:#1f1f1f;--color-Menu-background--dark:#292929;--color-MenuBar-background--dark:hsla(0,0%,100%,.025);--color-Negative--dark:#ff305a;--color-Outline--dark:#424242;--color-Positive--dark:#8dd203;--color-Text--dark:#ccc;--color-Tooltip-background--dark:#333;--color-Tooltip-outline--dark:#444;--toggle-border:0 solid var(--color-Icon);--toggle-borderWidth:0.25em;--toggle-fontSize:0.5em;--toggle-height:1em;--toggle-transition:transform 0.15s ease;--toggle-width:1em;color-scheme:light}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}html[dir=ltr]{--toggle-transition-closed:translate(-75%,-50%) rotate(45deg);--toggle-transition-opened:translate(-50%,-75%) rotate(135deg)}html[dir=rtl]{--toggle-transition-closed:translate(75%,-50%) rotate(-45deg);--toggle-transition-opened:translate(50%,-75%) rotate(-135deg)}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:initial}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button,input,textarea{background:none;border:none;color:inherit;font:inherit;margin:0;padding:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:normal}a{color:inherit}::-webkit-input-placeholder{color:inherit;opacity:.618}::-moz-placeholder{color:inherit;opacity:.618}:-ms-input-placeholder{color:inherit;opacity:.618}::placeholder{color:inherit;opacity:.618}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{display:block;resize:vertical}a,button,input,label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important}}.ConfigSwitcher-options{display:flex;gap:.5rem;margin-block-start:.25rem}.ConfigSwitcher-option{position:relative}.ConfigSwitcher [type=radio]{inset-block-start:0;inset-inline-start:0;opacity:.01;position:absolute}.ConfigSwitcher label{cursor:pointer;display:flex;padding:.25em}.ConfigSwitcher :checked+label{outline:.0625em solid currentcolor}.ConfigSwitcher input:focus-visible+label{outline:var(--outline);outline-offset:var(--outline-offset)}.ConfigSwitcher svg{block-size:1em;fill:var(--color-Link);inline-size:1em}.ConfigSwitcher :checked+label svg{fill:var(--color-Link-active,var(--color-Link))}@media (width <= 40rem){.ConfigSwitchers{margin-block-start:1rem}}.ConfigSwitchers{background:var(--bar-background);display:flex}.ConfigSwitchers-toggle{--size:var(--bar-size);align-items:center;border-block-start:var(--divider);color:var(--color-Icon);cursor:pointer;display:flex;flex-shrink:0;gap:.5em;inline-size:100%;svg{block-size:var(--size);display:block;inline-size:var(--size);padding:.45em}}.ConfigSwitchers-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.ConfigSwitchers-toggleClose{block-size:75%;fill:currentcolor;inline-size:75%}.ConfigSwitchers-toggle[aria-expanded=false] .ConfigSwitchers-toggleClose,.ConfigSwitchers-toggle[aria-expanded=true] .ConfigSwitchers-toggleOpen{display:none}.ConfigSwitchers-container{background:var(--bar-background);flex:1;inset-block:0 calc(var(--bar-size) + .0625rem);inset-inline:0;padding:var(--bar-size);padding-inline-start:calc(var(--bar-size)*2);position:absolute;z-index:2}.ConfigSwitchers-container>*+*{margin-block-start:var(--menu-spacing)}.ConfigSwitchers-toggle[aria-expanded=false]~.ConfigSwitchers-container{display:none}.ConfigSwitchers-toggle[aria-expanded=true]~.ConfigSwitchers-container{display:block}.GoTo{background:var(--color-Menu-background);box-shadow:0 0 1rem rgba(0,0,0,.5);inline-size:calc(100% - 1rem);inset-block-start:50%;inset-inline-start:50%;max-inline-size:20em;padding:.25em .5em .5em;position:fixed;transform:translate(-50%,-50%)}.GoTo-label{display:block}.GoTo-input{background:var(--color-Menu-background);box-shadow:inset .1em .1em .3em rgba(0,0,0,.2);inline-size:100%;margin-block-start:.25em;outline:var(--divider);padding:.35em .5em}.Nav-entry{position:relative}.Nav-entry:not(.Nav-entry--lvl0):before{background:var(--color-MenuBar-background);content:"";display:block;inline-size:var(--bar-size);inset-block:0;inset-inline-start:0;position:absolute}.Nav-entry--directory{border-block-start:var(--divider)}.Nav-entry--lvl0:last-child{border-block-end:var(--divider)}.Nav-wrapper{position:relative}.Nav-toggle{inline-size:var(--bar-size);inset-block:0;inset-inline-end:0;z-index:1}.Nav-toggle,.Nav-toggle:after{display:block;position:absolute}.Nav-toggle:after{block-size:var(--toggle-height);border:var(--toggle-border);border-block-start-width:var(--toggle-borderWidth);border-inline-end-width:var(--toggle-borderWidth);content:"";font-size:var(--toggle-fontSize);inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;transition:var(--toggle-transition)}.Nav-toggle[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Nav-toggle[aria-expanded=true]:after{border-color:var(--color-Text);transform:var(--toggle-transition-opened)}.Nav-item,.Nav-variant{display:block;margin-inline-start:var(--bar-size);padding-block:var(--menu-spacing);padding-inline-start:calc(var(--level, 1)*1em + var(--menu-spacing))}:where(.Nav-item,.Nav-variant) mark,:where(.Nav-item,.Nav-variant):not(:has(mark)){text-transform:capitalize}:where(.Nav-item,.Nav-variant)[aria-current=page]{background:var(--color-Link-active-background);color:var(--color-Link-active,var(--color-Link))}.is-no-match:not(:has(.is-match)){display:none}.Nav-entry--directory.has-match>.Nav-toggle,.Nav-entry--directory.is-match *{opacity:1!important}.Nav-item--directory{color:var(--color-Link);cursor:default;opacity:.75}.Nav-item--link{font-weight:600}.Nav-item--link,.Nav-variant{color:var(--color-Link);text-decoration:none}.Nav-item--link:where(:hover,:focus),.Nav-variant:where(:hover,:focus){text-decoration:underline}.Nav-item:focus-visible,.Nav-toggle:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Search{border-block:var(--divider);display:flex;margin-block-end:var(--spacing-x);position:relative}.Search-label{flex-shrink:0}.Search-clear:not([hidden]),.Search-label{--size:var(--bar-size);align-items:center;block-size:var(--size);display:flex;inline-size:var(--size);justify-content:center}.Search-clear:not([hidden]){border-radius:50%;inset-block-start:0;inset-inline-end:0;position:absolute}.Search-icon{block-size:50%;color:var(--color-Icon);display:block;inline-size:50%}.Search-icon path{fill:currentcolor}.Search-icon circle{fill:none;stroke:currentcolor}.Search-input{inline-size:calc(100% - var(--bar-size));padding:.35em var(--menu-spacing);padding-inline-end:2.5em}.Search-input:focus{background:var(--color-Link-active-background);outline:none}.Search-clear:focus-visible{outline-offset:calc(var(--outline-offset)*-1)}.Title{display:flex;justify-content:center;margin-inline-end:var(--menu-spacing);margin-inline-start:calc(var(--menu-spacing) + var(--bar-size))}.Title-link{display:inline-block;font-size:.875em;font-weight:500}.Title-link:focus-visible{outline-offset:var(--outline-offset)}.Title-logo img{max-inline-size:100%;min-inline-size:50%;vertical-align:middle}.Title-logo+.Title-name{display:none}@media (width <= 40rem){.Title-logo img{block-size:2rem}}@media (width > 40rem){.Title{margin-block:1.5rem}}.Menu{--bar-size:2rem;--bar-background:var(--color-Menu-background) linear-gradient(to right,var(--color-MenuBar-background) var(--bar-size),transparent var(--bar-size));--menu-spacing:0.5rem;--outline:0.1875rem solid var(--color-Text);--outline-offset:0.125rem;background:var(--bar-background);display:flex;font-size:.875em;grid-area:nav;position:relative}.Menu :where(:focus-visible){outline:var(--outline)}.Menu-content{display:flex;flex-direction:column}.Menu-nav{flex:1;overflow-y:auto}@media (width <= 40rem){.Menu{--toggle-size:4rem;align-items:center;flex-wrap:wrap;justify-content:space-between}.Menu-content{background:var(--bar-background);block-size:calc(100dvb - var(--toggle-size));flex:0 0 100%;inset-block-start:var(--toggle-size);inset-inline:0;position:fixed}.Menu-search{position:relative}.Menu-toggleMobileMenu{block-size:var(--toggle-size);display:block;inline-size:var(--toggle-size);padding:1rem;position:relative}.Menu-toggleMobileMenu[aria-expanded=false]~.Menu-content{display:none}.Menu-toggleMobileMenu:after{block-size:var(--toggle-height);border:var(--toggle-border);border-inline-end-width:var(--toggle-borderWidth);border-top-width:var(--toggle-borderWidth);content:"";display:block;font-size:.75em;inline-size:var(--toggle-width);inset-block-start:50%;inset-inline-start:50%;position:absolute;transition:var(--toggle-transition)}.Menu-toggleMobileMenu[aria-expanded=false]:after{transform:var(--toggle-transition-closed)}.Menu-toggleMobileMenu[aria-expanded=true]:after{transform:var(--toggle-transition-opened)}}@media (width > 40rem){.Menu{block-size:100vh;flex-direction:column}.Menu-toggleMobileMenu{display:none}.Menu-content{flex:1;overflow:hidden}}.Controls{background:var(--color-Menu-background);border-top:var(--divider);flex:0 0 auto;padding:.75rem var(--spacing-x,2rem)}.Controls[data-mode=floating]{bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;position:fixed;right:0;z-index:var(--bottom-layer)}@media (width > 40rem){.Controls[data-mode=floating]{left:16rem}}.Controls-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.Controls-heading{font-size:.75rem;font-weight:600;letter-spacing:.05em;margin:0;text-transform:uppercase}.Controls-modeToggle{background:none;border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Icon);cursor:pointer;font-size:.75rem;padding:.25rem .5rem}.Controls-modeToggle:hover{color:var(--color-Text)}.Controls-fields{display:flex;flex-wrap:wrap;gap:1rem}.Controls-field{min-width:8rem}.Controls-field,.Controls-label{display:flex;flex-direction:column;gap:.25rem}.Controls-label{font-size:.875rem}.Controls-labelText{color:var(--color-Text);font-weight:500}.Controls-select{background:var(--color-Link-active-background);border:1px solid var(--color-Outline);border-radius:.25rem;color:var(--color-Text);font-family:var(--font-family);font-size:.875rem;padding:.25rem .5rem}.Controls-checkbox{cursor:pointer;height:1rem;width:1rem}html{height:100%}body{background:var(--color-Menu-background);color:var(--color-Text);display:grid;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);min-height:100%}.Content{display:flex;flex-direction:column;grid-area:iframe}.FrameWrapper{flex:1;min-height:0;width:100%}.Frame{display:block;height:100%;width:100%}@media (width <= 40rem){html{--spacing-x:1rem;--spacing-y:1rem}body{grid-template:"nav" "iframe" 1fr}}@media (width > 40rem){html{--spacing-x:2rem;--spacing-y:4rem}body{grid-template-areas:"nav iframe";grid-template-columns:16rem 1fr}}.u-hiddenVisually{border:0;clip-path:inset(100%);height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}
|
package/dist/js/iframe.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#n;#i;#s;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let n;n=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=n}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const n=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:n.textContent,content:[...n.parentElement.children].filter(e=>1===e.nodeType&&e!==n)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,n){"current"===e&&(this.index=parseInt(n,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#n="accordion"):(await this.#a(),this.#n="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#n?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#s?(this.#s.index="number"==typeof this.index?this.index:0,this.#s.setElements()):this.#s=new t(this);const[e,n]=this.#s.elements;return this.appendChild(e),n.forEach(e=>{this.appendChild(e)}),await this.#s.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new n(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:n,content:i},s)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=n,r.type="button",r.id=d,r.setAttribute("aria-selected",s===this.index?"true":"false"),r.setAttribute("tabindex",s===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==s,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class n{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#
|
|
1
|
+
customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#n;#i;#s;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let n;n=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=n}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const n=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:n.textContent,content:[...n.parentElement.children].filter(e=>1===e.nodeType&&e!==n)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,n){"current"===e&&(this.index=parseInt(n,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#n="accordion"):(await this.#a(),this.#n="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#n?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#s?(this.#s.index="number"==typeof this.index?this.index:0,this.#s.setElements()):this.#s=new t(this);const[e,n]=this.#s.elements;return this.appendChild(e),n.forEach(e=>{this.appendChild(e)}),await this.#s.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new n(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:n,content:i},s)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=n,r.type="button",r.id=d,r.setAttribute("aria-selected",s===this.index?"true":"false"),r.setAttribute("tabindex",s===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==s,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class n{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#f.bind(this)),e.addEventListener("keydown",this.#w.bind(this))})}#f({currentTarget:e}){this.#m.setActiveTab(this.#p.indexOf(e))}#w(e){const{dir:t}=e.target.closest("[dir]")||document.documentElement;let n=!1;switch(e.key){case"ArrowLeft":"rtl"===t?this.#T():this.#A(),n=!0;break;case"ArrowRight":"rtl"===t?this.#A():this.#T(),n=!0;break;case"Home":this.#m.setActiveTab(0),n=!0;break;case"End":this.#m.setActiveTab(this.#p.length-1),n=!0}n&&(e.stopPropagation(),e.preventDefault())}#T(){this.#m.setActiveTab(this.#m.index===this.#p.length-1?0:this.#m.index+1)}#A(){this.#m.setActiveTab(0===this.#m.index?this.#p.length-1:this.#m.index-1)}render(e=!0){return this.#p.forEach((t,n)=>{n===this.#m.index?(t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),e&&t.focus()):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex",-1))}),new Promise(e=>setTimeout(e,1e3))}}let i,s=250;function r(e){const t=function(e){return"reloadParent"===e?"parent":"string"==typeof e&&0===e.length?"iframe":null}(e);return t||function(e){try{return JSON.parse(e).scope||"iframe"}catch{return"iframe"}}(e)}function o(e){try{return JSON.parse(e).paths??[]}catch{return[]}}function a(){i=new WebSocket(`${"https:"===window.location.protocol?"wss":"ws"}://${window.location.host}/__miyagi_ws`),i.onopen=()=>{s=250},i.onmessage=e=>{const t=function(e){try{return JSON.parse(e).reason??null}catch{return null}}(e.data);"schema"!==t&&"data"!==t||window.parent.postMessage({type:"miyagi:invalidate-cache",paths:o(e.data)},"*"),"parent"!==r(e.data)?window.location.reload():parent.window.location.reload()},i.onerror=()=>{i.close()},i.onclose=()=>{!function(){const e=Math.floor(100*Math.random()),t=Math.min(s+e,5e3);s=Math.min(2*s,5e3),window.setTimeout(()=>{a()},t)}()}}a();function c(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}window.location.pathname.startsWith("/component?")&&window.location.href.indexOf("&embedded=true")>=0&&window.self===window.top&&(window.location=new URL(window.location).replace("&embedded=true","")),document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("miyagi-mock-data");if(e)try{const t=JSON.parse(e.textContent);document.dispatchEvent(new CustomEvent("miyagi:mockdata",{detail:t}))}catch(e){console.debug("[miyagi] Failed to parse mock data island:",e)}}),document.addEventListener("DOMContentLoaded",function(){const e=Array.from(document.querySelectorAll(".Component-file")),t=document.querySelector(".Styleguide");e.length>0&&import("./_iframe-links-DdifIr4P.js").then(t=>{t.default(e)}).catch(e=>console.error(e)),document.querySelector(".Code")&&import("./_prism-By3NMwUd.js"),t&&import("./index-BKDKaBC6.js").then(e=>new e.default(t)).catch(e=>console.error(e)),document.querySelector(".js-openMockData")&&import("./_mock-data-Dypo4Bl_.js")}),document.addEventListener("keyup",e=>{const{path:t,originalTarget:n,target:i,key:s}=e,r=t?t[0]:n||i;((e,t)=>!c(e.tagName)&&"f"===t)(r,s)?parent.window.dispatchEvent(new CustomEvent("searchTriggered")):((e,t)=>!c(e.tagName)&&"g"===t)(r,s)&&parent.window.dispatchEvent(new CustomEvent("gotoTriggered"))});
|
package/dist/js/main.build.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const o=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=o.replace("{{component}}",t))}),window.addEventListener("keyup",o=>{const{path:r,originalTarget:i,target:l,key:c}=o;if(c){const o=r?r[0]:i||l,m=c.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(o,m)?s(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>s(t,a))}}function s(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),s=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function o(){n.hidden=!0,s.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",o()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,s.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),s.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),s.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):o();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),o())}),window.addEventListener("keyup",n=>{const{path:s,originalTarget:o,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(s?s[0]:o||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});class t{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const s=n.split("=");return s[0]===e?decodeURIComponent(s[1]):t},"")}}class n extends t{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class s extends t{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class o extends t{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class a{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new n(document.querySelector(".js-ThemeSwitcher")),new s(document.querySelector(".js-TextDirectionSwitcher")),new o(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const s=this.elements.links.find(e=>e.getAttribute("aria-current"));return s&&s.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){a.toggleExpandedAttribute(e)}onComponentToggleClick(e){a.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class r extends a{constructor(){super(),this.paths={embedded:"component-",container:"show-"},this.indexPath="component-all-embedded.html",this.embeddedParam="-embedded"}onPopState(){let e;e=document.location.pathname.startsWith("/design-tokens")?document.location.pathname.replace("/","/iframe-"):"/"!==document.location.pathname?document.location.pathname.replace(this.paths.container,this.paths.embedded).replace(/\.html$/,`${this.embeddedParam}.html`).slice(1):`${this.paths.embedded}all-embedded.html`,super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new r);
|
|
1
|
+
function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const s=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=s.replace("{{component}}",t))}),window.addEventListener("keyup",s=>{const{path:r,originalTarget:i,target:c,key:l}=s;if(l){const s=r?r[0]:i||c,m=l.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(s,m)?o(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>o(t,a))}}function o(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),o=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function s(){n.hidden=!0,o.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",s()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,o.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),o.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),o.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):s();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),s())}),window.addEventListener("keyup",n=>{const{path:o,originalTarget:s,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(o?o[0]:s||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});const t="miyagi-controls::",n="miyagi-controls-mode";function o(){return document.getElementById("controls-panel")}function s(){return document.getElementById("controls-fields")}function a(){const e=o();e&&(e.hidden=!0,s().innerHTML="")}function r(e,t,n){const o=new URL(e,window.location.origin);return o.searchParams.set(`overrides[${t}]`,String(n)),o.pathname+o.search}function i(e){const t=document.getElementById("iframe"),n=document.querySelector(".FrameWrapper");t&&n&&(t.remove(),t.src=e,n.appendChild(t),l(e))}function c(e,t){const n=s();n.innerHTML="";const a=new URL(t,window.location.origin),c={};a.searchParams.forEach((e,t)=>{const n=t.match(/^overrides\[(.+)\]$/);n&&(c[n[1]]=e)}),e.forEach(({property:e,type:o,values:s,current:a})=>{const l=void 0!==c[e]?c[e]:a,d=document.createElement("div");d.className="Controls-field";const m=document.createElement("label");m.className="Controls-label";const h=document.createElement("span");let u;h.className="Controls-labelText",h.textContent=e,m.appendChild(h),"enum"===o?(u=document.createElement("select"),u.className="Controls-select",s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,e==l&&(t.selected=!0),u.appendChild(t)}),u.addEventListener("change",()=>{i(r(t,e,u.value))})):"boolean"===o&&(u=document.createElement("input"),u.type="checkbox",u.className="Controls-checkbox",u.checked="string"==typeof l?"true"===l:Boolean(l),u.addEventListener("change",()=>{i(r(t,e,u.checked))})),u&&(m.appendChild(u),d.appendChild(m),n.appendChild(d))}),function(){const e=o();e&&(e.hidden=!1)}()}async function l(e){const n=new URL(e,window.location.origin),o=n.searchParams.get("file"),s=n.searchParams.get("variation");if(!o||!s)return void a();const r=`${t}${o}::${s}`;let i=null;try{i=JSON.parse(sessionStorage.getItem(r)??"null")}catch{sessionStorage.removeItem(r)}if(!i)try{const e=await fetch(`/api/component-controls?file=${encodeURIComponent(o)}&variation=${encodeURIComponent(s)}`);i=await e.json(),sessionStorage.setItem(r,JSON.stringify(i))}catch{return void a()}i.controls?.length?c(i.controls,e):a()}window.addEventListener("message",e=>{"miyagi:invalidate-cache"===e.data?.type&&function(e){for(const n of Object.keys(sessionStorage)){if(!n.startsWith(t))continue;if(!e||0===e.length){sessionStorage.removeItem(n);continue}const o=n.slice(17).split("::")[0];e.some(e=>e.includes(o))&&sessionStorage.removeItem(n)}}(e.data.paths??[])}),document.addEventListener("DOMContentLoaded",()=>{!function(){const e=o();if(!e)return;const t=localStorage.getItem(n)??"docked";e.setAttribute("data-mode",t);const s=document.getElementById("controls-mode-toggle");s&&s.addEventListener("click",()=>{const t="docked"===e.getAttribute("data-mode")?"floating":"docked";e.setAttribute("data-mode",t),localStorage.setItem(n,t)})}();const e=document.getElementById("iframe");if(e){const t=e.getAttribute("src");t&&l(t)}});class d{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}}class m extends d{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class h extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class u extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class g{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new m(document.querySelector(".js-ThemeSwitcher")),new h(document.querySelector(".js-TextDirectionSwitcher")),new u(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe),l(e)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const o=this.elements.links.find(e=>e.getAttribute("aria-current"));return o&&o.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){g.toggleExpandedAttribute(e)}onComponentToggleClick(e){g.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class p extends g{constructor(){super(),this.paths={embedded:"component-",container:"show-"},this.indexPath="component-all-embedded.html",this.embeddedParam="-embedded"}onPopState(){let e;e=document.location.pathname.startsWith("/design-tokens")?document.location.pathname.replace("/","/iframe-"):"/"!==document.location.pathname?document.location.pathname.replace(this.paths.container,this.paths.embedded).replace(/\.html$/,`${this.embeddedParam}.html`).slice(1):`${this.paths.embedded}all-embedded.html`,super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new p);
|
package/dist/js/main.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const o=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=o.replace("{{component}}",t))}),window.addEventListener("keyup",o=>{const{path:r,originalTarget:i,target:l,key:c}=o;if(c){const o=r?r[0]:i||l,h=c.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(o,h)?s(t,a):n&&"escape"===h&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>s(t,a))}}function s(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),s=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function o(){n.hidden=!0,s.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",o()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,s.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),s.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),s.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):o();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),o())}),window.addEventListener("keyup",n=>{const{path:s,originalTarget:o,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(s?s[0]:o||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});class t{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const s=n.split("=");return s[0]===e?decodeURIComponent(s[1]):t},"")}}class n extends t{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class s extends t{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class o extends t{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class a{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new n(document.querySelector(".js-ThemeSwitcher")),new s(document.querySelector(".js-TextDirectionSwitcher")),new o(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const s=this.elements.links.find(e=>e.getAttribute("aria-current"));return s&&s.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){a.toggleExpandedAttribute(e)}onComponentToggleClick(e){a.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class r extends a{constructor(){super(),this.paths={embedded:"component?",container:"show?"},this.embeddedParam="&embedded=true",this.indexPath=`/${this.paths.embedded}file=all${this.embeddedParam}`}onPopState(){let e;document.location.pathname.startsWith("/design-tokens")?e=`/iframe${document.location.pathname}`:""!==document.location.search?(e=`${document.location.href.replace(this.paths.container,this.paths.embedded)}${this.embeddedParam}`,e=e.replace(document.location.origin,"")):(e=this.indexPath,e=e.replace(document.location.origin,"")),super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new r);
|
|
1
|
+
function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const s=t.dataset.urlPattern,a=t.querySelector(".GoTo-input"),r=t.querySelector("#goto-list");if(a&&r){const i=Array.from(r.querySelectorAll("option")).map(e=>e.value);a.addEventListener("input",({target:e})=>{const t=e.value;i.includes(t)&&(document.location.href=s.replace("{{component}}",t))}),window.addEventListener("keyup",s=>{const{path:r,originalTarget:i,target:c,key:l}=s;if(l){const s=r?r[0]:i||c,m=l.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(s,m)?o(t,a):n&&"escape"===m&&(d=a,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d}),window.addEventListener("gotoTriggered",()=>o(t,a))}}function o(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}}),document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(".Search-input"),n=document.querySelector(".Search-clear"),o=Array.from(document.querySelectorAll(".Nav-item")).map(e=>({node:e,listItem:e.closest(".Nav-entry"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:a(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")}));function s(){n.hidden=!0,o.forEach(e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!e.initiallyOpened,e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false"))}),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach(e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match"))}function a(e){const t=[];let n=e;for(;n.closest(".Nav-entry").parentNode.closest(".Nav-entry");){const e=n.closest(".Nav-entry").parentNode.closest(".Nav-entry").querySelector(".Nav-toggle");e&&t.push(e),n=n.closest(".Nav-entry").parentNode.closest(".Nav-entry")}return t}t&&(n&&n.addEventListener("click",function(){t.value="",s()}),t.addEventListener("input",function({target:e}){const t=e.value.toLowerCase();t.length>0?(a=t,n.hidden=!1,o.forEach(e=>{e.toggle&&(document.getElementById(e.toggle.getAttribute("aria-controls")).hidden=!0,e.toggle.setAttribute("aria-expanded","false")),e.parentToggles.forEach(e=>{e.parentNode.classList.remove("has-match")})}),o.forEach(e=>{e.matchesQuery=e.lowercaseLabel.includes(a),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(a,"g"),`<mark>${a}</mark>`),e.parentToggles.forEach(e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),document.getElementById(e.getAttribute("aria-controls")).hidden=!1,e.setAttribute("aria-expanded","true")})):e.node.textContent=e.label}),o.forEach(e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")})):s();var a}),t.addEventListener("keyup",function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),s())}),window.addEventListener("keyup",n=>{const{path:o,originalTarget:s,target:a,key:r}=n;((t,n)=>!e(t.tagName)&&"f"===n)(o?o[0]:s||a,r)&&t.focus()}),window.addEventListener("searchTriggered",()=>{t.focus()}))});const t="miyagi-controls::",n="miyagi-controls-mode";function o(){return document.getElementById("controls-panel")}function s(){return document.getElementById("controls-fields")}function a(){const e=o();e&&(e.hidden=!0,s().innerHTML="")}function r(e,t,n){const o=new URL(e,window.location.origin);return o.searchParams.set(`overrides[${t}]`,String(n)),o.pathname+o.search}function i(e){const t=document.getElementById("iframe"),n=document.querySelector(".FrameWrapper");t&&n&&(t.remove(),t.src=e,n.appendChild(t),l(e))}function c(e,t){const n=s();n.innerHTML="";const a=new URL(t,window.location.origin),c={};a.searchParams.forEach((e,t)=>{const n=t.match(/^overrides\[(.+)\]$/);n&&(c[n[1]]=e)}),e.forEach(({property:e,type:o,values:s,current:a})=>{const l=void 0!==c[e]?c[e]:a,d=document.createElement("div");d.className="Controls-field";const m=document.createElement("label");m.className="Controls-label";const h=document.createElement("span");let u;h.className="Controls-labelText",h.textContent=e,m.appendChild(h),"enum"===o?(u=document.createElement("select"),u.className="Controls-select",s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,e==l&&(t.selected=!0),u.appendChild(t)}),u.addEventListener("change",()=>{i(r(t,e,u.value))})):"boolean"===o&&(u=document.createElement("input"),u.type="checkbox",u.className="Controls-checkbox",u.checked="string"==typeof l?"true"===l:Boolean(l),u.addEventListener("change",()=>{i(r(t,e,u.checked))})),u&&(m.appendChild(u),d.appendChild(m),n.appendChild(d))}),function(){const e=o();e&&(e.hidden=!1)}()}async function l(e){const n=new URL(e,window.location.origin),o=n.searchParams.get("file"),s=n.searchParams.get("variation");if(!o||!s)return void a();const r=`${t}${o}::${s}`;let i=null;try{i=JSON.parse(sessionStorage.getItem(r)??"null")}catch{sessionStorage.removeItem(r)}if(!i)try{const e=await fetch(`/api/component-controls?file=${encodeURIComponent(o)}&variation=${encodeURIComponent(s)}`);i=await e.json(),sessionStorage.setItem(r,JSON.stringify(i))}catch{return void a()}i.controls?.length?c(i.controls,e):a()}window.addEventListener("message",e=>{"miyagi:invalidate-cache"===e.data?.type&&function(e){for(const n of Object.keys(sessionStorage)){if(!n.startsWith(t))continue;if(!e||0===e.length){sessionStorage.removeItem(n);continue}const o=n.slice(17).split("::")[0];e.some(e=>e.includes(o))&&sessionStorage.removeItem(n)}}(e.data.paths??[])}),document.addEventListener("DOMContentLoaded",()=>{!function(){const e=o();if(!e)return;const t=localStorage.getItem(n)??"docked";e.setAttribute("data-mode",t);const s=document.getElementById("controls-mode-toggle");s&&s.addEventListener("click",()=>{const t="docked"===e.getAttribute("data-mode")?"floating":"docked";e.setAttribute("data-mode",t),localStorage.setItem(n,t)})}();const e=document.getElementById("iframe");if(e){const t=e.getAttribute("src");t&&l(t)}});class d{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"], [type="checkbox"]')),this.options=this.inputs.map(e=>e.value),this.name=this.inputs[0].name,this.cookieName=`miyagi_${document.title.replaceAll(" ","-")}_${this.name}`,this.cookieValue=this.#e(this.cookieName),this.inputs.forEach(e=>{e.addEventListener("change",this.onThemeChange.bind(this))}),this.renderSwitcher()}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`${this.cookieName}=${e};`}renderSwitcher(){const e=this.form.querySelector(`[value="${this.cookieValue}"]`);e&&(e.checked=!0)}#e(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}}class m extends d{constructor(e){super(e),this.logoWrapper=document.querySelector(".Title-logo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img")),window.frames.iframe&&(this.cookieValue&&this.render(this.cookieValue),window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)}))}onThemeChange({target:e}){super.onThemeChange({target:e}),this.render(e.value)}renderTheme(e){this.options.forEach(e=>{window.frames.iframe.document.documentElement&&window.frames.iframe.document.documentElement.classList.remove(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.remove(`theme-${e}`)})}),window.frames.iframe.document.documentElement.classList.add(`theme-${e}`),Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.classList.add(`theme-${e}`)})}render(e){this.options.forEach(e=>{document.documentElement.classList.remove(`${this.name}-${e}`)}),document.documentElement.classList.add(`${this.name}-${e}`),this.logoWrapper&&("auto"===e?this.options.forEach(e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)}):(this.logoWrapper.querySelectorAll("source").forEach(e=>e.remove()),this.logoImage.src=this.logoImage.dataset[e]))}}class h extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}renderTheme(e){Array.from(window.frames.iframe.frames).forEach(t=>{t.document.documentElement.setAttribute("dir",e)})}}class u extends d{constructor(e){super(e),window.frames.iframe&&window.frames.iframe.addEventListener("load",()=>{this.cookieValue&&this.renderTheme(this.cookieValue)})}onThemeChange({target:e}){const t=e.checked?"dev":"presentation";this.saveTheme(t),this.renderTheme(t)}renderSwitcher(){this.cookieValue&&(this.form.querySelector('[type="checkbox"]').checked="dev"==this.cookieValue)}renderTheme(e){window.frames.iframe.document.documentElement.dataset.mode=e}}class g{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Menu-toggleMobileMenu",menu:{rootLink:"Title-link",list:"Nav-list",children:"Nav-children",link:"Nav-item--link",variant:"Nav-variant",listItem:"Nav-entry",toggleComponent:"Nav-toggle"}},this.elements={rootLink:document.querySelector(`.${this.classes.menu.rootLink}`),content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),children:Array.from(document.querySelectorAll(`.${this.classes.menu.children}`)),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}, .${this.classes.menu.variant}`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new m(document.querySelector(".js-ThemeSwitcher")),new h(document.querySelector(".js-TextDirectionSwitcher")),new u(document.querySelector(".js-DevelopmentModeSwitcher"))}static toggleExpandedAttribute(e){const t="false"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",t?"true":"false"),document.getElementById(e.getAttribute("aria-controls")).hidden=!t}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe),l(e)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach(t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))})}openParentComponent(e){if(e){const t=this.elements.componentToggles.find(t=>t.getAttribute("aria-controls")===e.id);t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find(t=>e==t.getAttribute("href")||t.getAttribute("href")==e.replace(this.paths.container,this.paths.embedded));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const o=this.elements.links.find(e=>e.getAttribute("aria-current"));return o&&o.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&(n.setAttribute("aria-expanded","true"),document.getElementById(n.getAttribute("aria-controls")).hidden=!1),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e.startsWith("iframe-")?history.pushState(null,e,e.replace("iframe-","")):e.startsWith("/iframe")?history.pushState(null,e,e.replace("/iframe","")):e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){g.toggleExpandedAttribute(e)}onComponentToggleClick(e){g.toggleExpandedAttribute(e)}onRootLinkClick(e){const t=e.closest("a"),n=t.getAttribute("href");t.setAttribute("aria-current","page"),this.elements.componentToggles.forEach(e=>{e.setAttribute("aria-expanded",e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0"))}),this.elements.links.forEach(e=>{e.removeAttribute("aria-current")}),this.elements.children.forEach(e=>{e.hidden=!e.closest(".Nav-entry")?.classList.contains("Nav-entry--lvl0")}),this.updateIframe(n),this.closeToggleMenu(),this.updateUrl(n)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",e=>{e.preventDefault(),this.onToggleMenuClick(e.target)}),this.elements.toggleMenu.addEventListener("keyup",e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.onComponentToggleClick(e.target)}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))})})}addLinksClickListener(){this.elements.rootLink.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onRootLinkClick(e.target))}),this.elements.links.forEach(e=>{e.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))}),e.addEventListener("keyup",e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))})})}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class p extends g{constructor(){super(),this.paths={embedded:"component?",container:"show?"},this.embeddedParam="&embedded=true",this.indexPath=`/${this.paths.embedded}file=all${this.embeddedParam}`}onPopState(){let e;document.location.pathname.startsWith("/design-tokens")?e=`/iframe${document.location.pathname}`:""!==document.location.search?(e=`${document.location.href.replace(this.paths.container,this.paths.embedded)}${this.embeddedParam}`,e=e.replace(document.location.origin,"")):(e=this.indexPath,e=e.replace(document.location.origin,"")),super.onPopState(e)}}document.addEventListener("DOMContentLoaded",()=>new p);
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
.Controls {
|
|
2
|
+
background: var(--color-Menu-background);
|
|
3
|
+
border-top: var(--divider);
|
|
4
|
+
flex: 0 0 auto;
|
|
5
|
+
padding: 0.75rem var(--spacing-x, 2rem);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.Controls[data-mode="floating"] {
|
|
9
|
+
bottom: 0;
|
|
10
|
+
box-shadow: 0 -4px 12px rgb(0 0 0 / 15%);
|
|
11
|
+
left: 0;
|
|
12
|
+
position: fixed;
|
|
13
|
+
right: 0;
|
|
14
|
+
z-index: var(--bottom-layer);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (width > 40rem) {
|
|
18
|
+
.Controls[data-mode="floating"] {
|
|
19
|
+
left: 16rem;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.Controls-header {
|
|
24
|
+
align-items: center;
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: space-between;
|
|
27
|
+
margin-bottom: 0.5rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.Controls-heading {
|
|
31
|
+
font-size: 0.75rem;
|
|
32
|
+
font-weight: 600;
|
|
33
|
+
letter-spacing: 0.05em;
|
|
34
|
+
margin: 0;
|
|
35
|
+
text-transform: uppercase;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.Controls-modeToggle {
|
|
39
|
+
background: none;
|
|
40
|
+
border: 1px solid var(--color-Outline);
|
|
41
|
+
border-radius: 0.25rem;
|
|
42
|
+
color: var(--color-Icon);
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
font-size: 0.75rem;
|
|
45
|
+
padding: 0.25rem 0.5rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.Controls-modeToggle:hover {
|
|
49
|
+
color: var(--color-Text);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.Controls-fields {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-wrap: wrap;
|
|
55
|
+
gap: 1rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.Controls-field {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: 0.25rem;
|
|
62
|
+
min-width: 8rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.Controls-label {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
font-size: 0.875rem;
|
|
69
|
+
gap: 0.25rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.Controls-labelText {
|
|
73
|
+
color: var(--color-Text);
|
|
74
|
+
font-weight: 500;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.Controls-select {
|
|
78
|
+
background: var(--color-Link-active-background);
|
|
79
|
+
border: 1px solid var(--color-Outline);
|
|
80
|
+
border-radius: 0.25rem;
|
|
81
|
+
color: var(--color-Text);
|
|
82
|
+
font-family: var(--font-family);
|
|
83
|
+
font-size: 0.875rem;
|
|
84
|
+
padding: 0.25rem 0.5rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.Controls-checkbox {
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
height: 1rem;
|
|
90
|
+
width: 1rem;
|
|
91
|
+
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@import url("./shared.css");
|
|
3
3
|
@import url("./main/reset.css");
|
|
4
4
|
@import url("./main/menu.css");
|
|
5
|
+
@import url("./main/controls.css");
|
|
5
6
|
|
|
6
7
|
html {
|
|
7
8
|
height: 100%;
|
|
@@ -18,11 +19,14 @@ body {
|
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
.Content {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
21
24
|
grid-area: iframe;
|
|
22
25
|
}
|
|
23
26
|
|
|
24
27
|
.FrameWrapper {
|
|
25
|
-
|
|
28
|
+
flex: 1;
|
|
29
|
+
min-height: 0;
|
|
26
30
|
width: 100%;
|
|
27
31
|
}
|
|
28
32
|
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
html {
|
|
2
|
+
/* z-index scale */
|
|
3
|
+
--send-to-back: -1;
|
|
4
|
+
--bring-to-front: 9999;
|
|
5
|
+
--bottom-layer: 100;
|
|
6
|
+
--middle-layer: 200;
|
|
7
|
+
--top-layer: 300;
|
|
8
|
+
--backdrop: 400;
|
|
2
9
|
--font-family:
|
|
3
10
|
-apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
|
|
4
11
|
"Arial", sans-serif;
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
const CACHE_PREFIX = "miyagi-controls::";
|
|
2
|
+
const LS_MODE_KEY = "miyagi-controls-mode";
|
|
3
|
+
|
|
4
|
+
function getPanel() {
|
|
5
|
+
return document.getElementById("controls-panel");
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
function getFieldsContainer() {
|
|
9
|
+
return document.getElementById("controls-fields");
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function hidePanel() {
|
|
13
|
+
const panel = getPanel();
|
|
14
|
+
if (!panel) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
panel.hidden = true;
|
|
18
|
+
getFieldsContainer().innerHTML = "";
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function showPanel() {
|
|
22
|
+
const panel = getPanel();
|
|
23
|
+
if (panel) {
|
|
24
|
+
panel.hidden = false;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function initMode() {
|
|
29
|
+
const panel = getPanel();
|
|
30
|
+
if (!panel) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const mode = localStorage.getItem(LS_MODE_KEY) ?? "docked";
|
|
35
|
+
panel.setAttribute("data-mode", mode);
|
|
36
|
+
|
|
37
|
+
const toggle = document.getElementById("controls-mode-toggle");
|
|
38
|
+
if (toggle) {
|
|
39
|
+
toggle.addEventListener("click", () => {
|
|
40
|
+
const next =
|
|
41
|
+
panel.getAttribute("data-mode") === "docked" ? "floating" : "docked";
|
|
42
|
+
panel.setAttribute("data-mode", next);
|
|
43
|
+
localStorage.setItem(LS_MODE_KEY, next);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function buildOverrideSrc(baseSrc, property, value) {
|
|
49
|
+
const url = new URL(baseSrc, window.location.origin);
|
|
50
|
+
url.searchParams.set(`overrides[${property}]`, String(value));
|
|
51
|
+
return url.pathname + url.search;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function updateIframe(src) {
|
|
55
|
+
const iframe = document.getElementById("iframe");
|
|
56
|
+
const frameWrapper = document.querySelector(".FrameWrapper");
|
|
57
|
+
if (!iframe || !frameWrapper) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
iframe.remove();
|
|
61
|
+
iframe.src = src;
|
|
62
|
+
frameWrapper.appendChild(iframe);
|
|
63
|
+
loadControls(src);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function renderControls(controls, iframeSrc) {
|
|
67
|
+
const fieldsContainer = getFieldsContainer();
|
|
68
|
+
fieldsContainer.innerHTML = "";
|
|
69
|
+
|
|
70
|
+
const url = new URL(iframeSrc, window.location.origin);
|
|
71
|
+
const urlOverrides = {};
|
|
72
|
+
url.searchParams.forEach((value, key) => {
|
|
73
|
+
const match = key.match(/^overrides\[(.+)\]$/);
|
|
74
|
+
if (match) {
|
|
75
|
+
urlOverrides[match[1]] = value;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
controls.forEach(({ property, type, values, current }) => {
|
|
80
|
+
const displayValue =
|
|
81
|
+
urlOverrides[property] !== undefined ? urlOverrides[property] : current;
|
|
82
|
+
|
|
83
|
+
const fieldEl = document.createElement("div");
|
|
84
|
+
fieldEl.className = "Controls-field";
|
|
85
|
+
|
|
86
|
+
const labelEl = document.createElement("label");
|
|
87
|
+
labelEl.className = "Controls-label";
|
|
88
|
+
|
|
89
|
+
const labelText = document.createElement("span");
|
|
90
|
+
labelText.className = "Controls-labelText";
|
|
91
|
+
labelText.textContent = property;
|
|
92
|
+
labelEl.appendChild(labelText);
|
|
93
|
+
|
|
94
|
+
let inputEl;
|
|
95
|
+
|
|
96
|
+
if (type === "enum") {
|
|
97
|
+
inputEl = document.createElement("select");
|
|
98
|
+
inputEl.className = "Controls-select";
|
|
99
|
+
values.forEach((value) => {
|
|
100
|
+
const option = document.createElement("option");
|
|
101
|
+
option.value = value;
|
|
102
|
+
option.textContent = value;
|
|
103
|
+
// eslint-disable-next-line eqeqeq
|
|
104
|
+
if (value == displayValue) {
|
|
105
|
+
option.selected = true;
|
|
106
|
+
}
|
|
107
|
+
inputEl.appendChild(option);
|
|
108
|
+
});
|
|
109
|
+
inputEl.addEventListener("change", () => {
|
|
110
|
+
updateIframe(buildOverrideSrc(iframeSrc, property, inputEl.value));
|
|
111
|
+
});
|
|
112
|
+
} else if (type === "boolean") {
|
|
113
|
+
inputEl = document.createElement("input");
|
|
114
|
+
inputEl.type = "checkbox";
|
|
115
|
+
inputEl.className = "Controls-checkbox";
|
|
116
|
+
inputEl.checked =
|
|
117
|
+
typeof displayValue === "string"
|
|
118
|
+
? displayValue === "true"
|
|
119
|
+
: Boolean(displayValue);
|
|
120
|
+
inputEl.addEventListener("change", () => {
|
|
121
|
+
updateIframe(buildOverrideSrc(iframeSrc, property, inputEl.checked));
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
if (inputEl) {
|
|
126
|
+
labelEl.appendChild(inputEl);
|
|
127
|
+
fieldEl.appendChild(labelEl);
|
|
128
|
+
fieldsContainer.appendChild(fieldEl);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
showPanel();
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
export async function loadControls(iframeSrc) {
|
|
136
|
+
const url = new URL(iframeSrc, window.location.origin);
|
|
137
|
+
const file = url.searchParams.get("file");
|
|
138
|
+
const variation = url.searchParams.get("variation");
|
|
139
|
+
|
|
140
|
+
if (!file || !variation) {
|
|
141
|
+
hidePanel();
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const cacheKey = `${CACHE_PREFIX}${file}::${variation}`;
|
|
146
|
+
let data = null;
|
|
147
|
+
try {
|
|
148
|
+
data = JSON.parse(sessionStorage.getItem(cacheKey) ?? "null");
|
|
149
|
+
} catch {
|
|
150
|
+
sessionStorage.removeItem(cacheKey);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
if (!data) {
|
|
154
|
+
try {
|
|
155
|
+
const res = await fetch(
|
|
156
|
+
`/api/component-controls?file=${encodeURIComponent(file)}&variation=${encodeURIComponent(variation)}`,
|
|
157
|
+
);
|
|
158
|
+
data = await res.json();
|
|
159
|
+
sessionStorage.setItem(cacheKey, JSON.stringify(data));
|
|
160
|
+
} catch {
|
|
161
|
+
hidePanel();
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
if (data.controls?.length) {
|
|
167
|
+
renderControls(data.controls, iframeSrc);
|
|
168
|
+
} else {
|
|
169
|
+
hidePanel();
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
export function invalidateControlsCache(paths) {
|
|
174
|
+
for (const key of Object.keys(sessionStorage)) {
|
|
175
|
+
if (!key.startsWith(CACHE_PREFIX)) {
|
|
176
|
+
continue;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
if (!paths || paths.length === 0) {
|
|
180
|
+
sessionStorage.removeItem(key);
|
|
181
|
+
continue;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
const file = key.slice(CACHE_PREFIX.length).split("::")[0];
|
|
185
|
+
if (paths.some((p) => p.includes(file))) {
|
|
186
|
+
sessionStorage.removeItem(key);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
window.addEventListener("message", (e) => {
|
|
192
|
+
if (e.data?.type === "miyagi:invalidate-cache") {
|
|
193
|
+
invalidateControlsCache(e.data.paths ?? []);
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
198
|
+
initMode();
|
|
199
|
+
const iframe = document.getElementById("iframe");
|
|
200
|
+
if (iframe) {
|
|
201
|
+
const src = iframe.getAttribute("src");
|
|
202
|
+
if (src) {
|
|
203
|
+
loadControls(src);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "./_goto.js";
|
|
2
2
|
import "./_search.js";
|
|
3
|
+
import { loadControls } from "./_controls.js";
|
|
3
4
|
import ThemeConfigSwitcher from "./config-switcher/theme.js";
|
|
4
5
|
import TextDirectionConfigSwitcher from "./config-switcher/text-direction.js";
|
|
5
6
|
import DevelopmentModeConfigSwitcher from "./config-switcher/development-mode.js";
|
|
@@ -77,6 +78,7 @@ class Main {
|
|
|
77
78
|
this.elements.iframe.remove();
|
|
78
79
|
this.elements.iframe.src = src;
|
|
79
80
|
this.elements.frameWrapper.appendChild(this.elements.iframe);
|
|
81
|
+
loadControls(src);
|
|
80
82
|
}
|
|
81
83
|
|
|
82
84
|
/**
|
|
@@ -49,6 +49,22 @@ function parseScope(messageData) {
|
|
|
49
49
|
return parseJsonScope(messageData);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
function parseReason(messageData) {
|
|
53
|
+
try {
|
|
54
|
+
return JSON.parse(messageData).reason ?? null;
|
|
55
|
+
} catch {
|
|
56
|
+
return null;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function parsePaths(messageData) {
|
|
61
|
+
try {
|
|
62
|
+
return JSON.parse(messageData).paths ?? [];
|
|
63
|
+
} catch {
|
|
64
|
+
return [];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
52
68
|
function scheduleReconnect() {
|
|
53
69
|
const jitter = Math.floor(Math.random() * 100);
|
|
54
70
|
const delay = Math.min(retryDelay + jitter, MAX_RETRY_DELAY_MS);
|
|
@@ -67,6 +83,13 @@ function connect() {
|
|
|
67
83
|
};
|
|
68
84
|
|
|
69
85
|
websocket.onmessage = (message) => {
|
|
86
|
+
const reason = parseReason(message.data);
|
|
87
|
+
if (reason === "schema" || reason === "data") {
|
|
88
|
+
window.parent.postMessage(
|
|
89
|
+
{ type: "miyagi:invalidate-cache", paths: parsePaths(message.data) },
|
|
90
|
+
"*",
|
|
91
|
+
);
|
|
92
|
+
}
|
|
70
93
|
triggerReload(parseScope(message.data));
|
|
71
94
|
};
|
|
72
95
|
|
|
@@ -13,6 +13,18 @@ if (
|
|
|
13
13
|
window.location = new URL(window.location).replace("&embedded=true", "");
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
17
|
+
const mockDataEl = document.getElementById("miyagi-mock-data");
|
|
18
|
+
if (mockDataEl) {
|
|
19
|
+
try {
|
|
20
|
+
const detail = JSON.parse(mockDataEl.textContent);
|
|
21
|
+
document.dispatchEvent(new CustomEvent("miyagi:mockdata", { detail }));
|
|
22
|
+
} catch (e) {
|
|
23
|
+
console.debug("[miyagi] Failed to parse mock data island:", e);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
|
|
16
28
|
document.addEventListener("DOMContentLoaded", function () {
|
|
17
29
|
const links = Array.from(document.querySelectorAll(".Component-file"));
|
|
18
30
|
const styleguide = document.querySelector(".Styleguide");
|
|
@@ -24,6 +24,9 @@
|
|
|
24
24
|
{% if assets.js %}
|
|
25
25
|
<script src="{{ assets.js }}"></script>
|
|
26
26
|
{% endif %}
|
|
27
|
+
{% if mockDataResolved is defined %}
|
|
28
|
+
<script type="application/json" id="miyagi-mock-data">{{ mockDataResolved|replace({'</script>': '<\\/script>'})|raw }}</script>
|
|
29
|
+
{% endif %}
|
|
27
30
|
<script>
|
|
28
31
|
{{ theme.js }}
|
|
29
32
|
|
|
@@ -19,6 +19,15 @@
|
|
|
19
19
|
<div class="FrameWrapper">
|
|
20
20
|
<iframe class="Frame" id="iframe" src="{{ iframeSrc }}" name="iframe" title="Components"></iframe>
|
|
21
21
|
</div>
|
|
22
|
+
<div class="Controls" id="controls-panel" hidden>
|
|
23
|
+
<div class="Controls-header">
|
|
24
|
+
<h2 class="Controls-heading">Controls</h2>
|
|
25
|
+
<button class="Controls-modeToggle" id="controls-mode-toggle">
|
|
26
|
+
<span class="u-hiddenVisually">Toggle floating panel</span>
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="Controls-fields" id="controls-fields"></div>
|
|
30
|
+
</div>
|
|
22
31
|
</main>
|
|
23
32
|
</body>
|
|
24
33
|
</html>
|
package/lib/init/router.js
CHANGED
|
@@ -160,8 +160,61 @@ export default function Router() {
|
|
|
160
160
|
}
|
|
161
161
|
});
|
|
162
162
|
|
|
163
|
+
global.app.get("/api/component-controls", async (req, res) => {
|
|
164
|
+
const { file, variation } = req.query;
|
|
165
|
+
|
|
166
|
+
if (!file || !variation) {
|
|
167
|
+
return res.json({ controls: [] });
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
const routesEntry = global.state.routes.find(
|
|
171
|
+
(route) => route.paths.dir.short === file,
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
if (!routesEntry) {
|
|
175
|
+
return res.json({ controls: [] });
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
const schemaPath = routesEntry.paths?.schema?.full;
|
|
179
|
+
const schema = schemaPath
|
|
180
|
+
? global.state.fileContents[schemaPath]
|
|
181
|
+
: undefined;
|
|
182
|
+
|
|
183
|
+
if (!schema?.properties) {
|
|
184
|
+
return res.json({ controls: [] });
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
if (!getDataForComponent(routesEntry)) {
|
|
188
|
+
return res.json({ controls: [] });
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
const data = await getVariationData(routesEntry, decodeURI(variation));
|
|
192
|
+
const resolvedData = data?.resolved ?? {};
|
|
193
|
+
const controls = [];
|
|
194
|
+
|
|
195
|
+
for (const [property, propSchema] of Object.entries(schema.properties)) {
|
|
196
|
+
if (Array.isArray(propSchema.enum) && propSchema.enum.length > 0) {
|
|
197
|
+
controls.push({
|
|
198
|
+
property,
|
|
199
|
+
type: "enum",
|
|
200
|
+
values: propSchema.enum,
|
|
201
|
+
current:
|
|
202
|
+
resolvedData[property] ?? propSchema.default ?? propSchema.enum[0],
|
|
203
|
+
});
|
|
204
|
+
} else if (propSchema.type === "boolean") {
|
|
205
|
+
controls.push({
|
|
206
|
+
property,
|
|
207
|
+
type: "boolean",
|
|
208
|
+
current: resolvedData[property] ?? propSchema.default ?? false,
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
return res.json({ controls });
|
|
214
|
+
});
|
|
215
|
+
|
|
163
216
|
global.app.get("/component", async (req, res) => {
|
|
164
|
-
const { file, variation, embedded } = req.query;
|
|
217
|
+
const { file, variation, embedded, overrides } = req.query;
|
|
165
218
|
|
|
166
219
|
if (!file) {
|
|
167
220
|
return res.redirect(302, global.config.indexPath.default);
|
|
@@ -209,6 +262,7 @@ export default function Router() {
|
|
|
209
262
|
variation,
|
|
210
263
|
cookies: req.cookies,
|
|
211
264
|
data,
|
|
265
|
+
overrides: overrides ?? null,
|
|
212
266
|
});
|
|
213
267
|
}
|
|
214
268
|
|
|
@@ -224,6 +278,7 @@ export default function Router() {
|
|
|
224
278
|
componentData: data?.resolved ?? {},
|
|
225
279
|
componentDeclaredAssets: data?.$assets || null,
|
|
226
280
|
cookies: req.cookies,
|
|
281
|
+
overrides: overrides ?? null,
|
|
227
282
|
});
|
|
228
283
|
}
|
|
229
284
|
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Applies query-param override values to resolved component data.
|
|
3
|
+
* Values are coerced to the appropriate type based on the JSON schema.
|
|
4
|
+
* Only schema-defined properties are overridden; unknown keys are ignored.
|
|
5
|
+
*
|
|
6
|
+
* @param {object} data - the resolved mock data object
|
|
7
|
+
* @param {object} overrides - key/value overrides from req.query.overrides
|
|
8
|
+
* @param {object} [schema] - the JSON schema for the component
|
|
9
|
+
* @returns {object} a new object with overrides applied
|
|
10
|
+
*/
|
|
11
|
+
export default function applyOverrides(data, overrides, schema) {
|
|
12
|
+
if (!overrides || typeof overrides !== "object") {
|
|
13
|
+
return data;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const properties = schema?.properties ?? {};
|
|
17
|
+
const coerced = {};
|
|
18
|
+
|
|
19
|
+
for (const [key, value] of Object.entries(overrides)) {
|
|
20
|
+
const propSchema = properties[key];
|
|
21
|
+
if (!propSchema) continue;
|
|
22
|
+
|
|
23
|
+
if (propSchema.type === "boolean") {
|
|
24
|
+
coerced[key] = value === "true";
|
|
25
|
+
} else if (
|
|
26
|
+
Array.isArray(propSchema.enum) &&
|
|
27
|
+
propSchema.enum.every((v) => typeof v === "number")
|
|
28
|
+
) {
|
|
29
|
+
coerced[key] = Number(value);
|
|
30
|
+
} else {
|
|
31
|
+
coerced[key] = value;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return { ...data, ...coerced };
|
|
36
|
+
}
|
|
@@ -4,6 +4,7 @@ import { t } from "../../../i18n/index.js";
|
|
|
4
4
|
import * as helpers from "../../../helpers.js";
|
|
5
5
|
import validateMocks from "../../../validator/mocks.js";
|
|
6
6
|
import { getUserUiConfig, getThemeMode } from "../../helpers.js";
|
|
7
|
+
import applyOverrides from "../../helpers/apply-overrides.js";
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* @param {object} object - parameter object
|
|
@@ -22,9 +23,16 @@ export default async function renderIframeVariation({
|
|
|
22
23
|
cb,
|
|
23
24
|
cookies,
|
|
24
25
|
data,
|
|
26
|
+
overrides,
|
|
25
27
|
}) {
|
|
26
28
|
const rawComponentData = (data && data.raw) ?? null;
|
|
27
|
-
|
|
29
|
+
let componentData = (data && data.resolved) ?? null;
|
|
30
|
+
|
|
31
|
+
if (overrides && componentData) {
|
|
32
|
+
const schema =
|
|
33
|
+
global.state.fileContents[component.paths?.schema?.full] ?? null;
|
|
34
|
+
componentData = applyOverrides(componentData, overrides, schema);
|
|
35
|
+
}
|
|
28
36
|
const themeMode = getThemeMode(cookies);
|
|
29
37
|
|
|
30
38
|
const validatedMocks = validateMocks(component, [
|
|
@@ -44,6 +52,16 @@ export default async function renderIframeVariation({
|
|
|
44
52
|
standaloneUrl = `/component?file=${path.dirname(
|
|
45
53
|
component.paths.tpl.short,
|
|
46
54
|
)}&variation=${encodeURIComponent(variation)}`;
|
|
55
|
+
|
|
56
|
+
if (overrides && Object.keys(overrides).length > 0) {
|
|
57
|
+
const overrideParams = Object.entries(overrides)
|
|
58
|
+
.map(
|
|
59
|
+
([k, v]) =>
|
|
60
|
+
`overrides[${encodeURIComponent(k)}]=${encodeURIComponent(v)}`,
|
|
61
|
+
)
|
|
62
|
+
.join("&");
|
|
63
|
+
standaloneUrl += `&${overrideParams}`;
|
|
64
|
+
}
|
|
47
65
|
}
|
|
48
66
|
|
|
49
67
|
const mockValidation = validatedMocks
|
|
@@ -2,6 +2,7 @@ import path from "path";
|
|
|
2
2
|
import config from "../../../default-config.js";
|
|
3
3
|
import { getUserUiConfig } from "../../helpers.js";
|
|
4
4
|
import resolveAssets from "../../helpers/resolve-assets.js";
|
|
5
|
+
import applyOverrides from "../../helpers/apply-overrides.js";
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* @param {object} object - parameter object
|
|
@@ -20,7 +21,14 @@ export default async function renderIframeVariationStandalone({
|
|
|
20
21
|
componentDeclaredAssets = null,
|
|
21
22
|
cb,
|
|
22
23
|
cookies,
|
|
24
|
+
overrides,
|
|
23
25
|
}) {
|
|
26
|
+
if (overrides) {
|
|
27
|
+
const schema =
|
|
28
|
+
global.state.fileContents[component.paths?.schema?.full] ?? null;
|
|
29
|
+
componentData = applyOverrides(componentData ?? {}, overrides, schema);
|
|
30
|
+
}
|
|
31
|
+
|
|
24
32
|
const directoryPath = component.paths.dir.short;
|
|
25
33
|
|
|
26
34
|
return new Promise((resolve, reject) => {
|
|
@@ -49,6 +57,7 @@ export default async function renderIframeVariationStandalone({
|
|
|
49
57
|
"component_variation.twig.miyagi",
|
|
50
58
|
{
|
|
51
59
|
html: result,
|
|
60
|
+
mockDataResolved: JSON.stringify(componentData ?? {}),
|
|
52
61
|
cssFiles,
|
|
53
62
|
jsFilesHead,
|
|
54
63
|
jsFilesBody,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schalkneethling/miyagi-core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.6.0",
|
|
4
4
|
"description": "miyagi is a component development tool for JavaScript template engines.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "Schalk Neethling <schalkneethling@duck.com>, Michael Großklaus <mail@mgrossklaus.de> (https://www.mgrossklaus.de)",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@types/yargs": "^17.0.35",
|
|
61
61
|
"@vitest/coverage-v8": "^4.0.6",
|
|
62
62
|
"cssnano": "^7.1.2",
|
|
63
|
-
"eslint": "^
|
|
63
|
+
"eslint": "^10.2.0",
|
|
64
64
|
"eslint-plugin-jsdoc": "^62.5.4",
|
|
65
65
|
"globals": "^17.4.0",
|
|
66
66
|
"gulp": "^5.0.1",
|