jebamo 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/je-alert.js +2 -2
- package/components/je-button.js +1 -1
- package/components/je-card.js +1 -1
- package/components/je-card.js.map +1 -1
- package/components/je-datepicker.js +21 -25
- package/components/je-datepicker.js.map +1 -1
- package/components/je-details.js +2 -2
- package/components/je-icon-button.js +1 -1
- package/components/je-pill.js +1 -1
- package/components/je-textfield.js +15 -5
- package/components/je-textfield.js.map +1 -1
- package/components/p-B4Ctd9hh.js +43 -0
- package/components/p-B4Ctd9hh.js.map +1 -0
- package/components/{p-DDWeNBqe.js → p-D2R7Jtds.js} +5 -5
- package/components/p-D2R7Jtds.js.map +1 -0
- package/components/{p-C07q1kKX.js → p-DvT9jOjY.js} +3 -3
- package/components/{p-C07q1kKX.js.map → p-DvT9jOjY.js.map} +1 -1
- package/dist/cjs/je-button.je-icon-button.je-loading.entry.cjs.js.map +1 -1
- package/dist/cjs/je-button_3.cjs.entry.js +3 -3
- package/dist/cjs/je-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/je-card.cjs.entry.js +1 -1
- package/dist/cjs/je-card.cjs.entry.js.map +1 -1
- package/dist/cjs/je-card.entry.cjs.js.map +1 -1
- package/dist/cjs/je-datepicker.cjs.entry.js +18 -22
- package/dist/cjs/je-datepicker.cjs.entry.js.map +1 -1
- package/dist/cjs/je-datepicker.entry.cjs.js.map +1 -1
- package/dist/cjs/je-pill.cjs.entry.js +8 -4
- package/dist/cjs/je-pill.cjs.entry.js.map +1 -1
- package/dist/cjs/je-pill.entry.cjs.js.map +1 -1
- package/dist/cjs/je-textfield.cjs.entry.js +12 -3
- package/dist/cjs/je-textfield.cjs.entry.js.map +1 -1
- package/dist/cjs/je-textfield.entry.cjs.js.map +1 -1
- package/dist/cjs/jebamo.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/je-button/je-button.js +3 -3
- package/dist/collection/components/je-button/je-button.js.map +1 -1
- package/dist/collection/components/je-card/je-card.css +1 -0
- package/dist/collection/components/je-datepicker/je-datepicker.css +4 -4
- package/dist/collection/components/je-datepicker/je-datepicker.js +19 -23
- package/dist/collection/components/je-datepicker/je-datepicker.js.map +1 -1
- package/dist/collection/components/je-pill/je-pill.css +14 -17
- package/dist/collection/components/je-pill/je-pill.js +16 -43
- package/dist/collection/components/je-pill/je-pill.js.map +1 -1
- package/dist/collection/components/je-textfield/je-textfield.css +23 -0
- package/dist/collection/components/je-textfield/je-textfield.js +31 -2
- package/dist/collection/components/je-textfield/je-textfield.js.map +1 -1
- package/dist/esm/je-button.je-icon-button.je-loading.entry.js.map +1 -1
- package/dist/esm/je-button_3.entry.js +3 -3
- package/dist/esm/je-button_3.entry.js.map +1 -1
- package/dist/esm/je-card.entry.js +1 -1
- package/dist/esm/je-card.entry.js.map +1 -1
- package/dist/esm/je-datepicker.entry.js +18 -22
- package/dist/esm/je-datepicker.entry.js.map +1 -1
- package/dist/esm/je-pill.entry.js +9 -5
- package/dist/esm/je-pill.entry.js.map +1 -1
- package/dist/esm/je-textfield.entry.js +12 -3
- package/dist/esm/je-textfield.entry.js.map +1 -1
- package/dist/esm/jebamo.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jebamo/je-button.je-icon-button.je-loading.entry.esm.js.map +1 -1
- package/dist/jebamo/je-card.entry.esm.js.map +1 -1
- package/dist/jebamo/je-datepicker.entry.esm.js.map +1 -1
- package/dist/jebamo/je-pill.entry.esm.js.map +1 -1
- package/dist/jebamo/je-textfield.entry.esm.js.map +1 -1
- package/dist/jebamo/jebamo.esm.js +1 -1
- package/dist/jebamo/p-1221fc3d.entry.js +2 -0
- package/dist/jebamo/p-1221fc3d.entry.js.map +1 -0
- package/dist/jebamo/p-3ab440dd.entry.js +2 -0
- package/dist/jebamo/p-3ab440dd.entry.js.map +1 -0
- package/dist/jebamo/{p-877450ab.entry.js → p-7365017e.entry.js} +2 -2
- package/dist/jebamo/p-7365017e.entry.js.map +1 -0
- package/dist/jebamo/p-c37c93ea.entry.js +2 -0
- package/dist/jebamo/p-c37c93ea.entry.js.map +1 -0
- package/dist/jebamo/p-c85b30e4.entry.js +2 -0
- package/dist/jebamo/p-c85b30e4.entry.js.map +1 -0
- package/dist/types/components/je-datepicker/je-datepicker.d.ts +7 -5
- package/dist/types/components/je-pill/je-pill.d.ts +2 -2
- package/dist/types/components/je-textfield/je-textfield.d.ts +5 -0
- package/dist/types/components.d.ts +10 -6
- package/package.json +1 -1
- package/components/p-DDWeNBqe.js.map +0 -1
- package/components/p-lBr1fFg4.js +0 -41
- package/components/p-lBr1fFg4.js.map +0 -1
- package/dist/jebamo/p-0fde45e3.entry.js +0 -2
- package/dist/jebamo/p-0fde45e3.entry.js.map +0 -1
- package/dist/jebamo/p-3975f47b.entry.js +0 -2
- package/dist/jebamo/p-3975f47b.entry.js.map +0 -1
- package/dist/jebamo/p-877450ab.entry.js.map +0 -1
- package/dist/jebamo/p-9d90ba0c.entry.js +0 -2
- package/dist/jebamo/p-9d90ba0c.entry.js.map +0 -1
- package/dist/jebamo/p-ee50e126.entry.js +0 -2
- package/dist/jebamo/p-ee50e126.entry.js.map +0 -1
- package/dist/vscode-data.json +0 -1698
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"je-textfield.js","sourceRoot":"","sources":["../../../src/components/je-textfield/je-textfield.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnJ,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAmBlD,MAAM,OAAO,WAAW;IARxB;QAUU,YAAO,GAAG,KAAK,CAAC;QAKf,YAAO,GAAG,KAAK,CAAC;QAChB,iBAAY,GAAG,KAAK,CAAC;QAa9B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,mBAAc,GAAG,KAAK,CAAC;QAE/B;;WAEG;QACK,iBAAY,GAAG,KAAK,CAAC;QAE7B;;WAEG;QACK,gBAAW,GAAiB,KAAK,CAAC;QA0C1C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,eAAU,GAAG,KAAK,CAAC;QAO3B;;WAEG;QACK,SAAI,GAAuB,IAAI,CAAC;QAExC;;WAEG;QACsB,SAAI,GAAG,MAAM,CAAC;QAYvC;;WAEG;QACK,aAAQ,GAAG,CAAC,CAAC;QAwBrB;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QAE1B;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAoBxB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAiIhB,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,OAAO;oBACL,EAAE,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;oBACxC,IAAI,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE;iBAC1C,CAAC;YACJ,CAAC;iBAAM,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;gBACrC,OAAO;oBACL,EAAE,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;oBAClE,IAAI,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;iBACpE,CAAC;YACJ,CAAC;iBAAM,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;gBACzC,OAAO;oBACL,EAAE,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;oBAClE,IAAI,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;iBAC/E,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,KAAK,EAAE,EAAc,EAAE,EAAE;YAC7C,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACzB,KAAK,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;YACvC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC1C,IAAI,CAAC,KAAK,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE,EAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;YAC3E,CAAC;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,GAAG,EAAE;YACrB,IAAI,IAAI,CAAC,OAAO;gBAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;;gBACtC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAA;KAgGF;IA5RC;;;OAGG;IACH,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAChC,CAAC;IACD,IAAI,KAAK,CAAC,KAAU;QAClB,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;aAAM,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;IACH,CAAC;IAYD,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACzD,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC;QAChC,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvH,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,YAAY,GAAG,aAAa;gBAChC,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,cAAc;oBAChB,CAAC,CAAC,+BAA+B,IAAI,CAAC,SAAS,kBAAkB;oBACjE,CAAC,CAAC,cAAc;wBAChB,CAAC,CAAC,gCAAgC,IAAI,CAAC,SAAS,kBAAkB;wBAClE,CAAC,CAAC,YAAY;4BACd,CAAC,CAAC,iBAAiB;4BACnB,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB;gBACE,YAAY,EAAE,aAAa;gBAC3B,QAAQ,EAAE,cAAc;gBACxB,OAAO,EAAE,cAAc;gBACvB,eAAe,EAAE,YAAY;gBAC7B,WAAW,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC;aACrC,EACD,YAAY,CACb,CAAC;YACF,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;YAClC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,kBAAkB;;QAChB,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAA,CAAA;QAC/F,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,KAAI,MAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,0CAAE,WAAW,CAAA,CAAA;QACnG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;QAC7E,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;QAC9D,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;QAC9D,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;QAChE,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,oBAAoB,CAAC,0CAAE,WAAW,CAAA,CAAA;QACjH,IAAI,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAA;QAEnD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;QAC7B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAClE,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;QAC7F,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;QACtE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;QACrE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;QACvE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;QAC1E,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAChE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IAClC,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAGD,KAAK,CAAC,eAAe;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAGD,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAGD,KAAK,CAAC,SAAS;;QACb,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,KAAK,EAAE,CAAC;QACjE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QACpF,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QACpF,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC;QACtF,IAAI,YAAY,GAAa,EAAE,CAAC;QAChC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACxC,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACxC,YAAY,GAAG,CAAC,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;QACD,OAAO;YACL,aAAa;YACb,cAAc;YACd,cAAc;YACd,YAAY;YACZ,YAAY;YACZ,QAAQ,EAAE,aAAa,IAAI,cAAc,IAAI,cAAc,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC;SACvG,CAAC;IACJ,CAAC;IAGD,KAAK,CAAC,SAAS;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,QAAQ;YACrD,EAAE,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;IAGD,aAAa,CAAC,EAAS;QACrB,EAAE,CAAC,cAAc,EAAE,CAAC;IACtB,CAAC;IA2CD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;gBACpG,6DAAM,IAAI,EAAC,OAAO,GAAG;gBAErB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,IAAI,iEAAU,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAY,CACjF;gBAEN,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,gBACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GACpE,CACH,CAAC,CAAC,CAAC,CACF,aACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACvE,KAAK,EAAE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EACpE,WAAW,EAAE,IAAI,CAAC,WAAW,GAC7B,CACH;gBAEA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B,uEAAgB,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,GAAI,CACjJ;gBAED,6DAAM,IAAI,EAAC,KAAK,GAAG;gBAElB,IAAI,CAAC,OAAO,IAAI,oEAAa;gBAC7B,IAAI,CAAC,OAAO,IAAI,iEAAU,KAAK,EAAC,SAAS;oBAAC,gEAAS,IAAI,QAAC,IAAI,EAAC,IAAI,mBAAuB,CAAW;gBACnG,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9C;oBACE,gBAAU,KAAK,EAAC,QAAQ;wBACtB,eAAS,IAAI,QAAC,IAAI,EAAC,IAAI,YAAgB,CAC9B;oBACX,WAAK,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAO,CAC3B,CACd,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACf,gBAAU,KAAK,EAAC,QAAQ;oBACtB,eAAS,IAAI,QAAC,IAAI,EAAC,IAAI,YAAgB,CAC9B,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ;YAEN,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAC9B,eAAS,IAAI,EAAC,MAAM,EAAC,OAAO,UAAE,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAW,CAC1E,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACd,eAAS,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAW,CAC3C,CAAC,CAAC,CAAC,IAAI,CACH,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State, Event, EventEmitter, AttachInternals, forceUpdate, Method, Listen, Watch } from '@stencil/core';\nimport { format, parseISO } from 'date-fns';\nimport { debounceEvent } from '../../utils/utils';\n\nexport type InputTransformer<T = any> = {\n to?: (value: string) => T;\n from?: (value: T) => string;\n}\n\nexport type FormatterFn = (newValue: string, oldValue?: string, ev?: InputEvent) => string | Promise<string>;\n\nexport type ValidationFn = (value: string) => string[] | Promise<string[]>;\n\n@Component({\n tag: 'je-textfield',\n styleUrl: 'je-textfield.scss',\n shadow: {\n delegatesFocus: true\n },\n formAssociated: true\n})\nexport class JeTextfield {\n private inputEl!: HTMLInputElement | HTMLTextAreaElement;\n private invalid = false;\n //private containerEl!: HTMLElement;\n\n @Element() hostEl!: HTMLJeTextfieldElement;\n @AttachInternals() internals: ElementInternals;\n @State() touched = false;\n @State() showPassword = false;\n\n /**\n * The default value the control will reset to in a form.\n * If not set, will default to the inital value of the \"value\" property.\n */\n @Prop({ mutable: true }) originalValue?: string;\n\n /**\n * Text above the control\n */\n @Prop() label?: string;\n\n /**\n * Renders input as disabled and prevents changes\n */\n @Prop() disabled = false;\n\n /**\n * Passed to native input\n */\n @Prop() autoCapitalize = 'off';\n\n /**\n * Passed to native input\n */\n @Prop() autoComplete = 'off';\n\n /**\n * Passed to native input\n */\n @Prop() autoCorrect: 'off' | 'on' = 'off';\n\n /**\n * Passed to native input\n */\n @Prop() autoFocus?: boolean;\n\n /**\n * Passed to native input\n */\n @Prop() inputMode: string;\n\n /**\n * Passed to native input\n */\n @Prop() min?: any;\n\n /**\n * Passed to native input\n */\n @Prop() max?: any;\n\n /**\n * Passed to native input\n */\n @Prop() minlength?: number;\n\n /**\n * Passed to native input\n */\n @Prop() maxlength?: number;\n\n /**\n * Passed to native textarea\n */\n @Prop() wrap?: string;\n\n /**\n * Passed to native input\n */\n @Prop() pattern?: string;\n\n /**\n * Renders input as read only and prevents changes\n */\n @Prop() readonly = false;\n\n /**\n * Marks as required in form and adds asterisk to the end of the label\n */\n @Prop() required = false;\n\n /**\n * Passed to native input\n */\n @Prop() spellcheck = false;\n\n /**\n * Passed to native input\n */\n @Prop() step?: string;\n\n /**\n * Container size\n */\n @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n /**\n * Passed to native input\n */\n @Prop({ mutable: true }) type = 'text';\n\n /**\n * Current value of the input\n */\n @Prop({ mutable: true }) value: any;\n\n /**\n * Input placeholder text\n */\n @Prop() placeholder?: string;\n\n /**\n * Optional debounce of the didInput event\n */\n @Prop() debounce = 0;\n\n /**\n * Formatters functions that are applied as the user types\n */\n @Prop() format?: FormatterFn;\n\n /**\n * Validator functions for form participation\n */\n @Prop() validators?: ValidationFn[];\n\n /**\n * Informational message directly below the control\n */\n @Prop() note?: string;\n\n /**\n * Transforms the value before it is passed to the input (from) and after the input emits a new value (to).\n *\n * There are built-in transformers for 'number', 'date', and 'datetime'.\n */\n @Prop() transform?: InputTransformer | 'number' | 'date' | 'datetime';\n\n /**\n * Whether the control is a multiline textarea\n */\n @Prop() multiline = false;\n\n /**\n * Shows a loading indicator in the end slot when true\n */\n @Prop() pending = false;\n\n private internalErrorProp?: boolean | string;\n /**\n * Shows an error icon in the end slot when true. If a string is passed in, it will render the icon as a tooltip.\n * Has no effect on form validation\n */\n @Prop() get error() {\n return this.internalErrorProp;\n }\n set error(value: any) {\n if (value === 'true' || value === '') {\n this.internalErrorProp = true;\n } else if (value === 'false') {\n this.internalErrorProp = false;\n } else {\n this.internalErrorProp = value;\n }\n }\n\n /**\n * Shows a success icon in the end slot when true. Has no effect on form validation\n */\n @Prop() success = false;\n\n /**\n * Emits as the user types\n */\n @Event({ bubbles: false }) valueChange: EventEmitter<any>;\n\n componentWillLoad() {\n if (!this.originalValue) this.originalValue = this.value;\n if (this.debounce) this.valueChange = debounceEvent(this.valueChange, this.debounce);\n }\n\n componentDidLoad() {\n this.internals.role = 'textbox';\n if (this.value) this.internals.setFormValue(this.value);\n }\n\n async componentWillRender() {\n const { hasError, minLengthError, maxLengthError, requiredError, patternError, customErrors } = await this.getErrors();\n this.invalid = hasError;\n if (hasError) {\n const errorMessage = requiredError\n ? 'This field is required'\n : minLengthError\n ? `This field must be at least ${this.minlength} characters long`\n : maxLengthError\n ? `This field must be less than ${this.maxlength} characters long`\n : patternError\n ? `Invalid pattern`\n : customErrors[0];\n this.internals.setValidity(\n {\n valueMissing: requiredError,\n tooShort: minLengthError,\n tooLong: maxLengthError,\n patternMismatch: patternError,\n customError: customErrors.length > 0,\n },\n errorMessage,\n );\n if (this.touched) {\n this.internals.reportValidity();\n }\n } else {\n this.internals.setValidity({});\n }\n }\n\n componentDidRender() {\n this.internals.ariaLabel = this.label || this.hostEl.querySelector('[slot=label]')?.textContent\n this.internals.ariaDescription = this.note || this.hostEl.querySelector('[slot=note]')?.textContent\n this.internals.ariaInvalid = this.internals.validity.valid ? 'true' : 'false'\n this.internals.ariaRequired = this.required ? 'true' : 'false'\n this.internals.ariaDisabled = this.disabled ? 'true' : 'false'\n this.internals.ariaReadOnly = this.readonly ? 'true' : 'false'\n this.internals.ariaMultiLine = this.multiline ? 'true' : 'false'\n this.internals.ariaPlaceholder = this.placeholder || this.hostEl.querySelector('[slot=placeholder]')?.textContent\n this.internals.ariaAutoComplete = this.autoComplete\n\n this.internals.states.clear()\n this.internals.states.add(this.invalid ? '--invalid' : '--valid');\n if (this.touched) this.internals.states.add(this.invalid ? '--user-invalid' : '--user-valid')\n this.internals.states.add(this.required ? '--required' : '--optional')\n this.internals.states.add(this.disabled ? '--disabled' : '--enabled')\n this.internals.states.add(this.readonly ? '--readonly' : '--readwrite')\n this.internals.states.add(this.multiline ? '--multiline' : '--singleline')\n this.internals.states.add(this.value ? '--filled' : '--empty')\n }\n\n formResetCallback() {\n this.touched = false;\n this.value = this.originalValue;\n }\n\n @Watch('value')\n handleValueChange() {\n this.internals.setFormValue(this.value || null);\n this.valueChange.emit(this.value);\n }\n\n @Method()\n async getInputElement() {\n return this.inputEl;\n }\n\n @Method()\n async markAsTouched() {\n this.touched = true;\n }\n\n @Method()\n async getErrors() {\n const requiredError = this.required && (this.value ?? '') === '';\n const minLengthError = this.minlength && (this.value ?? '').length < this.minlength;\n const maxLengthError = this.maxlength && (this.value ?? '').length > this.maxlength;\n const patternError = this.pattern && !new RegExp(this.pattern).test(this.value ?? '');\n let customErrors: string[] = [];\n if (this.validators) {\n for (const validator of this.validators) {\n const res = await validator(this.value);\n customErrors = [...customErrors, ...res];\n }\n }\n return {\n requiredError,\n minLengthError,\n maxLengthError,\n patternError,\n customErrors,\n hasError: requiredError || minLengthError || maxLengthError || patternError || customErrors.length > 0,\n };\n }\n\n @Method()\n async isTouched() {\n return this.touched;\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (this.multiline && ev.key === 'Enter' && ev.shiftKey)\n ev.stopPropagation()\n }\n\n @Listen('invalid')\n handleInvalid(ev: Event) {\n ev.preventDefault();\n }\n\n private getTransformer = () => {\n if (this.transform === 'number') {\n return {\n to: (value: string) => parseFloat(value),\n from: (value: number) => value.toString(),\n };\n } else if (this.transform === 'date') {\n return {\n to: (value: string) => (value ? parseISO(value).getTime() : value),\n from: (value: any) => (value ? format(value, 'yyyy-MM-dd') : value),\n };\n } else if (this.transform === 'datetime') {\n return {\n to: (value: string) => (value ? parseISO(value).getTime() : value),\n from: (value: any) => (value ? format(value, \"yyyy-MM-dd'T'HH:mm:ss\") : value),\n };\n } else {\n return this.transform;\n }\n };\n\n private formatInput = async (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement | null;\n if (input && this.format) {\n input.value = await this.format(input.value, this.value, ev);\n }\n };\n\n private handleInput = (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n const transformer = this.getTransformer();\n this.value = transformer?.to ? transformer.to(input.value) : input.value;\n }\n };\n\n private onFocus = () => {\n if (this.touched) forceUpdate(this.hostEl);\n else this.touched = true;\n }\n\n render() {\n const transformer = this.getTransformer();\n return (\n <Host>\n <div part=\"container\" class={{ [this.size]: true, disabled: this.disabled, multiline: this.multiline }}>\n <slot name=\"start\" />\n\n <slot name='label'>\n {this.label && <je-label part='label' required={this.required}>{this.label}</je-label>}\n </slot>\n\n {this.multiline ? (\n <textarea\n part=\"textarea\"\n tabindex={0}\n ref={el => (this.inputEl = el)}\n onInputCapture={this.formatInput}\n onInput={this.handleInput}\n onFocus={this.onFocus}\n autoCapitalize={this.autoCapitalize}\n autoComplete={this.autoComplete}\n autoCorrect={this.autoCorrect}\n autoFocus={this.autoFocus}\n disabled={this.disabled}\n maxLength={this.maxlength}\n minLength={this.minlength}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n wrap={this.wrap}\n value={transformer?.from ? transformer.from(this.value) : this.value}\n />\n ) : (\n <input\n part='input'\n tabindex={0}\n ref={el => (this.inputEl = el)}\n onInputCapture={this.formatInput}\n onInput={this.handleInput}\n onFocus={this.onFocus}\n disabled={this.disabled}\n autoCapitalize={this.autoCapitalize}\n autoComplete={this.autoComplete}\n autoCorrect={this.autoCorrect}\n autoFocus={this.autoFocus}\n inputMode={this.inputMode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n pattern={this.pattern}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n type={this.type == 'password' && this.showPassword ? 'text' : this.type}\n value={transformer?.from ? transformer.from(this.value) : this.value}\n placeholder={this.placeholder}\n />\n )}\n\n {this.type === 'password' && (\n <je-icon-button size=\"sm\" icon={this.showPassword ? 'visibility_off' : 'visibility'} onClick={() => (this.showPassword = !this.showPassword)} />\n )}\n\n <slot name=\"end\" />\n\n {this.pending && <je-loading/>}\n {this.success && <je-color color=\"success\"><je-icon fill size=\"sm\">check_circle</je-icon></je-color>}\n {this.error && typeof this.error === 'string' ? (\n <je-tooltip>\n <je-color color=\"danger\">\n <je-icon fill size=\"sm\">error</je-icon>\n </je-color>\n <div slot=\"content\">{this.error}</div>\n </je-tooltip>\n ) : this.error ? (\n <je-color color=\"danger\">\n <je-icon fill size=\"sm\">error</je-icon>\n </je-color>\n ) : null}\n </div>\n\n <slot name='note'>\n {this.invalid && this.touched ? (\n <je-note part='note' invalid>{this.internals.validationMessage}</je-note>\n ) : this.note ? (\n <je-note part='note'>{this.note}</je-note>\n ) : null}\n </slot>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"je-textfield.js","sourceRoot":"","sources":["../../../src/components/je-textfield/je-textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Event, EventEmitter, AttachInternals, forceUpdate, Method, Listen, Watch } from '@stencil/core';\nimport { format, parseISO } from 'date-fns';\nimport { debounceEvent } from '../../utils/utils';\n\nexport type InputTransformer<T = any> = {\n to?: (value: string) => T;\n from?: (value: T) => string;\n}\n\nexport type FormatterFn = (newValue: string, oldValue?: string, ev?: InputEvent) => string | Promise<string>;\n\nexport type ValidationFn = (value: string) => string[] | Promise<string[]>;\n\n@Component({\n tag: 'je-textfield',\n styleUrl: 'je-textfield.scss',\n shadow: {\n delegatesFocus: true\n },\n formAssociated: true\n})\nexport class JeTextfield {\n private inputEl!: HTMLInputElement | HTMLTextAreaElement;\n private invalid = false;\n //private containerEl!: HTMLElement;\n\n @Element() hostEl!: HTMLJeTextfieldElement;\n @AttachInternals() internals: ElementInternals;\n @State() touched = false;\n @State() showPassword = false;\n\n /**\n * The default value the control will reset to in a form.\n * If not set, will default to the inital value of the \"value\" property.\n */\n @Prop({ mutable: true }) originalValue?: string;\n\n /**\n * Text above the control\n */\n @Prop() label?: string;\n\n /**\n * Renders input as disabled and prevents changes\n */\n @Prop() disabled = false;\n\n /**\n * Passed to native input\n */\n @Prop() autoCapitalize = 'off';\n\n /**\n * Passed to native input\n */\n @Prop() autoComplete = 'off';\n\n /**\n * Passed to native input\n */\n @Prop() autoCorrect: 'off' | 'on' = 'off';\n\n /**\n * Passed to native input\n */\n @Prop() autoFocus?: boolean;\n\n /**\n * Passed to native input\n */\n @Prop() inputMode: string;\n\n /**\n * Passed to native input\n */\n @Prop() min?: any;\n\n /**\n * Passed to native input\n */\n @Prop() max?: any;\n\n /**\n * Passed to native input\n */\n @Prop() minlength?: number;\n\n /**\n * Passed to native input\n */\n @Prop() maxlength?: number;\n\n /**\n * Passed to native textarea\n */\n @Prop() wrap?: string;\n\n /**\n * Passed to native input\n */\n @Prop() pattern?: string;\n\n /**\n * Renders input as read only and prevents changes\n */\n @Prop() readonly = false;\n\n /**\n * Marks as required in form and adds asterisk to the end of the label\n */\n @Prop() required = false;\n\n /**\n * Passed to native input\n */\n @Prop() spellcheck = false;\n\n /**\n * Passed to native input\n */\n @Prop() step?: string;\n\n /**\n * Container size\n */\n @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n /**\n * Passed to native input\n */\n @Prop({ mutable: true }) type = 'text';\n\n /**\n * Current value of the input\n */\n @Prop({ mutable: true }) value: any;\n\n /**\n * Input placeholder text\n */\n @Prop() placeholder?: string;\n\n /**\n * Optional debounce of the didInput event\n */\n @Prop() debounce = 0;\n\n /**\n * Formatters functions that are applied as the user types\n */\n @Prop() format?: FormatterFn;\n\n /**\n * Validator functions for form participation\n */\n @Prop() validators?: ValidationFn[];\n\n /**\n * Informational message directly below the control\n */\n @Prop() note?: string;\n\n /**\n * Whether to suppress the default behavior of the input event\n */\n @Prop() suppressDefaultBehavior = false\n\n /**\n * Transforms the value before it is passed to the input (from) and after the input emits a new value (to).\n *\n * There are built-in transformers for 'number', 'date', and 'datetime'.\n */\n @Prop() transform?: InputTransformer | 'number' | 'date' | 'datetime';\n\n /**\n * Whether the control is a multiline textarea\n */\n @Prop() multiline = false;\n\n /**\n * Shows a loading indicator in the end slot when true\n */\n @Prop() pending = false;\n\n private internalErrorProp?: boolean | string;\n /**\n * Shows an error icon in the end slot when true. If a string is passed in, it will render the icon as a tooltip.\n * Has no effect on form validation\n */\n @Prop() get error() {\n return this.internalErrorProp;\n }\n set error(value: any) {\n if (value === 'true' || value === '') {\n this.internalErrorProp = true;\n } else if (value === 'false') {\n this.internalErrorProp = false;\n } else {\n this.internalErrorProp = value;\n }\n }\n\n /**\n * Shows a success icon in the end slot when true. Has no effect on form validation\n */\n @Prop() success = false;\n\n /**\n * Emits as the user types\n */\n @Event({ bubbles: false }) valueChange: EventEmitter<any>;\n\n componentWillLoad() {\n if (!this.originalValue) this.originalValue = this.value;\n if (this.debounce) this.valueChange = debounceEvent(this.valueChange, this.debounce);\n }\n\n componentDidLoad() {\n this.internals.role = 'textbox';\n if (this.value) this.internals.setFormValue(this.value);\n }\n\n async componentWillRender() {\n const { hasError, minLengthError, maxLengthError, requiredError, patternError, customErrors } = await this.getErrors();\n this.invalid = hasError;\n if (hasError) {\n const errorMessage = requiredError\n ? 'This field is required'\n : minLengthError\n ? `This field must be at least ${this.minlength} characters long`\n : maxLengthError\n ? `This field must be less than ${this.maxlength} characters long`\n : patternError\n ? `Invalid pattern`\n : customErrors[0];\n this.internals.setValidity(\n {\n valueMissing: requiredError,\n tooShort: minLengthError,\n tooLong: maxLengthError,\n patternMismatch: patternError,\n customError: customErrors.length > 0,\n },\n errorMessage,\n );\n if (this.touched) {\n this.internals.reportValidity();\n }\n } else {\n this.internals.setValidity({});\n }\n }\n\n componentDidRender() {\n this.internals.ariaLabel = this.label || this.hostEl.querySelector('[slot=label]')?.textContent\n this.internals.ariaDescription = this.note || this.hostEl.querySelector('[slot=note]')?.textContent\n this.internals.ariaInvalid = this.internals.validity.valid ? 'true' : 'false'\n this.internals.ariaRequired = this.required ? 'true' : 'false'\n this.internals.ariaDisabled = this.disabled ? 'true' : 'false'\n this.internals.ariaReadOnly = this.readonly ? 'true' : 'false'\n this.internals.ariaMultiLine = this.multiline ? 'true' : 'false'\n this.internals.ariaPlaceholder = this.placeholder || this.hostEl.querySelector('[slot=placeholder]')?.textContent\n this.internals.ariaAutoComplete = this.autoComplete\n\n this.internals.states.clear()\n this.internals.states.add(this.invalid ? '--invalid' : '--valid');\n if (this.touched) this.internals.states.add(this.invalid ? '--user-invalid' : '--user-valid')\n this.internals.states.add(this.required ? '--required' : '--optional')\n this.internals.states.add(this.disabled ? '--disabled' : '--enabled')\n this.internals.states.add(this.readonly ? '--readonly' : '--readwrite')\n this.internals.states.add(this.multiline ? '--multiline' : '--singleline')\n this.internals.states.add(this.value ? '--filled' : '--empty')\n }\n\n formResetCallback() {\n this.touched = false;\n this.value = this.originalValue;\n this.valueChange.emit(this.value);\n }\n\n @Watch('value')\n handleValueChange() {\n this.internals.setFormValue(this.value || null);\n }\n\n @Method()\n async getInputElement() {\n return this.inputEl;\n }\n\n @Method()\n async markAsTouched() {\n this.touched = true;\n }\n\n @Method()\n async getErrors() {\n const requiredError = this.required && (this.value ?? '') === '';\n const minLengthError = this.minlength && (this.value ?? '').length < this.minlength;\n const maxLengthError = this.maxlength && (this.value ?? '').length > this.maxlength;\n const patternError = this.pattern && !new RegExp(this.pattern).test(this.value ?? '');\n let customErrors: string[] = [];\n if (this.validators) {\n for (const validator of this.validators) {\n const res = await validator(this.value);\n customErrors = [...customErrors, ...res];\n }\n }\n return {\n requiredError,\n minLengthError,\n maxLengthError,\n patternError,\n customErrors,\n hasError: requiredError || minLengthError || maxLengthError || patternError || customErrors.length > 0,\n };\n }\n\n @Method()\n async isTouched() {\n return this.touched;\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (this.multiline && ev.key === 'Enter' && ev.shiftKey)\n ev.stopPropagation()\n }\n\n @Listen('invalid')\n handleInvalid(ev: Event) {\n ev.preventDefault();\n }\n\n private getTransformer = () => {\n if (this.transform === 'number') {\n return {\n to: (value: string) => parseFloat(value),\n from: (value: number) => value.toString(),\n };\n } else if (this.transform === 'date') {\n return {\n to: (value: string) => (value ? parseISO(value).getTime() : value),\n from: (value: any) => (value ? format(value, 'yyyy-MM-dd') : value),\n };\n } else if (this.transform === 'datetime') {\n return {\n to: (value: string) => (value ? parseISO(value).getTime() : value),\n from: (value: any) => (value ? format(value, \"yyyy-MM-dd'T'HH:mm:ss\") : value),\n };\n } else {\n return this.transform;\n }\n };\n\n private formatInput = async (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement | null;\n if (input && this.format) {\n input.value = await this.format(input.value, this.value, ev);\n }\n };\n\n private handleInput = (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n const transformer = this.getTransformer();\n this.value = transformer?.to ? transformer.to(input.value) : input.value;\n this.valueChange.emit(this.value);\n }\n };\n\n private onFocus = () => {\n if (this.touched) forceUpdate(this.hostEl);\n else this.touched = true;\n }\n\n private suppress = (ev: Event) => {\n if (this.suppressDefaultBehavior)\n ev.preventDefault();\n }\n\n render() {\n const transformer = this.getTransformer();\n return (\n <Host>\n <div part=\"container\" class={{ [this.size]: true, disabled: this.disabled, multiline: this.multiline }}>\n <slot name=\"start\" />\n\n <slot name='label'>\n {this.label && <je-label part='label' required={this.required}>{this.label}</je-label>}\n </slot>\n\n {this.multiline ? (\n <textarea\n part=\"textarea\"\n tabindex={0}\n ref={el => (this.inputEl = el)}\n onInputCapture={this.formatInput}\n onInput={this.handleInput}\n onFocus={this.onFocus}\n autoCapitalize={this.autoCapitalize}\n autoComplete={this.autoComplete}\n autoCorrect={this.autoCorrect}\n autoFocus={this.autoFocus}\n disabled={this.disabled}\n maxLength={this.maxlength}\n minLength={this.minlength}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n wrap={this.wrap}\n value={transformer?.from ? transformer.from(this.value) : this.value}\n />\n ) : (\n <input\n part='input'\n tabindex={0}\n ref={el => (this.inputEl = el)}\n class={{suppress: this.suppressDefaultBehavior}}\n onInputCapture={this.formatInput}\n onInput={this.handleInput}\n onClick={this.suppress}\n onFocus={this.onFocus}\n disabled={this.disabled}\n autoCapitalize={this.autoCapitalize}\n autoComplete={this.autoComplete}\n autoCorrect={this.autoCorrect}\n autoFocus={this.autoFocus}\n inputMode={this.inputMode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n pattern={this.pattern}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n type={this.type == 'password' && this.showPassword ? 'text' : this.type}\n value={transformer?.from ? transformer.from(this.value) : this.value}\n placeholder={this.placeholder}\n />\n )}\n\n {this.type === 'password' && (\n <je-icon-button size=\"sm\" icon={this.showPassword ? 'visibility_off' : 'visibility'} onClick={() => (this.showPassword = !this.showPassword)} />\n )}\n\n <slot name=\"end\" />\n\n {this.pending && <je-loading/>}\n {this.success && <je-color color=\"success\"><je-icon fill size=\"sm\">check_circle</je-icon></je-color>}\n {this.error && typeof this.error === 'string' ? (\n <je-tooltip>\n <je-color color=\"danger\">\n <je-icon fill size=\"sm\">error</je-icon>\n </je-color>\n <div slot=\"content\">{this.error}</div>\n </je-tooltip>\n ) : this.error ? (\n <je-color color=\"danger\">\n <je-icon fill size=\"sm\">error</je-icon>\n </je-color>\n ) : null}\n </div>\n\n <slot name='note'>\n {this.invalid && this.touched ? (\n <je-note part='note' invalid>{this.internals.validationMessage}</je-note>\n ) : this.note ? (\n <je-note part='note'>{this.note}</je-note>\n ) : null}\n </slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"je-button.je-icon-button.je-loading.entry.js","sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n display: contents;\n\n --height: 2.5rem;\n --padding-inline: #{spacing-get(md)};\n --font-size: #{font-size(md)};\n --border-color: transparent;\n}\n\n:host([size=sm]) {\n --height: 2rem;\n --padding-inline: #{spacing-get(sm)};\n --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n --height: 3rem;\n --padding-inline: #{spacing-get(lg)};\n --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n --color: light-dark(#{secondary(800)}, #{secondary(200)});\n --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n &.solid {\n --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n }\n}\n\nbutton {\n &.outline {\n --border-color: currentcolor;\n }\n\n &.primary {\n &.solid {\n --color: #{primary(100)};\n --background: #{primary(500)};\n --hover-background: #{primary(600)};\n --active-background: #{primary(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{primary(500)}, #{primary(300)});\n --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n --active-color: light-dark(#{primary(700)}, #{primary(100)});\n --background: transparent;\n --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n --active-background: light-dark(#{primary(100)}, #{primary(800)});\n }\n }\n\n &.secondary {\n &.solid {\n --color: #{secondary(900)};\n --background: #{secondary(500)};\n --hover-background: #{secondary(400)};\n --active-background: #{secondary(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{secondary(700)}, #{secondary(500)});\n --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n }\n }\n\n &.warning {\n &.solid {\n --color: #{warning(900)};\n --background: #{warning(500)};\n --hover-background: #{warning(400)};\n --active-background: #{warning(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{warning(700)}, #{warning(500)});\n --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n --active-color: light-dark(#{warning(900)}, #{warning(300)});\n --background: transparent;\n --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n --active-background: light-dark(#{warning(150)}, #{warning(875)});\n }\n }\n\n &.success {\n &.solid {\n --color: #{success(900)};\n --background: #{success(500)};\n --hover-background: #{success(400)};\n --active-background: #{success(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{success(700)}, #{success(500)});\n --hover-color: light-dark(#{success(800)}, #{success(400)});\n --active-color: light-dark(#{success(900)}, #{success(300)});\n --background: transparent;\n --hover-background: light-dark(#{success(100)}, #{success(900)});\n --active-background: light-dark(#{success(150)}, #{success(875)});\n }\n }\n\n &.danger {\n &.solid {\n --color: #{danger(100)};\n --background: #{danger(500)};\n --hover-background: #{danger(600)};\n --active-background: #{danger(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{danger(500)}, #{danger(300)});\n --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n --active-color: light-dark(#{danger(700)}, #{danger(100)});\n --background: transparent;\n --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n --active-background: light-dark(#{danger(100)}, #{danger(700)});\n }\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n position: relative;\n box-sizing: border-box;\n border-radius: radius-get(md);\n margin: 0;\n padding-block: 0;\n padding-inline: var(--padding-inline);\n cursor: pointer;\n flex-shrink: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n user-select: none;\n text-transform: capitalize;\n text-wrap: wrap;\n font-family: inherit;\n font-size: var(--font-size);\n font-weight: font-weight(semi-bold);\n height: var(--height);\n color: var(--color);\n background-color: var(--background, transparent);\n transition: all 125ms ease-in-out;\n outline-color: primary(300);\n outline-offset: 3px;\n border: solid 1px var(--border-color);\n\n @media (hover: hover) {\n &:hover:not(:disabled) {\n background-color: var(--hover-background, var(--background, transparent));\n color: var(--hover-color, var(--color));\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--active-background, var(--background, transparent));\n color: var(--active-color, var(--color));\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.pending {\n opacity: 0.8;\n cursor: progress;\n width: var(--pending-width);\n }\n\n &.expand {\n width: 100%;\n }\n}\n\n::slotted([slot=badge]) {\n top: 0;\n right: 0;\n position: absolute;\n z-index: 1;\n transform: translate(50%, -50%);\n border-radius: radius-get(circle);\n box-sizing: border-box;\n color: light-dark(secondary(100), secondary(850));\n background-color: light-dark(secondary(850), secondary(100));\n padding: spacing-get(2xs);\n font-size: var(--font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-button',\n styleUrl: 'je-button.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class JeButton {\n @Element() el: HTMLJeButtonElement;\n private formButtonEl?: HTMLButtonElement;\n private buttonEl: HTMLButtonElement;\n\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /**\n * Can set form id to participate in forms. Use this if you need to place\n * submit/reset button outside the form element\n */\n @Prop() form?: string;\n\n /** Expands the button to the full width of it's container */\n @Prop() expand = false;\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n /** Button size */\n @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop({ reflect: true }) color?: Color;\n\n componentDidLoad() {\n if (this.type) {\n let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')\n if (formEl) {\n this.formButtonEl = document.createElement('button');\n this.formButtonEl.type = this.type;\n this.formButtonEl.style.display = 'none';\n formEl.append(this.formButtonEl);\n }\n }\n }\n\n @Listen('click')\n handleClick() {\n this.formButtonEl?.click();\n }\n\n @Watch('pending')\n onPendingChange() {\n if (this.pending) {\n this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n }\n }\n\n render() {\n const classes = {\n [this.fill]: true,\n expand: this.expand,\n pending: this.pending,\n [this.color]: !!this.color\n }\n return (\n <Host>\n <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n {this.pending ? <je-loading/> : <slot/>}\n <slot name='badge'/>\n </button>\n </Host>\n );\n }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n display: contents;\n}\n\nje-button {\n --height: min-content;\n\n &[size=sm] {\n --padding-inline: #{spacing-get(3xs)};\n }\n\n &[size=md] {\n --padding-inline: #{spacing-get(2xs)};\n }\n\n &[size=lg] {\n --padding-inline: #{spacing-get(xs)};\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-icon-button',\n styleUrl: 'je-icon-button.scss',\n shadow: true,\n})\nexport class JeIconButton {\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n /** Button size */\n @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop() color?: Color;\n\n /** Name of icon */\n @Prop() icon?: string;\n\n render() {\n return (\n <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n <slot>\n {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n </slot>\n <slot slot='badge' name='badge'></slot>\n </je-button>\n );\n }\n}\n",":host {\n display: inline-block;\n position: relative;\n width: 23px;\n height: 23px;\n user-select: none;\n}\n\nsvg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-linecap: round;\n stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n dur: number;\n circles?: number;\n lines?: number;\n elmDuration?: boolean;\n fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n r?: number;\n y1?: number;\n y2?: number;\n cx?: number;\n cy?: number;\n style: { [key: string]: string | undefined };\n viewBox?: string;\n transform?: string;\n}\n\nconst spinners = {\n lines: {\n dur: 1000,\n lines: 8,\n fn: (dur: number, index: number, total: number) => {\n const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n const animationDelay = `${(dur * index) / total - dur}ms`;\n\n return {\n y1: 14,\n y2: 26,\n style: {\n transform: transform,\n 'animation-delay': animationDelay,\n },\n };\n },\n },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n const data = spinner.fn(duration, index, total);\n data.style['animation-duration'] = duration + 'ms';\n\n return (\n <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n </svg>\n );\n};\n\n@Component({\n tag: 'je-loading',\n styleUrl: 'je-loading.scss',\n shadow: true,\n})\nexport class JeLoading {\n render() {\n const spinner = spinners['lines'];\n const duration = spinner.dur;\n const svgs: SVGElement[] = [];\n\n for (let i = 0; i < spinner.lines; i++) {\n svgs.push(buildLine(spinner, duration, i, spinner.lines));\n }\n\n return (\n <Host class={{ [`spinner-lines`]: true }}>\n {svgs}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,y6QAAy6Q;;MCUh7Q,QAAQ,GAAA,MAAA;AAPrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAYhB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGE,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AA8CzD;IAzCC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;;YAErF,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;gBACpD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;gBAClC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACxC,gBAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;;;IAMtC,WAAW,GAAA;;QACT,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IAI5B,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA,EAAA,CAAI,CAAC;;;IAIxF,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;SACtB;QACD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAA,EAC1I,IAAI,CAAC,OAAO,GAAG,CAAa,CAAA,YAAA,EAAA,IAAA,CAAA,GAAG,CAAO,CAAA,MAAA,EAAA,IAAA,CAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,GAAE,CACb,CACJ;;;;;;;;;;AChFb,MAAM,eAAe,GAAG,gQAAgQ;;MCQ3Q,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAMhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAkBxC;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxJ,CACG,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,IAAG,IAAI,CAAC,IAAI,CAAW,CACjI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,CAAQ,CAC7B;;;;;ACrClB,MAAM,YAAY,GAAG,muBAAmuB;;ACqBxvB,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE;AACL,QAAA,GAAG,EAAE,IAAI;AACT,QAAA,KAAK,EAAE,CAAC;QACR,EAAE,EAAE,CAAC,GAAW,EAAE,KAAa,EAAE,KAAa,KAAI;AAChD,YAAA,MAAM,SAAS,GAAG,CAAU,OAAA,EAAA,CAAC,GAAG,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,CAAA,IAAA,CAAM;AAC1F,YAAA,MAAM,cAAc,GAAG,CAAG,EAAA,CAAC,GAAG,GAAG,KAAK,IAAI,KAAK,GAAG,GAAG,IAAI;YAEzD,OAAO;AACL,gBAAA,EAAE,EAAE,EAAE;AACN,gBAAA,EAAE,EAAE,EAAE;AACN,gBAAA,KAAK,EAAE;AACL,oBAAA,SAAS,EAAE,SAAS;AACpB,oBAAA,iBAAiB,EAAE,cAAc;AAClC,iBAAA;aACF;SACF;AACF,KAAA;CACF;AAED,MAAM,SAAS,GAAG,CAAC,OAAsB,EAAE,QAAgB,EAAE,KAAa,EAAE,KAAa,KAAI;AAC3F,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC;IAC/C,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,GAAG,QAAQ,GAAG,IAAI;IAElD,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAC1D,CAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAI,CAAA,CAC3D;AAEV,CAAC;MAOY,SAAS,GAAA,MAAA;;;;IACpB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;AACjC,QAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG;QAC5B,MAAM,IAAI,GAAiB,EAAE;AAE7B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;AACtC,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;;QAG3D,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,CAAC,CAAA,aAAA,CAAe,GAAG,IAAI,EAAE,IACrC,IAAI,CACA;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"je-button.je-icon-button.je-loading.entry.js","sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n display: contents;\n\n --height: 2.5rem;\n --padding-inline: #{spacing-get(md)};\n --font-size: #{font-size(md)};\n --border-color: transparent;\n}\n\n:host([size=sm]) {\n --height: 2rem;\n --padding-inline: #{spacing-get(sm)};\n --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n --height: 3rem;\n --padding-inline: #{spacing-get(lg)};\n --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n --color: light-dark(#{secondary(800)}, #{secondary(200)});\n --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n &.solid {\n --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n }\n}\n\nbutton {\n &.outline {\n --border-color: currentcolor;\n }\n\n &.primary {\n &.solid {\n --color: #{primary(100)};\n --background: #{primary(500)};\n --hover-background: #{primary(600)};\n --active-background: #{primary(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{primary(500)}, #{primary(300)});\n --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n --active-color: light-dark(#{primary(700)}, #{primary(100)});\n --background: transparent;\n --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n --active-background: light-dark(#{primary(100)}, #{primary(800)});\n }\n }\n\n &.secondary {\n &.solid {\n --color: #{secondary(900)};\n --background: #{secondary(500)};\n --hover-background: #{secondary(400)};\n --active-background: #{secondary(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{secondary(700)}, #{secondary(500)});\n --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n }\n }\n\n &.warning {\n &.solid {\n --color: #{warning(900)};\n --background: #{warning(500)};\n --hover-background: #{warning(400)};\n --active-background: #{warning(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{warning(700)}, #{warning(500)});\n --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n --active-color: light-dark(#{warning(900)}, #{warning(300)});\n --background: transparent;\n --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n --active-background: light-dark(#{warning(150)}, #{warning(875)});\n }\n }\n\n &.success {\n &.solid {\n --color: #{success(900)};\n --background: #{success(500)};\n --hover-background: #{success(400)};\n --active-background: #{success(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{success(700)}, #{success(500)});\n --hover-color: light-dark(#{success(800)}, #{success(400)});\n --active-color: light-dark(#{success(900)}, #{success(300)});\n --background: transparent;\n --hover-background: light-dark(#{success(100)}, #{success(900)});\n --active-background: light-dark(#{success(150)}, #{success(875)});\n }\n }\n\n &.danger {\n &.solid {\n --color: #{danger(100)};\n --background: #{danger(500)};\n --hover-background: #{danger(600)};\n --active-background: #{danger(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{danger(500)}, #{danger(300)});\n --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n --active-color: light-dark(#{danger(700)}, #{danger(100)});\n --background: transparent;\n --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n --active-background: light-dark(#{danger(100)}, #{danger(700)});\n }\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n position: relative;\n box-sizing: border-box;\n border-radius: radius-get(md);\n margin: 0;\n padding-block: 0;\n padding-inline: var(--padding-inline);\n cursor: pointer;\n flex-shrink: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n user-select: none;\n text-transform: capitalize;\n text-wrap: wrap;\n font-family: inherit;\n font-size: var(--font-size);\n font-weight: font-weight(semi-bold);\n height: var(--height);\n color: var(--color);\n background-color: var(--background, transparent);\n transition: all 125ms ease-in-out;\n outline-color: primary(300);\n outline-offset: 3px;\n border: solid 1px var(--border-color);\n\n @media (hover: hover) {\n &:hover:not(:disabled) {\n background-color: var(--hover-background, var(--background, transparent));\n color: var(--hover-color, var(--color));\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--active-background, var(--background, transparent));\n color: var(--active-color, var(--color));\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.pending {\n opacity: 0.8;\n cursor: progress;\n width: var(--pending-width);\n }\n\n &.expand {\n width: 100%;\n }\n}\n\n::slotted([slot=badge]) {\n top: 0;\n right: 0;\n position: absolute;\n z-index: 1;\n transform: translate(50%, -50%);\n border-radius: radius-get(circle);\n box-sizing: border-box;\n color: light-dark(secondary(100), secondary(850));\n background-color: light-dark(secondary(850), secondary(100));\n padding: spacing-get(2xs);\n font-size: var(--font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-button',\n styleUrl: 'je-button.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class JeButton {\n @Element() el: HTMLJeButtonElement;\n private formButtonEl?: HTMLButtonElement;\n private buttonEl: HTMLButtonElement;\n\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /**\n * Can set form id to participate in forms. Use this if you need to place\n * submit/reset button outside the form element\n */\n @Prop() form?: string;\n\n /** Expands the button to the full width of it's container */\n @Prop() expand = false;\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n /** Button size */\n @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop({ reflect: true }) color?: Color;\n\n componentDidLoad() {\n if (this.type) {\n const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n console.log(formEl);\n if (formEl) {\n this.formButtonEl = document.createElement('button');\n this.formButtonEl.type = this.type;\n this.formButtonEl.style.display = 'none';\n formEl.append(this.formButtonEl);\n }\n }\n }\n\n @Listen('click')\n handleClick() {\n this.formButtonEl?.click();\n }\n\n @Watch('pending')\n onPendingChange() {\n if (this.pending) {\n this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n }\n }\n\n render() {\n const classes = {\n [this.fill]: true,\n expand: this.expand,\n pending: this.pending,\n [this.color]: !!this.color\n }\n return (\n <Host>\n <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n {this.pending ? <je-loading/> : <slot/>}\n <slot name='badge'/>\n </button>\n </Host>\n );\n }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n display: contents;\n}\n\nje-button {\n --height: min-content;\n\n &[size=sm] {\n --padding-inline: #{spacing-get(3xs)};\n }\n\n &[size=md] {\n --padding-inline: #{spacing-get(2xs)};\n }\n\n &[size=lg] {\n --padding-inline: #{spacing-get(xs)};\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-icon-button',\n styleUrl: 'je-icon-button.scss',\n shadow: true,\n})\nexport class JeIconButton {\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n /** Button size */\n @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop() color?: Color;\n\n /** Name of icon */\n @Prop() icon?: string;\n\n render() {\n return (\n <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n <slot>\n {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n </slot>\n <slot slot='badge' name='badge'></slot>\n </je-button>\n );\n }\n}\n",":host {\n display: inline-block;\n position: relative;\n width: 23px;\n height: 23px;\n user-select: none;\n}\n\nsvg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-linecap: round;\n stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n dur: number;\n circles?: number;\n lines?: number;\n elmDuration?: boolean;\n fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n r?: number;\n y1?: number;\n y2?: number;\n cx?: number;\n cy?: number;\n style: { [key: string]: string | undefined };\n viewBox?: string;\n transform?: string;\n}\n\nconst spinners = {\n lines: {\n dur: 1000,\n lines: 8,\n fn: (dur: number, index: number, total: number) => {\n const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n const animationDelay = `${(dur * index) / total - dur}ms`;\n\n return {\n y1: 14,\n y2: 26,\n style: {\n transform: transform,\n 'animation-delay': animationDelay,\n },\n };\n },\n },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n const data = spinner.fn(duration, index, total);\n data.style['animation-duration'] = duration + 'ms';\n\n return (\n <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n </svg>\n );\n};\n\n@Component({\n tag: 'je-loading',\n styleUrl: 'je-loading.scss',\n shadow: true,\n})\nexport class JeLoading {\n render() {\n const spinner = spinners['lines'];\n const duration = spinner.dur;\n const svgs: SVGElement[] = [];\n\n for (let i = 0; i < spinner.lines; i++) {\n svgs.push(buildLine(spinner, duration, i, spinner.lines));\n }\n\n return (\n <Host class={{ [`spinner-lines`]: true }}>\n {svgs}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,y6QAAy6Q;;MCUh7Q,QAAQ,GAAA,MAAA;AAPrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAYhB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGE,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AA8CzD;IAzCC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;AACvF,YAAA,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YACnB,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;gBACpD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;gBAClC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACxC,gBAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;;;IAMtC,WAAW,GAAA;;QACT,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IAI5B,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA,EAAA,CAAI,CAAC;;;IAIxF,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;SACtB;QACD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAA,EAC1I,IAAI,CAAC,OAAO,GAAG,CAAa,CAAA,YAAA,EAAA,IAAA,CAAA,GAAG,CAAO,CAAA,MAAA,EAAA,IAAA,CAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,GAAE,CACb,CACJ;;;;;;;;;;AChFb,MAAM,eAAe,GAAG,gQAAgQ;;MCQ3Q,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAMhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAkBxC;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxJ,CACG,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,IAAG,IAAI,CAAC,IAAI,CAAW,CACjI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,CAAQ,CAC7B;;;;;ACrClB,MAAM,YAAY,GAAG,muBAAmuB;;ACqBxvB,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE;AACL,QAAA,GAAG,EAAE,IAAI;AACT,QAAA,KAAK,EAAE,CAAC;QACR,EAAE,EAAE,CAAC,GAAW,EAAE,KAAa,EAAE,KAAa,KAAI;AAChD,YAAA,MAAM,SAAS,GAAG,CAAU,OAAA,EAAA,CAAC,GAAG,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,CAAA,IAAA,CAAM;AAC1F,YAAA,MAAM,cAAc,GAAG,CAAG,EAAA,CAAC,GAAG,GAAG,KAAK,IAAI,KAAK,GAAG,GAAG,IAAI;YAEzD,OAAO;AACL,gBAAA,EAAE,EAAE,EAAE;AACN,gBAAA,EAAE,EAAE,EAAE;AACN,gBAAA,KAAK,EAAE;AACL,oBAAA,SAAS,EAAE,SAAS;AACpB,oBAAA,iBAAiB,EAAE,cAAc;AAClC,iBAAA;aACF;SACF;AACF,KAAA;CACF;AAED,MAAM,SAAS,GAAG,CAAC,OAAsB,EAAE,QAAgB,EAAE,KAAa,EAAE,KAAa,KAAI;AAC3F,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC;IAC/C,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,GAAG,QAAQ,GAAG,IAAI;IAElD,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAC1D,CAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAI,CAAA,CAC3D;AAEV,CAAC;MAOY,SAAS,GAAA,MAAA;;;;IACpB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;AACjC,QAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG;QAC5B,MAAM,IAAI,GAAiB,EAAE;AAE7B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;AACtC,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;;QAG3D,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,CAAC,CAAA,aAAA,CAAe,GAAG,IAAI,EAAE,IACrC,IAAI,CACA;;;;;;;"}
|
|
@@ -18,8 +18,8 @@ const JeButton = class {
|
|
|
18
18
|
}
|
|
19
19
|
componentDidLoad() {
|
|
20
20
|
if (this.type) {
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
|
|
22
|
+
console.log(formEl);
|
|
23
23
|
if (formEl) {
|
|
24
24
|
this.formButtonEl = document.createElement('button');
|
|
25
25
|
this.formButtonEl.type = this.type;
|
|
@@ -44,7 +44,7 @@ const JeButton = class {
|
|
|
44
44
|
pending: this.pending,
|
|
45
45
|
[this.color]: !!this.color
|
|
46
46
|
};
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: 'f5e0a14366f5cfc859f7d9ad4ff5f340fe6bc7e5' }, h("button", { key: 'dd84638d95708f044ccca7917e3601ba2a939516', part: 'inner-button', ref: el => this.buttonEl = el, disabled: this.disabled || this.pending, type: 'button', tabindex: 0, class: classes }, this.pending ? h("je-loading", null) : h("slot", null), h("slot", { key: '8999e86079957e886e45e0cc9e9410f611f0a86a', name: 'badge' }))));
|
|
48
48
|
}
|
|
49
49
|
static get delegatesFocus() { return true; }
|
|
50
50
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"je-button.je-icon-button.je-loading.entry.js","mappings":"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","names":[],"sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n display: contents;\n\n --height: 2.5rem;\n --padding-inline: #{spacing-get(md)};\n --font-size: #{font-size(md)};\n --border-color: transparent;\n}\n\n:host([size=sm]) {\n --height: 2rem;\n --padding-inline: #{spacing-get(sm)};\n --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n --height: 3rem;\n --padding-inline: #{spacing-get(lg)};\n --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n --color: light-dark(#{secondary(800)}, #{secondary(200)});\n --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n &.solid {\n --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n }\n}\n\nbutton {\n &.outline {\n --border-color: currentcolor;\n }\n\n &.primary {\n &.solid {\n --color: #{primary(100)};\n --background: #{primary(500)};\n --hover-background: #{primary(600)};\n --active-background: #{primary(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{primary(500)}, #{primary(300)});\n --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n --active-color: light-dark(#{primary(700)}, #{primary(100)});\n --background: transparent;\n --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n --active-background: light-dark(#{primary(100)}, #{primary(800)});\n }\n }\n\n &.secondary {\n &.solid {\n --color: #{secondary(900)};\n --background: #{secondary(500)};\n --hover-background: #{secondary(400)};\n --active-background: #{secondary(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{secondary(700)}, #{secondary(500)});\n --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n }\n }\n\n &.warning {\n &.solid {\n --color: #{warning(900)};\n --background: #{warning(500)};\n --hover-background: #{warning(400)};\n --active-background: #{warning(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{warning(700)}, #{warning(500)});\n --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n --active-color: light-dark(#{warning(900)}, #{warning(300)});\n --background: transparent;\n --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n --active-background: light-dark(#{warning(150)}, #{warning(875)});\n }\n }\n\n &.success {\n &.solid {\n --color: #{success(900)};\n --background: #{success(500)};\n --hover-background: #{success(400)};\n --active-background: #{success(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{success(700)}, #{success(500)});\n --hover-color: light-dark(#{success(800)}, #{success(400)});\n --active-color: light-dark(#{success(900)}, #{success(300)});\n --background: transparent;\n --hover-background: light-dark(#{success(100)}, #{success(900)});\n --active-background: light-dark(#{success(150)}, #{success(875)});\n }\n }\n\n &.danger {\n &.solid {\n --color: #{danger(100)};\n --background: #{danger(500)};\n --hover-background: #{danger(600)};\n --active-background: #{danger(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{danger(500)}, #{danger(300)});\n --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n --active-color: light-dark(#{danger(700)}, #{danger(100)});\n --background: transparent;\n --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n --active-background: light-dark(#{danger(100)}, #{danger(700)});\n }\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n position: relative;\n box-sizing: border-box;\n border-radius: radius-get(md);\n margin: 0;\n padding-block: 0;\n padding-inline: var(--padding-inline);\n cursor: pointer;\n flex-shrink: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n user-select: none;\n text-transform: capitalize;\n text-wrap: wrap;\n font-family: inherit;\n font-size: var(--font-size);\n font-weight: font-weight(semi-bold);\n height: var(--height);\n color: var(--color);\n background-color: var(--background, transparent);\n transition: all 125ms ease-in-out;\n outline-color: primary(300);\n outline-offset: 3px;\n border: solid 1px var(--border-color);\n\n @media (hover: hover) {\n &:hover:not(:disabled) {\n background-color: var(--hover-background, var(--background, transparent));\n color: var(--hover-color, var(--color));\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--active-background, var(--background, transparent));\n color: var(--active-color, var(--color));\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.pending {\n opacity: 0.8;\n cursor: progress;\n width: var(--pending-width);\n }\n\n &.expand {\n width: 100%;\n }\n}\n\n::slotted([slot=badge]) {\n top: 0;\n right: 0;\n position: absolute;\n z-index: 1;\n transform: translate(50%, -50%);\n border-radius: radius-get(circle);\n box-sizing: border-box;\n color: light-dark(secondary(100), secondary(850));\n background-color: light-dark(secondary(850), secondary(100));\n padding: spacing-get(2xs);\n font-size: var(--font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-button',\n styleUrl: 'je-button.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class JeButton {\n @Element() el: HTMLJeButtonElement;\n private formButtonEl?: HTMLButtonElement;\n private buttonEl: HTMLButtonElement;\n\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /**\n * Can set form id to participate in forms. Use this if you need to place\n * submit/reset button outside the form element\n */\n @Prop() form?: string;\n\n /** Expands the button to the full width of it's container */\n @Prop() expand = false;\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n /** Button size */\n @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop({ reflect: true }) color?: Color;\n\n componentDidLoad() {\n if (this.type) {\n let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')\n if (formEl) {\n this.formButtonEl = document.createElement('button');\n this.formButtonEl.type = this.type;\n this.formButtonEl.style.display = 'none';\n formEl.append(this.formButtonEl);\n }\n }\n }\n\n @Listen('click')\n handleClick() {\n this.formButtonEl?.click();\n }\n\n @Watch('pending')\n onPendingChange() {\n if (this.pending) {\n this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n }\n }\n\n render() {\n const classes = {\n [this.fill]: true,\n expand: this.expand,\n pending: this.pending,\n [this.color]: !!this.color\n }\n return (\n <Host>\n <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n {this.pending ? <je-loading/> : <slot/>}\n <slot name='badge'/>\n </button>\n </Host>\n );\n }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n display: contents;\n}\n\nje-button {\n --height: min-content;\n\n &[size=sm] {\n --padding-inline: #{spacing-get(3xs)};\n }\n\n &[size=md] {\n --padding-inline: #{spacing-get(2xs)};\n }\n\n &[size=lg] {\n --padding-inline: #{spacing-get(xs)};\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-icon-button',\n styleUrl: 'je-icon-button.scss',\n shadow: true,\n})\nexport class JeIconButton {\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n /** Button size */\n @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop() color?: Color;\n\n /** Name of icon */\n @Prop() icon?: string;\n\n render() {\n return (\n <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n <slot>\n {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n </slot>\n <slot slot='badge' name='badge'></slot>\n </je-button>\n );\n }\n}\n",":host {\n display: inline-block;\n position: relative;\n width: 23px;\n height: 23px;\n user-select: none;\n}\n\nsvg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-linecap: round;\n stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n dur: number;\n circles?: number;\n lines?: number;\n elmDuration?: boolean;\n fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n r?: number;\n y1?: number;\n y2?: number;\n cx?: number;\n cy?: number;\n style: { [key: string]: string | undefined };\n viewBox?: string;\n transform?: string;\n}\n\nconst spinners = {\n lines: {\n dur: 1000,\n lines: 8,\n fn: (dur: number, index: number, total: number) => {\n const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n const animationDelay = `${(dur * index) / total - dur}ms`;\n\n return {\n y1: 14,\n y2: 26,\n style: {\n transform: transform,\n 'animation-delay': animationDelay,\n },\n };\n },\n },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n const data = spinner.fn(duration, index, total);\n data.style['animation-duration'] = duration + 'ms';\n\n return (\n <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n </svg>\n );\n};\n\n@Component({\n tag: 'je-loading',\n styleUrl: 'je-loading.scss',\n shadow: true,\n})\nexport class JeLoading {\n render() {\n const spinner = spinners['lines'];\n const duration = spinner.dur;\n const svgs: SVGElement[] = [];\n\n for (let i = 0; i < spinner.lines; i++) {\n svgs.push(buildLine(spinner, duration, i, spinner.lines));\n }\n\n return (\n <Host class={{ [`spinner-lines`]: true }}>\n {svgs}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"je-button.je-icon-button.je-loading.entry.js","mappings":"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","names":[],"sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n display: contents;\n\n --height: 2.5rem;\n --padding-inline: #{spacing-get(md)};\n --font-size: #{font-size(md)};\n --border-color: transparent;\n}\n\n:host([size=sm]) {\n --height: 2rem;\n --padding-inline: #{spacing-get(sm)};\n --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n --height: 3rem;\n --padding-inline: #{spacing-get(lg)};\n --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n --color: light-dark(#{secondary(800)}, #{secondary(200)});\n --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n &.solid {\n --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n }\n}\n\nbutton {\n &.outline {\n --border-color: currentcolor;\n }\n\n &.primary {\n &.solid {\n --color: #{primary(100)};\n --background: #{primary(500)};\n --hover-background: #{primary(600)};\n --active-background: #{primary(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{primary(500)}, #{primary(300)});\n --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n --active-color: light-dark(#{primary(700)}, #{primary(100)});\n --background: transparent;\n --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n --active-background: light-dark(#{primary(100)}, #{primary(800)});\n }\n }\n\n &.secondary {\n &.solid {\n --color: #{secondary(900)};\n --background: #{secondary(500)};\n --hover-background: #{secondary(400)};\n --active-background: #{secondary(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{secondary(700)}, #{secondary(500)});\n --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n --background: transparent;\n --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n }\n }\n\n &.warning {\n &.solid {\n --color: #{warning(900)};\n --background: #{warning(500)};\n --hover-background: #{warning(400)};\n --active-background: #{warning(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{warning(700)}, #{warning(500)});\n --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n --active-color: light-dark(#{warning(900)}, #{warning(300)});\n --background: transparent;\n --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n --active-background: light-dark(#{warning(150)}, #{warning(875)});\n }\n }\n\n &.success {\n &.solid {\n --color: #{success(900)};\n --background: #{success(500)};\n --hover-background: #{success(400)};\n --active-background: #{success(300)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{success(700)}, #{success(500)});\n --hover-color: light-dark(#{success(800)}, #{success(400)});\n --active-color: light-dark(#{success(900)}, #{success(300)});\n --background: transparent;\n --hover-background: light-dark(#{success(100)}, #{success(900)});\n --active-background: light-dark(#{success(150)}, #{success(875)});\n }\n }\n\n &.danger {\n &.solid {\n --color: #{danger(100)};\n --background: #{danger(500)};\n --hover-background: #{danger(600)};\n --active-background: #{danger(700)};\n }\n &.clear,\n &.outline {\n --color: light-dark(#{danger(500)}, #{danger(300)});\n --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n --active-color: light-dark(#{danger(700)}, #{danger(100)});\n --background: transparent;\n --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n --active-background: light-dark(#{danger(100)}, #{danger(700)});\n }\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n position: relative;\n box-sizing: border-box;\n border-radius: radius-get(md);\n margin: 0;\n padding-block: 0;\n padding-inline: var(--padding-inline);\n cursor: pointer;\n flex-shrink: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n user-select: none;\n text-transform: capitalize;\n text-wrap: wrap;\n font-family: inherit;\n font-size: var(--font-size);\n font-weight: font-weight(semi-bold);\n height: var(--height);\n color: var(--color);\n background-color: var(--background, transparent);\n transition: all 125ms ease-in-out;\n outline-color: primary(300);\n outline-offset: 3px;\n border: solid 1px var(--border-color);\n\n @media (hover: hover) {\n &:hover:not(:disabled) {\n background-color: var(--hover-background, var(--background, transparent));\n color: var(--hover-color, var(--color));\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--active-background, var(--background, transparent));\n color: var(--active-color, var(--color));\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &.pending {\n opacity: 0.8;\n cursor: progress;\n width: var(--pending-width);\n }\n\n &.expand {\n width: 100%;\n }\n}\n\n::slotted([slot=badge]) {\n top: 0;\n right: 0;\n position: absolute;\n z-index: 1;\n transform: translate(50%, -50%);\n border-radius: radius-get(circle);\n box-sizing: border-box;\n color: light-dark(secondary(100), secondary(850));\n background-color: light-dark(secondary(850), secondary(100));\n padding: spacing-get(2xs);\n font-size: var(--font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-button',\n styleUrl: 'je-button.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class JeButton {\n @Element() el: HTMLJeButtonElement;\n private formButtonEl?: HTMLButtonElement;\n private buttonEl: HTMLButtonElement;\n\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /**\n * Can set form id to participate in forms. Use this if you need to place\n * submit/reset button outside the form element\n */\n @Prop() form?: string;\n\n /** Expands the button to the full width of it's container */\n @Prop() expand = false;\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n /** Button size */\n @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop({ reflect: true }) color?: Color;\n\n componentDidLoad() {\n if (this.type) {\n const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n console.log(formEl);\n if (formEl) {\n this.formButtonEl = document.createElement('button');\n this.formButtonEl.type = this.type;\n this.formButtonEl.style.display = 'none';\n formEl.append(this.formButtonEl);\n }\n }\n }\n\n @Listen('click')\n handleClick() {\n this.formButtonEl?.click();\n }\n\n @Watch('pending')\n onPendingChange() {\n if (this.pending) {\n this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n }\n }\n\n render() {\n const classes = {\n [this.fill]: true,\n expand: this.expand,\n pending: this.pending,\n [this.color]: !!this.color\n }\n return (\n <Host>\n <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n {this.pending ? <je-loading/> : <slot/>}\n <slot name='badge'/>\n </button>\n </Host>\n );\n }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n display: contents;\n}\n\nje-button {\n --height: min-content;\n\n &[size=sm] {\n --padding-inline: #{spacing-get(3xs)};\n }\n\n &[size=md] {\n --padding-inline: #{spacing-get(2xs)};\n }\n\n &[size=lg] {\n --padding-inline: #{spacing-get(xs)};\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-icon-button',\n styleUrl: 'je-icon-button.scss',\n shadow: true,\n})\nexport class JeIconButton {\n /** Disables button */\n @Prop() disabled = false;\n\n /** Can set to submit or reset to participate in forms */\n @Prop() type?: 'submit' | 'reset';\n\n /** Shows a loading spinner and disables the button */\n @Prop() pending = false;\n\n /** Button fill */\n @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n /** Button size */\n @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n /** Predefined colors */\n @Prop() color?: Color;\n\n /** Name of icon */\n @Prop() icon?: string;\n\n render() {\n return (\n <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n <slot>\n {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n </slot>\n <slot slot='badge' name='badge'></slot>\n </je-button>\n );\n }\n}\n",":host {\n display: inline-block;\n position: relative;\n width: 23px;\n height: 23px;\n user-select: none;\n}\n\nsvg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n stroke-linecap: round;\n stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n dur: number;\n circles?: number;\n lines?: number;\n elmDuration?: boolean;\n fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n r?: number;\n y1?: number;\n y2?: number;\n cx?: number;\n cy?: number;\n style: { [key: string]: string | undefined };\n viewBox?: string;\n transform?: string;\n}\n\nconst spinners = {\n lines: {\n dur: 1000,\n lines: 8,\n fn: (dur: number, index: number, total: number) => {\n const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n const animationDelay = `${(dur * index) / total - dur}ms`;\n\n return {\n y1: 14,\n y2: 26,\n style: {\n transform: transform,\n 'animation-delay': animationDelay,\n },\n };\n },\n },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n const data = spinner.fn(duration, index, total);\n data.style['animation-duration'] = duration + 'ms';\n\n return (\n <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n </svg>\n );\n};\n\n@Component({\n tag: 'je-loading',\n styleUrl: 'je-loading.scss',\n shadow: true,\n})\nexport class JeLoading {\n render() {\n const spinner = spinners['lines'];\n const duration = spinner.dur;\n const svgs: SVGElement[] = [];\n\n for (let i = 0; i < spinner.lines; i++) {\n svgs.push(buildLine(spinner, duration, i, spinner.lines));\n }\n\n return (\n <Host class={{ [`spinner-lines`]: true }}>\n {svgs}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, a as Host } from './index-Dq5G4FMt.js';
|
|
2
2
|
|
|
3
|
-
const jeCardCss = ":host{display:block;border:solid 1px var(--border-color);border-radius:var(--je-radius-sm, 0.125rem);overflow:hidden;box-sizing:border-box;position:relative;color:var(--color);background-color:var(--background);--color:inherit;--background:inherit;--hover-background:#9f9e9e0e;--active-background:#9f9e9e19;--border-color:color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%)}:host([button]){cursor:pointer;user-select:none;-webkit-user-select:none;transition:all 125ms ease-in-out}:host([button]:hover){background-color:var(--hover-background)}:host([button]:active){background-color:var(--active-background)}:host([color=danger]){--color:var(--je-danger-100);--background:var(--je-danger-500);--hover-background:var(--je-danger-600);--active-background:var(--je-danger-700);--border-color:var(--je-danger-300)}:host([color=secondary]){--color:var(--je-secondary-100);--background:var(--je-secondary-500);--hover-background:var(--je-secondary-600);--active-background:var(--je-secondary-700);--border-color:var(--je-secondary-300)}:host([color=warning]){--color:var(--je-warning-100);--background:var(--je-warning-500);--hover-background:var(--je-warning-600);--active-background:var(--je-warning-700);--border-color:var(--je-warning-300)}:host([color=success]){--color:var(--je-success-100);--background:var(--je-success-500);--hover-background:var(--je-success-600);--active-background:var(--je-success-700);--border-color:var(--je-success-300)}::slotted([slot=media]){width:100%}::slotted([slot=header]){box-sizing:border-box;padding-inline:var(--je-spacing-xs, 0.5rem);border-bottom:solid 1px var(--border-color)}::slotted([slot=footer]){box-sizing:border-box;display:flex;padding-block:var(--je-spacing-xs, 0.5rem);gap:var(--je-spacing-2xs, 0.25rem)}.container{box-sizing:border-box;padding:var(--je-spacing-xs, 0.5rem)}";
|
|
3
|
+
const jeCardCss = ":host{display:block;width:fit-content;border:solid 1px var(--border-color);border-radius:var(--je-radius-sm, 0.125rem);overflow:hidden;box-sizing:border-box;position:relative;color:var(--color);background-color:var(--background);--color:inherit;--background:inherit;--hover-background:#9f9e9e0e;--active-background:#9f9e9e19;--border-color:color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%)}:host([button]){cursor:pointer;user-select:none;-webkit-user-select:none;transition:all 125ms ease-in-out}:host([button]:hover){background-color:var(--hover-background)}:host([button]:active){background-color:var(--active-background)}:host([color=danger]){--color:var(--je-danger-100);--background:var(--je-danger-500);--hover-background:var(--je-danger-600);--active-background:var(--je-danger-700);--border-color:var(--je-danger-300)}:host([color=secondary]){--color:var(--je-secondary-100);--background:var(--je-secondary-500);--hover-background:var(--je-secondary-600);--active-background:var(--je-secondary-700);--border-color:var(--je-secondary-300)}:host([color=warning]){--color:var(--je-warning-100);--background:var(--je-warning-500);--hover-background:var(--je-warning-600);--active-background:var(--je-warning-700);--border-color:var(--je-warning-300)}:host([color=success]){--color:var(--je-success-100);--background:var(--je-success-500);--hover-background:var(--je-success-600);--active-background:var(--je-success-700);--border-color:var(--je-success-300)}::slotted([slot=media]){width:100%}::slotted([slot=header]){box-sizing:border-box;padding-inline:var(--je-spacing-xs, 0.5rem);border-bottom:solid 1px var(--border-color)}::slotted([slot=footer]){box-sizing:border-box;display:flex;padding-block:var(--je-spacing-xs, 0.5rem);gap:var(--je-spacing-2xs, 0.25rem)}.container{box-sizing:border-box;padding:var(--je-spacing-xs, 0.5rem)}";
|
|
4
4
|
|
|
5
5
|
const JeCard = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"je-card.entry.js","sources":["src/components/je-card/je-card.scss?tag=je-card&encapsulation=shadow","src/components/je-card/je-card.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n display: block;\n border: solid 1px var(--border-color);\n border-radius: radius-get(sm);\n overflow: hidden;\n box-sizing: border-box;\n position: relative;\n color: var(--color);\n background-color: var(--background);\n\n --color: inherit;\n --background: inherit;\n --hover-background: #9f9e9e0e;\n --active-background: #9f9e9e19;\n --border-color: #{secondary(300)};\n}\n\n:host([button]) {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: all 125ms ease-in-out;\n}\n\n:host([button]:hover) {\n background-color: var(--hover-background);\n}\n\n:host([button]:active) {\n background-color: var(--active-background);\n}\n\n:host([color=danger]) {\n --color: var(--je-danger-100);\n --background: var(--je-danger-500);\n --hover-background: var(--je-danger-600);\n --active-background: var(--je-danger-700);\n --border-color: var(--je-danger-300);\n}\n\n:host([color=secondary]) {\n --color: var(--je-secondary-100);\n --background: var(--je-secondary-500);\n --hover-background: var(--je-secondary-600);\n --active-background: var(--je-secondary-700);\n --border-color: var(--je-secondary-300);\n}\n\n:host([color=warning]) {\n --color: var(--je-warning-100);\n --background: var(--je-warning-500);\n --hover-background: var(--je-warning-600);\n --active-background: var(--je-warning-700);\n --border-color: var(--je-warning-300);\n}\n\n:host([color=success]) {\n --color: var(--je-success-100);\n --background: var(--je-success-500);\n --hover-background: var(--je-success-600);\n --active-background: var(--je-success-700);\n --border-color: var(--je-success-300);\n}\n\n::slotted([slot=\"media\"]) {\n width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n box-sizing: border-box;\n padding-inline: spacing-get(xs);\n border-bottom: solid 1px var(--border-color);\n}\n\n::slotted([slot=\"footer\"]) {\n box-sizing: border-box;\n display: flex;\n padding-block: spacing-get(xs);\n gap: spacing-get(2xs);\n}\n\n.container {\n box-sizing: border-box;\n padding: spacing-get(xs);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-card',\n styleUrl: 'je-card.scss',\n shadow: true,\n})\nexport class JeCard {\n @Prop({ reflect: true }) color?: Color;\n @Prop({ reflect: true }) button?: boolean;\n\n render() {\n return (\n <Host>\n <slot name='media' />\n <slot name='header' />\n <div class='container'>\n <slot />\n <slot name='footer' />\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"je-card.entry.js","sources":["src/components/je-card/je-card.scss?tag=je-card&encapsulation=shadow","src/components/je-card/je-card.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n display: block;\n width: fit-content;\n border: solid 1px var(--border-color);\n border-radius: radius-get(sm);\n overflow: hidden;\n box-sizing: border-box;\n position: relative;\n color: var(--color);\n background-color: var(--background);\n\n --color: inherit;\n --background: inherit;\n --hover-background: #9f9e9e0e;\n --active-background: #9f9e9e19;\n --border-color: #{secondary(300)};\n}\n\n:host([button]) {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: all 125ms ease-in-out;\n}\n\n:host([button]:hover) {\n background-color: var(--hover-background);\n}\n\n:host([button]:active) {\n background-color: var(--active-background);\n}\n\n:host([color=danger]) {\n --color: var(--je-danger-100);\n --background: var(--je-danger-500);\n --hover-background: var(--je-danger-600);\n --active-background: var(--je-danger-700);\n --border-color: var(--je-danger-300);\n}\n\n:host([color=secondary]) {\n --color: var(--je-secondary-100);\n --background: var(--je-secondary-500);\n --hover-background: var(--je-secondary-600);\n --active-background: var(--je-secondary-700);\n --border-color: var(--je-secondary-300);\n}\n\n:host([color=warning]) {\n --color: var(--je-warning-100);\n --background: var(--je-warning-500);\n --hover-background: var(--je-warning-600);\n --active-background: var(--je-warning-700);\n --border-color: var(--je-warning-300);\n}\n\n:host([color=success]) {\n --color: var(--je-success-100);\n --background: var(--je-success-500);\n --hover-background: var(--je-success-600);\n --active-background: var(--je-success-700);\n --border-color: var(--je-success-300);\n}\n\n::slotted([slot=\"media\"]) {\n width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n box-sizing: border-box;\n padding-inline: spacing-get(xs);\n border-bottom: solid 1px var(--border-color);\n}\n\n::slotted([slot=\"footer\"]) {\n box-sizing: border-box;\n display: flex;\n padding-block: spacing-get(xs);\n gap: spacing-get(2xs);\n}\n\n.container {\n box-sizing: border-box;\n padding: spacing-get(xs);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n tag: 'je-card',\n styleUrl: 'je-card.scss',\n shadow: true,\n})\nexport class JeCard {\n @Prop({ reflect: true }) color?: Color;\n @Prop({ reflect: true }) button?: boolean;\n\n render() {\n return (\n <Host>\n <slot name='media' />\n <slot name='header' />\n <div class='container'>\n <slot />\n <slot name='footer' />\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,g0DAAg0D;;MCQr0D,MAAM,GAAA,MAAA;;;;IAIjB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-Dq5G4FMt.js';
|
|
2
2
|
import { d as dateFnsExports } from './index-iWCgRMLC.js';
|
|
3
3
|
|
|
4
|
-
const jeDatepickerCss = ":host{display:flex;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:var(--je-spacing-sm, 0.75rem)}je-button.day{--height:var(--je-spacing-
|
|
4
|
+
const jeDatepickerCss = ":host{display:flex;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:var(--je-spacing-sm, 0.75rem)}je-button.day{--height:var(--je-spacing-2xl, 2rem);--padding-inline:0px}je-button.day::part(inner-button){width:var(--je-spacing-2xl, 2rem);font-weight:400}.header{width:100%;min-width:200px;max-width:300px;display:flex;align-items:center;justify-content:space-between}.header span{flex:1;text-align:center}.weekdays-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--je-spacing-2xs, 0.25rem)}.weekdays-grid div{height:var(--je-spacing-2xl, 2rem);width:var(--je-spacing-2xl, 2rem);font-size:var(--je-font-md, 1rem);font-weight:400;color:color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%);text-align:center;align-content:center}.days-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--je-spacing-2xs, 0.25rem)}.timepicker{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:200px;max-width:300px}.timepicker-content{display:flex}.timepicker-column{display:flex;flex-direction:column;gap:var(--je-spacing-2xs, 0.25rem);height:200px;overflow:auto;align-items:center;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box}";
|
|
5
5
|
|
|
6
6
|
const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
|
7
7
|
const JeDatepicker = class {
|
|
@@ -23,26 +23,23 @@ const JeDatepicker = class {
|
|
|
23
23
|
this.prevYear = () => {
|
|
24
24
|
this.currentDate = dateFnsExports.subMonths(this.currentDate, 12);
|
|
25
25
|
};
|
|
26
|
-
this.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
this.
|
|
38
|
-
};
|
|
39
|
-
this.setSecond = (second) => {
|
|
40
|
-
this.value = dateFnsExports.setSeconds(this.value, second).getTime();
|
|
26
|
+
this.setValue = (opts) => {
|
|
27
|
+
var _a, _b, _c, _d;
|
|
28
|
+
const newValue = dateFnsExports.set((_a = this.value) !== null && _a !== void 0 ? _a : new Date(), {
|
|
29
|
+
year: (_b = opts.day) === null || _b === void 0 ? void 0 : _b.getFullYear(),
|
|
30
|
+
month: (_c = opts.day) === null || _c === void 0 ? void 0 : _c.getMonth(),
|
|
31
|
+
date: (_d = opts.day) === null || _d === void 0 ? void 0 : _d.getDate(),
|
|
32
|
+
hours: opts.hour,
|
|
33
|
+
minutes: opts.minute,
|
|
34
|
+
seconds: opts.second
|
|
35
|
+
});
|
|
36
|
+
this.value = newValue.getTime();
|
|
37
|
+
this.valueChange.emit(this.value);
|
|
41
38
|
};
|
|
42
39
|
this.scrollTimeIntoView = () => {
|
|
43
40
|
this.el.shadowRoot.querySelectorAll('.timepicker-column').forEach(column => {
|
|
44
|
-
var _a;
|
|
45
|
-
(_a = column.querySelector('je-button[color="primary"][fill="solid"]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center', behavior: '
|
|
41
|
+
var _a, _b;
|
|
42
|
+
(_b = (_a = column.querySelector('je-button[color="primary"][fill="solid"]')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('button')) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center', behavior: 'instant' });
|
|
46
43
|
});
|
|
47
44
|
};
|
|
48
45
|
}
|
|
@@ -55,7 +52,6 @@ const JeDatepicker = class {
|
|
|
55
52
|
if (this.value) {
|
|
56
53
|
this.currentDate = new Date(this.value);
|
|
57
54
|
}
|
|
58
|
-
this.valueChange.emit(this.value ? new Date(this.value).getTime() : undefined);
|
|
59
55
|
}
|
|
60
56
|
render() {
|
|
61
57
|
const firstDayOfMonth = dateFnsExports.startOfMonth(this.currentDate);
|
|
@@ -67,12 +63,12 @@ const JeDatepicker = class {
|
|
|
67
63
|
const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) => dateFnsExports.subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1)));
|
|
68
64
|
const lastDayOfWeek = dateFnsExports.getDay(lastDayOfMonth);
|
|
69
65
|
const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) => dateFnsExports.addMonths(this.currentDate, 1).setDate(i + 1));
|
|
70
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: '001acd2a99d94de7f0e33fd6453d7c4f5c9779da' }, (this.type == 'date' || this.type == 'datetime') && (h(Fragment, { key: 'c30cbabed1c5e0c25383e5ed8965a93155f39eb8' }, h("div", { key: 'bf665a24f3756940db6823e0d54c1db147374e71', class: "header" }, h("je-icon-button", { key: '535074bbfe25a0af354569f6628f45294cda650d', icon: 'keyboard_double_arrow_left', onClick: this.prevYear }), h("je-icon-button", { key: 'a284b3c39e1fe1f1beb444d0f91e04510c978194', icon: 'keyboard_arrow_left', onClick: this.prevMonth }), h("span", { key: '30c22009f6114f781654626cf1889a2c7f84b6ac' }, dateFnsExports.format(this.currentDate, 'MMMM yyyy')), h("je-icon-button", { key: '6bf8cc4cd9482203c927f68efdf735644f783bc7', icon: 'keyboard_arrow_right', onClick: this.nextMonth }), h("je-icon-button", { key: 'c7895236c227bed7709d863518d7867112fa9c12', icon: 'keyboard_double_arrow_right', onClick: this.nextYear })), h("div", { key: '39f1be73032a4d63958751a8ea3e66706d0413d2', class: "weekdays-grid" }, daysOfWeek.map(day => h("div", null, day))), h("div", { key: '2a38bbb66188746c867ce37dce552869793c19c8', class: "days-grid" }, daysBefore.map(day => (h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, dateFnsExports.format(day, 'd')))), daysInMonth.map(day => {
|
|
71
67
|
const selected = this.value && dateFnsExports.isSameDay(day, this.value);
|
|
72
68
|
const today = dateFnsExports.isToday(day);
|
|
73
69
|
const isDisabled = (this.isDateDisabled && this.isDateDisabled(day)) || (this.min && day < new Date(this.min)) || (this.max && day > new Date(this.max));
|
|
74
|
-
return (h("je-button", { expand: true, disabled: isDisabled, color: selected || today ? 'primary' : isDisabled ? 'secondary' : undefined, fill: selected ? 'solid' : 'clear', class: 'day', onClick: () => this.
|
|
75
|
-
}), daysAfter.map(day => (h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, dateFnsExports.format(day, 'd'))))))), (this.type == 'time' || this.type == 'datetime') && (h("div", { key: '
|
|
70
|
+
return (h("je-button", { expand: true, disabled: isDisabled, color: selected || today ? 'primary' : isDisabled ? 'secondary' : undefined, fill: selected ? 'solid' : 'clear', class: 'day', onClick: () => this.setValue({ day }) }, dateFnsExports.format(day, 'd')));
|
|
71
|
+
}), daysAfter.map(day => (h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, dateFnsExports.format(day, 'd'))))))), (this.type == 'time' || this.type == 'datetime') && (h("div", { key: 'ccfdb4a84c2738633e12715ad549f5816fdeae54', class: 'timepicker' }, h("span", { key: 'bc4dfa532659ed667f470f22e8c2a9c90a4657cf' }, "Time"), h("je-popover", { key: '835045046be299fb244ba91982443eeb4bc7a669', arrow: true, onPresent: this.scrollTimeIntoView }, h("je-pill", { key: 'fa9f3cb90597b04b44563dc77493652a9d0d8d9e', role: 'button', tabindex: 0, slot: 'trigger' }, this.value ? (this.includeSeconds ? dateFnsExports.format(this.value, 'hh:mm:ss a') : dateFnsExports.format(this.value, 'hh:mm a')) : '-'), h("div", { key: '8385bf430461cde71f485cee75018f6cf94351b4', class: 'timepicker-content' }, h("div", { key: 'c4cb33fd35308410c9b00151d8d8b715bc7d1202', class: 'timepicker-column' }, Array.from({ length: 24 }).map((_, hour) => (h("je-button", { size: 'sm', color: this.currentDate.getHours() === hour ? 'primary' : undefined, fill: this.currentDate.getHours() === hour ? 'solid' : 'clear', onClick: () => this.setValue({ hour }) }, dateFnsExports.format(new Date().setHours(hour), 'hh a'))))), h("div", { key: 'a954cbd332a79376ff5be0eb151f49d91ed5d3b1', class: 'timepicker-column' }, Array.from({ length: 60 }).map((_, minute) => (h("je-button", { size: 'sm', color: this.currentDate.getMinutes() === minute ? 'primary' : undefined, fill: this.currentDate.getMinutes() === minute ? 'solid' : 'clear', onClick: () => this.setValue({ minute }) }, dateFnsExports.format(new Date().setMinutes(minute), 'mm'))))), this.includeSeconds && (h("div", { key: '1919fa66ede1f38866550d5b376a27d7d040a56a', class: 'timepicker-column' }, Array.from({ length: 60 }).map((_, second) => (h("je-button", { size: 'sm', color: this.currentDate.getSeconds() === second ? 'primary' : undefined, fill: this.currentDate.getSeconds() === second ? 'solid' : 'clear', onClick: () => this.setValue({ second }) }, dateFnsExports.format(new Date().setSeconds(second), 'ss'))))))))))));
|
|
76
72
|
}
|
|
77
73
|
get el() { return getElement(this); }
|
|
78
74
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"je-datepicker.entry.js","sources":["src/components/je-datepicker/je-datepicker.scss?tag=je-datepicker&encapsulation=shadow","src/components/je-datepicker/je-datepicker.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n display: flex;\n padding: spacing-get(xs);\n box-sizing: border-box;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: spacing-get(sm);\n}\n\nje-button.day {\n --height: #{spacing-get(xl)};\n --padding-inline: 0px;\n\n &::part(inner-button) {\n width: spacing-get(xl);\n font-weight: 400;\n }\n}\n\n.header {\n width: 100%;\n min-width: 200px;\n max-width: 300px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n span {\n flex: 1;\n text-align: center;\n }\n}\n\n.weekdays-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: spacing-get(2xs);\n\n div {\n height: spacing-get(xl);\n width: spacing-get(xl);\n font-size: font-size(md);\n font-weight: 400;\n color: secondary(600);\n text-align: center;\n align-content: center;\n }\n}\n\n.days-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: spacing-get(2xs);\n}\n\n.timepicker {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n min-width: 200px;\n max-width: 300px;\n}\n\n.timepicker-content {\n display: flex;\n}\n\n.timepicker-column {\n display: flex;\n flex-direction: column;\n gap: spacing-get(2xs);\n height: 200px;\n overflow: auto;\n align-items: center;\n padding: spacing-get(xs);\n box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths, isSameDay, isToday, format, getDay, set, setHours, setMinutes, setSeconds } from 'date-fns';\n\nconst daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'] as const;\n\n@Component({\n tag: 'je-datepicker',\n styleUrl: 'je-datepicker.scss',\n shadow: true,\n})\nexport class JeDatepicker {\n @Element() el!: HTMLJeDatepickerElement;\n @State() currentDate = new Date();\n @Prop() type: 'date' | 'datetime' | 'time' = 'datetime';\n @Prop() includeSeconds = false;\n @Prop() min?: number;\n @Prop() max?: number;\n @Prop() isDateDisabled?: (date: Date) => boolean;\n @Prop({ mutable: true }) value?: number;\n @Event() valueChange: EventEmitter<number | undefined>;\n\n componentWillLoad() {\n if (this.value) {\n this.currentDate = new Date(this.value);\n }\n }\n\n @Watch('value')\n valueChangeHandler() {\n if (this.value) {\n this.currentDate = new Date(this.value);\n }\n this.valueChange.emit(this.value ? new Date(this.value).getTime() : undefined);\n }\n\n nextMonth = () => {\n this.currentDate = addMonths(this.currentDate, 1);\n }\n\n prevMonth = () => {\n this.currentDate = subMonths(this.currentDate, 1);\n }\n\n nextYear = () => {\n this.currentDate = addMonths(this.currentDate, 12);\n }\n\n prevYear = () => {\n this.currentDate = subMonths(this.currentDate, 12);\n }\n\n setDay = (day: Date) => {\n this.value = set(this.value, {\n year: day.getFullYear(),\n month: day.getMonth(),\n date: day.getDate()\n }).getTime();\n }\n\n setHour = (hour: number) => {\n this.value = setHours(this.value, hour).getTime();\n }\n\n setMinute = (minute: number) => {\n this.value = setMinutes(this.value, minute).getTime();\n }\n\n setSecond = (second: number) => {\n this.value = setSeconds(this.value, second).getTime();\n }\n\n scrollTimeIntoView = () => {\n this.el.shadowRoot.querySelectorAll('.timepicker-column').forEach(column => {\n column.querySelector('je-button[color=\"primary\"][fill=\"solid\"]')?.scrollIntoView({ block: 'center', behavior: 'smooth'});\n });\n }\n\n render() {\n const firstDayOfMonth = startOfMonth(this.currentDate);\n const lastDayOfMonth = endOfMonth(this.currentDate);\n const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });\n\n const prevMonth = subMonths(this.currentDate, 1);\n const prevMonthEnd = endOfMonth(prevMonth);\n\n const firstDayOfWeek = getDay(firstDayOfMonth);\n const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) =>\n subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1))\n );\n\n const lastDayOfWeek = getDay(lastDayOfMonth);\n const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) =>\n addMonths(this.currentDate, 1).setDate(i + 1)\n );\n\n return (\n <Host>\n {(this.type == 'date' || this.type == 'datetime') && (\n <Fragment>\n <div class=\"header\">\n <je-icon-button icon='keyboard_double_arrow_left' onClick={this.prevYear} />\n <je-icon-button icon='keyboard_arrow_left' onClick={this.prevMonth} />\n <span>{format(this.currentDate, 'MMMM yyyy')}</span>\n <je-icon-button icon='keyboard_arrow_right' onClick={this.nextMonth} />\n <je-icon-button icon='keyboard_double_arrow_right' onClick={this.nextYear} />\n </div>\n\n <div class=\"weekdays-grid\">\n {daysOfWeek.map(day => <div>{day}</div>)}\n </div>\n\n <div class=\"days-grid\">\n {daysBefore.map(day => (\n <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n {format(day, 'd')}\n </je-button>\n ))}\n\n {daysInMonth.map(day => {\n const selected = this.value && isSameDay(day, this.value);\n const today = isToday(day);\n const isDisabled = (this.isDateDisabled && this.isDateDisabled(day)) || (this.min && day < new Date(this.min)) || (this.max && day > new Date(this.max));\n return (\n <je-button\n expand={true}\n disabled={isDisabled}\n color={selected || today ? 'primary' : isDisabled ? 'secondary' : undefined}\n fill={selected ? 'solid' : 'clear'}\n class='day'\n onClick={() => this.setDay(day)}\n >\n {format(day, 'd')}\n </je-button>\n );\n })}\n\n {daysAfter.map(day => (\n <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n {format(day, 'd')}\n </je-button>\n ))}\n </div>\n </Fragment>\n )}\n {(this.type == 'time' || this.type == 'datetime') && (\n <div class='timepicker'>\n <span>Time</span>\n <je-popover arrow={true} onPresent={this.scrollTimeIntoView}>\n <je-pill slot='trigger'>\n {this.value ? (\n this.includeSeconds ? format(this.value, 'hh:mm:ss a') : format(this.value, 'hh:mm a')\n ) : '-'}\n </je-pill>\n <div class='timepicker-content'>\n <div class='timepicker-column'>\n {Array.from({ length: 24 }).map((_, hour) => (\n <je-button\n size='sm'\n color={this.currentDate.getHours() === hour ? 'primary' : undefined}\n fill={this.currentDate.getHours() === hour ? 'solid' : 'clear'}\n onClick={() => this.setHour(hour)}\n >\n {format(new Date().setHours(hour), 'hh a')}\n </je-button>\n ))}\n </div>\n <div class='timepicker-column'>\n {Array.from({ length: 60 }).map((_, minute) => (\n <je-button\n size='sm'\n color={this.currentDate.getMinutes() === minute ? 'primary' : undefined}\n fill={this.currentDate.getMinutes() === minute ? 'solid' : 'clear'}\n onClick={() => this.setMinute(minute)}\n >\n {format(new Date().setMinutes(minute), 'mm')}\n </je-button>\n ))}\n </div>\n {this.includeSeconds && (\n <div class='timepicker-column'>\n {Array.from({ length: 60 }).map((_, second) => (\n <je-button\n size='sm'\n color={this.currentDate.getSeconds() === second ? 'primary' : undefined}\n fill={this.currentDate.getSeconds() === second ? 'solid' : 'clear'}\n onClick={() => this.setSecond(second)}\n >\n {format(new Date().setSeconds(second), 'ss')}\n </je-button>\n ))}\n </div>\n )}\n </div>\n </je-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"names":["addMonths","subMonths","set","setHours","setMinutes","setSeconds","startOfMonth","endOfMonth","eachDayOfInterval","getDay","format","isSameDay","isToday"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"je-datepicker.entry.js","sources":["src/components/je-datepicker/je-datepicker.scss?tag=je-datepicker&encapsulation=shadow","src/components/je-datepicker/je-datepicker.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n display: flex;\n padding: spacing-get(xs);\n box-sizing: border-box;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: spacing-get(sm);\n}\n\nje-button.day {\n --height: #{spacing-get(2xl)};\n --padding-inline: 0px;\n\n &::part(inner-button) {\n width: spacing-get(2xl);\n font-weight: 400;\n }\n}\n\n.header {\n width: 100%;\n min-width: 200px;\n max-width: 300px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n span {\n flex: 1;\n text-align: center;\n }\n}\n\n.weekdays-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: spacing-get(2xs);\n\n div {\n height: spacing-get(2xl);\n width: spacing-get(2xl);\n font-size: font-size(md);\n font-weight: 400;\n color: secondary(600);\n text-align: center;\n align-content: center;\n }\n}\n\n.days-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: spacing-get(2xs);\n}\n\n.timepicker {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n min-width: 200px;\n max-width: 300px;\n}\n\n.timepicker-content {\n display: flex;\n}\n\n.timepicker-column {\n display: flex;\n flex-direction: column;\n gap: spacing-get(2xs);\n height: 200px;\n overflow: auto;\n align-items: center;\n padding: spacing-get(xs);\n box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths, isSameDay, isToday, format, getDay, set } from 'date-fns';\n\nconst daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'] as const;\n\n@Component({\n tag: 'je-datepicker',\n styleUrl: 'je-datepicker.scss',\n shadow: true,\n})\nexport class JeDatepicker {\n @Element() el!: HTMLJeDatepickerElement;\n @State() currentDate = new Date();\n @Prop() type: 'date' | 'datetime' | 'time' = 'datetime';\n @Prop() includeSeconds = false;\n @Prop() min?: number;\n @Prop() max?: number;\n @Prop() isDateDisabled?: (date: Date) => boolean;\n @Prop({ mutable: true }) value?: number;\n @Event() valueChange: EventEmitter<number>;\n\n componentWillLoad() {\n if (this.value) {\n this.currentDate = new Date(this.value);\n }\n }\n\n @Watch('value')\n valueChangeHandler() {\n if (this.value) {\n this.currentDate = new Date(this.value);\n }\n }\n\n nextMonth = () => {\n this.currentDate = addMonths(this.currentDate, 1);\n }\n\n prevMonth = () => {\n this.currentDate = subMonths(this.currentDate, 1);\n }\n\n nextYear = () => {\n this.currentDate = addMonths(this.currentDate, 12);\n }\n\n prevYear = () => {\n this.currentDate = subMonths(this.currentDate, 12);\n }\n\n setValue = (opts: { day?: Date, hour?: number, minute?: number, second?: number }) => {\n const newValue = set(this.value ?? new Date(), {\n year: opts.day?.getFullYear(),\n month: opts.day?.getMonth(),\n date: opts.day?.getDate(),\n hours: opts.hour,\n minutes: opts.minute,\n seconds: opts.second\n })\n this.value = newValue.getTime();\n this.valueChange.emit(this.value);\n }\n\n scrollTimeIntoView = () => {\n this.el.shadowRoot.querySelectorAll('.timepicker-column').forEach(column => {\n column.querySelector('je-button[color=\"primary\"][fill=\"solid\"]')\n ?.shadowRoot.querySelector('button')\n ?.scrollIntoView({ block: 'center', behavior: 'instant' });\n });\n }\n\n render() {\n const firstDayOfMonth = startOfMonth(this.currentDate);\n const lastDayOfMonth = endOfMonth(this.currentDate);\n const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });\n\n const prevMonth = subMonths(this.currentDate, 1);\n const prevMonthEnd = endOfMonth(prevMonth);\n\n const firstDayOfWeek = getDay(firstDayOfMonth);\n const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) =>\n subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1))\n );\n\n const lastDayOfWeek = getDay(lastDayOfMonth);\n const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) =>\n addMonths(this.currentDate, 1).setDate(i + 1)\n );\n\n return (\n <Host>\n {(this.type == 'date' || this.type == 'datetime') && (\n <Fragment>\n <div class=\"header\">\n <je-icon-button icon='keyboard_double_arrow_left' onClick={this.prevYear} />\n <je-icon-button icon='keyboard_arrow_left' onClick={this.prevMonth} />\n <span>{format(this.currentDate, 'MMMM yyyy')}</span>\n <je-icon-button icon='keyboard_arrow_right' onClick={this.nextMonth} />\n <je-icon-button icon='keyboard_double_arrow_right' onClick={this.nextYear} />\n </div>\n\n <div class=\"weekdays-grid\">\n {daysOfWeek.map(day => <div>{day}</div>)}\n </div>\n\n <div class=\"days-grid\">\n {daysBefore.map(day => (\n <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n {format(day, 'd')}\n </je-button>\n ))}\n\n {daysInMonth.map(day => {\n const selected = this.value && isSameDay(day, this.value);\n const today = isToday(day);\n const isDisabled = (this.isDateDisabled && this.isDateDisabled(day)) || (this.min && day < new Date(this.min)) || (this.max && day > new Date(this.max));\n return (\n <je-button\n expand={true}\n disabled={isDisabled}\n color={selected || today ? 'primary' : isDisabled ? 'secondary' : undefined}\n fill={selected ? 'solid' : 'clear'}\n class='day'\n onClick={() => this.setValue({day})}\n >\n {format(day, 'd')}\n </je-button>\n );\n })}\n\n {daysAfter.map(day => (\n <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n {format(day, 'd')}\n </je-button>\n ))}\n </div>\n </Fragment>\n )}\n {(this.type == 'time' || this.type == 'datetime') && (\n <div class='timepicker'>\n <span>Time</span>\n <je-popover arrow={true} onPresent={this.scrollTimeIntoView}>\n <je-pill role='button' {...{tabindex: 0}} slot='trigger'>\n {this.value ? (\n this.includeSeconds ? format(this.value, 'hh:mm:ss a') : format(this.value, 'hh:mm a')\n ) : '-'}\n </je-pill>\n <div class='timepicker-content'>\n <div class='timepicker-column'>\n {Array.from({ length: 24 }).map((_, hour) => (\n <je-button\n size='sm'\n color={this.currentDate.getHours() === hour ? 'primary' : undefined}\n fill={this.currentDate.getHours() === hour ? 'solid' : 'clear'}\n onClick={() => this.setValue({hour})}\n >\n {format(new Date().setHours(hour), 'hh a')}\n </je-button>\n ))}\n </div>\n <div class='timepicker-column'>\n {Array.from({ length: 60 }).map((_, minute) => (\n <je-button\n size='sm'\n color={this.currentDate.getMinutes() === minute ? 'primary' : undefined}\n fill={this.currentDate.getMinutes() === minute ? 'solid' : 'clear'}\n onClick={() => this.setValue({minute})}\n >\n {format(new Date().setMinutes(minute), 'mm')}\n </je-button>\n ))}\n </div>\n {this.includeSeconds && (\n <div class='timepicker-column'>\n {Array.from({ length: 60 }).map((_, second) => (\n <je-button\n size='sm'\n color={this.currentDate.getSeconds() === second ? 'primary' : undefined}\n fill={this.currentDate.getSeconds() === second ? 'solid' : 'clear'}\n onClick={() => this.setValue({second})}\n >\n {format(new Date().setSeconds(second), 'ss')}\n </je-button>\n ))}\n </div>\n )}\n </div>\n </je-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"names":["addMonths","subMonths","set","startOfMonth","endOfMonth","eachDayOfInterval","getDay","format","isSameDay","isToday"],"mappings":"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"}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import { r as registerInstance, h, a as Host } from './index-Dq5G4FMt.js';
|
|
1
|
+
import { r as registerInstance, h, a as Host, g as getElement } from './index-Dq5G4FMt.js';
|
|
2
2
|
|
|
3
|
-
const jePillCss = ":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--je-spacing-
|
|
3
|
+
const jePillCss = ":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--je-spacing-xs, 0.5rem);padding-inline:var(--je-spacing-xs, 0.5rem);border-radius:var(--je-radius-md, 0.375rem);height:1.5rem;min-width:2.5rem;-webkit-user-select:none;user-select:none;transition:all 125ms ease-in-out;color:var(--je-pill-color);background-color:var(--je-pill-background);--je-pill-color:var(--je-primary, #4141e8);--je-pill-background:color-mix(in srgb, var(--je-primary, #4141e8) 20%, white 80%);--je-pill-hover-background:color-mix(in srgb, var(--je-primary, #4141e8) 40%, white 60%)}:host([role=button]){cursor:pointer}:host([role=button][disabled]){opacity:0.6;cursor:not-allowed}@media (hover: hover){:host([role=button]:not([disabled]):hover){--je-pill-background:var(--je-pill-hover-background)}}:host([outline]){background-color:transparent;color:var(--je-pill-color);border:solid 1px var(--je-pill-background)}";
|
|
4
4
|
|
|
5
5
|
const JePill = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
this.outline = false;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
}
|
|
10
|
+
onClick(ev) {
|
|
11
|
+
if (this.el.role == 'button' && (ev.key == ' ' || ev.key == 'Enter')) {
|
|
12
|
+
this.el.click();
|
|
13
|
+
}
|
|
11
14
|
}
|
|
12
15
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
16
|
+
return (h(Host, { key: '821cec5f9cdf0da827cc016dd303b7e7d453b142' }, h("slot", { key: 'e16c13a98cedb8434cb471adbbd6f2b1ddf74f2b' })));
|
|
14
17
|
}
|
|
18
|
+
get el() { return getElement(this); }
|
|
15
19
|
};
|
|
16
20
|
JePill.style = jePillCss;
|
|
17
21
|
|