@hufe921/canvas-editor-plugin-floating-toolbar
Version:
floating toolbar plugin for canvas-editor
643 lines (634 loc) • 51.3 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="floatingToolbar-style",e.appendChild(document.createTextNode(`/*! Pickr 1.9.0 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button:before{z-index:initial}.pickr .pcr-button:after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #00000040}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em #0000001a,0 0 1em #00000008;left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #4285f4bf}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #f44250bf}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(0,100%,50%))}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right,transparent,black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}.ce-floating-toolbar{display:flex;position:absolute;z-index:9;align-items:center;height:36px;background:#ffffff;transition:all .3s ease-in-out;box-shadow:0 2px 8px #44494d29;border-radius:4px;padding:0 8px}.ce-floating-toolbar.hide{display:none}.ce-floating-toolbar>div{min-width:20px;margin:0 3px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px}.ce-floating-toolbar>div:hover,.ce-floating-toolbar>div.active{background-color:#19375812}.ce-floating-toolbar>div i{width:16px;height:16px;display:inline-block}.ce-floating-toolbar>div.ce-divider{padding:0;min-width:unset;width:1px;height:16px;margin:0 3px;display:inline-block;background-color:#cfd2d8}.ce-floating-toolbar>div.ce-size-add i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik02LjIxNSAzLjI5SDcuNjRMMTEuODU1IDE0SDEwLjUybC0xLjE0LTNINC40NmwtMS4xNCAzSDJMNi4yMTUgMy4yOXpNNC44NSA5Ljk2NWg0LjE0TDYuOTY1IDQuNjFoLS4wNkw0Ljg1IDkuOTY1eiIvPjxwYXRoIGQ9Ik0xMiA0VjJoMXYyaDJ2MWgtMnYyaC0xVjVoLTJWNGgyeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvc3ZnPg==)}.ce-floating-toolbar>div.ce-size-minus i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTExIDRoNHYxaC00eiIvPjxwYXRoIGQ9Ik02LjIxNSAzLjI5SDcuNjRMMTEuODU1IDE0SDEwLjUybC0xLjE0LTNINC40NmwtMS4xNCAzSDJMNi4yMTUgMy4yOXpNNC44NSA5Ljk2NWg0LjE0TDYuOTY1IDQuNjFoLS4wNkw0Ljg1IDkuOTY1eiIvPjwvZz48L3N2Zz4=)}.ce-floating-toolbar>div.ce-bold i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4xMzEgNi45YzIuMDM1IDAgMi41NjktLjkgMi41NjktMS44NjkgMC0uOTY4LS42NC0xLjgzMS0yLjYyMy0xLjgzMUg1LjJ2My43aDIuOTMxem0uNTI0IDUuOWMyLjA0NSAwIDIuNTQ1LTEuMzA1IDIuNTQ1LTIuMyAwLS45ODUtLjUwNi0yLjQtMi44MS0yLjRINS4ydjQuN2gzLjQ1NXpNNCAyaDQuNzFjMi4zNjcgMCAzLjE5IDEuNTgzIDMuMTkgM3MtLjMyNSAxLjg1Mi0xLjEgMi41YzEuMi41IDEuNTY5IDEuMzc5IDEuNiAzIC4wMyAxLjYwNi0uNTg2IDMuNS0zLjc2OSAzLjVINFYyeiIgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}.ce-floating-toolbar>div.ce-italic i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMDE3IDNMOC4wOCAxM0g5djFINnYtMWgxLjE4Mkw5IDNIOFYyaDN2MWgtLjk4M3oiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-floating-toolbar>div.ce-underline i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNSAydjZhMyAzIDAgMTA2IDBWMmgxdjZhNCA0IDAgMTEtOCAwVjJoMXpNNCAxM2g4djFINHoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-floating-toolbar>div.ce-strikeout i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMC40MiA3LjkwM0g2LjY5MmE5LjE4MiA5LjE4MiAwIDAxLS40MS0uMTcyIDUuNTQgNS41NCAwIDAxLS44MTQtLjQ0NyAyLjk1NSAyLjk1NSAwIDAxLS42NTUtLjU5NSAyLjcyOCAyLjcyOCAwIDAxLS40NC0uNzc3IDIuODc3IDIuODc3IDAgMDEtLjE2Mi0xLjAwNmMwLS40NzIuMDk0LS44ODguMjgyLTEuMjUuMTg4LS4zNi40NTMtLjY2My43OTMtLjkwN3MuNzQ3LS40MyAxLjIyLS41NThBNS45NyA1Ljk3IDAgMDE4LjA2MyAyYy41MDQgMCAuOTUuMDQ5IDEuMzM3LjE0Ny4zODcuMDk3LjcyNS4yMyAxLjAxMy4zOTguMjg3LjE2OS41My4zNjUuNzMuNTlhMy4zMzcgMy4zMzcgMCAwMS43NzIgMS40ODZjLjAzLjEzLjA1NC4yNTUuMDczLjM3OWgtMS4yNzZhMi4zOTMgMi4zOTMgMCAwMC0uMjItLjYxNSAyLjMxNSAyLjMxNSAwIDAwLS41OS0uNzI0IDIuNDY3IDIuNDY3IDAgMDAtLjgzNC0uNDQgMy4zNzYgMy4zNzYgMCAwMC0xLjAwNS0uMTQ2IDQuNjkgNC42OSAwIDAwLS45NTguMDk3IDIuNzcgMi43NyAwIDAwLS44MzkuMzE0IDEuNzY1IDEuNzY1IDAgMDAtLjU5Ny41NjZjLS4xNTIuMjMzLS4yMjkuNTE4LS4yMjkuODU0IDAgLjM0OC4wODYuNjQyLjI1OC44ODQuMTcxLjI0MS40MDEuNDQ5LjY4OS42MjIuMjg3LjE3NC42MTUuMzIzLjk4My40NDhzLjc0OS4yNDcgMS4xNDIuMzY3Yy4zMS4wOTcuNjIuMTk2LjkzNC4yOTdhOC40MzkgOC40MzkgMCAwMS45NzMuMzh6bTEuMzc2IDFjLjE3NS4yMTcuMzE1LjQ2Ni40MTguNzQ2LjEwNS4yODUuMTU4LjYxMi4xNTguOTggMCAuNTU0LS4xMDQgMS4wNDEtLjMxMiAxLjQ2Mi0uMjA3LjQyLS40OTYuNzcyLS44NjcgMS4wNTQtLjM3LjI4Mi0uODEuNDk1LTEuMzIuNjRBNi4xMiA2LjEyIDAgMDE4LjIwNSAxNGMtLjU0MyAwLTEuMDcxLS4wOS0xLjU4Ni0uMjczYTQuNDQgNC40NCAwIDAxLTEuMzc0LS43NzMgMy44NzMgMy44NzMgMCAwMS0uOTctMS4yMTcgMy42OTUgMy42OTUgMCAwMS0uMzk1LTEuNjEyaDEuMjdjLjAyOC40MDcuMTIyLjc4LjI4MiAxLjEyYTIuODM1IDIuODM1IDAgMDAxLjU4MSAxLjQ2NWMuMzYzLjEzOC43Ni4yMDcgMS4xOTIuMjA3LjM4NyAwIC43NTgtLjA0MiAxLjExMi0uMTI2YTIuODUgMi44NSAwIDAwLjkzOC0uMzk5IDIuMDEgMi4wMSAwIDAwLjY0Ny0uNzA4Yy4xNi0uMjkuMjQxLS42NDIuMjQxLTEuMDU0IDAtLjMzNy0uMDg3LS42MjMtLjI2MS0uODZhMi4zMzMgMi4zMzMgMCAwMC0uNjktLjYxIDQuNjUxIDQuNjUxIDAgMDAtLjQ5NS0uMjU3aDIuMDk5eiIvPjxwYXRoIGQ9Ik0zIDdoMTB2MUgzeiIvPjwvZz48L3N2Zz4=)}.ce-floating-toolbar>div.ce-picker{height:20px;display:flex;flex-direction:column}.ce-floating-toolbar>div.ce-picker>span{width:16px;height:3px;display:inline-block;border:1px solid #e2e6ed}.ce-floating-toolbar>div.ce-picker .ce-picker-container{position:relative}.ce-floating-toolbar>div.ce-picker .ce-picker-container .pcr-app{position:absolute!important}.ce-floating-toolbar>div.ce-color i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy45OTcgMy40MjlMNi4zOTggOGgzLjJMNy45OTcgMy40Mjl6TTguNDk3IDJMMTIgMTJoLTFMOS45NDkgOWgtMy45TDUgMTJINEw3LjQ5NiAyaDF6IiBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=)}.ce-floating-toolbar>div.ce-highlight i{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMy4zMSA1aC0xLjkyYTIuMjAzIDIuMjAzIDAgMDAtLjM5LS4wMzRjLS4xMzUgMC0uMjcuMDEyLS40MDIuMDM0SDEwdi4xOGMtLjU3OC4yNTYtMSAuNzE0LTEgMS4yMTR2MS45MjhjMCAuMTk2LjExNy40My4zLjY1OHYxLjIzYTMuNTQzIDMuNTQzIDAgMDEtLjMtLjRWMTFIOFYxaDF2NC4yNjVDOSA0Ljc2MyAxMCA0IDEwLjk0MiA0YzEuMTkgMCAxLjkyLjQyMiAyLjM2NyAxek0yIDZjLS4wMy0uNDk4LS4xNzUtMiAyLjUtMkM3LjExIDQgNyA1IDcgNi45MDJWMTFINS45ODR2LS45OTNjLjM4LjY2Mi0uMTE1Ljk5My0xLjQ4NC45OTNDMi43MDggMTEgMiA5LjkzMSAyIDljMC0xLjQyOC40NDctMiAyLjUtMmgxLjQ4NGMwLTEgLjAzMS0yLTEuNDg0LTItMS41MzMgMC0xLjU3Ny40ODUtMS41NzcgMUgyem0yLjUgMkMzLjYwMSA4IDMgNy43NjggMyA5YzAgMS4zMS40MzggMSAxLjUgMSAuNjE3IDAgMS40ODQtLjY2NSAxLjQ4NC0xLjg0N1Y4SDQuNXoiLz48cGF0aCBkPSJNMTMuMDg1IDYuMzE2bC0yLjgxNCAzYTEgMSAwIDEwMS40NTggMS4zNjhsMi44MTUtM2ExIDEgMCAwMC0xLjQ1OS0xLjM2OHoiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)}`)),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
var Dt = Object.defineProperty;
var Rt = (p, h, g) => h in p ? Dt(p, h, { enumerable: !0, configurable: !0, writable: !0, value: g }) : p[h] = g;
var $ = (p, h, g) => (Rt(p, typeof h != "symbol" ? h + "" : h, g), g);
function Bt(p) {
return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
}
var ct = { exports: {} };
/*! Pickr 1.9.0 MIT | https://github.com/Simonwep/pickr */
(function(p, h) {
(function(g, y) {
p.exports = y();
})(self, () => (() => {
var g = { d: (c, t) => {
for (var e in t)
g.o(t, e) && !g.o(c, e) && Object.defineProperty(c, e, { enumerable: !0, get: t[e] });
}, o: (c, t) => Object.prototype.hasOwnProperty.call(c, t), r: (c) => {
typeof Symbol < "u" && Symbol.toStringTag && Object.defineProperty(c, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(c, "__esModule", { value: !0 });
} }, y = {};
g.d(y, { default: () => R });
var _ = {};
function A(c, t, e, n, r = {}) {
t instanceof HTMLCollection || t instanceof NodeList ? t = Array.from(t) : Array.isArray(t) || (t = [t]), Array.isArray(e) || (e = [e]);
for (const o of t)
for (const i of e)
o[c](i, n, { capture: !1, ...r });
return Array.prototype.slice.call(arguments, 1);
}
g.r(_), g.d(_, { adjustableInputNumbers: () => Q, createElementFromString: () => x, createFromTemplate: () => O, eventPath: () => P, off: () => k, on: () => b, resolveElement: () => D });
const b = A.bind(null, "addEventListener"), k = A.bind(null, "removeEventListener");
function x(c) {
const t = document.createElement("div");
return t.innerHTML = c.trim(), t.firstElementChild;
}
function O(c) {
const t = (n, r) => {
const o = n.getAttribute(r);
return n.removeAttribute(r), o;
}, e = (n, r = {}) => {
const o = t(n, ":obj"), i = t(n, ":ref"), a = o ? r[o] = {} : r;
i && (r[i] = n);
for (const s of Array.from(n.children)) {
const l = t(s, ":arr"), u = e(s, l ? {} : a);
l && (a[l] || (a[l] = [])).push(Object.keys(u).length ? u : s);
}
return r;
};
return e(x(c));
}
function P(c) {
let t = c.path || c.composedPath && c.composedPath();
if (t)
return t;
let e = c.target.parentElement;
for (t = [c.target, e]; e = e.parentElement; )
t.push(e);
return t.push(document, window), t;
}
function D(c) {
return c instanceof Element ? c : typeof c == "string" ? c.split(/>>/g).reduce((t, e, n, r) => (t = t.querySelector(e), n < r.length - 1 ? t.shadowRoot : t), document) : null;
}
function Q(c, t = (e) => e) {
function e(n) {
const r = [1e-3, 0.01, 0.1][Number(n.shiftKey || 2 * n.ctrlKey)] * (n.deltaY < 0 ? 1 : -1);
let o = 0, i = c.selectionStart;
c.value = c.value.replace(/[\d.]+/g, (a, s) => s <= i && s + a.length >= i ? (i = s, t(Number(a), r, o)) : (o++, a)), c.focus(), c.setSelectionRange(i, i), n.preventDefault(), c.dispatchEvent(new Event("input"));
}
b(c, "focus", () => b(window, "wheel", e, { passive: !1 })), b(c, "blur", () => k(window, "wheel", e));
}
const { min: N, max: lt, floor: pt, round: ut } = Math;
function X(c, t, e) {
t /= 100, e /= 100;
const n = pt(c = c / 360 * 6), r = c - n, o = e * (1 - t), i = e * (1 - r * t), a = e * (1 - (1 - r) * t), s = n % 6;
return [255 * [e, i, o, o, a, e][s], 255 * [a, e, e, i, o, o][s], 255 * [o, o, a, e, e, i][s]];
}
function dt(c, t, e) {
const n = (2 - (t /= 100)) * (e /= 100) / 2;
return n !== 0 && (t = n === 1 ? 0 : n < 0.5 ? t * e / (2 * n) : t * e / (2 - 2 * n)), [c, 100 * t, 100 * n];
}
function q(c, t, e) {
const n = N(c /= 255, t /= 255, e /= 255), r = lt(c, t, e), o = r - n;
let i, a;
if (o === 0)
i = a = 0;
else {
a = o / r;
const s = ((r - c) / 6 + o / 2) / o, l = ((r - t) / 6 + o / 2) / o, u = ((r - e) / 6 + o / 2) / o;
c === r ? i = u - l : t === r ? i = 1 / 3 + s - u : e === r && (i = 2 / 3 + l - s), i < 0 ? i += 1 : i > 1 && (i -= 1);
}
return [360 * i, 100 * a, 100 * r];
}
function ht(c, t, e, n) {
return t /= 100, e /= 100, [...q(255 * (1 - N(1, (c /= 100) * (1 - (n /= 100)) + n)), 255 * (1 - N(1, t * (1 - n) + n)), 255 * (1 - N(1, e * (1 - n) + n)))];
}
function mt(c, t, e) {
t /= 100;
const n = 2 * (t *= (e /= 100) < 0.5 ? e : 1 - e) / (e + t) * 100, r = 100 * (e + t);
return [c, isNaN(n) ? 0 : n, r];
}
function ft(c) {
return q(...c.match(/.{2}/g).map((t) => parseInt(t, 16)));
}
function vt(c) {
c = c.match(/^[a-zA-Z]+$/) ? function(r) {
if (r.toLowerCase() === "black")
return "#000";
const o = document.createElement("canvas").getContext("2d");
return o.fillStyle = r, o.fillStyle === "#000" ? null : o.fillStyle;
}(c) : c;
const t = { cmyk: /^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i, rgba: /^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i, hsla: /^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i, hsva: /^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i, hexa: /^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i }, e = (r) => r.map((o) => /^(|\d+)\.\d+|\d+$/.test(o) ? Number(o) : void 0);
let n;
t:
for (const r in t)
if (n = t[r].exec(c))
switch (r) {
case "cmyk": {
const [, o, i, a, s] = e(n);
if (o > 100 || i > 100 || a > 100 || s > 100)
break t;
return { values: ht(o, i, a, s), type: r };
}
case "rgba": {
let [, o, , i, , a, , , s] = e(n);
if (o = n[2] === "%" ? o / 100 * 255 : o, i = n[4] === "%" ? i / 100 * 255 : i, a = n[6] === "%" ? a / 100 * 255 : a, s = n[9] === "%" ? s / 100 : s, o > 255 || i > 255 || a > 255 || s < 0 || s > 1)
break t;
return { values: [...q(o, i, a), s], a: s, type: r };
}
case "hexa": {
let [, o] = n;
o.length !== 4 && o.length !== 3 || (o = o.split("").map((s) => s + s).join(""));
const i = o.substring(0, 6);
let a = o.substring(6);
return a = a ? parseInt(a, 16) / 255 : void 0, { values: [...ft(i), a], a, type: r };
}
case "hsla": {
let [, o, i, a, , s] = e(n);
if (s = n[6] === "%" ? s / 100 : s, o > 360 || i > 100 || a > 100 || s < 0 || s > 1)
break t;
return { values: [...mt(o, i, a), s], a: s, type: r };
}
case "hsva": {
let [, o, i, a, , s] = e(n);
if (s = n[6] === "%" ? s / 100 : s, o > 360 || i > 100 || a > 100 || s < 0 || s > 1)
break t;
return { values: [o, i, a, s], a: s, type: r };
}
}
return { values: null, type: null };
}
function j(c = 0, t = 0, e = 0, n = 1) {
const r = (i, a) => (s = -1) => a(~s ? i.map((l) => Number(l.toFixed(s))) : i), o = { h: c, s: t, v: e, a: n, toHSVA() {
const i = [o.h, o.s, o.v, o.a];
return i.toString = r(i, (a) => `hsva(${a[0]}, ${a[1]}%, ${a[2]}%, ${o.a})`), i;
}, toHSLA() {
const i = [...dt(o.h, o.s, o.v), o.a];
return i.toString = r(i, (a) => `hsla(${a[0]}, ${a[1]}%, ${a[2]}%, ${o.a})`), i;
}, toRGBA() {
const i = [...X(o.h, o.s, o.v), o.a];
return i.toString = r(i, (a) => `rgba(${a[0]}, ${a[1]}, ${a[2]}, ${o.a})`), i;
}, toCMYK() {
const i = function(a, s, l) {
const u = X(a, s, l), d = u[0] / 255, f = u[1] / 255, m = u[2] / 255, v = N(1 - d, 1 - f, 1 - m);
return [100 * (v === 1 ? 0 : (1 - d - v) / (1 - v)), 100 * (v === 1 ? 0 : (1 - f - v) / (1 - v)), 100 * (v === 1 ? 0 : (1 - m - v) / (1 - v)), 100 * v];
}(o.h, o.s, o.v);
return i.toString = r(i, (a) => `cmyk(${a[0]}%, ${a[1]}%, ${a[2]}%, ${a[3]}%)`), i;
}, toHEXA() {
const i = function(s, l, u) {
return X(s, l, u).map((d) => ut(d).toString(16).padStart(2, "0"));
}(o.h, o.s, o.v), a = o.a >= 1 ? "" : Number((255 * o.a).toFixed(0)).toString(16).toUpperCase().padStart(2, "0");
return a && i.push(a), i.toString = () => `#${i.join("").toUpperCase()}`, i;
}, clone: () => j(o.h, o.s, o.v, o.a) };
return o;
}
const M = (c) => Math.max(Math.min(c, 1), 0);
function K(c) {
const t = { options: Object.assign({ lock: null, onchange: () => 0, onstop: () => 0 }, c), _keyboard(o) {
const { options: i } = t, { type: a, key: s } = o;
if (document.activeElement === i.wrapper) {
const { lock: l } = t.options, u = s === "ArrowUp", d = s === "ArrowRight", f = s === "ArrowDown", m = s === "ArrowLeft";
if (a === "keydown" && (u || d || f || m)) {
let v = 0, C = 0;
l === "v" ? v = u || d ? 1 : -1 : l === "h" ? v = u || d ? -1 : 1 : (C = u ? -1 : f ? 1 : 0, v = m ? -1 : d ? 1 : 0), t.update(M(t.cache.x + 0.01 * v), M(t.cache.y + 0.01 * C)), o.preventDefault();
} else
s.startsWith("Arrow") && (t.options.onstop(), o.preventDefault());
}
}, _tapstart(o) {
b(document, ["mouseup", "touchend", "touchcancel"], t._tapstop), b(document, ["mousemove", "touchmove"], t._tapmove), o.cancelable && o.preventDefault(), t._tapmove(o);
}, _tapmove(o) {
const { options: i, cache: a } = t, { lock: s, element: l, wrapper: u } = i, d = u.getBoundingClientRect();
let f = 0, m = 0;
if (o) {
const H = o && o.touches && o.touches[0];
f = o ? (H || o).clientX : 0, m = o ? (H || o).clientY : 0, f < d.left ? f = d.left : f > d.left + d.width && (f = d.left + d.width), m < d.top ? m = d.top : m > d.top + d.height && (m = d.top + d.height), f -= d.left, m -= d.top;
} else
a && (f = a.x * d.width, m = a.y * d.height);
s !== "h" && (l.style.left = `calc(${f / d.width * 100}% - ${l.offsetWidth / 2}px)`), s !== "v" && (l.style.top = `calc(${m / d.height * 100}% - ${l.offsetHeight / 2}px)`), t.cache = { x: f / d.width, y: m / d.height };
const v = M(f / d.width), C = M(m / d.height);
switch (s) {
case "v":
return i.onchange(v);
case "h":
return i.onchange(C);
default:
return i.onchange(v, C);
}
}, _tapstop() {
t.options.onstop(), k(document, ["mouseup", "touchend", "touchcancel"], t._tapstop), k(document, ["mousemove", "touchmove"], t._tapmove);
}, trigger() {
t._tapmove();
}, update(o = 0, i = 0) {
const { left: a, top: s, width: l, height: u } = t.options.wrapper.getBoundingClientRect();
t.options.lock === "h" && (i = o), t._tapmove({ clientX: a + l * o, clientY: s + u * i });
}, destroy() {
const { options: o, _tapstart: i, _keyboard: a } = t;
k(document, ["keydown", "keyup"], a), k([o.wrapper, o.element], "mousedown", i), k([o.wrapper, o.element], "touchstart", i, { passive: !1 });
} }, { options: e, _tapstart: n, _keyboard: r } = t;
return b([e.wrapper, e.element], "mousedown", n), b([e.wrapper, e.element], "touchstart", n, { passive: !1 }), b(document, ["keydown", "keyup"], r), t;
}
function bt(c = {}) {
c = Object.assign({ onchange: () => 0, className: "", elements: [] }, c);
const t = b(c.elements, "click", (e) => {
c.elements.forEach((n) => n.classList[e.target === n ? "add" : "remove"](c.className)), c.onchange(e), e.stopPropagation();
});
return { destroy: () => k(...t) };
}
const gt = { variantFlipOrder: { start: "sme", middle: "mse", end: "ems" }, positionFlipOrder: { top: "tbrl", right: "rltb", bottom: "btrl", left: "lrbt" }, position: "bottom", margin: 8, padding: 0 }, yt = (c, t, e) => {
const n = typeof c != "object" || c instanceof HTMLElement ? { reference: c, popper: t, ...e } : c;
return { update(r = n) {
const { reference: o, popper: i } = Object.assign(n, r);
if (!i || !o)
throw new Error("Popper- or reference-element missing.");
return ((a, s, l) => {
const { container: u, arrow: d, margin: f, padding: m, position: v, variantFlipOrder: C, positionFlipOrder: H } = { container: document.documentElement.getBoundingClientRect(), ...gt, ...l }, { left: W, top: Y } = s.style;
s.style.left = "0", s.style.top = "0";
const w = a.getBoundingClientRect(), S = s.getBoundingClientRect(), _t = { t: w.top - S.height - f, b: w.bottom + f, r: w.right + f, l: w.left - S.width - f }, wt = { vs: w.left, vm: w.left + w.width / 2 - S.width / 2, ve: w.left + w.width - S.width, hs: w.top, hm: w.bottom - w.height / 2 - S.height / 2, he: w.bottom - S.height }, [kt, Ct = "middle"] = v.split("-"), $t = H[kt], At = C[Ct], { top: tt, left: et, bottom: ot, right: nt } = u;
for (const T of $t) {
const I = T === "t" || T === "b";
let B = _t[T];
const [z, G] = I ? ["top", "left"] : ["left", "top"], [it, Z] = I ? [S.height, S.width] : [S.width, S.height], [St, Lt] = I ? [ot, nt] : [nt, ot], [Et, Ot] = I ? [tt, et] : [et, tt];
if (!(B < Et || B + it + m > St))
for (const st of At) {
let U = wt[(I ? "v" : "h") + st];
if (!(U < Ot || U + Z + m > Lt)) {
if (U -= S[G], B -= S[z], s.style[G] = `${U}px`, s.style[z] = `${B}px`, d) {
const rt = I ? w.width / 2 : w.height / 2, xt = 2 * rt < Z ? w[G] + rt : U + Z / 2;
B < w[z] && (B += it), d.style[G] = `${xt}px`, d.style[z] = `${B}px`;
}
return T + st;
}
}
}
return s.style.left = W, s.style.top = Y, null;
})(o, i, n);
} };
}, F = class {
constructor(t) {
$(this, "_initializingActive", !0);
$(this, "_recalc", !0);
$(this, "_nanopop", null);
$(this, "_root", null);
$(this, "_color", j());
$(this, "_lastColor", j());
$(this, "_swatchColors", []);
$(this, "_setupAnimationFrame", null);
$(this, "_eventListener", { init: [], save: [], hide: [], show: [], clear: [], change: [], changestop: [], cancel: [], swatchselect: [] });
this.options = t = Object.assign({ ...F.DEFAULT_OPTIONS }, t);
const { swatches: e, components: n, theme: r, sliders: o, lockOpacity: i, padding: a } = t;
["nano", "monolith"].includes(r) && !o && (t.sliders = "h"), n.interaction || (n.interaction = {});
const { preview: s, opacity: l, hue: u, palette: d } = n;
n.opacity = !i && l, n.palette = d || s || l || u, this._preBuild(), this._buildComponents(), this._bindEvents(), this._finalBuild(), e && e.length && e.forEach((C) => this.addSwatch(C));
const { button: f, app: m } = this._root;
this._nanopop = yt(f, m, { margin: a }), f.setAttribute("role", "button"), f.setAttribute("aria-label", this._t("btn:toggle"));
const v = this;
this._setupAnimationFrame = requestAnimationFrame(function C() {
if (!m.offsetWidth)
return requestAnimationFrame(C);
v.setColor(t.default), v._rePositioningPicker(), t.defaultRepresentation && (v._representation = t.defaultRepresentation, v.setColorRepresentation(v._representation)), t.showAlways && v.show(), v._initializingActive = !1, v._emit("init");
});
}
_preBuild() {
const { options: t } = this;
for (const e of ["el", "container"])
t[e] = D(t[e]);
this._root = ((e) => {
const { components: n, useAsButton: r, inline: o, appClass: i, theme: a, lockOpacity: s } = e.options, l = (m) => m ? "" : 'style="display:none" hidden', u = (m) => e._t(m), d = O(`
<div :ref="root" class="pickr">
${r ? "" : '<button type="button" :ref="button" class="pcr-button"></button>'}
<div :ref="app" class="pcr-app ${i || ""}" data-theme="${a}" ${o ? 'style="position: unset"' : ""} aria-label="${u("ui:dialog")}" role="window">
<div class="pcr-selection" ${l(n.palette)}>
<div :obj="preview" class="pcr-color-preview" ${l(n.preview)}>
<button type="button" :ref="lastColor" class="pcr-last-color" aria-label="${u("btn:last-color")}"></button>
<div :ref="currentColor" class="pcr-current-color"></div>
</div>
<div :obj="palette" class="pcr-color-palette">
<div :ref="picker" class="pcr-picker"></div>
<div :ref="palette" class="pcr-palette" tabindex="0" aria-label="${u("aria:palette")}" role="listbox"></div>
</div>
<div :obj="hue" class="pcr-color-chooser" ${l(n.hue)}>
<div :ref="picker" class="pcr-picker"></div>
<div :ref="slider" class="pcr-hue pcr-slider" tabindex="0" aria-label="${u("aria:hue")}" role="slider"></div>
</div>
<div :obj="opacity" class="pcr-color-opacity" ${l(n.opacity)}>
<div :ref="picker" class="pcr-picker"></div>
<div :ref="slider" class="pcr-opacity pcr-slider" tabindex="0" aria-label="${u("aria:opacity")}" role="slider"></div>
</div>
</div>
<div class="pcr-swatches ${n.palette ? "" : "pcr-last"}" :ref="swatches"></div>
<div :obj="interaction" class="pcr-interaction" ${l(Object.keys(n.interaction).length)}>
<input :ref="result" class="pcr-result" type="text" spellcheck="false" ${l(n.interaction.input)} aria-label="${u("aria:input")}">
<input :arr="options" class="pcr-type" data-type="HEXA" value="${s ? "HEX" : "HEXA"}" type="button" ${l(n.interaction.hex)}>
<input :arr="options" class="pcr-type" data-type="RGBA" value="${s ? "RGB" : "RGBA"}" type="button" ${l(n.interaction.rgba)}>
<input :arr="options" class="pcr-type" data-type="HSLA" value="${s ? "HSL" : "HSLA"}" type="button" ${l(n.interaction.hsla)}>
<input :arr="options" class="pcr-type" data-type="HSVA" value="${s ? "HSV" : "HSVA"}" type="button" ${l(n.interaction.hsva)}>
<input :arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ${l(n.interaction.cmyk)}>
<input :ref="save" class="pcr-save" value="${u("btn:save")}" type="button" ${l(n.interaction.save)} aria-label="${u("aria:btn:save")}">
<input :ref="cancel" class="pcr-cancel" value="${u("btn:cancel")}" type="button" ${l(n.interaction.cancel)} aria-label="${u("aria:btn:cancel")}">
<input :ref="clear" class="pcr-clear" value="${u("btn:clear")}" type="button" ${l(n.interaction.clear)} aria-label="${u("aria:btn:clear")}">
</div>
</div>
</div>
`), f = d.interaction;
return f.options.find((m) => !m.hidden && !m.classList.add("active")), f.type = () => f.options.find((m) => m.classList.contains("active")), d;
})(this), t.useAsButton && (this._root.button = t.el), t.container.appendChild(this._root.root);
}
_finalBuild() {
const t = this.options, e = this._root;
if (t.container.removeChild(e.root), t.inline) {
const n = t.el.parentElement;
t.el.nextSibling ? n.insertBefore(e.app, t.el.nextSibling) : n.appendChild(e.app);
} else
t.container.appendChild(e.app);
t.useAsButton ? t.inline && t.el.remove() : t.el.parentNode.replaceChild(e.root, t.el), t.disabled && this.disable(), t.comparison || (e.button.style.transition = "none", t.useAsButton || (e.preview.lastColor.style.transition = "none")), this.hide();
}
_buildComponents() {
const t = this, e = this.options.components, n = (t.options.sliders || "v").repeat(2), [r, o] = n.match(/^[vh]+$/g) ? n : [], i = () => this._color || (this._color = this._lastColor.clone()), a = { palette: K({ element: t._root.palette.picker, wrapper: t._root.palette.palette, onstop: () => t._emit("changestop", "slider", t), onchange(s, l) {
if (!e.palette)
return;
const u = i(), { _root: d, options: f } = t, { lastColor: m, currentColor: v } = d.preview;
t._recalc && (u.s = 100 * s, u.v = 100 - 100 * l, u.v < 0 && (u.v = 0), t._updateOutput("slider"));
const C = u.toRGBA().toString(0);
this.element.style.background = C, this.wrapper.style.background = `
linear-gradient(to top, rgba(0, 0, 0, ${u.a}), transparent),
linear-gradient(to left, hsla(${u.h}, 100%, 50%, ${u.a}), rgba(255, 255, 255, ${u.a}))
`, f.comparison ? f.useAsButton || t._lastColor || m.style.setProperty("--pcr-color", C) : (d.button.style.setProperty("--pcr-color", C), d.button.classList.remove("clear"));
const H = u.toHEXA().toString();
for (const { el: W, color: Y } of t._swatchColors)
W.classList[H === Y.toHEXA().toString() ? "add" : "remove"]("pcr-active");
v.style.setProperty("--pcr-color", C);
} }), hue: K({ lock: o === "v" ? "h" : "v", element: t._root.hue.picker, wrapper: t._root.hue.slider, onstop: () => t._emit("changestop", "slider", t), onchange(s) {
if (!e.hue || !e.palette)
return;
const l = i();
t._recalc && (l.h = 360 * s), this.element.style.backgroundColor = `hsl(${l.h}, 100%, 50%)`, a.palette.trigger();
} }), opacity: K({ lock: r === "v" ? "h" : "v", element: t._root.opacity.picker, wrapper: t._root.opacity.slider, onstop: () => t._emit("changestop", "slider", t), onchange(s) {
if (!e.opacity || !e.palette)
return;
const l = i();
t._recalc && (l.a = Math.round(100 * s) / 100), this.element.style.background = `rgba(0, 0, 0, ${l.a})`, a.palette.trigger();
} }), selectable: bt({ elements: t._root.interaction.options, className: "active", onchange(s) {
t._representation = s.target.getAttribute("data-type").toUpperCase(), t._recalc && t._updateOutput("swatch");
} }) };
this._components = a;
}
_bindEvents() {
const { _root: t, options: e } = this, n = [b(t.interaction.clear, "click", () => this._clearColor()), b([t.interaction.cancel, t.preview.lastColor], "click", () => {
this.setHSVA(...(this._lastColor || this._color).toHSVA(), !0), this._emit("cancel");
}), b(t.interaction.save, "click", () => {
!this.applyColor() && !e.showAlways && this.hide();
}), b(t.interaction.result, ["keyup", "input"], (r) => {
this.setColor(r.target.value, !0) && !this._initializingActive && (this._emit("change", this._color, "input", this), this._emit("changestop", "input", this)), r.stopImmediatePropagation();
}), b(t.interaction.result, ["focus", "blur"], (r) => {
this._recalc = r.type === "blur", this._recalc && this._updateOutput(null);
}), b([t.palette.palette, t.palette.picker, t.hue.slider, t.hue.picker, t.opacity.slider, t.opacity.picker], ["mousedown", "touchstart"], () => this._recalc = !0, { passive: !0 })];
if (!e.showAlways) {
const r = e.closeWithKey;
n.push(b(t.button, "click", () => this.isOpen() ? this.hide() : this.show()), b(document, "keyup", (o) => this.isOpen() && (o.key === r || o.code === r) && this.hide()), b(document, ["touchstart", "mousedown"], (o) => {
this.isOpen() && !P(o).some((i) => i === t.app || i === t.button) && this.hide();
}, { capture: !0 }));
}
if (e.adjustableNumbers) {
const r = { rgba: [255, 255, 255, 1], hsva: [360, 100, 100, 1], hsla: [360, 100, 100, 1], cmyk: [100, 100, 100, 100] };
Q(t.interaction.result, (o, i, a) => {
const s = r[this.getColorRepresentation().toLowerCase()];
if (s) {
const l = s[a], u = o + (l >= 100 ? 1e3 * i : i);
return u <= 0 ? 0 : Number((u < l ? u : l).toPrecision(3));
}
return o;
});
}
if (e.autoReposition && !e.inline) {
let r = null;
const o = this;
n.push(b(window, ["scroll", "resize"], () => {
o.isOpen() && (e.closeOnScroll && o.hide(), r === null ? (r = setTimeout(() => r = null, 100), requestAnimationFrame(function i() {
o._rePositioningPicker(), r !== null && requestAnimationFrame(i);
})) : (clearTimeout(r), r = setTimeout(() => r = null, 100)));
}, { capture: !0 }));
}
this._eventBindings = n;
}
_rePositioningPicker() {
const { options: t } = this;
if (!t.inline && !this._nanopop.update({ container: document.body.getBoundingClientRect(), position: t.position })) {
const e = this._root.app, n = e.getBoundingClientRect();
e.style.top = (window.innerHeight - n.height) / 2 + "px", e.style.left = (window.innerWidth - n.width) / 2 + "px";
}
}
_updateOutput(t) {
const { _root: e, _color: n, options: r } = this;
if (e.interaction.type()) {
const o = `to${e.interaction.type().getAttribute("data-type")}`;
e.interaction.result.value = typeof n[o] == "function" ? n[o]().toString(r.outputPrecision) : "";
}
!this._initializingActive && this._recalc && this._emit("change", n, t, this);
}
_clearColor(t = !1) {
const { _root: e, options: n } = this;
n.useAsButton || e.button.style.setProperty("--pcr-color", "rgba(0, 0, 0, 0.15)"), e.button.classList.add("clear"), n.showAlways || this.hide(), this._lastColor = null, this._initializingActive || t || (this._emit("save", null), this._emit("clear"));
}
_parseLocalColor(t) {
const { values: e, type: n, a: r } = vt(t), { lockOpacity: o } = this.options, i = r !== void 0 && r !== 1;
return e && e.length === 3 && (e[3] = void 0), { values: !e || o && i ? null : e, type: n };
}
_t(t) {
return this.options.i18n[t] || F.I18N_DEFAULTS[t];
}
_emit(t, ...e) {
this._eventListener[t].forEach((n) => n(...e, this));
}
on(t, e) {
return this._eventListener[t].push(e), this;
}
off(t, e) {
const n = this._eventListener[t] || [], r = n.indexOf(e);
return ~r && n.splice(r, 1), this;
}
addSwatch(t) {
const { values: e } = this._parseLocalColor(t);
if (e) {
const { _swatchColors: n, _root: r } = this, o = j(...e), i = x(`<button type="button" style="--pcr-color: ${o.toRGBA().toString(0)}" aria-label="${this._t("btn:swatch")}"/>`);
return r.swatches.appendChild(i), n.push({ el: i, color: o }), this._eventBindings.push(b(i, "click", () => {
this.setHSVA(...o.toHSVA(), !0), this._emit("swatchselect", o), this._emit("change", o, "swatch", this);
})), !0;
}
return !1;
}
removeSwatch(t) {
const e = this._swatchColors[t];
if (e) {
const { el: n } = e;
return this._root.swatches.removeChild(n), this._swatchColors.splice(t, 1), !0;
}
return !1;
}
applyColor(t = !1) {
const { preview: e, button: n } = this._root, r = this._color.toRGBA().toString(0);
return e.lastColor.style.setProperty("--pcr-color", r), this.options.useAsButton || n.style.setProperty("--pcr-color", r), n.classList.remove("clear"), this._lastColor = this._color.clone(), this._initializingActive || t || this._emit("save", this._color), this;
}
destroy() {
cancelAnimationFrame(this._setupAnimationFrame), this._eventBindings.forEach((t) => k(...t)), Object.keys(this._components).forEach((t) => this._components[t].destroy());
}
destroyAndRemove() {
this.destroy();
const { root: t, app: e } = this._root;
t.parentElement && t.parentElement.removeChild(t), e.parentElement.removeChild(e), Object.keys(this).forEach((n) => this[n] = null);
}
hide() {
return !!this.isOpen() && (this._root.app.classList.remove("visible"), this._emit("hide"), !0);
}
show() {
return !this.options.disabled && !this.isOpen() && (this._root.app.classList.add("visible"), this._rePositioningPicker(), this._emit("show", this._color), this);
}
isOpen() {
return this._root.app.classList.contains("visible");
}
setHSVA(t = 360, e = 0, n = 0, r = 1, o = !1) {
const i = this._recalc;
if (this._recalc = !1, t < 0 || t > 360 || e < 0 || e > 100 || n < 0 || n > 100 || r < 0 || r > 1)
return !1;
this._color = j(t, e, n, r);
const { hue: a, opacity: s, palette: l } = this._components;
return a.update(t / 360), s.update(r), l.update(e / 100, 1 - n / 100), o || this.applyColor(), i && this._updateOutput(), this._recalc = i, !0;
}
setColor(t, e = !1) {
if (t === null)
return this._clearColor(e), !0;
const { values: n, type: r } = this._parseLocalColor(t);
if (n) {
const o = r.toUpperCase(), { options: i } = this._root.interaction, a = i.find((s) => s.getAttribute("data-type") === o);
if (a && !a.hidden)
for (const s of i)
s.classList[s === a ? "add" : "remove"]("active");
return !!this.setHSVA(...n, e) && this.setColorRepresentation(o);
}
return !1;
}
setColorRepresentation(t) {
return t = t.toUpperCase(), !!this._root.interaction.options.find((e) => e.getAttribute("data-type").startsWith(t) && !e.click());
}
getColorRepresentation() {
return this._representation;
}
getColor() {
return this._color;
}
getSelectedColor() {
return this._lastColor;
}
getRoot() {
return this._root;
}
disable() {
return this.hide(), this.options.disabled = !0, this._root.button.classList.add("disabled"), this;
}
enable() {
return this.options.disabled = !1, this._root.button.classList.remove("disabled"), this;
}
};
let R = F;
return $(R, "utils", _), $(R, "version", "1.9.0"), $(R, "I18N_DEFAULTS", { "ui:dialog": "color picker dialog", "btn:toggle": "toggle color picker dialog", "btn:swatch": "color swatch", "btn:last-color": "use previous color", "btn:save": "Save", "btn:cancel": "Cancel", "btn:clear": "Clear", "aria:btn:save": "save and close", "aria:btn:cancel": "cancel and close", "aria:btn:clear": "clear and close", "aria:input": "color input field", "aria:palette": "color selection area", "aria:hue": "hue selection slider", "aria:opacity": "selection slider" }), $(R, "DEFAULT_OPTIONS", { appClass: null, theme: "classic", useAsButton: !1, padding: 8, disabled: !1, comparison: !0, closeOnScroll: !1, outputPrecision: 0, lockOpacity: !1, autoReposition: !0, container: "body", components: { interaction: {} }, i18n: {}, swatches: null, inline: !1, sliders: null, default: "#42445a", defaultRepresentation: null, position: "bottom-middle", adjustableNumbers: !0, showAlways: !1, closeWithKey: "Escape" }), $(R, "create", (t) => new F(t)), y = y.default;
})());
})(ct);
var Pt = ct.exports;
const Ht = /* @__PURE__ */ Bt(Pt);
var L;
(function(p) {
p.SIZE_ADD = "size-add", p.SIZE_MINUS = "size-minus", p.BOLD = "bold", p.ITALIC = "italic", p.UNDERLINE = "underline", p.STRIKEOUT = "strikeout", p.COLOR = "color", p.HIGHLIGHT = "highlight";
})(L || (L = {}));
const E = "ce";
function at(p, h, g) {
const y = document.createElement("div");
y.classList.add(`${E}-picker`), y.classList.add(`${E}-${h}`);
const _ = document.createElement("div");
_.classList.add(`${E}-picker-container`);
const A = document.createElement("div");
_.append(A), y.append(_), p.append(y);
const b = "#000000", k = new Ht({
el: A,
theme: "nano",
useAsButton: !0,
inline: !0,
default: b,
i18n: {
"btn:save": "✓"
},
components: {
preview: !0,
opacity: !0,
hue: !0,
interaction: {
input: !0,
save: !0
}
}
}), x = document.createElement("i");
y.append(x);
const O = document.createElement("span");
O.style.backgroundColor = b, y.append(O), y.onclick = (P) => {
const D = P.target;
_ !== D && !_.contains(D) && k.show();
}, k.on("save", (P) => {
k.hide();
const D = P.toHEXA().toString();
O.style.backgroundColor = D, g(D);
});
}
const It = [
{
key: L.SIZE_ADD,
callback(p) {
p.command.executeSizeAdd();
}
},
{
key: L.SIZE_MINUS,
callback(p) {
p.command.executeSizeMinus();
}
},
{
isDivider: !0
},
{
key: L.BOLD,
callback(p) {
p.command.executeBold();
}
},
{
key: L.ITALIC,
callback(p) {
p.command.executeItalic();
}
},
{
key: L.UNDERLINE,
callback(p) {
p.command.executeUnderline();
}
},
{
key: L.STRIKEOUT,
callback(p) {
p.command.executeStrikeout();
}
},
{
isDivider: !0
},
{
render(p, h) {
at(p, L.COLOR, (g) => {
h.command.executeColor(g);
});
}
},
{
render(p, h) {
at(p, L.HIGHLIGHT, (g) => {
h.command.executeHighlight(g);
});
}
}
];
function Nt(p) {
const h = document.createElement("div");
h.classList.add(`${E}-floating-toolbar`);
for (const g of It)
if (g.render)
g.render(h, p);
else if (g.isDivider) {
const y = document.createElement("div");
y.classList.add(`${E}-divider`), h.ap