@operato/input 1.11.12 → 1.11.17

package/dist/src/ox-input-color-stops.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,OAAO,UAAU,MAAM,mBAAmB,CAAA;AAO1C;;;;;;;;;;;;;;;EAeE;AAEK,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAkGL;;;;WAIG;QACyB,SAAI,GAAyB,OAAO,CAAA;QAChE;;WAEG;QACyB,QAAG,GAAW,CAAC,CAAA;QAC3C;;WAEG;QACyB,QAAG,GAAW,CAAC,CAAA;QAmRnC,cAAS,GAA+C,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IA6E7F,CAAC;aA9cQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FlB,AA/FY,CA+FZ;IA2BD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,UAAU,GAAG,IAAI,KAAK,EAAE,CAAA;QAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,oFAAoF,CAAA;IAC5G,CAAC;IAED,YAAY;QACV,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,oBAAoB,GAAG,KAAK,CAAA;QAEhC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,YAAY,KAAK,EAAE,CAAC;YACxD,IAAI,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACnC,IACE,IAAI,CAAC,OAAO;gBACZ,CAAC,CAAC,QAAQ;oBACR,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EACxG,CAAC;gBACD;;mBAEG;gBACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACrB,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtC,oBAAoB,GAAG,IAAI,CAAA;YAC7B,CAAC;QACH,CAAC;QAED,IAAI,oBAAoB,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,GAAG;oBACX,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE;oBACtC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE;iBACvC,CAAA;YACH,CAAC;YAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACnD,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;;;wBAG7D,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;yBAC5C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;yBACvC,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;oBAC3C,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;uBAC1C,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;;cAE7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAClC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEU,IAAI,CAAC,KAAK,gBAAgB,IAAI,CAAC,kBAAkB,CAC1E,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,GAAG,CACT;iCACc,KAAK;;;eAGvB,CACF;;;;;;;;iBAQI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;kBACjC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;;;;;;;;iBAQ5C,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ;kBACpC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;;;KAGxD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,KAAU;QACtB,OAAO,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5C,CAAC;IAED,WAAW,CAAC,KAAa;QACvB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACjD,OAAM;QACR,CAAC;QAED,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,8BAA8B,KAAK,IAAI,CAAgB,CAAA;QAClG,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAA;QACpE,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;QACtE,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QAE5C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACnB,OAAM;QACR,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAA;QAElC,IAAI,CAAC,cAAc,CAAC;YAClB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,SAAS,CAAC,KAAK;YACtB,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACrE,CAAC,CAAA;IACJ,CAAC;IAED,cAAc,CAAC,OAAY;QACzB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,uBAAuB;YAE5C,OAAM;QACR,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAa,EAAE;YAC3D,IAAI,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC3B,OAAO,SAAS,CAAA;YAClB,CAAC;YAED,OAAO;gBACL,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;aAC3B,CAAA;QACH,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAY,EAAE,CAAY,EAAE,EAAE;YACrC,OAAO,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;QAEF,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAEzC,IAAI,OAAO,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC,CAAA;YACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBACzB,IAAI,OAAO,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;oBAC/E,KAAK,GAAG,CAAC,CAAA;oBACT,MAAK;gBACP,CAAC;YACH,CAAC;YAED,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;QACzB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,GAAW,EAAE,GAAW,EAAE,IAA0B;QAClE,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC1C,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,KAAK,YAAY,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/C,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,EAAE,CAAC;gBAC5B,IAAI,YAAY,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,IAAI;oBACjD,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;oBAClD,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,QAAQ,GAAG,GAAG,GAAG,CAAA;gBAC3C,CAAC,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,KAAK,GAAG,KAAK,IAAI,EAAE,CAAA;gBACvB,IAAI,IAA2B,CAAA;gBAC/B,IAAI,aAAa,GAAG,CAAC,CAAA;gBACrB,IAAI,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,UAAU,IAAI;oBACzC,IAAI,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;oBACvD,IAAI,IAAI,EAAE,CAAC;wBACT,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;wBACnD,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,MAAM,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,GAAG,CAAA;oBAC3F,CAAC;yBAAM,CAAC;wBACN,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,GAAG,CAAA;oBACpD,CAAC;oBACD,IAAI,GAAG,IAAI,CAAA;oBACX,OAAO,IAAI,CAAA;gBACb,CAAC,CAAC,CAAA;gBACF,IAAI,IAAI,EAAE,CAAC;oBACT,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;oBACnD,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,YAAY,aAAa,GAAG,GAAG,eAAe,CAAC,CAAA;gBACvG,CAAC;YACH,CAAC;YAED,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,sBAAsB,CAAA;QACnC,CAAC;QAED,IAAI,CAAC,QAAS,CAAC,KAAK,CAAC,UAAU,GAAG,6BAA6B,QAAQ,GAAG,CAAA;QAC1E,sDAAsD;IACxD,CAAC;IAED,qBAAqB,CAAC,CAAQ;QAC5B,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,EAAE,GAAG,OAAO,CAAC,EAAE,CAAA;QAEnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,QAAQ,EAAE,EAAE,CAAC;YACX,KAAK,cAAc;gBACjB,IAAI,CAAC,cAAc,CAAC;oBAClB,GAAG,IAAI,CAAC,OAAO;oBACf,KAAK,EAAE,OAAO,CAAC,KAAK;iBACrB,CAAC,CAAA;gBACF,MAAK;YACP,KAAK,gBAAgB;gBACnB,IAAI,CAAC,cAAc,CAAC;oBAClB,GAAG,IAAI,CAAC,OAAO;oBACf,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;iBACxE,CAAC,CAAA;gBACF,MAAK;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,mBAAmB,CAAC,CAAa;QAC/B,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAM;QAEtC,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA;QACrC,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,CAAA;QACrE,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;QAErD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,QAAQ;gBAAE,MAAK;QAC9C,CAAC;QAED,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;YACtB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,MAAM;SACd,CAAC,CAAA;QAEF,IAAI,CAAC,KAAK,GAAG,UAAU,CAAA;QAEvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAa;QAC9B,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAA;IAC/B,CAAC;IAED,YAAY,CAAC,CAAa;QACxB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QACpC,IAAI,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;QAE/C,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;IACjC,CAAC;IAID,YAAY,CAAC,CAAY;QACvB,uCAAuC;QACvC,CAAC,CAAC,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,UAAW,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEpD,IAAI,CAAC,SAAS,GAAG;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;YAC/B,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;SACb,CAAA;IACH,CAAC;IAED,8DAA8D;IAC9D,UAAU,CAAC,KAAa,EAAE,EAA2B;QACnD,IAAI,QAAQ,GAAG,CAAC,CAAA;QAChB,OAAO,UAAU,GAAG,IAAW;YAC7B,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAA;YAChC,IAAI,GAAG,GAAG,QAAQ,GAAG,KAAK,EAAE,CAAC;gBAC3B,OAAM;YACR,CAAC;YACD,QAAQ,GAAG,GAAG,CAAA;YACd,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC,CAAA;QACpB,CAAC,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAY;QAClB,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA;QACrC,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;QAEzG,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,CAAC;gBAClB,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3D,CAAC,CAAA;YAEF,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAY;QACrB,IAAI,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC;YACtC,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YACzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,EAAE,CAAA;YAEhC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;YAEpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,QAAgB,EAAE,GAAW,EAAE,GAAW;QAC3D,kCAAkC;QAClC,IAAI,UAAU,GAAG,QAAQ,CAAA;QAEzB,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;aAC3C,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;QAErD,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAE7D,OAAO,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAA;IACtE,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;IACH,CAAC;;AAvW2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAqC;AAIpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AAIf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AAIhB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAa;AAEpB;IAAnB,KAAK,CAAC,WAAW,CAAC;mDAAuB;AAClB;IAAvB,KAAK,CAAC,eAAe,CAAC;sDAA2B;AAvHvC,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA+c7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputColor } from './ox-input-color'\nimport deepEquals from 'lodash-es/isEqual'\n\nexport type ColorStop = {\n  color: string\n  position: number\n}\n\n/**\n범위내에서 여러 컬러셋(포지션과 색깔) 배열을 편집하는 컴포넌트이다.\n\n미리보기 Bar에서는 gradient나, solid 형태의 컬러셋을 보여준다.\n\n새로운 컬러셋을 추가고자 할 때는 미리보기 Bar를 더블클릭한다.\n컬러셋을 제거하고자 할 때는 컬러셋 마커를 아래방향으로 드래깅한다.\n컬러셋의 위치를 옮기고자 할 때는, 컬러셋 마커를 좌우로 드래깅하여 이동시키거나,\n옮기고자하는 컬러셋 마커를 마우스로 선택하고, 포지션 입력 에디터에서 직접 수정한다.\n컬러셋의 색상을 바꾸고자 할 때는, 컬러셋 마커를 더블클릭하여 컬러파레트를 팝업시켜서 색상을 선택하거나, 색상 입력 에디터에서 직접 색상을 수정할 수 있다.\n\nExample:\n\n    <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n    </ox-input-color-stops>\n*/\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 0;\n      grid-auto-rows: minmax(0, auto);\n    }\n\n    #color-stops {\n      grid-column: 1 / 11;\n      grid-row: 1;\n\n      clear: both;\n      margin-bottom: -3px;\n    }\n\n    #colorbar {\n      width: 95%;\n      height: 12px;\n      margin: auto;\n      margin-bottom: 25px;\n      border: 1px solid #ccc;\n    }\n\n    #markers {\n      position: relative;\n      top: 30px;\n    }\n\n    #markers div {\n      width: 10px;\n      height: 10px;\n      margin-top: -15px;\n      position: absolute;\n      border: 2px solid #fff;\n      cursor: pointer;\n      -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n    }\n\n    #markers div::before {\n      border-bottom: 6px solid #fff;\n      border-left: 7px solid transparent;\n      border-right: 7px solid transparent;\n      content: '';\n      width: 0;\n      height: 0;\n      left: -2px;\n      position: absolute;\n      top: -8px;\n    }\n\n    #markers div[focused] {\n      border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    #markers div[focused]:before {\n      border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    .icon-only-label {\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n      width: 30px;\n      height: 24px;\n    }\n\n    .icon-only-label.color {\n      grid-column: 1 / 2;\n      grid-row: 2;\n\n      background-position: 70% -498px;\n      float: left;\n      margin-top: 0;\n    }\n\n    .icon-only-label.position {\n      grid-column: 7 / 8;\n      grid-row: 2;\n\n      background-position: 70% -797px;\n      float: left;\n      margin-top: 0;\n    }\n\n    ox-input-color {\n      grid-column: 2 / 7;\n      grid-row: 2;\n    }\n\n    input[type='number'] {\n      grid-column: 8 / 11;\n      grid-row: 2;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  /**\n   * `type`은 color-stop bar의 표시 방법을 의미한다.\n   * - 'solid' : 컬러스톱위치에서 다음 컬러스톱까지 solid color로 채운다.\n   * - 'gradient' : 컬러스톱위치에서 다음 컬러스톱까지 gradient color로 채운다.\n   */\n  @property({ type: String }) type: 'solid' | 'gradient' = 'solid'\n  /**\n   * `min`은 color-stop bar의 위치값 범위의 최소값을 의미한다.\n   */\n  @property({ type: Number }) min: number = 0\n  /**\n   * `max`은 color-stop bar의 위치값 범위의 최대값을 의미한다.\n   */\n  @property({ type: Number }) max: number = 1\n  /**\n   * `value`은 color-stops에 의해 만들어진 color-stop 배열을 유지한다.\n   */\n  @property({ type: Array }) value?: ColorStop[]\n  @property({ type: Object }) focused: any\n\n  @query('#colorbar') colorbar!: HTMLElement\n  @query('#color-editor') colorEditor!: OxInputColor\n\n  private _dragImage?: HTMLImageElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._dragImage = new Image()\n    this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n  }\n\n  firstUpdated() {\n    window.addEventListener('resize', () => {\n      this.requestUpdate()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var needRerenderColorBar = false\n\n    if (changes.has('value') && this.value instanceof Array) {\n      var oldValue = changes.get('value')\n      if (\n        this.focused &&\n        (!oldValue ||\n          this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n      ) {\n        /* 이전 값이 없었던 경우에 focused를 클리어시킨다.\n         * 이전 값이 있던 경우에도, focused는 이 에디터 내부에서만 선택될 수 있으며, 수정될 수 있으므로 동일한 포지션을 갖는 value가 없으면, 새로운 에디터가 시작된 것으로 판단하여 focused를 클리어시킨다.\n         */\n        this.focused = null\n      }\n\n      if (!deepEquals(oldValue, this.value)) {\n        needRerenderColorBar = true\n      }\n    }\n\n    if (needRerenderColorBar || changes.has('min') || changes.has('max')) {\n      if (!this.value) {\n        this.value = [\n          { color: 'white', position: this.min },\n          { color: 'white', position: this.max }\n        ]\n      }\n\n      this._renderColorBar(this.min, this.max, this.type)\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"color-stops\">\n        <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n          <div\n            id=\"markers\"\n            @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n            @mousedown=${(e: MouseEvent) => this._onMouseDown(e)}\n            @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n            @drag=${this._throttled(100, this._onDrag.bind(this))}\n            @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n          >\n            ${this._refinedValue(this.value).map(\n              (item, index) => html`\n                <div\n                  .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n                    item.position,\n                    this.min,\n                    this.max\n                  )}px;\"\n                  marker-index=${index}\n                  draggable=\"true\"\n                ></div>\n              `\n            )}\n          </div>\n        </div>\n      </div>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-color\n        id=\"color-editor\"\n        .value=${this.focused && this.focused.color}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n      >\n      </ox-input-color>\n\n      <label class=\"icon-only-label position\"></label>\n      <input\n        type=\"number\"\n        id=\"color-position\"\n        .value=${this.focused && this.focused.position}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        step=\"0.01\"\n      />\n    `\n  }\n\n  _refinedValue(value: any) {\n    return value instanceof Array ? value : []\n  }\n\n  _setFocused(index: number) {\n    if (this.focused && this.focused.index === index) {\n      return\n    }\n\n    var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n    var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n    olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n    marker && marker.setAttribute('focused', '')\n\n    if (!marker) {\n      this.focused = null\n      return\n    }\n\n    var colorStop = this.value![index]\n\n    this._changeFocused({\n      index: index,\n      color: colorStop.color,\n      position: Math.max(this.min, Math.min(colorStop.position, this.max))\n    })\n  }\n\n  _changeFocused(focused: any) {\n    if (!focused) {\n      this._setFocused(-1) // clear focused marker\n\n      return\n    }\n\n    this.focused = focused\n\n    this.value = this.value!.map((colorStop, index): ColorStop => {\n      if (index != focused.index) {\n        return colorStop\n      }\n\n      return {\n        color: focused.color,\n        position: focused.position\n      }\n    }).sort((a: ColorStop, b: ColorStop) => {\n      return b.position < a.position ? 1 : -1\n    })\n\n    var colorStop = this.value[focused.index]\n\n    if (focused.position != colorStop.position || focused.color != colorStop.color) {\n      var index = -1\n      for (var i = 0; i < this.value.length; i++) {\n        colorStop = this.value[i]\n        if (focused.position == colorStop.position && focused.color == colorStop.color) {\n          index = i\n          break\n        }\n      }\n\n      this._setFocused(index)\n    }\n  }\n\n  _renderColorBar(min: number, max: number, type: 'solid' | 'gradient') {\n    var value = this._refinedValue(this.value)\n    var gradient = ''\n\n    if (value instanceof Array && value.length > 0) {\n      if (this.type == 'gradient') {\n        var stopsStrings = (value || []).map(function (stop) {\n          var position = (stop.position - min) / (max - min)\n          return `${stop.color} ${position * 100}%`\n        })\n      } else {\n        var stops = value || []\n        var last: ColorStop | undefined\n        var last_position = 0\n        var stopsStrings = stops.map(function (stop) {\n          var stop_position = (stop.position - min) / (max - min)\n          if (last) {\n            last_position = (last.position - min) / (max - min)\n            var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n          } else {\n            var step = `${stop.color} ${stop_position * 100}%`\n          }\n          last = stop\n          return step\n        })\n        if (last) {\n          last_position = (last.position - min) / (max - min)\n          stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n        }\n      }\n\n      gradient = stopsStrings.join(',')\n    } else {\n      gradient = 'black 0%, black 100%'\n    }\n\n    this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n  }\n\n  _onChangeSubComponent(e: Event) {\n    var element = e.target as HTMLInputElement\n    var id = element.id\n\n    if (!this.focused) {\n      return\n    }\n\n    switch (id) {\n      case 'color-editor':\n        this._changeFocused({\n          ...this.focused,\n          color: element.value\n        })\n        break\n      case 'color-position':\n        this._changeFocused({\n          ...this.focused,\n          position: Math.max(this.min, Math.min(Number(element.value), this.max))\n        })\n        break\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickColorbar(e: MouseEvent) {\n    /* 마커를 클릭한 경우를 걸러낸다. */\n    if (e.target !== this.colorbar) return\n\n    var width = this.colorbar.offsetWidth\n    var position = this.min + (this.max - this.min) * (e.offsetX / width)\n    var colorStops = this.value ? this.value.slice() : []\n\n    for (var i = 0; i < colorStops.length; i++) {\n      if (colorStops[i].position > position) break\n    }\n\n    colorStops.splice(i, 0, {\n      position: position,\n      color: '#fff'\n    })\n\n    this.value = colorStops\n\n    this.focused = null\n    this._setFocused(i)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickMarkers(e: MouseEvent) {\n    this.colorEditor.showPicker()\n  }\n\n  _onMouseDown(e: MouseEvent) {\n    var marker = e.target as HTMLElement\n    var index = marker.getAttribute('marker-index')\n\n    this._setFocused(Number(index))\n  }\n\n  private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n  _onDragStart(e: DragEvent) {\n    /* drag 시에 ghost image를 보이지 않게 하려고 함 */\n    e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n    this.dragstart = {\n      position: this.focused.position,\n      x: e.clientX,\n      y: e.clientY\n    }\n  }\n\n  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함\n  _throttled(delay: number, fn: (...args: any[]) => any) {\n    let lastCall = 0\n    return function (...args: any[]) {\n      const now = new Date().getTime()\n      if (now - lastCall < delay) {\n        return\n      }\n      lastCall = now\n      return fn(...args)\n    }\n  }\n\n  _onDrag(e: DragEvent) {\n    if (e.clientX <= 0) {\n      return\n    }\n\n    var width = this.colorbar.offsetWidth\n    var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) * (this.max - this.min)\n\n    if (position != this.focused.position) {\n      this._changeFocused({\n        ...this.focused,\n        position: Math.max(this.min, Math.min(position, this.max))\n      })\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _onDragEnd(e: DragEvent) {\n    if (e.clientY - this.dragstart.y > 40) {\n      this.value!.splice(this.focused.index, 1)\n      this.value = this.value!.slice()\n\n      this._setFocused(-1)\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _calculatePosition(position: number, min: number, max: number) {\n    /* TODO 7 ==> 마커 폭의 절반으로 계산해야함. */\n    var calculated = position\n\n    if (calculated > this.max) calculated = this.max\n    else if (calculated < this.min) calculated = this.min\n\n    var width = (this.colorbar && this.colorbar.offsetWidth) || 0\n\n    return ((calculated - this.min) / (this.max - this.min)) * width - 7\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputColor } from './ox-input-color'\nimport deepEquals from 'lodash-es/isEqual'\n\nexport type ColorStop = {\n  color: string\n  position: number\n}\n\n/**\n범위내에서 여러 컬러셋(포지션과 색깔) 배열을 편집하는 컴포넌트이다.\n\n미리보기 Bar에서는 gradient나, solid 형태의 컬러셋을 보여준다.\n\n새로운 컬러셋을 추가고자 할 때는 미리보기 Bar를 더블클릭한다.\n컬러셋을 제거하고자 할 때는 컬러셋 마커를 아래방향으로 드래깅한다.\n컬러셋의 위치를 옮기고자 할 때는, 컬러셋 마커를 좌우로 드래깅하여 이동시키거나,\n옮기고자하는 컬러셋 마커를 마우스로 선택하고, 포지션 입력 에디터에서 직접 수정한다.\n컬러셋의 색상을 바꾸고자 할 때는, 컬러셋 마커를 더블클릭하여 컬러파레트를 팝업시켜서 색상을 선택하거나, 색상 입력 에디터에서 직접 색상을 수정할 수 있다.\n\nExample:\n\n    <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n    </ox-input-color-stops>\n*/\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 0;\n      grid-auto-rows: minmax(0, auto);\n    }\n\n    #color-stops {\n      grid-column: 1 / 11;\n      grid-row: 1;\n\n      clear: both;\n      margin-bottom: -3px;\n    }\n\n    #colorbar {\n      width: 95%;\n      height: 12px;\n      margin: auto;\n      margin-bottom: 25px;\n      border: 1px solid #ccc;\n    }\n\n    #markers {\n      position: relative;\n      top: 30px;\n    }\n\n    #markers div {\n      width: 10px;\n      height: 10px;\n      margin-top: -15px;\n      position: absolute;\n      border: 2px solid #fff;\n      cursor: pointer;\n      -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n    }\n\n    #markers div::before {\n      border-bottom: 6px solid #fff;\n      border-left: 7px solid transparent;\n      border-right: 7px solid transparent;\n      content: '';\n      width: 0;\n      height: 0;\n      left: -2px;\n      position: absolute;\n      top: -8px;\n    }\n\n    #markers div[focused] {\n      border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    #markers div[focused]:before {\n      border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n    }\n\n    .icon-only-label {\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n      width: 30px;\n      height: 24px;\n    }\n\n    .icon-only-label.color {\n      grid-column: 1 / 2;\n      grid-row: 2;\n\n      background-position: 70% -498px;\n      float: left;\n      margin-top: 0;\n    }\n\n    .icon-only-label.position {\n      grid-column: 7 / 8;\n      grid-row: 2;\n\n      background-position: 70% -797px;\n      float: left;\n      margin-top: 0;\n    }\n\n    ox-input-color {\n      grid-column: 2 / 7;\n      grid-row: 2;\n    }\n\n    input[type='number'] {\n      grid-column: 8 / 11;\n      grid-row: 2;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  /**\n   * `type`은 color-stop bar의 표시 방법을 의미한다.\n   * - 'solid' : 컬러스톱위치에서 다음 컬러스톱까지 solid color로 채운다.\n   * - 'gradient' : 컬러스톱위치에서 다음 컬러스톱까지 gradient color로 채운다.\n   */\n  @property({ type: String }) type: 'solid' | 'gradient' = 'solid'\n  /**\n   * `min`은 color-stop bar의 위치값 범위의 최소값을 의미한다.\n   */\n  @property({ type: Number }) min: number = 0\n  /**\n   * `max`은 color-stop bar의 위치값 범위의 최대값을 의미한다.\n   */\n  @property({ type: Number }) max: number = 1\n  /**\n   * `value`은 color-stops에 의해 만들어진 color-stop 배열을 유지한다.\n   */\n  @property({ type: Array }) value?: ColorStop[]\n  @property({ type: Object }) focused: any\n\n  @query('#colorbar') colorbar!: HTMLElement\n  @query('#color-editor') colorEditor!: OxInputColor\n\n  private _dragImage?: HTMLImageElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._dragImage = new Image()\n    this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n  }\n\n  firstUpdated() {\n    window.addEventListener('resize', () => {\n      this.requestUpdate()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var needRerenderColorBar = false\n\n    if (changes.has('value') && this.value instanceof Array) {\n      var oldValue = changes.get('value')\n      if (\n        this.focused &&\n        (!oldValue ||\n          this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n      ) {\n        /* 이전 값이 없었던 경우에 focused를 클리어시킨다.\n         * 이전 값이 있던 경우에도, focused는 이 에디터 내부에서만 선택될 수 있으며, 수정될 수 있으므로 동일한 포지션을 갖는 value가 없으면, 새로운 에디터가 시작된 것으로 판단하여 focused를 클리어시킨다.\n         */\n        this.focused = null\n      }\n\n      if (!deepEquals(oldValue, this.value)) {\n        needRerenderColorBar = true\n      }\n    }\n\n    if (needRerenderColorBar || changes.has('min') || changes.has('max')) {\n      if (!this.value) {\n        this.value = [\n          { color: 'white', position: this.min },\n          { color: 'white', position: this.max }\n        ]\n      }\n\n      this._renderColorBar(this.min, this.max, this.type)\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"color-stops\">\n        <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n          <div\n            id=\"markers\"\n            @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n            @mousedown=${(e: MouseEvent) => this._onMouseDown(e)}\n            @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n            @drag=${this._throttled(100, this._onDrag.bind(this))}\n            @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n          >\n            ${this._refinedValue(this.value).map(\n              (item, index) => html`\n                <div\n                  .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n                    item.position,\n                    this.min,\n                    this.max\n                  )}px;\"\n                  marker-index=${index}\n                  draggable=\"true\"\n                ></div>\n              `\n            )}\n          </div>\n        </div>\n      </div>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-color\n        id=\"color-editor\"\n        .value=${this.focused && this.focused.color}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color>\n\n      <label class=\"icon-only-label position\"></label>\n      <input\n        type=\"number\"\n        id=\"color-position\"\n        .value=${this.focused && this.focused.position}\n        @change=${(e: Event) => this._onChangeSubComponent(e)}\n        step=\"0.01\"\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _refinedValue(value: any) {\n    return value instanceof Array ? value : []\n  }\n\n  _setFocused(index: number) {\n    if (this.focused && this.focused.index === index) {\n      return\n    }\n\n    var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n    var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n    olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n    marker && marker.setAttribute('focused', '')\n\n    if (!marker) {\n      this.focused = null\n      return\n    }\n\n    var colorStop = this.value![index]\n\n    this._changeFocused({\n      index: index,\n      color: colorStop.color,\n      position: Math.max(this.min, Math.min(colorStop.position, this.max))\n    })\n  }\n\n  _changeFocused(focused: any) {\n    if (!focused) {\n      this._setFocused(-1) // clear focused marker\n\n      return\n    }\n\n    this.focused = focused\n\n    this.value = this.value!.map((colorStop, index): ColorStop => {\n      if (index != focused.index) {\n        return colorStop\n      }\n\n      return {\n        color: focused.color,\n        position: focused.position\n      }\n    }).sort((a: ColorStop, b: ColorStop) => {\n      return b.position < a.position ? 1 : -1\n    })\n\n    var colorStop = this.value[focused.index]\n\n    if (focused.position != colorStop.position || focused.color != colorStop.color) {\n      var index = -1\n      for (var i = 0; i < this.value.length; i++) {\n        colorStop = this.value[i]\n        if (focused.position == colorStop.position && focused.color == colorStop.color) {\n          index = i\n          break\n        }\n      }\n\n      this._setFocused(index)\n    }\n  }\n\n  _renderColorBar(min: number, max: number, type: 'solid' | 'gradient') {\n    var value = this._refinedValue(this.value)\n    var gradient = ''\n\n    if (value instanceof Array && value.length > 0) {\n      if (this.type == 'gradient') {\n        var stopsStrings = (value || []).map(function (stop) {\n          var position = (stop.position - min) / (max - min)\n          return `${stop.color} ${position * 100}%`\n        })\n      } else {\n        var stops = value || []\n        var last: ColorStop | undefined\n        var last_position = 0\n        var stopsStrings = stops.map(function (stop) {\n          var stop_position = (stop.position - min) / (max - min)\n          if (last) {\n            last_position = (last.position - min) / (max - min)\n            var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n          } else {\n            var step = `${stop.color} ${stop_position * 100}%`\n          }\n          last = stop\n          return step\n        })\n        if (last) {\n          last_position = (last.position - min) / (max - min)\n          stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n        }\n      }\n\n      gradient = stopsStrings.join(',')\n    } else {\n      gradient = 'black 0%, black 100%'\n    }\n\n    this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n  }\n\n  _onChangeSubComponent(e: Event) {\n    var element = e.target as HTMLInputElement\n    var id = element.id\n\n    if (!this.focused) {\n      return\n    }\n\n    switch (id) {\n      case 'color-editor':\n        this._changeFocused({\n          ...this.focused,\n          color: element.value\n        })\n        break\n      case 'color-position':\n        this._changeFocused({\n          ...this.focused,\n          position: Math.max(this.min, Math.min(Number(element.value), this.max))\n        })\n        break\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickColorbar(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    /* 마커를 클릭한 경우를 걸러낸다. */\n    if (e.target !== this.colorbar) return\n\n    var width = this.colorbar.offsetWidth\n    var position = this.min + (this.max - this.min) * (e.offsetX / width)\n    var colorStops = this.value ? this.value.slice() : []\n\n    for (var i = 0; i < colorStops.length; i++) {\n      if (colorStops[i].position > position) break\n    }\n\n    colorStops.splice(i, 0, {\n      position: position,\n      color: '#fff'\n    })\n\n    this.value = colorStops\n\n    this.focused = null\n    this._setFocused(i)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onDblClickMarkers(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    this.colorEditor.showPicker()\n  }\n\n  _onMouseDown(e: MouseEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    var marker = e.target as HTMLElement\n    var index = marker.getAttribute('marker-index')\n\n    this._setFocused(Number(index))\n  }\n\n  private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n  _onDragStart(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    /* drag 시에 ghost image를 보이지 않게 하려고 함 */\n    e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n    this.dragstart = {\n      position: this.focused.position,\n      x: e.clientX,\n      y: e.clientY\n    }\n  }\n\n  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함\n  _throttled(delay: number, fn: (...args: any[]) => any) {\n    let lastCall = 0\n    return function (...args: any[]) {\n      const now = new Date().getTime()\n      if (now - lastCall < delay) {\n        return\n      }\n      lastCall = now\n      return fn(...args)\n    }\n  }\n\n  _onDrag(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    if (e.clientX <= 0) {\n      return\n    }\n\n    var width = this.colorbar.offsetWidth\n    var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) * (this.max - this.min)\n\n    if (position != this.focused.position) {\n      this._changeFocused({\n        ...this.focused,\n        position: Math.max(this.min, Math.min(position, this.max))\n      })\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _onDragEnd(e: DragEvent) {\n    if (this.disabled) {\n      return\n    }\n\n    if (e.clientY - this.dragstart.y > 40) {\n      this.value!.splice(this.focused.index, 1)\n      this.value = this.value!.slice()\n\n      this._setFocused(-1)\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _calculatePosition(position: number, min: number, max: number) {\n    /* TODO 7 ==> 마커 폭의 절반으로 계산해야함. */\n    var calculated = position\n\n    if (calculated > this.max) calculated = this.max\n    else if (calculated < this.min) calculated = this.min\n\n    var width = (this.colorbar && this.colorbar.offsetWidth) || 0\n\n    return ((calculated - this.min) / (this.max - this.min)) * width - 7\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}

package/dist/src/ox-input-color.js

@@ -222,6 +222,7 @@ let OxInputColor = class OxInputColor extends OxFormField {
         .value=${this.value || ''}
         @change=${(e) => this._onInputChanged(e)}
         .placeholder=${this.getAttribute('placeholder') || ''}
+        ?disabled=${this.disabled}
       />
 
       <a @click=${(e) => this.showPicker()}>
@@ -253,6 +254,9 @@ let OxInputColor = class OxInputColor extends OxFormField {
      * 외부에서 호출 가능한 메쏘드임.
      */
     showPicker() {
+        if (this.disabled) {
+            return;
+        }
         var { withoutAlpha } = this.properties || {};
         var color = tinycolor(this.value, {});
         var picker = document.createElement('paper-color-picker');

package/dist/src/ox-input-color.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred  : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n    <ox-input-color .value=${color}>\n    </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input[type='text'] {\n      width: 100%;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      padding-right: 35px;\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    a {\n      -webkit-appearance: none;\n      display: flex;\n      position: absolute;\n      width: 35px;\n      height: 100%;\n      box-sizing: border-box;\n      align-items: center;\n      justify-content: center;\n    }\n\n    span {\n      width: 80%;\n      height: 60%;\n      border: var(--border-dark-color);\n      border-radius: var(--border-radius);\n    }\n\n    span.transparent {\n      background-color: #fefefe;\n      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n      background-position: 0 0, 9px 9px;\n      background-size: 18px 18px;\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n      />\n\n      <a @click=${(e: MouseEvent) => this.showPicker()}>\n        <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n      </a>\n    `\n  }\n\n  set colorString(colorString: string) {\n    var color = tinycolor(colorString, {})\n    var { withoutAlpha, valueType } = this.properties || {}\n\n    if (color.isValid()) {\n      if (valueType == 'hex' || withoutAlpha) {\n        this.value = color.toHexString(false)\n      } else this.value = color.toRgbString()\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _thumbnail() {\n    return tinycolor(this.value || 'transparent', {}).toRgbString()\n  }\n\n  _onInputChanged(e: Event) {\n    e.stopPropagation()\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 외부에서 호출 가능한 메쏘드임.\n   */\n  showPicker() {\n    var { withoutAlpha } = this.properties || {}\n\n    var color = tinycolor(this.value, {})\n\n    var picker = document.createElement('paper-color-picker') as HTMLElement & {\n      shape: string\n      color: any\n      colorAsString: string\n      allowAlpha: boolean\n      alwaysShowAlpha: boolean\n      type: string\n      _initialAlphaValueHack: number\n      set: (name: string, value: number) => void\n      open: () => void\n    }\n\n    picker.shape = 'huebox'\n    picker.color = color\n    picker.colorAsString = color.toRgbString()\n    if (!withoutAlpha) {\n      picker.allowAlpha = true\n      picker.alwaysShowAlpha = true\n    }\n    picker.type = 'hsl'\n\n    if (color.isValid()) {\n      let rgb = color.toRgb() as { r: number; g: number; b: number }\n      let alpha = color.getAlpha()\n\n      picker._initialAlphaValueHack = alpha\n\n      picker.set('immediateColor.red', rgb.r)\n      picker.set('immediateColor.green', rgb.g)\n      picker.set('immediateColor.blue', rgb.b)\n\n      if (alpha != undefined) {\n        picker.set('immediateColor.alpha', alpha)\n      }\n    }\n\n    document.body.appendChild(picker)\n\n    var _ = (e: Event) => {\n      if (!(e as CustomEvent)?.detail?.confirmed) {\n        return\n      }\n\n      if (picker.colorAsString) {\n        this.colorString = picker.colorAsString\n      }\n\n      picker.removeEventListener('iron-overlay-closed', _)\n      picker.parentNode?.removeChild(picker)\n    }\n    picker.addEventListener('iron-overlay-closed', _)\n\n    setTimeout(() => picker.open())\n  }\n}\n"]}
+{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred  : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n    <ox-input-color .value=${color}>\n    </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input[type='text'] {\n      width: 100%;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      padding-right: 35px;\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    a {\n      -webkit-appearance: none;\n      display: flex;\n      position: absolute;\n      width: 35px;\n      height: 100%;\n      box-sizing: border-box;\n      align-items: center;\n      justify-content: center;\n    }\n\n    span {\n      width: 80%;\n      height: 60%;\n      border: var(--border-dark-color);\n      border-radius: var(--border-radius);\n    }\n\n    span.transparent {\n      background-color: #fefefe;\n      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n      background-position: 0 0, 9px 9px;\n      background-size: 18px 18px;\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        ?disabled=${this.disabled}\n      />\n\n      <a @click=${(e: MouseEvent) => this.showPicker()}>\n        <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n      </a>\n    `\n  }\n\n  set colorString(colorString: string) {\n    var color = tinycolor(colorString, {})\n    var { withoutAlpha, valueType } = this.properties || {}\n\n    if (color.isValid()) {\n      if (valueType == 'hex' || withoutAlpha) {\n        this.value = color.toHexString(false)\n      } else this.value = color.toRgbString()\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _thumbnail() {\n    return tinycolor(this.value || 'transparent', {}).toRgbString()\n  }\n\n  _onInputChanged(e: Event) {\n    e.stopPropagation()\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 외부에서 호출 가능한 메쏘드임.\n   */\n  showPicker() {\n    if (this.disabled) {\n      return\n    }\n\n    var { withoutAlpha } = this.properties || {}\n\n    var color = tinycolor(this.value, {})\n\n    var picker = document.createElement('paper-color-picker') as HTMLElement & {\n      shape: string\n      color: any\n      colorAsString: string\n      allowAlpha: boolean\n      alwaysShowAlpha: boolean\n      type: string\n      _initialAlphaValueHack: number\n      set: (name: string, value: number) => void\n      open: () => void\n    }\n\n    picker.shape = 'huebox'\n    picker.color = color\n    picker.colorAsString = color.toRgbString()\n    if (!withoutAlpha) {\n      picker.allowAlpha = true\n      picker.alwaysShowAlpha = true\n    }\n    picker.type = 'hsl'\n\n    if (color.isValid()) {\n      let rgb = color.toRgb() as { r: number; g: number; b: number }\n      let alpha = color.getAlpha()\n\n      picker._initialAlphaValueHack = alpha\n\n      picker.set('immediateColor.red', rgb.r)\n      picker.set('immediateColor.green', rgb.g)\n      picker.set('immediateColor.blue', rgb.b)\n\n      if (alpha != undefined) {\n        picker.set('immediateColor.alpha', alpha)\n      }\n    }\n\n    document.body.appendChild(picker)\n\n    var _ = (e: Event) => {\n      if (!(e as CustomEvent)?.detail?.confirmed) {\n        return\n      }\n\n      if (picker.colorAsString) {\n        this.colorString = picker.colorAsString\n      }\n\n      picker.removeEventListener('iron-overlay-closed', _)\n      picker.parentNode?.removeChild(picker)\n    }\n    picker.addEventListener('iron-overlay-closed', _)\n\n    setTimeout(() => picker.open())\n  }\n}\n"]}

package/dist/src/ox-input-container.d.ts

@@ -6,7 +6,6 @@ import '@operato/popup/ox-popup-list.js';
 import { LitElement } from 'lit';
 import { OxPopupList } from '@operato/popup';
 export declare class OxInputContainer extends LitElement {
-    static styles: import("lit").CSSResult[];
     popupList: OxPopupList;
     render(): import("lit").TemplateResult<1>;
     openPopupList(e: MouseEvent): void;

package/dist/src/ox-input-container.js

@@ -4,15 +4,9 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import '@operato/popup/ox-popup-list.js';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 let OxInputContainer = class OxInputContainer extends LitElement {
-    static { this.styles = [
-        css `
-      :host {
-      }
-    `
-    ]; }
     render() {
         return html `
       <slot> </slot>

package/dist/src/ox-input-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-container.js","sourceRoot":"","sources":["../../src/ox-input-container.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKjD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;aACvC,WAAM,GAAG;QACd,GAAG,CAAA;;;KAGF;KACF,AALY,CAKZ;IAID,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAGjD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC;;AAhBuB;IAAvB,KAAK,CAAC,eAAe,CAAC;mDAAwB;AARpC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAyB5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\n@customElement('ox-input-container')\nexport class OxInputContainer extends LitElement {\n  static styles = [\n    css`\n      :host {\n      }\n    `\n  ]\n\n  @query('ox-popup-list') popupList!: OxPopupList\n\n  render() {\n    return html`\n      <slot> </slot>\n      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>\n\n      <ox-popup-list></ox-popup-list>\n    `\n  }\n\n  openPopupList(e: MouseEvent) {\n    this.popupList.open({\n      left: 0,\n      top: 0\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-input-container.js","sourceRoot":"","sources":["../../src/ox-input-container.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKjD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAG9C,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAGjD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAjByB;IAAvB,KAAK,CAAC,eAAe,CAAC;mDAAwB;AADpC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAkB5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\n@customElement('ox-input-container')\nexport class OxInputContainer extends LitElement {\n  @query('ox-popup-list') popupList!: OxPopupList\n\n  render() {\n    return html`\n      <slot> </slot>\n      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>\n\n      <ox-popup-list></ox-popup-list>\n    `\n  }\n\n  openPopupList(e: MouseEvent) {\n    this.popupList.open({\n      left: 0,\n      top: 0\n    })\n  }\n}\n"]}

package/dist/src/ox-input-data.js

@@ -51,6 +51,7 @@ let OxInputData = class OxInputData extends OxFormField {
           data-value="string"
           .checked=${typeof this.value == 'string'}
           @click=${() => this._setDataType('string')}
+          ?disabled=${this.disabled}
         />string
 
         <input
@@ -59,6 +60,7 @@ let OxInputData = class OxInputData extends OxFormField {
           data-value="number"
           .checked=${typeof this.value == 'number'}
           @click=${() => this._setDataType('number')}
+          ?disabled=${this.disabled}
         />number
 
         <input
@@ -67,11 +69,13 @@ let OxInputData = class OxInputData extends OxFormField {
           data-value="object"
           .checked=${typeof this.value == 'object'}
           @click=${() => this._setDataType('object')}
+          ?disabled=${this.disabled}
         />object
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
 
-      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor> </ox-input-code>
+      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      </ox-input-code>
     `;
     }
     firstUpdated() {

package/dist/src/ox-input-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div[datatype] {\n        display: flex;\n        align-items: center;\n        padding: 2px;\n        background-color: rgba(0, 0, 0, 0.08);\n        font-size: small;\n      }\n\n      div[datatype] mwc-icon {\n        margin-left: auto;\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <div datatype>\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${typeof this.value == 'string'}\n          @click=${() => this._setDataType('string')}\n        />string\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${typeof this.value == 'number'}\n          @click=${() => this._setDataType('number')}\n        />number\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${typeof this.value == 'object'}\n          @click=${() => this._setDataType('object')}\n        />object\n        <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n      </div>\n\n      <ox-input-code .value=${this._getData(this.value)} language=\"javascript\" editor> </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        this.value = target.value\n      }\n\n      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n      this._setDataType(type)\n    })\n  }\n\n  udpated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.value = this._getData(this.value)\n    }\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value !== type) {\n      var value = this.value\n\n      try {\n        switch (type) {\n          case 'string':\n            this.value = String(value || '')\n            break\n          case 'number':\n            if (!isNaN(value)) {\n              this.value = Number(value)\n            }\n            break\n          case 'object':\n            this.value = eval('(' + value + ')')\n            break\n        }\n      } catch (e) {\n        console.log(e)\n      }\n    }\n\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getData(data: any) {\n    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n  }\n\n  _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div[datatype] {\n        display: flex;\n        align-items: center;\n        padding: 2px;\n        background-color: rgba(0, 0, 0, 0.08);\n        font-size: small;\n      }\n\n      div[datatype] mwc-icon {\n        margin-left: auto;\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <div datatype>\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${typeof this.value == 'string'}\n          @click=${() => this._setDataType('string')}\n          ?disabled=${this.disabled}\n        />string\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${typeof this.value == 'number'}\n          @click=${() => this._setDataType('number')}\n          ?disabled=${this.disabled}\n        />number\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${typeof this.value == 'object'}\n          @click=${() => this._setDataType('object')}\n          ?disabled=${this.disabled}\n        />object\n        <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n      </div>\n\n      <ox-input-code .value=${this._getData(this.value)} language=\"javascript\" editor ?disabled=${this.disabled}>\n      </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        this.value = target.value\n      }\n\n      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n      this._setDataType(type)\n    })\n  }\n\n  udpated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.value = this._getData(this.value)\n    }\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value !== type) {\n      var value = this.value\n\n      try {\n        switch (type) {\n          case 'string':\n            this.value = String(value || '')\n            break\n          case 'number':\n            if (!isNaN(value)) {\n              this.value = Number(value)\n            }\n            break\n          case 'object':\n            this.value = eval('(' + value + ')')\n            break\n        }\n      } catch (e) {\n        console.log(e)\n      }\n    }\n\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getData(data: any) {\n    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n  }\n\n  _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-duration.js

@@ -90,16 +90,34 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
         const seconds = d - minutes * 60;
         return html `
       <form @change=${this.onChange.bind(this)}>
-        <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" />
+        <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
-        <input id="hours" type="number" .value=${String(hours || 0)} pattern="[01]?\\d|2[0-3]" />
+        <input
+          id="hours"
+          type="number"
+          .value=${String(hours || 0)}
+          pattern="[01]?\\d|2[0-3]"
+          ?disabled=${this.disabled}
+        />
         <label for="hour">${i18next.t('label.hours')}</label>
 
-        <input id="minutes" type="number" .value=${String(minutes || 0)} pattern="[0-5]?\\d" />
+        <input
+          id="minutes"
+          type="number"
+          .value=${String(minutes || 0)}
+          pattern="[0-5]?\\d"
+          ?disabled=${this.disabled}
+        />
         <label for="minute">${i18next.t('label.minutes')}</label>
 
-        <input id="seconds" type="number" .value=${String(seconds || 0)} pattern="[0-5]?\\d" />
+        <input
+          id="seconds"
+          type="number"
+          .value=${String(seconds || 0)}
+          pattern="[0-5]?\\d"
+          ?disabled=${this.disabled}
+        />
         <label for="second">${i18next.t('label.seconds')}</label>
 
         <button
@@ -114,6 +132,7 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
                 detail: this.value
             }));
         }}
+          ?disabled=${this.disabled}
         >
           <mwc-icon>backspace</mwc-icon>
         </button>

package/dist/src/ox-input-duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n      justify-content: center;\n    }\n\n    input {\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      width: 100%;\n      margin-right: var(--margin-default);\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      min-height: 35px;\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n  `\n\n  @property({ type: Number }) value?: number\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input id=\"hours\" type=\"number\" .value=${String(hours || 0)} pattern=\"[01]?\\\\d|2[0-3]\" />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input id=\"minutes\" type=\"number\" .value=${String(minutes || 0)} pattern=\"[0-5]?\\\\d\" />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input id=\"seconds\" type=\"number\" .value=${String(seconds || 0)} pattern=\"[0-5]?\\\\d\" />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n        >\n          <mwc-icon>backspace</mwc-icon>\n        </button>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n      justify-content: center;\n    }\n\n    input {\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      width: 100%;\n      margin-right: var(--margin-default);\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      min-height: 35px;\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n  `\n\n  @property({ type: Number }) value?: number\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n          ?disabled=${this.disabled}\n        >\n          <mwc-icon>backspace</mwc-icon>\n        </button>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-file.js

@@ -104,6 +104,7 @@ let OxInputFile = class OxInputFile extends OxFormField {
         hidden
         capture="environment"
         @change=${(e) => this._onChangeValue(e)}
+        ?disabled=${this.disabled}
       />
 
       <label for="input-file">${this.label || 'select files'}</label>
@@ -115,6 +116,9 @@ let OxInputFile = class OxInputFile extends OxFormField {
                   - ${file.name}
                   <mwc-icon
                     @click=${(e) => {
+                if (this.disabled) {
+                    return;
+                }
                 files.splice(files.indexOf(file), 1);
                 this.value = [...files];
                 this._notifyChange();
@@ -135,6 +139,9 @@ let OxInputFile = class OxInputFile extends OxFormField {
     firstUpdated() {
         FileDropHelper.set(this);
         this.addEventListener('file-drop', (e) => {
+            if (this.disabled) {
+                return;
+            }
             const detail = e.detail;
             this.value = this.multiple ? detail : detail[0] ? [detail[0]] : [];
             this._notifyChange();

package/dist/src/ox-input-file.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n        --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string = 'upload'\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string = 'drop files here!'\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <mwc-icon>${this.icon || 'upload'}</mwc-icon>\n\n      <span>${this.description || 'drop files here!'}</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n        --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string = 'upload'\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string = 'drop files here!'\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <mwc-icon>${this.icon || 'upload'}</mwc-icon>\n\n      <span>${this.description || 'drop files here!'}</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n        ?disabled=${this.disabled}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      if (this.disabled) {\n                        return\n                      }\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      if (this.disabled) {\n        return\n      }\n\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-hashtags.js

@@ -18,11 +18,11 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     #editor {
       display: block;
       box-sizing: border-box;
-      --hashtag-padding : 2px 4px;
-      --hashtag-background : rgba(var(--primary-color-rgb),.15);
-      --hashtag-background-hover : rgba(var(--primary-color-rgb),1);
-      --hashtag-closer-padding:0 2px 0 4px;
-      --hashtag-input-padding : 2px;
+      --hashtag-padding: 2px 4px;
+      --hashtag-background: rgba(var(--primary-color-rgb), 0.15);
+      --hashtag-background-hover: rgba(var(--primary-color-rgb), 1);
+      --hashtag-closer-padding: 0 2px 0 4px;
+      --hashtag-input-padding: 2px;
     }
 
     .tags {
@@ -32,25 +32,25 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     .tag {
       border-radius: var(--border-radius);
       background-color: var(--hashtag-background);
-      padding:var(--hashtag-padding);
+      padding: var(--hashtag-padding);
       font: var(--input-font);
       color: var(--primary-text-color);
-      cursor:pointer;
+      cursor: pointer;
     }
 
     .tag:hover {
       background-color: var(--hashtag-background-hover);
       color: var(--theme-white-color) !important;
     }
-    
+
     .closer {
-      opacity:.3;
-      padding:var(--hashtag-closer-padding);
-      text-transform:uppercase;
+      opacity: 0.3;
+      padding: var(--hashtag-closer-padding);
+      text-transform: uppercase;
       color: var(--primary-text-color);
     }
-    .tag:hover .closer{
-      opacity:.9;
+    .tag:hover .closer {
+      opacity: 0.9;
       color: var(--theme-white-color);
     }
 
@@ -62,7 +62,7 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     .input::before {
       display: inline;
       position: relative;
-      opacity:.5;
+      opacity: 0.5;
       top: -1px;
       content: '#';
       vertical-align: middle;
@@ -76,7 +76,7 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
       border: 0;
       border-bottom: var(--border-dark-color);
       outline: none;
-      font-weight:bold;
+      font-weight: bold;
     }
 
     input:focus {
@@ -85,7 +85,7 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     }
 
     .error {
-      margin:var(--margin-narrow);
+      margin: var(--margin-narrow);
       color: var(--status-danger-color);
       font: var(--input-font);
       text-align: left;
@@ -96,12 +96,15 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
       <div id="editor" @click=${this.setHashtags}>
         <div class="tags">
           ${repeat(this.value, tag => tag, (tag, index) => html `
-                <span class="tag">#${tag} <span @click=${() => this.removeHashtag(index)} class="closer">x</span></span>
+                <span class="tag"
+                  >#${tag}
+                  <span @click=${() => !this.disabled && this.removeHashtag(index)} class="closer">x</span></span
+                >
               `)}
         </div>
 
         <div class="input">
-          <input type="text" @keyup=${this.onInputKeyup} placeholder="태그입력" />
+          <input type="text" @keyup=${this.onInputKeyup} placeholder="태그입력" ?disabled=${this.disabled} />
         </div>
       </div>