@hufe921/canvas-editor-plugin-floating-toolbar
Version:
floating toolbar plugin for canvas-editor
52 lines (42 loc) • 42.5 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} (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)}})();
(function(E,S){typeof exports=="object"&&typeof module<"u"?module.exports=S():typeof define=="function"&&define.amd?define(S):(E=typeof globalThis<"u"?globalThis:E||self,E.floatingToolbar=S())})(this,function(){"use strict";var Nt=Object.defineProperty;var Ft=(E,S,R)=>S in E?Nt(E,S,{enumerable:!0,configurable:!0,writable:!0,value:R}):E[S]=R;var $=(E,S,R)=>(Ft(E,typeof S!="symbol"?S+"":S,R),R);const E="";function S(u){return u&&u.__esModule&&Object.prototype.hasOwnProperty.call(u,"default")?u.default:u}var R={exports:{}};/*! Pickr 1.9.0 MIT | https://github.com/Simonwep/pickr */(function(u,b){(function(y,g){u.exports=g()})(self,()=>(()=>{var y={d:(c,t)=>{for(var e in t)y.o(t,e)&&!y.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})}},g={};y.d(g,{default:()=>H});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)}y.r(_),y.d(_,{adjustableInputNumbers:()=>nt,createElementFromString:()=>B,createFromTemplate:()=>D,eventPath:()=>j,off:()=>k,on:()=>v,resolveElement:()=>P});const v=A.bind(null,"addEventListener"),k=A.bind(null,"removeEventListener");function B(c){const t=document.createElement("div");return t.innerHTML=c.trim(),t.firstElementChild}function D(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"),p=e(s,l?{}:a);l&&(a[l]||(a[l]=[])).push(Object.keys(p).length?p:s)}return r};return e(B(c))}function j(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 P(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 nt(c,t=e=>e){function e(n){const r=[.001,.01,.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"))}v(c,"focus",()=>v(window,"wheel",e,{passive:!1})),v(c,"blur",()=>k(window,"wheel",e))}const{min:T,max:vt,floor:bt,round:gt}=Math;function Y(c,t,e){t/=100,e/=100;const n=bt(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 yt(c,t,e){const n=(2-(t/=100))*(e/=100)/2;return n!==0&&(t=n===1?0:n<.5?t*e/(2*n):t*e/(2-2*n)),[c,100*t,100*n]}function Z(c,t,e){const n=T(c/=255,t/=255,e/=255),r=vt(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,p=((r-e)/6+o/2)/o;c===r?i=p-l:t===r?i=1/3+s-p:e===r&&(i=2/3+l-s),i<0?i+=1:i>1&&(i-=1)}return[360*i,100*a,100*r]}function _t(c,t,e,n){return t/=100,e/=100,[...Z(255*(1-T(1,(c/=100)*(1-(n/=100))+n)),255*(1-T(1,t*(1-n)+n)),255*(1-T(1,e*(1-n)+n)))]}function wt(c,t,e){t/=100;const n=2*(t*=(e/=100)<.5?e:1-e)/(e+t)*100,r=100*(e+t);return[c,isNaN(n)?0:n,r]}function kt(c){return Z(...c.match(/.{2}/g).map(t=>parseInt(t,16)))}function Ct(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:_t(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:[...Z(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:[...kt(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:[...wt(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 U(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=[...yt(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=[...Y(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 p=Y(a,s,l),d=p[0]/255,m=p[1]/255,h=p[2]/255,f=T(1-d,1-m,1-h);return[100*(f===1?0:(1-d-f)/(1-f)),100*(f===1?0:(1-m-f)/(1-f)),100*(f===1?0:(1-h-f)/(1-f)),100*f]}(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,p){return Y(s,l,p).map(d=>gt(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:()=>U(o.h,o.s,o.v,o.a)};return o}const V=c=>Math.max(Math.min(c,1),0);function J(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,p=s==="ArrowUp",d=s==="ArrowRight",m=s==="ArrowDown",h=s==="ArrowLeft";if(a==="keydown"&&(p||d||m||h)){let f=0,C=0;l==="v"?f=p||d?1:-1:l==="h"?f=p||d?-1:1:(C=p?-1:m?1:0,f=h?-1:d?1:0),t.update(V(t.cache.x+.01*f),V(t.cache.y+.01*C)),o.preventDefault()}else s.startsWith("Arrow")&&(t.options.onstop(),o.preventDefault())}},_tapstart(o){v(document,["mouseup","touchend","touchcancel"],t._tapstop),v(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:p}=i,d=p.getBoundingClientRect();let m=0,h=0;if(o){const N=o&&o.touches&&o.touches[0];m=o?(N||o).clientX:0,h=o?(N||o).clientY:0,m<d.left?m=d.left:m>d.left+d.width&&(m=d.left+d.width),h<d.top?h=d.top:h>d.top+d.height&&(h=d.top+d.height),m-=d.left,h-=d.top}else a&&(m=a.x*d.width,h=a.y*d.height);s!=="h"&&(l.style.left=`calc(${m/d.width*100}% - ${l.offsetWidth/2}px)`),s!=="v"&&(l.style.top=`calc(${h/d.height*100}% - ${l.offsetHeight/2}px)`),t.cache={x:m/d.width,y:h/d.height};const f=V(m/d.width),C=V(h/d.height);switch(s){case"v":return i.onchange(f);case"h":return i.onchange(C);default:return i.onchange(f,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:p}=t.options.wrapper.getBoundingClientRect();t.options.lock==="h"&&(i=o),t._tapmove({clientX:a+l*o,clientY:s+p*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 v([e.wrapper,e.element],"mousedown",n),v([e.wrapper,e.element],"touchstart",n,{passive:!1}),v(document,["keydown","keyup"],r),t}function $t(c={}){c=Object.assign({onchange:()=>0,className:"",elements:[]},c);const t=v(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 At={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8,padding:0},St=(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:p,arrow:d,margin:m,padding:h,position:f,variantFlipOrder:C,positionFlipOrder:N}={container:document.documentElement.getBoundingClientRect(),...At,...l},{left:Q,top:tt}=s.style;s.style.left="0",s.style.top="0";const w=a.getBoundingClientRect(),L=s.getBoundingClientRect(),Lt={t:w.top-L.height-m,b:w.bottom+m,r:w.right+m,l:w.left-L.width-m},Et={vs:w.left,vm:w.left+w.width/2-L.width/2,ve:w.left+w.width-L.width,hs:w.top,hm:w.bottom-w.height/2-L.height/2,he:w.bottom-L.height},[Ot,xt="middle"]=f.split("-"),Dt=N[Ot],Rt=C[xt],{top:it,left:st,bottom:rt,right:at}=p;for(const X of Dt){const F=X==="t"||X==="b";let I=Lt[X];const[q,K]=F?["top","left"]:["left","top"],[ct,et]=F?[L.height,L.width]:[L.width,L.height],[Bt,Pt]=F?[rt,at]:[at,rt],[Ht,It]=F?[it,st]:[st,it];if(!(I<Ht||I+ct+h>Bt))for(const lt of Rt){let z=Et[(F?"v":"h")+lt];if(!(z<It||z+et+h>Pt)){if(z-=L[K],I-=L[q],s.style[K]=`${z}px`,s.style[q]=`${I}px`,d){const pt=F?w.width/2:w.height/2,jt=2*pt<et?w[K]+pt:z+et/2;I<w[q]&&(I+=ct),d.style[K]=`${jt}px`,d.style[q]=`${I}px`}return X+lt}}}return s.style.left=Q,s.style.top=tt,null})(o,i,n)}}},M=class{constructor(t){$(this,"_initializingActive",!0);$(this,"_recalc",!0);$(this,"_nanopop",null);$(this,"_root",null);$(this,"_color",U());$(this,"_lastColor",U());$(this,"_swatchColors",[]);$(this,"_setupAnimationFrame",null);$(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]});this.options=t=Object.assign({...M.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:p,palette:d}=n;n.opacity=!i&&l,n.palette=d||s||l||p,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach(C=>this.addSwatch(C));const{button:m,app:h}=this._root;this._nanopop=St(m,h,{margin:a}),m.setAttribute("role","button"),m.setAttribute("aria-label",this._t("btn:toggle"));const f=this;this._setupAnimationFrame=requestAnimationFrame(function C(){if(!h.offsetWidth)return requestAnimationFrame(C);f.setColor(t.default),f._rePositioningPicker(),t.defaultRepresentation&&(f._representation=t.defaultRepresentation,f.setColorRepresentation(f._representation)),t.showAlways&&f.show(),f._initializingActive=!1,f._emit("init")})}_preBuild(){const{options:t}=this;for(const e of["el","container"])t[e]=P(t[e]);this._root=(e=>{const{components:n,useAsButton:r,inline:o,appClass:i,theme:a,lockOpacity:s}=e.options,l=h=>h?"":'style="display:none" hidden',p=h=>e._t(h),d=D(`
<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="${p("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="${p("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="${p("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="${p("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="${p("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="${p("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="${p("btn:save")}" type="button" ${l(n.interaction.save)} aria-label="${p("aria:btn:save")}">
<input :ref="cancel" class="pcr-cancel" value="${p("btn:cancel")}" type="button" ${l(n.interaction.cancel)} aria-label="${p("aria:btn:cancel")}">
<input :ref="clear" class="pcr-clear" value="${p("btn:clear")}" type="button" ${l(n.interaction.clear)} aria-label="${p("aria:btn:clear")}">
</div>
</div>
</div>
`),m=d.interaction;return m.options.find(h=>!h.hidden&&!h.classList.add("active")),m.type=()=>m.options.find(h=>h.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:J({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(s,l){if(!e.palette)return;const p=i(),{_root:d,options:m}=t,{lastColor:h,currentColor:f}=d.preview;t._recalc&&(p.s=100*s,p.v=100-100*l,p.v<0&&(p.v=0),t._updateOutput("slider"));const C=p.toRGBA().toString(0);this.element.style.background=C,this.wrapper.style.background=`
linear-gradient(to top, rgba(0, 0, 0, ${p.a}), transparent),
linear-gradient(to left, hsla(${p.h}, 100%, 50%, ${p.a}), rgba(255, 255, 255, ${p.a}))
`,m.comparison?m.useAsButton||t._lastColor||h.style.setProperty("--pcr-color",C):(d.button.style.setProperty("--pcr-color",C),d.button.classList.remove("clear"));const N=p.toHEXA().toString();for(const{el:Q,color:tt}of t._swatchColors)Q.classList[N===tt.toHEXA().toString()?"add":"remove"]("pcr-active");f.style.setProperty("--pcr-color",C)}}),hue:J({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:J({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:$t({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=[v(t.interaction.clear,"click",()=>this._clearColor()),v([t.interaction.cancel,t.preview.lastColor],"click",()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel")}),v(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),v(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()}),v(t.interaction.result,["focus","blur"],r=>{this._recalc=r.type==="blur",this._recalc&&this._updateOutput(null)}),v([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(v(t.button,"click",()=>this.isOpen()?this.hide():this.show()),v(document,"keyup",o=>this.isOpen()&&(o.key===r||o.code===r)&&this.hide()),v(document,["touchstart","mousedown"],o=>{this.isOpen()&&!j(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]};nt(t.interaction.result,(o,i,a)=>{const s=r[this.getColorRepresentation().toLowerCase()];if(s){const l=s[a],p=o+(l>=100?1e3*i:i);return p<=0?0:Number((p<l?p:l).toPrecision(3))}return o})}if(e.autoReposition&&!e.inline){let r=null;const o=this;n.push(v(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}=Ct(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]||M.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=U(...e),i=B(`<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(v(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=U(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 H=M;return $(H,"utils",_),$(H,"version","1.9.0"),$(H,"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"}),$(H,"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"}),$(H,"create",t=>new M(t)),g=g.default})())})(R);var ut=R.exports;const dt=S(ut),Tt="";var O;(function(u){u.SIZE_ADD="size-add",u.SIZE_MINUS="size-minus",u.BOLD="bold",u.ITALIC="italic",u.UNDERLINE="underline",u.STRIKEOUT="strikeout",u.COLOR="color",u.HIGHLIGHT="highlight"})(O||(O={}));const x="ce";function ot(u,b,y){const g=document.createElement("div");g.classList.add(`${x}-picker`),g.classList.add(`${x}-${b}`);const _=document.createElement("div");_.classList.add(`${x}-picker-container`);const A=document.createElement("div");_.append(A),g.append(_),u.append(g);const v="#000000",k=new dt({el:A,theme:"nano",useAsButton:!0,inline:!0,default:v,i18n:{"btn:save":"✓"},components:{preview:!0,opacity:!0,hue:!0,interaction:{input:!0,save:!0}}}),B=document.createElement("i");g.append(B);const D=document.createElement("span");D.style.backgroundColor=v,g.append(D),g.onclick=j=>{const P=j.target;_!==P&&!_.contains(P)&&k.show()},k.on("save",j=>{k.hide();const P=j.toHEXA().toString();D.style.backgroundColor=P,y(P)})}const ht=[{key:O.SIZE_ADD,callback(u){u.command.executeSizeAdd()}},{key:O.SIZE_MINUS,callback(u){u.command.executeSizeMinus()}},{isDivider:!0},{key:O.BOLD,callback(u){u.command.executeBold()}},{key:O.ITALIC,callback(u){u.command.executeItalic()}},{key:O.UNDERLINE,callback(u){u.command.executeUnderline()}},{key:O.STRIKEOUT,callback(u){u.command.executeStrikeout()}},{isDivider:!0},{render(u,b){ot(u,O.COLOR,y=>{b.command.executeColor(y)})}},{render(u,b){ot(u,O.HIGHLIGHT,y=>{b.command.executeHighlight(y)})}}];function mt(u){const b=document.createElement("div");b.classList.add(`${x}-floating-toolbar`);for(const y of ht)if(y.render)y.render(b,u);else if(y.isDivider){const g=document.createElement("div");g.classList.add(`${x}-divider`),b.append(g)}else{const{key:g,callback:_}=y,A=document.createElement("div");A.classList.add(`${x}-${g}`);const v=document.createElement("i");A.append(v),A.onclick=()=>{_==null||_(u)},b.append(A)}return b}function W(u,b){b?u.classList.remove("hide"):u.classList.add("hide")}function G(u,b){b?u.classList.add("active"):u.classList.remove("active")}function ft(u){const b=mt(u);u.command.getContainer().append(b),u.eventBus.on("rangeStyleChange",g=>{if(g.type===null){W(b,!1);return}const _=u.command.getRangeContext();if(!_||_.isCollapsed||!_.rangeRects[0]){W(b,!1);return}const A=_.rangeRects[0];b.style.left=`${A.x}px`,b.style.top=`${A.y+A.height}px`;const v=b.querySelector(`.${x}-bold`);v&&G(v,g.bold);const k=b.querySelector(`.${x}-italic`);k&&G(k,g.italic);const B=b.querySelector(`.${x}-underline`);B&&G(B,g.underline);const D=b.querySelector(`.${x}-strikeout`);D&&G(D,g.strikeout),W(b,!0)})}return ft});
//# sourceMappingURL=floatingToolbar.umd.cjs.map