@optionfactory/ful 0.52.0 → 0.54.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 +55 -52
- 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 +55 -52
- package/dist/ful.mjs.map +1 -1
- package/package.json +1 -1
package/dist/ful.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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}ful-field-error{display:none}.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;
|
|
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}ful-field-error{display:none}.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;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,WACE,iDAAkD,CAClD,0CAA2C,CAC3C,wDAAyD,CACzD,mCAAoC,CAKpC,qCAAsC,CACtC,+CAAgD,CAChD,6CAA8C,CAH9C,6BAA8B,CAH9B,aAAc,CAEd,kBAAmB,CADnB,YAMF,CAEA,gBACE,YACF,CAEA,0LAOE,kCAAmC,CAHnC,aAAc,CAEd,gBAAkB,CADlB,iBAGF,CC1BA,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,
|
|
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,gBACE,YACF,CAEA,0LAOE,kCAAmC,CAHnC,aAAc,CAEd,gBAAkB,CADlB,iBAGF,CC1BA,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,gCACE,cAAe,CACf,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,CC3DA,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\nful-field-error {\n display: none;\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 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
|
@@ -644,14 +644,6 @@ var ful = (function (exports) {
|
|
|
644
644
|
static uid(prefix) {
|
|
645
645
|
return `${prefix}-${++Attributes.id}`;
|
|
646
646
|
}
|
|
647
|
-
/**
|
|
648
|
-
*
|
|
649
|
-
* @param {any} value
|
|
650
|
-
* @returns
|
|
651
|
-
*/
|
|
652
|
-
static asBoolean(value) {
|
|
653
|
-
return value !== null && value !== undefined && value !== false;
|
|
654
|
-
}
|
|
655
647
|
/**
|
|
656
648
|
*
|
|
657
649
|
* @param {HTMLElement} el
|
|
@@ -754,36 +746,36 @@ var ful = (function (exports) {
|
|
|
754
746
|
#tagToclass;
|
|
755
747
|
#configured;
|
|
756
748
|
#id = 0;
|
|
757
|
-
constructor(){
|
|
749
|
+
constructor() {
|
|
758
750
|
this.#templates = new TemplatesRegistry();
|
|
759
751
|
this.#tagToclass = {};
|
|
760
752
|
}
|
|
761
|
-
defineTemplate(html){
|
|
762
|
-
if(html === null || html === undefined){
|
|
753
|
+
defineTemplate(html) {
|
|
754
|
+
if (html === null || html === undefined) {
|
|
763
755
|
return undefined;
|
|
764
756
|
}
|
|
765
757
|
const name = `unnamed-${++this.#id}`;
|
|
766
758
|
this.#templates.put(name, Fragments.fromHtml(html));
|
|
767
759
|
return name;
|
|
768
760
|
}
|
|
769
|
-
template(k){
|
|
770
|
-
if(k === null || k === undefined){
|
|
761
|
+
template(k) {
|
|
762
|
+
if (k === null || k === undefined) {
|
|
771
763
|
return undefined;
|
|
772
764
|
}
|
|
773
765
|
return this.#templates.get(k);
|
|
774
766
|
}
|
|
775
|
-
define(tag, klass){
|
|
776
|
-
if(!this.#configured){
|
|
767
|
+
define(tag, klass) {
|
|
768
|
+
if (!this.#configured) {
|
|
777
769
|
this.#tagToclass[tag] = klass;
|
|
778
770
|
return this;
|
|
779
771
|
}
|
|
780
|
-
customElements.define(tag, klass);
|
|
772
|
+
customElements.define(tag, klass);
|
|
781
773
|
return this;
|
|
782
774
|
}
|
|
783
775
|
configure(ec) {
|
|
784
776
|
this.#templates.configure(ec);
|
|
785
|
-
for(const [tag, klass] of Object.entries(this.#tagToclass)) {
|
|
786
|
-
customElements.define(tag, klass);
|
|
777
|
+
for (const [tag, klass] of Object.entries(this.#tagToclass)) {
|
|
778
|
+
customElements.define(tag, klass);
|
|
787
779
|
delete this.#tagToclass[tag];
|
|
788
780
|
}
|
|
789
781
|
this.#configured = true;
|
|
@@ -811,18 +803,34 @@ var ful = (function (exports) {
|
|
|
811
803
|
|
|
812
804
|
const upgradeQueue = new UpgradeQueue();
|
|
813
805
|
|
|
806
|
+
const mappers = {
|
|
807
|
+
'string': attr => attr,
|
|
808
|
+
'number': attr => attr === null ? null : Number(attr),
|
|
809
|
+
'bool': attr => attr !== null,
|
|
810
|
+
'json': attr => JSON.parse(attr)
|
|
811
|
+
};
|
|
812
|
+
|
|
814
813
|
const ParsedElement = (conf) => {
|
|
815
|
-
const {
|
|
814
|
+
const { observed, template, slots } = conf || {};
|
|
815
|
+
|
|
816
|
+
const attrsAndTypes = (observed || []).map(a => {
|
|
817
|
+
const [attr, maybeType] = a.split(":");
|
|
818
|
+
const type = maybeType?.trim() || 'string';
|
|
819
|
+
if (!(type in mappers)) {
|
|
820
|
+
throw new Error(`unsupported attribute type: ${type}`);
|
|
821
|
+
}
|
|
822
|
+
return [attr.trim(), type];
|
|
823
|
+
});
|
|
824
|
+
|
|
825
|
+
const attrsAndMappers = attrsAndTypes.map(([attr, type]) => [attr, mappers[type]]);
|
|
816
826
|
|
|
817
|
-
const
|
|
818
|
-
const observed_attributes = attributes || [];
|
|
819
|
-
const observed = [].concat(observed_states).concat(observed_attributes);
|
|
827
|
+
const attrToMapper = Object.fromEntries(attrsAndMappers);
|
|
820
828
|
|
|
821
829
|
const templateId = elements.defineTemplate(template);
|
|
822
830
|
|
|
823
831
|
const k = class extends HTMLElement {
|
|
824
832
|
static get observedAttributes() {
|
|
825
|
-
return
|
|
833
|
+
return Object.keys(attrToMapper);
|
|
826
834
|
}
|
|
827
835
|
#parsed;
|
|
828
836
|
#initialized;
|
|
@@ -831,7 +839,7 @@ var ful = (function (exports) {
|
|
|
831
839
|
super(...args);
|
|
832
840
|
this.#internals = this.attachInternals();
|
|
833
841
|
}
|
|
834
|
-
get initialized(){
|
|
842
|
+
get initialized() {
|
|
835
843
|
return this.#initialized;
|
|
836
844
|
}
|
|
837
845
|
get internals() {
|
|
@@ -858,11 +866,12 @@ var ful = (function (exports) {
|
|
|
858
866
|
});
|
|
859
867
|
observer.observe(this.parentNode, { childList: true, subtree: true });
|
|
860
868
|
}
|
|
861
|
-
attributeChangedCallback(
|
|
869
|
+
attributeChangedCallback(attr, oldValue, newValue) {
|
|
862
870
|
if (!this.#parsed || oldValue === newValue) {
|
|
863
871
|
return;
|
|
864
872
|
}
|
|
865
|
-
|
|
873
|
+
const mapper = attrToMapper[attr];
|
|
874
|
+
this[attr] = mapper(newValue);
|
|
866
875
|
}
|
|
867
876
|
async upgrade() {
|
|
868
877
|
if (this.#parsed) {
|
|
@@ -870,34 +879,29 @@ var ful = (function (exports) {
|
|
|
870
879
|
}
|
|
871
880
|
this.#parsed = true;
|
|
872
881
|
await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
}
|
|
878
|
-
for (const other of observed_attributes) {
|
|
879
|
-
if (this.hasAttribute(other)) {
|
|
880
|
-
this[other] = this.getAttribute(other);
|
|
882
|
+
|
|
883
|
+
for (const [attr, mapper] of attrsAndMappers) {
|
|
884
|
+
if (this.hasAttribute(attr)) {
|
|
885
|
+
this[attr] = mapper(this.getAttribute(attr));
|
|
881
886
|
}
|
|
882
887
|
}
|
|
883
888
|
this.#initialized = true;
|
|
884
889
|
}
|
|
885
890
|
};
|
|
886
891
|
|
|
887
|
-
for (const
|
|
888
|
-
Object.defineProperty(k.prototype,
|
|
892
|
+
for (const [attr, type] of attrsAndTypes.filter(([a, t]) => t === 'bool')) {
|
|
893
|
+
Object.defineProperty(k.prototype, attr, {
|
|
889
894
|
enumerable: true,
|
|
890
895
|
configurable: true,
|
|
891
896
|
get() {
|
|
892
|
-
return this.internals.states.has(`--${
|
|
897
|
+
return this.internals.states.has(`--${attr}`);
|
|
893
898
|
},
|
|
894
899
|
set(value) {
|
|
895
|
-
const v = Attributes.asBoolean(value);
|
|
896
900
|
const et = this.initialized ? 'changed' : 'init';
|
|
897
|
-
const event = new SyncEvent(`${
|
|
898
|
-
detail: {
|
|
901
|
+
const event = new SyncEvent(`${attr}:${et}`, {
|
|
902
|
+
detail: {
|
|
899
903
|
target: this,
|
|
900
|
-
value:
|
|
904
|
+
value: value
|
|
901
905
|
}
|
|
902
906
|
});
|
|
903
907
|
(async () => {
|
|
@@ -906,7 +910,7 @@ var ful = (function (exports) {
|
|
|
906
910
|
return;
|
|
907
911
|
}
|
|
908
912
|
//see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
|
|
909
|
-
this.internals.states[v ? 'add' : 'delete'](`--${
|
|
913
|
+
this.internals.states[v ? 'add' : 'delete'](`--${attr}`);
|
|
910
914
|
})();
|
|
911
915
|
}
|
|
912
916
|
});
|
|
@@ -1094,8 +1098,7 @@ var ful = (function (exports) {
|
|
|
1094
1098
|
};
|
|
1095
1099
|
|
|
1096
1100
|
class Input extends ParsedElement({
|
|
1097
|
-
|
|
1098
|
-
attributes: ['value'],
|
|
1101
|
+
observed: ['value'],
|
|
1099
1102
|
slots: true,
|
|
1100
1103
|
template: INPUT_TEMPLATE
|
|
1101
1104
|
}){
|
|
@@ -1117,8 +1120,7 @@ var ful = (function (exports) {
|
|
|
1117
1120
|
*/
|
|
1118
1121
|
|
|
1119
1122
|
class Select extends ParsedElement({
|
|
1120
|
-
|
|
1121
|
-
attributes: ["value"],
|
|
1123
|
+
observed: ["value"],
|
|
1122
1124
|
slots: true,
|
|
1123
1125
|
template: `
|
|
1124
1126
|
<label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
|
|
@@ -1218,8 +1220,7 @@ var ful = (function (exports) {
|
|
|
1218
1220
|
}
|
|
1219
1221
|
|
|
1220
1222
|
class RadioGroup extends ParsedElement({
|
|
1221
|
-
|
|
1222
|
-
attributes: ['value'],
|
|
1223
|
+
observed: ['value', 'disabled:bool'],
|
|
1223
1224
|
slots: true,
|
|
1224
1225
|
template: `
|
|
1225
1226
|
<fieldset>
|
|
@@ -1230,10 +1231,12 @@ var ful = (function (exports) {
|
|
|
1230
1231
|
{{{{ slots.header }}}}
|
|
1231
1232
|
</header>
|
|
1232
1233
|
<section>
|
|
1233
|
-
<label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1234
|
+
<div class="label-wrapper" data-tpl-each="inputsAndLabels" data-tpl-var="ial">
|
|
1235
|
+
<label>
|
|
1236
|
+
{{{{ ial[0] }}}}
|
|
1237
|
+
{{{{ ial[1] }}}}
|
|
1238
|
+
</label>
|
|
1239
|
+
</div>
|
|
1237
1240
|
</section>
|
|
1238
1241
|
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1239
1242
|
<footer data-tpl-if="slots.footer">
|