@optionfactory/ful 0.35.0 → 0.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ful.css +1 -1
- package/dist/ful.css.map +1 -1
- package/dist/ful.iife.js +58 -166
- package/dist/ful.iife.js.map +1 -1
- package/dist/ful.iife.min.js +1 -1
- package/dist/ful.iife.min.js.map +1 -1
- package/dist/ful.min.mjs +1 -1
- package/dist/ful.min.mjs.map +1 -1
- package/dist/ful.mjs +59 -163
- package/dist/ful.mjs.map +1 -1
- package/package.json +1 -1
package/dist/ful.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
ful-errors:
|
|
1
|
+
ful-errors{--ful-errors-color:var(--bs-danger-text-emphasis);--ful-errors-bg:var(--bs-danger-bg-subtle);--ful-errors-border-color:var(--bs-danger-border-subtle);--ful-errors-border-radius:0.375rem;background-color:var(--ful-errors-bg);border:1px solid var(--ful-errors-border-color);border-radius:var(--ful-errors-border-radius);color:var(--ful-errors-color);display:block;margin-bottom:1rem;padding:1rem}.validated-input:has(.is-invalid) ful-field-error,ful-input:has(.is-invalid) ful-field-error,ful-radio-group:has(.is-invalid) ful-field-error,ful-select:has(.is-invalid) ful-field-error{color:var(--bs-form-invalid-color);display:block;font-size:.875em;margin-top:.25rem}ful-input:not(:defined){visibility:hidden}ful-input{display:block}ful-input:has(.is-invalid) ful-field-error{display:block}ful-select:not(:defined){visibility:hidden}ful-select{display:block}ful-select .ts-control{border-radius:inherit!important}ful-select:has(.is-invalid) .invalid-feedback{display:block}ful-select:has(.is-invalid) .form-control,ful-select:has(.is-invalid) .form-select{border-color:var(--bs-form-invalid-border-color)!important}ful-select:has(.is-invalid) .focus .ts-control{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}ful-radio-group:not(:defined){visibility:hidden}ful-radio{display:none}ful-radio-group{--ful-radio-group-label-border-color:var(--bs-border-color);--ful-radio-group-label-border-color-checked:#46ce95;--ful-radio-group-label-background-color:inherit;--ful-radio-group-label-background-color-checked:#f5fffc;display:block}ful-radio-group>fieldset legend{font-size:16px;line-height:22px;margin:0}ful-radio-group>fieldset>section{display:grid;gap:10px;grid-template-columns:1fr}ful-radio-group.horizontal>fieldset>section{gap:16px;grid-template-columns:1fr 1fr}ful-radio-group>fieldset input[type=radio]{height:16px;margin-left:8px;margin-right:12px;vertical-align:text-bottom;width:16px}ful-radio-group>fieldset label:has(input[type=radio]){background-color:var(--ful-radio-group-label-background-color);border:1px solid var(--ful-radio-group-label-border-color);border-radius:4px;display:block;padding:6px 10px}ful-radio-group>fieldset label:has(input[type=radio].is-invalid){border-color:var(--bs-form-invalid-border-color)}ful-radio-group>fieldset label:has(input[type=radio]:checked){background-color:var(--ful-radio-group-label-background-color-checked);border-color:var(--ful-radio-group-label-border-color-checked)}ful-radio-group:has(.is-invalid) ful-field-error{display:block}ful-spinner:not(:defined){visibility:hidden}ful-spinner{--ful-spinner-icon-width:1rem;--ful-spinner-icon-height:1rem;--ful-spinner-icon-border-width:0.2em;--ful-spinner-icon-vertical-align:-0.125em;--ful-spinner-icon-animation-speed:0.75s;--ful-spinner-icon-animation-name:spinner-border;--ful-spinner-icon-color:currentcolor}ful-spinner.centered{align-items:center;display:flex;justify-content:center}ful-spinner.big{--ful-spinner-icon-width:2rem;--ful-spinner-icon-height:2rem;--ful-spinner-icon-border-width:0.25em}ful-spinner.backdrop,ful-spinner.bigger{--ful-spinner-icon-width:4rem;--ful-spinner-icon-height:4rem;--ful-spinner-icon-border-width:0.5em}ful-spinner.backdrop{align-items:center;background-color:hsla(0,0%,65%,.8);display:flex;height:100vh;justify-content:center;left:0;outline:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;width:100vw;z-index:2000}ful-spinner>.ful-spinner-wrapper{display:inline}ful-spinner.backdrop>.ful-spinner-wrapper{background-color:#fff;border-radius:1rem;padding:2rem}ful-spinner>.ful-spinner-wrapper>.ful-spinner-icon{animation:var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name);border:var(--ful-spinner-icon-border-width) solid var(--ful-spinner-icon-color);border-radius:50%;border-right-color:transparent;display:inline-block;height:var(--ful-spinner-icon-height);vertical-align:var(--ful-spinner-icon-vertical-align);width:var(--ful-spinner-icon-width)}body:has(ful-spinner.backdrop:not([hidden])){overflow:hidden}ful-wizard:not(:defined){visibility:hidden}ful-wizard,ful-wizard>ol>li.active{display:block}ful-wizard>ol>li,ful-wizard>section{display:none}ful-wizard>section.current{display:block}
|
|
2
2
|
/*# sourceMappingURL=ful.css.map */
|
package/dist/ful.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["errors.scss","input.scss","select.scss","radio.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["errors.scss","input.scss","select.scss","radio.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,WACE,iDAAkD,CAClD,0CAA2C,CAC3C,wDAAyD,CACzD,mCAAoC,CAKpC,qCAAsC,CACtC,+CAAgD,CAChD,6CAA8C,CAH9C,6BAA8B,CAH9B,aAAc,CAEd,kBAAmB,CADnB,YAMF,CAEA,0LAOE,kCAAmC,CAHnC,aAAc,CAEd,gBAAkB,CADlB,iBAGF,CCtBA,wBACE,iBACF,CAEA,UACE,aACF,CAEA,2CACE,aACF,CCVA,yBACE,iBACF,CAEA,WACE,aACF,CAEA,uBAEE,+BACF,CAEA,8CACE,aACF,CAEA,mFAEE,0DACF,CAEA,+CACE,sDACF,CCxBA,8BACE,iBACF,CAEA,UACE,YACF,CAEA,gBAEE,2DAA4D,CAC5D,oDAAqD,CACrD,gDAAiD,CACjD,wDAAyD,CAJzD,aAKF,CAEA,gCAEE,cAAe,CADf,gBAAiB,CAEjB,QACF,CAEA,iCACE,YAAa,CACb,QAAS,CACT,yBACF,CAEA,4CACE,QAAS,CACT,6BACF,CAEA,2CAGE,WAAY,CAFZ,eAAgB,CAChB,iBAAkB,CAGlB,0BAA2B,CAD3B,UAEF,CAEA,sDAGE,8DAA+D,CAD/D,0DAA2D,CAE3D,iBAAkB,CAHlB,aAAc,CAId,gBACF,CAEA,iEACE,gDACF,CAEA,8DACE,sEAAuE,CACvE,8DACF,CAEA,iDACE,aACF,CC5DA,0BACE,iBACF,CAEA,YACE,6BAA8B,CAC9B,8BAA+B,CAC/B,qCAAsC,CACtC,0CAA2C,CAC3C,wCAAyC,CACzC,gDAAiD,CACjD,qCACF,CAEA,qBAEE,kBAAmB,CADnB,YAAa,CAEb,sBACF,CAEA,gBACE,6BAA8B,CAC9B,8BAA+B,CAC/B,sCACF,CAQA,wCALE,6BAA8B,CAC9B,8BAA+B,CAC/B,qCAoBF,CAjBA,qBAeE,kBAAmB,CAFnB,kCAA0C,CAC1C,YAAa,CALb,YAAa,CAOb,sBAAuB,CATvB,MAAO,CAKP,SAAU,CAFV,iBAAkB,CAClB,eAAgB,CANhB,cAAe,CACf,KAAM,CAEN,WAAY,CAJZ,YAaF,CAEA,iCACE,cACF,CAEA,0CAEE,qBAAuB,CACvB,kBAAmB,CAFnB,YAGF,CAEA,mDAQE,wGAAyG,CAFzG,+EAAgF,CADhF,iBAAkB,CAElB,8BAA+B,CAN/B,oBAAqB,CAErB,qCAAsC,CACtC,qDAAsD,CAFtD,mCAOF,CAEA,6CACE,eACF,CC1EA,yBACE,iBACF,CAMA,mCACE,aACF,CAMA,oCACE,YACF,CAEA,2BACE,aACF","file":"ful.css","sourcesContent":["ful-errors {\n --ful-errors-color: var(--bs-danger-text-emphasis);\n --ful-errors-bg: var(--bs-danger-bg-subtle);\n --ful-errors-border-color: var(--bs-danger-border-subtle);\n --ful-errors-border-radius: 0.375rem;\n display: block;\n padding: 1rem;\n margin-bottom: 1rem;\n color: var(--ful-errors-color);\n background-color: var(--ful-errors-bg);\n border: 1px solid var(--ful-errors-border-color);\n border-radius: var(--ful-errors-border-radius);\n}\n\n.validated-input:has(.is-invalid) ful-field-error,\nful-input:has(.is-invalid) ful-field-error,\nful-select:has(.is-invalid) ful-field-error,\nful-radio-group:has(.is-invalid) ful-field-error {\n display: block;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: var(--bs-form-invalid-color);\n}","ful-input:not(:defined) {\n visibility: hidden;\n}\n\nful-input {\n display: block;\n}\n\nful-input:has(.is-invalid) ful-field-error {\n display: block;\n}","ful-select:not(:defined) {\n visibility: hidden;\n}\n\nful-select {\n display: block;\n}\n\nful-select .ts-control {\n /*fixes border radius on box-shadow*/\n border-radius: inherit !important;\n}\n\nful-select:has(.is-invalid) .invalid-feedback {\n display: block;\n}\n\nful-select:has(.is-invalid) .form-select,\nful-select:has(.is-invalid) .form-control {\n border-color: var(--bs-form-invalid-border-color) !important;\n}\n\nful-select:has(.is-invalid) .focus .ts-control {\n box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);\n}","ful-radio-group:not(:defined) {\n visibility: hidden;\n}\n\nful-radio {\n display: none;\n}\n\nful-radio-group {\n display: block;\n --ful-radio-group-label-border-color: var(--bs-border-color);\n --ful-radio-group-label-border-color-checked: #46ce95;\n --ful-radio-group-label-background-color: inherit;\n --ful-radio-group-label-background-color-checked: #f5fffc;\n}\n\nful-radio-group > fieldset legend {\n line-height: 22px;\n font-size: 16px;\n margin: 0;\n}\n\nful-radio-group > fieldset > section {\n display: grid;\n gap: 10px;\n grid-template-columns: 1fr;\n}\n\nful-radio-group.horizontal > fieldset > section {\n gap: 16px;\n grid-template-columns: 1fr 1fr;\n}\n\nful-radio-group > fieldset input[type=radio] {\n margin-left: 8px;\n margin-right: 12px;\n height: 16px;\n width: 16px;\n vertical-align: text-bottom;\n}\n\nful-radio-group > fieldset label:has(input[type=radio]) {\n display: block;\n border: 1px solid var(--ful-radio-group-label-border-color);\n background-color: var(--ful-radio-group-label-background-color);\n border-radius: 4px;\n padding: 6px 10px;\n}\n\nful-radio-group > fieldset label:has(input[type=radio].is-invalid) {\n border-color: var(--bs-form-invalid-border-color);\n}\n\nful-radio-group > fieldset label:has(input[type=radio]:checked) {\n background-color: var(--ful-radio-group-label-background-color-checked);\n border-color: var(--ful-radio-group-label-border-color-checked);\n}\n\nful-radio-group:has(.is-invalid) ful-field-error {\n display: block;\n}","ful-spinner:not(:defined) {\n visibility: hidden;\n}\n\nful-spinner {\n --ful-spinner-icon-width: 1rem;\n --ful-spinner-icon-height: 1rem;\n --ful-spinner-icon-border-width: 0.2em;\n --ful-spinner-icon-vertical-align: -0.125em;\n --ful-spinner-icon-animation-speed: 0.75s;\n --ful-spinner-icon-animation-name: spinner-border;\n --ful-spinner-icon-color: currentcolor;\n}\n\nful-spinner.centered {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nful-spinner.big {\n --ful-spinner-icon-width: 2rem;\n --ful-spinner-icon-height: 2rem;\n --ful-spinner-icon-border-width: 0.25em;\n}\n\nful-spinner.bigger {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n}\n\nful-spinner.backdrop {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n z-index: 2000;\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n background-color: rgba(167, 167, 167, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nful-spinner > .ful-spinner-wrapper {\n display: inline;\n}\n\nful-spinner.backdrop > .ful-spinner-wrapper {\n padding: 2rem;\n background-color: white;\n border-radius: 1rem;\n}\n\nful-spinner > .ful-spinner-wrapper > .ful-spinner-icon {\n display: inline-block;\n width: var(--ful-spinner-icon-width);\n height: var(--ful-spinner-icon-height);\n vertical-align: var(--ful-spinner-icon-vertical-align);\n border-radius: 50%;\n border: var(--ful-spinner-icon-border-width) solid var(--ful-spinner-icon-color);\n border-right-color: transparent;\n animation: var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name);\n}\n\nbody:has(ful-spinner.backdrop:not([hidden])) {\n overflow: hidden;\n}","ful-wizard:not(:defined) {\n visibility: hidden;\n}\n\nful-wizard {\n display: block;\n}\n\nful-wizard > ol > li.active {\n display: block;\n}\n\nful-wizard > ol > li {\n display: none;\n}\n\nful-wizard > section {\n display: none;\n}\n\nful-wizard > section.current {\n display: block;\n}"]}
|
package/dist/ful.iife.js
CHANGED
|
@@ -73,38 +73,6 @@ var ful = (function (exports) {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
const Observable = (SuperClass) => class extends SuperClass {
|
|
77
|
-
constructor(...args) {
|
|
78
|
-
super(...args);
|
|
79
|
-
this.listeners = {};
|
|
80
|
-
}
|
|
81
|
-
fireSync(event, data, initialAcc) {
|
|
82
|
-
const listeners = this.listeners[event] || [];
|
|
83
|
-
let acc = initialAcc;
|
|
84
|
-
for (const l of listeners) {
|
|
85
|
-
acc = l(data, this, acc);
|
|
86
|
-
}
|
|
87
|
-
return acc;
|
|
88
|
-
}
|
|
89
|
-
async fire(event, data, initialAcc) {
|
|
90
|
-
const listeners = this.listeners[event] || [];
|
|
91
|
-
let acc = initialAcc;
|
|
92
|
-
for (const l of listeners) {
|
|
93
|
-
acc = await l(data, this, acc);
|
|
94
|
-
}
|
|
95
|
-
return acc;
|
|
96
|
-
}
|
|
97
|
-
on(event, listener) {
|
|
98
|
-
this.listeners[event] = this.listeners[event] || [];
|
|
99
|
-
this.listeners[event].push(listener);
|
|
100
|
-
}
|
|
101
|
-
un(event, listener) {
|
|
102
|
-
const listeners = this.listeners[event] || [];
|
|
103
|
-
const idx = listeners.indexOf(listener);
|
|
104
|
-
return idx === -1 ? [] : listeners.splice(idx, 1);
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
|
|
108
76
|
class ContextInterceptor {
|
|
109
77
|
constructor() {
|
|
110
78
|
const context = document.querySelector("meta[name='context']").getAttribute("content");
|
|
@@ -730,35 +698,14 @@ var ful = (function (exports) {
|
|
|
730
698
|
};
|
|
731
699
|
};
|
|
732
700
|
|
|
733
|
-
class FieldError extends Templated(HTMLElement) {
|
|
734
|
-
render(slotted, template) {
|
|
735
|
-
this.classList.add('invalid-feedback');
|
|
736
|
-
}
|
|
737
|
-
static configure() {
|
|
738
|
-
customElements.define('ful-field-error', FieldError);
|
|
739
|
-
}
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
class Errors extends Templated(HTMLElement) {
|
|
743
|
-
render(slotted, template) {
|
|
744
|
-
this.classList.add('alert', 'alert-danger', 'd-none');
|
|
745
|
-
}
|
|
746
|
-
static configure() {
|
|
747
|
-
customElements.define('ful-errors', Errors);
|
|
748
|
-
}
|
|
749
|
-
|
|
750
|
-
}
|
|
751
|
-
|
|
752
701
|
/* global Infinity, CSS */
|
|
753
702
|
|
|
754
|
-
class Form extends Templated(
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none, [hidden]';
|
|
761
|
-
}
|
|
703
|
+
class Form extends Templated(HTMLElement) {
|
|
704
|
+
static MUTATORS = {};
|
|
705
|
+
static EXTRACTORS = {};
|
|
706
|
+
static VALUE_HOLDERS_SELECTOR = '[name]';
|
|
707
|
+
static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
|
|
708
|
+
|
|
762
709
|
render(slotted, template) {
|
|
763
710
|
const form = document.createElement('form');
|
|
764
711
|
form.append(slotted.default);
|
|
@@ -766,7 +713,9 @@ var ful = (function (exports) {
|
|
|
766
713
|
e.preventDefault();
|
|
767
714
|
this.spinner(true);
|
|
768
715
|
try {
|
|
769
|
-
|
|
716
|
+
if (this.submitter) {
|
|
717
|
+
await this.submitter(this.getValues(), this);
|
|
718
|
+
}
|
|
770
719
|
} catch (e) {
|
|
771
720
|
if (e instanceof Failure) {
|
|
772
721
|
this.setErrors(e.problems);
|
|
@@ -793,20 +742,20 @@ var ful = (function (exports) {
|
|
|
793
742
|
continue;
|
|
794
743
|
}
|
|
795
744
|
Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
|
|
796
|
-
Form.mutate(
|
|
745
|
+
Form.mutate(Form.MUTATORS, el, values[k], k, values);
|
|
797
746
|
});
|
|
798
747
|
}
|
|
799
748
|
}
|
|
800
749
|
getValues() {
|
|
801
|
-
return Array.from(this.querySelectorAll(
|
|
750
|
+
return Array.from(this.querySelectorAll(Form.VALUE_HOLDERS_SELECTOR))
|
|
802
751
|
.filter((el) => {
|
|
803
752
|
if (el.dataset['fulBindInclude'] === 'never') {
|
|
804
753
|
return false;
|
|
805
754
|
}
|
|
806
|
-
return el.dataset['fulBindInclude'] === 'always' || el.closest(
|
|
755
|
+
return el.dataset['fulBindInclude'] === 'always' || el.closest(Form.IGNORED_CHILDREN_SELECTOR) === null;
|
|
807
756
|
})
|
|
808
757
|
.reduce((result, el) => {
|
|
809
|
-
return Form.providePath(result, el.getAttribute('name'), Form.extract(
|
|
758
|
+
return Form.providePath(result, el.getAttribute('name'), Form.extract(Form.EXTRACTORS, el));
|
|
810
759
|
}, {});
|
|
811
760
|
}
|
|
812
761
|
setErrors(errors, scroll) {
|
|
@@ -815,13 +764,10 @@ var ful = (function (exports) {
|
|
|
815
764
|
.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
|
|
816
765
|
.forEach((e) => {
|
|
817
766
|
const name = e.context.replace("[", ".").replace("].", ".");
|
|
767
|
+
//TODO: match [name=] ful-validation-target and [name=]:not(:has(ful-validation-target))
|
|
768
|
+
//
|
|
818
769
|
this.querySelectorAll(`[name='${CSS.escape(name)}']`)
|
|
819
|
-
.forEach(input =>
|
|
820
|
-
input.classList.add('is-invalid');
|
|
821
|
-
if (input.parentElement.classList.contains("form-floating")) {
|
|
822
|
-
input.parentElement.classList.add('is-invalid');
|
|
823
|
-
}
|
|
824
|
-
});
|
|
770
|
+
.forEach(input => input.classList.add('is-invalid'));
|
|
825
771
|
this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
|
|
826
772
|
.forEach(el => el.innerText = e.reason);
|
|
827
773
|
});
|
|
@@ -830,14 +776,14 @@ var ful = (function (exports) {
|
|
|
830
776
|
const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
|
|
831
777
|
el.innerHTML = globalErrors.map(e => e.reason).join("\n");
|
|
832
778
|
if (globalErrors.length !== 0) {
|
|
833
|
-
el.
|
|
779
|
+
el.removeAttribute('hidden');
|
|
834
780
|
}
|
|
835
781
|
});
|
|
836
782
|
|
|
837
783
|
if (!scroll) {
|
|
838
784
|
return;
|
|
839
785
|
}
|
|
840
|
-
const ys = Array.from(this.querySelectorAll('ful-field-error
|
|
786
|
+
const ys = Array.from(this.querySelectorAll('ful-field-error'))
|
|
841
787
|
.map(el => el.getBoundingClientRect().y + window.scrollY);
|
|
842
788
|
const miny = Math.min(...ys);
|
|
843
789
|
if (miny !== Infinity) {
|
|
@@ -845,12 +791,12 @@ var ful = (function (exports) {
|
|
|
845
791
|
}
|
|
846
792
|
}
|
|
847
793
|
clearErrors() {
|
|
848
|
-
this.querySelectorAll('
|
|
794
|
+
this.querySelectorAll('.is-invalid')
|
|
849
795
|
.forEach(el => el.classList.remove('is-invalid'));
|
|
850
796
|
this.querySelectorAll("ful-errors")
|
|
851
797
|
.forEach(el => {
|
|
852
798
|
el.innerHTML = '';
|
|
853
|
-
el.
|
|
799
|
+
el.setAttribute('hidden', '');
|
|
854
800
|
});
|
|
855
801
|
}
|
|
856
802
|
static extract(extractors, el) {
|
|
@@ -936,35 +882,19 @@ var ful = (function (exports) {
|
|
|
936
882
|
});
|
|
937
883
|
|
|
938
884
|
const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHtml(`
|
|
939
|
-
<
|
|
885
|
+
<label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
|
|
886
|
+
<div class="input-group">
|
|
940
887
|
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
941
888
|
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
942
|
-
|
|
943
|
-
{{{{ slotted.input }}}}
|
|
944
|
-
<label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
|
|
945
|
-
</div>
|
|
889
|
+
{{{{ slotted.input }}}}
|
|
946
890
|
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
947
891
|
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
948
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
949
|
-
</div>
|
|
950
|
-
<div data-tpl-if="!floating" data-tpl-remove="tag">
|
|
951
|
-
<label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
|
|
952
|
-
<div class="input-group has-validation">
|
|
953
|
-
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
954
|
-
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
955
|
-
{{{{ slotted.input }}}}
|
|
956
|
-
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
957
|
-
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
958
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
959
|
-
</div>
|
|
960
892
|
</div>
|
|
893
|
+
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
961
894
|
`, ful_input_ec);
|
|
962
895
|
|
|
963
|
-
|
|
964
|
-
|
|
965
896
|
class Input extends Templated(HTMLElement, ful_input_template_) {
|
|
966
897
|
render(slotted, template) {
|
|
967
|
-
const floating = this.hasAttribute('floating');
|
|
968
898
|
const input = slotted.input = slotted.input || (() => {
|
|
969
899
|
const el = document.createElement("input");
|
|
970
900
|
el.classList.add("form-control");
|
|
@@ -976,7 +906,7 @@ var ful = (function (exports) {
|
|
|
976
906
|
Attributes.defaultValue(slotted.input, "type", "text");
|
|
977
907
|
Attributes.defaultValue(slotted.input, "placeholder", " ");
|
|
978
908
|
const name = input.getAttribute('name');
|
|
979
|
-
return template.render({ id, name,
|
|
909
|
+
return template.render({ id, name, slotted });
|
|
980
910
|
}
|
|
981
911
|
static configure() {
|
|
982
912
|
customElements.define('ful-input', Input);
|
|
@@ -992,30 +922,16 @@ var ful = (function (exports) {
|
|
|
992
922
|
});
|
|
993
923
|
|
|
994
924
|
const ful_select_template_ = globalThis.ful_select_template || ftl.Template.fromHtml(`
|
|
995
|
-
<
|
|
925
|
+
<label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
|
|
926
|
+
{{{{ input }}}}
|
|
927
|
+
<div class="input-group">
|
|
996
928
|
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
997
929
|
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
998
|
-
|
|
999
|
-
{{{{ slotted.input }}}}
|
|
1000
|
-
{{{{ input }}}}
|
|
1001
|
-
<label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
|
|
1002
|
-
</div>
|
|
930
|
+
{{{{ slotted.input }}}}
|
|
1003
931
|
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
1004
932
|
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
1005
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1006
|
-
</div>
|
|
1007
|
-
<div data-tpl-if="!floating" data-tpl-remove="tag">
|
|
1008
|
-
<label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
|
|
1009
|
-
{{{{ input }}}}
|
|
1010
|
-
<div class="input-group has-validation">
|
|
1011
|
-
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
1012
|
-
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
1013
|
-
{{{{ slotted.input }}}}
|
|
1014
|
-
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
1015
|
-
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
1016
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1017
|
-
</div>
|
|
1018
933
|
</div>
|
|
934
|
+
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1019
935
|
`, ful_select_ec);
|
|
1020
936
|
|
|
1021
937
|
|
|
@@ -1025,8 +941,6 @@ var ful = (function (exports) {
|
|
|
1025
941
|
this.tsConfig = tsConfig;
|
|
1026
942
|
}
|
|
1027
943
|
render(slotted, template) {
|
|
1028
|
-
const floating = this.hasAttribute('floating');
|
|
1029
|
-
|
|
1030
944
|
const type = this.getAttribute("type") || 'local';
|
|
1031
945
|
const remote = type != 'local';
|
|
1032
946
|
const loadOnce = this.getAttribute('load') != 'always';
|
|
@@ -1055,34 +969,42 @@ var ful = (function (exports) {
|
|
|
1055
969
|
}
|
|
1056
970
|
};
|
|
1057
971
|
|
|
972
|
+
|
|
973
|
+
this._remote = remote;
|
|
974
|
+
// we need to await this load in setValue when remote is configured and the option
|
|
975
|
+
// is not loaded yet.
|
|
976
|
+
// tomselect settings.load does not retun a promise as it wraps the configured load function
|
|
977
|
+
// with a debouncer
|
|
978
|
+
this._unwrappedRemoteLoad = async (query, callback) => {
|
|
979
|
+
|
|
980
|
+
if (!remote || remote && loadOnce && this.loaded) {
|
|
981
|
+
callback();
|
|
982
|
+
return;
|
|
983
|
+
}
|
|
984
|
+
const type = query && query.hasOwnProperty('byId') ? 'id' : 'query';
|
|
985
|
+
const qvalue = type === 'id' ? query.byId : query;
|
|
986
|
+
const data = await (this.loader ? this.loader(qvalue, type) : []);
|
|
987
|
+
if(type !== 'id'){
|
|
988
|
+
this.loaded = true;
|
|
989
|
+
}
|
|
990
|
+
callback(data);
|
|
991
|
+
};
|
|
992
|
+
|
|
993
|
+
|
|
1058
994
|
this.ts = new TomSelect(input, Object.assign(remote ? {
|
|
1059
995
|
preload: 'focus',
|
|
1060
|
-
load:
|
|
1061
|
-
|
|
1062
|
-
callback();
|
|
1063
|
-
return;
|
|
1064
|
-
}
|
|
1065
|
-
const data = await this.load(query);
|
|
1066
|
-
this.loaded = true;
|
|
1067
|
-
callback(data);
|
|
1068
|
-
},
|
|
1069
|
-
shouldLoad: (query) => this.shouldLoad(query)
|
|
996
|
+
load: this._unwrappedRemoteLoad,
|
|
997
|
+
shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
|
|
1070
998
|
} : {}, tsDefaultConfig, this.tsConfig));
|
|
1071
|
-
|
|
999
|
+
console.log("ts created");
|
|
1072
1000
|
//we remove the input to move it
|
|
1073
1001
|
input.remove();
|
|
1074
1002
|
|
|
1075
|
-
return template.render({ id, tsId, name,
|
|
1076
|
-
}
|
|
1077
|
-
shouldLoad(q){
|
|
1078
|
-
return true;
|
|
1079
|
-
}
|
|
1080
|
-
load(q){
|
|
1081
|
-
return []
|
|
1003
|
+
return template.render({ id, tsId, name, input, slotted });
|
|
1082
1004
|
}
|
|
1083
1005
|
async setValue(v) {
|
|
1084
|
-
if
|
|
1085
|
-
await this.ts.
|
|
1006
|
+
if(this._remote){
|
|
1007
|
+
await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
|
|
1086
1008
|
}
|
|
1087
1009
|
this.ts.setValue(v);
|
|
1088
1010
|
}
|
|
@@ -1253,48 +1175,18 @@ var ful = (function (exports) {
|
|
|
1253
1175
|
}
|
|
1254
1176
|
}
|
|
1255
1177
|
|
|
1256
|
-
class App {
|
|
1257
|
-
constructor() {
|
|
1258
|
-
this.configurers = [];
|
|
1259
|
-
this.initializers = [];
|
|
1260
|
-
this.handlers = [];
|
|
1261
|
-
this.running = false;
|
|
1262
|
-
document.addEventListener("DOMContentLoaded", async () => {
|
|
1263
|
-
await Promise.all(this.configurers);
|
|
1264
|
-
await Promise.all(this.initializers.map(h => Promise.resolve(h())));
|
|
1265
|
-
await Promise.all(this.handlers.map(h => Promise.resolve(h())));
|
|
1266
|
-
});
|
|
1267
|
-
}
|
|
1268
|
-
configure(cb) {
|
|
1269
|
-
this.configurers.push(Promise.resolve(cb()));
|
|
1270
|
-
return this;
|
|
1271
|
-
}
|
|
1272
|
-
initialize(cb) {
|
|
1273
|
-
this.initializers.push(cb);
|
|
1274
|
-
return this;
|
|
1275
|
-
}
|
|
1276
|
-
ready(cb) {
|
|
1277
|
-
this.handlers.push(cb);
|
|
1278
|
-
return this;
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
|
|
1282
|
-
exports.App = App;
|
|
1283
1178
|
exports.Attributes = Attributes;
|
|
1284
1179
|
exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
|
|
1285
1180
|
exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
|
|
1286
1181
|
exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
|
|
1287
1182
|
exports.Base64 = Base64;
|
|
1288
|
-
exports.Errors = Errors;
|
|
1289
1183
|
exports.Failure = Failure;
|
|
1290
|
-
exports.FieldError = FieldError;
|
|
1291
1184
|
exports.Form = Form;
|
|
1292
1185
|
exports.Fragments = Fragments;
|
|
1293
1186
|
exports.Hex = Hex;
|
|
1294
1187
|
exports.HttpClient = HttpClient;
|
|
1295
1188
|
exports.Input = Input;
|
|
1296
1189
|
exports.LocalStorage = LocalStorage;
|
|
1297
|
-
exports.Observable = Observable;
|
|
1298
1190
|
exports.RadioGroup = RadioGroup;
|
|
1299
1191
|
exports.Select = Select;
|
|
1300
1192
|
exports.SessionStorage = SessionStorage;
|