@gisce/react-ooui 0.9.3 → 0.9.6

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA+C;AAwE7C,uFAxEO,eAAM,OAwEP;AAvER,4CAA2C;AAwEzC,qFAxEO,WAAI,OAwEP;AAvEN,sDAAqD;AAwEnD,0FAxEO,qBAAS,OAwEP;AAvEX,kDAAiD;AAwE/C,wFAxEO,iBAAO,OAwEP;AAvET,6DAA4D;AAwE1D,yFAxEO,mBAAQ,OAwEP;AAvEV,6DAA4D;AAqG1D,yFArGO,mBAAQ,OAqGP;AApGV,8DAAwC;AAuEtC,eAvEK,cAAI,CAuEL;AAtEN,8CAA6C;AA2E3C,sFA3EO,aAAK,OA2EP;AA1EP,0DAAyD;AAyHvD,4FAzHO,yBAAW,OAyHP;AAxHb,sDAAqD;AA0EnD,0FA1EO,qBAAS,OA0EP;AAzEX,kDAAiD;AA0E/C,wFA1EO,iBAAO,OA0EP;AAzET,qEAA+C;AAmE7C,gBAnEK,eAAK,CAmEL;AAlEP,2EAAqD;AAqEnD,mBArEK,kBAAQ,CAqEL;AApEV,8DAAwC;AAmEtC,eAnEK,cAAI,CAmEL;AAlEN,+DAAyC;AAuEvC,gBAvEK,eAAK,CAuEL;AAtEP,6DAAuC;AAuErC,eAvEK,cAAI,CAuEL;AAtEN,sDAAqD;AA0EnD,0FA1EO,qBAAS,OA0EP;AAzEX,2FAAqE;AA8DnE,uBA9DK,sBAAY,CA8DL;AA7Dd,0EAAoD;AAyElD,qBAzEK,oBAAU,CAyEL;AAxEZ,wDAAuD;AAqFrD,0FArFO,qBAAS,OAqFP;AApFX,4DAA2D;AAqFzD,4FArFO,yBAAW,OAqFP;AApFb,6DAAuC;AAwFrC,eAxFK,cAAI,CAwFL;AAvFN,qEAA+C;AAwF7C,mBAxFK,kBAAQ,CAwFL;AAnFV,sDAAqD;AAoFnD,0FApFO,qBAAS,OAoFP;AAnFX,gDAA+C;AAoF7C,uFApFO,eAAM,OAoFP;AAnFR,oEAA8C;AAoF5C,qBApFK,oBAAU,CAoFL;AAnFZ,4EAAkD;AAuFhD,oBAvFK,uBAAS,CAuFL;AAtFX,0CAAyC;AA4FvC,oFA5FO,SAAG,OA4FP;AA3FL,8CAA6C;AA4F3C,sFA5FO,aAAK,OA4FP;AA3FP,8CAA6C;AA4F3C,sFA5FO,aAAK,OA4FP;AA3FP,qEAAmD;AA6FjD,4BA7FK,uBAAiB,CA6FL;AA5FnB,kFAA4D;AAgG1D,oBAhGK,mBAAS,CAgGL;AA/FX,+DAGuC;AA8FrC,kGAhGA,iCAAiB,OAgGA;AACjB,8FAhGA,6BAAa,OAgGA;AA9Ff,uEAAsE;AA4FpE,+FA5FO,+BAAc,OA4FP;AApEhB,4EAAsD;AAgCpD,6BAhCK,4BAAkB,CAgCL;AA/BpB,8DAAwC;AAuDtC,mBAvDK,kBAAQ,CAuDL;AAtDV,oEAA8C;AAuD5C,sBAvDK,qBAAW,CAuDL;AAtDb,gFAA0D;AAuDxD,4BAvDK,2BAAiB,CAuDL;AAtDnB,oFAA+D;AA0D7D,8BA1DK,4BAAmB,CA0DL;AAzDrB,yEAAmD;AA6DjD,0BA7DK,yBAAe,CA6DL"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA+C;AAyE7C,uFAzEO,eAAM,OAyEP;AAxER,4CAA2C;AAyEzC,qFAzEO,WAAI,OAyEP;AAxEN,sDAAqD;AAyEnD,0FAzEO,qBAAS,OAyEP;AAxEX,kDAAiD;AAyE/C,wFAzEO,iBAAO,OAyEP;AAxET,6DAA4D;AAyE1D,yFAzEO,mBAAQ,OAyEP;AAxEV,6DAA4D;AAsG1D,yFAtGO,mBAAQ,OAsGP;AArGV,8DAAwC;AAwEtC,eAxEK,cAAI,CAwEL;AAvEN,8CAA6C;AA4E3C,sFA5EO,aAAK,OA4EP;AA3EP,0DAAyD;AA0HvD,4FA1HO,yBAAW,OA0HP;AAzHb,sDAAqD;AA2EnD,0FA3EO,qBAAS,OA2EP;AA1EX,kDAAiD;AA2E/C,wFA3EO,iBAAO,OA2EP;AA1ET,qEAA+C;AAoE7C,gBApEK,eAAK,CAoEL;AAnEP,2EAAqD;AAsEnD,mBAtEK,kBAAQ,CAsEL;AArEV,8DAAwC;AAoEtC,eApEK,cAAI,CAoEL;AAnEN,+DAAyC;AAwEvC,gBAxEK,eAAK,CAwEL;AAvEP,6DAAuC;AAwErC,eAxEK,cAAI,CAwEL;AAvEN,sDAAqD;AA2EnD,0FA3EO,qBAAS,OA2EP;AA1EX,2FAAqE;AA+DnE,uBA/DK,sBAAY,CA+DL;AA9Dd,0EAAoD;AA0ElD,qBA1EK,oBAAU,CA0EL;AAzEZ,wDAAuD;AAsFrD,0FAtFO,qBAAS,OAsFP;AArFX,4DAA2D;AAsFzD,4FAtFO,yBAAW,OAsFP;AArFb,6DAAuC;AAyFrC,eAzFK,cAAI,CAyFL;AAxFN,qEAA+C;AAyF7C,mBAzFK,kBAAQ,CAyFL;AApFV,sDAAqD;AAqFnD,0FArFO,qBAAS,OAqFP;AApFX,gDAA+C;AAqF7C,uFArFO,eAAM,OAqFP;AApFR,oEAA8C;AAqF5C,qBArFK,oBAAU,CAqFL;AApFZ,4EAAkD;AAwFhD,oBAxFK,uBAAS,CAwFL;AAvFX,0CAAyC;AA6FvC,oFA7FO,SAAG,OA6FP;AA5FL,8CAA6C;AA6F3C,sFA7FO,aAAK,OA6FP;AA5FP,8CAA6C;AA6F3C,sFA7FO,aAAK,OA6FP;AA5FP,qEAAmD;AA8FjD,4BA9FK,uBAAiB,CA8FL;AA7FnB,kFAA4D;AAiG1D,oBAjGK,mBAAS,CAiGL;AAhGX,8CAA6C;AAoG3C,qFApGO,WAAI,OAoGP;AAnGN,+DAGuC;AA8FrC,kGAhGA,iCAAiB,OAgGA;AACjB,8FAhGA,6BAAa,OAgGA;AA9Ff,uEAAsE;AA4FpE,+FA5FO,+BAAc,OA4FP;AApEhB,4EAAsD;AAgCpD,6BAhCK,4BAAkB,CAgCL;AA/BpB,8DAAwC;AAuDtC,mBAvDK,kBAAQ,CAuDL;AAtDV,oEAA8C;AAuD5C,sBAvDK,qBAAW,CAuDL;AAtDb,gFAA0D;AAuDxD,4BAvDK,2BAAiB,CAuDL;AAtDnB,oFAA+D;AA0D7D,8BA1DK,4BAAmB,CA0DL;AAzDrB,yEAAmD;AA6DjD,0BA7DK,yBAAe,CA6DL"}

package/dist/widgets/WidgetFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["../../src/widgets/WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+F1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["../../src/widgets/WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkG1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/widgets/WidgetFactory.js

@@ -10,6 +10,7 @@ var Image_1 = require("./base/Image");
 var FiberGrid_1 = require("./custom/FiberGrid");
 var Timeline_1 = require("./custom/Timeline");
 var Indicator_1 = require("./custom/Indicator");
+var Tags_1 = require("./custom/Tags");
 var getWidgetType = function (type) {
     switch (type) {
         case "form":
@@ -68,6 +69,8 @@ var getWidgetType = function (type) {
             return Timeline_1.Timeline;
         case "indicator":
             return Indicator_1.Indicator;
+        case "tags":
+            return Tags_1.Tags;
         default:
             return undefined;
     }

package/dist/widgets/WidgetFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFactory.js","sourceRoot":"","sources":["../../src/widgets/WidgetFactory.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,iCAwBiB;AACjB,sCAAqC;AACrC,gDAA+C;AAC/C,8CAA6C;AAC7C,gDAA8C;AAE9C,IAAM,aAAa,GAAG,UAAC,IAAY;IACjC,QAAQ,IAAI,EAAE;QACZ,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,UAAU;YACb,OAAO,gBAAQ,CAAC;QAClB,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,cAAM,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,iBAAS,CAAC;QACnB,KAAK,UAAU;YACb,OAAO,gBAAQ,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,eAAO,CAAC;QACjB,KAAK,SAAS;YACZ,OAAO,eAAO,CAAC;QACjB,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,aAAa;YAChB,OAAO,mBAAW,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,UAAU;YACb,OAAO,gBAAQ,CAAC;QAClB,KAAK,UAAU,CAAC;QAChB,KAAK,eAAe,CAAC;QACrB,KAAK,WAAW;YACd,OAAO,gBAAQ,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,iBAAS,CAAC;QACnB,KAAK,WAAW;YACd,OAAO,iBAAS,CAAC;QACnB,KAAK,QAAQ;YACX,OAAO,cAAM,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,KAAK;YACR,OAAO,WAAG,CAAC;QACb,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,YAAY;YACf,OAAO,iBAAS,CAAC;QACnB,KAAK,YAAY;YACf,OAAO,qBAAS,CAAC;QACnB,KAAK,UAAU;YACb,OAAO,mBAAQ,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,qBAAS,CAAC;QACnB;YACE,OAAO,SAAS,CAAC;KACpB;AACH,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,KAAU;IAC3B,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACf,IAAA,IAAI,GAAuB,IAAI,KAA3B,CAA4B;IAExC,IAAM,WAAW,GAAQ,aAAa,CAAC,IAAI,CAAC,CAAC;IAE7C,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,eAAK,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACjD,CAAC,CAAC;AAEO,8CAAiB"}
+{"version":3,"file":"WidgetFactory.js","sourceRoot":"","sources":["../../src/widgets/WidgetFactory.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,iCAwBiB;AACjB,sCAAqC;AACrC,gDAA+C;AAC/C,8CAA6C;AAC7C,gDAA8C;AAC9C,sCAAqC;AAErC,IAAM,aAAa,GAAG,UAAC,IAAY;IACjC,QAAQ,IAAI,EAAE;QACZ,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,UAAU;YACb,OAAO,gBAAQ,CAAC;QAClB,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,cAAM,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,iBAAS,CAAC;QACnB,KAAK,UAAU;YACb,OAAO,gBAAQ,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,eAAO,CAAC;QACjB,KAAK,SAAS;YACZ,OAAO,eAAO,CAAC;QACjB,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,aAAa;YAChB,OAAO,mBAAW,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,YAAI,CAAC;QACd,KAAK,UAAU;YACb,OAAO,gBAAQ,CAAC;QAClB,KAAK,UAAU,CAAC;QAChB,KAAK,eAAe,CAAC;QACrB,KAAK,WAAW;YACd,OAAO,gBAAQ,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,iBAAS,CAAC;QACnB,KAAK,WAAW;YACd,OAAO,iBAAS,CAAC;QACnB,KAAK,QAAQ;YACX,OAAO,cAAM,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,KAAK;YACR,OAAO,WAAG,CAAC;QACb,KAAK,OAAO;YACV,OAAO,aAAK,CAAC;QACf,KAAK,YAAY;YACf,OAAO,iBAAS,CAAC;QACnB,KAAK,YAAY;YACf,OAAO,qBAAS,CAAC;QACnB,KAAK,UAAU;YACb,OAAO,mBAAQ,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,qBAAS,CAAC;QACnB,KAAK,MAAM;YACT,OAAO,WAAI,CAAC;QACd;YACE,OAAO,SAAS,CAAC;KACpB;AACH,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,KAAU;IAC3B,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACf,IAAA,IAAI,GAAuB,IAAI,KAA3B,CAA4B;IAExC,IAAM,WAAW,GAAQ,aAAa,CAAC,IAAI,CAAC,CAAC;IAE7C,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,eAAK,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACjD,CAAC,CAAC;AAEO,8CAAiB"}

package/dist/widgets/containers/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/widgets/containers/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAiB,MAAM,aAAa,CAAC;AAYxE,aAAK,KAAK,GAAG;IACX,SAAS,EAAE,aAAa,CAAC;IACzB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,KAAK,KAAG,MAAM,YA+EvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/widgets/containers/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAiB,MAAM,aAAa,CAAC;AAYxE,aAAK,KAAK,GAAG;IACX,SAAS,EAAE,aAAa,CAAC;IACzB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,KAAK,KAAG,MAAM,YAgFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/widgets/containers/Container.js

@@ -39,8 +39,9 @@ var Container = function (props) {
             row: rowWithoutInvisibleFields,
             numberOfColumns: columns,
         });
-        var rowWithEmptiesToFit;
-        if (i === 0) {
+        var rowWithEmptiesToFit = rowWithExpandedItems;
+        if (i === 0 ||
+            !(row.length === 1 && row.some(function (widget) { return widget.type === "group"; }))) {
             rowWithEmptiesToFit = containerHelper_1.fillRowWithEmptiesToFit({
                 row: rowWithExpandedItems,
                 numberOfColumns: columns,
@@ -48,7 +49,7 @@ var Container = function (props) {
             });
             firstRow = firstRow.concat(rowWithEmptiesToFit);
         }
-        return (i === 0 ? rowWithEmptiesToFit : rowWithExpandedItems).map(function (item, j) {
+        return rowWithEmptiesToFit.map(function (item, j) {
             // We check if we have any label+field inside the container.
             // In this scenario, we must format the grid accordingly
             // Otherwise, the grid will divide uniformly

package/dist/widgets/containers/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/widgets/containers/Container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAAwE;AACxE,yDAA4D;AAE5D,6DAOmC;AAOnC,IAAM,SAAS,GAAG,UAAC,KAAY;IACrB,IAAA,SAAS,GAA0B,KAAK,UAA/B,EAAE,mBAAmB,GAAK,KAAK,oBAAV,CAAW;IACzC,IAAA,IAAI,GAAK,SAAS,KAAd,CAAe;IACrB,IAAA,OAAO,GAAK,SAAS,QAAd,CAAe;IAE5B,gDAAgD;IAChD,qDAAqD;IACrD,8BAA8B;IAC9B,IAAM,iBAAiB,GAAG,sCAAoB,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,iBAAiB,GAAG,OAAO,EAAE;QAC/B,OAAO,GAAG,iBAAiB,CAAC;KAC7B;IAED,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,QAAQ,GAAa,EAAE,CAAC;IAE5B,IAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,UAAC,GAAa,EAAE,CAAC;QACxC,IAAM,yBAAyB,GAAG,GAAG,CAAC,MAAM,CAAC,UAAC,MAAM;YAClD,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAM,oBAAoB,GAAG,uCAAqB,CAAC;YACjD,GAAG,EAAE,yBAAyB;YAC9B,eAAe,EAAE,OAAO;SACzB,CAAC,CAAC;QAEH,IAAI,mBAAmB,CAAC;QACxB,IAAI,CAAC,KAAK,CAAC,EAAE;YACX,mBAAmB,GAAG,yCAAuB,CAAC;gBAC5C,GAAG,EAAE,oBAAoB;gBACzB,eAAe,EAAE,OAAO;gBACxB,mBAAmB,EAAE,mBAAmB;aACzC,CAAC,CAAC;YAEH,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;SACjD;QAED,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAC/D,UAAC,IAAY,EAAE,CAAS;YACtB,4DAA4D;YAC5D,wDAAwD;YACxD,4CAA4C;YAC5C,IAAI,IAAI,YAAY,YAAK,IAAK,IAAc,CAAC,aAAa,EAAE;gBAC1D,WAAW,GAAG,IAAI,CAAC;aACpB;YAED,IAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAEvC,OAAO,CACL,uCACE,GAAG,EAAK,CAAC,CAAC,QAAQ,EAAE,SAAI,YAAY,CAAC,QAAQ,EAAI,EACjD,KAAK,wBACA,qCAAmB,CAAC,EAAE,IAAI,MAAA,EAAE,mBAAmB,qBAAA,EAAE,CAAC,KACrD,QAAQ,EAAE,CAAC,OAGZ,iCAAiB,CAAC;gBACjB,IAAI,EAAE,IAAI;gBACV,mBAAmB,qBAAA;aACpB,CAAC,CACE,CACP,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAM,eAAe,GACnB,IAAI,CAAC,MAAM,KAAK,CAAC;QACf,CAAC,CAAC,6CAA2B,CAAC,QAAQ,EAAE,OAAO,CAAC;QAChD,CAAC,CAAC,oCAAkB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC/C,IAAM,SAAS,GAAG;QAChB,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe;QACnE,GAAG,EAAE,MAAM;QACX,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,CAAC;KACZ,CAAC;IAEF,OAAO,uCAAK,KAAK,EAAE,SAAS,IAAG,OAAO,CAAO,CAAC;AAChD,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/widgets/containers/Container.tsx"],"names":[],"mappings":"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"}

package/dist/widgets/custom/Tags.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Tags as TagsOoui } from "@gisce/ooui";
+import { One2manyValue } from "../base/one2many/One2manyInput";
+declare type TagsProps = {
+    ooui: TagsOoui;
+};
+declare type TagsInputProps = TagsProps & {
+    value?: One2manyValue;
+    onChange?: (value: One2manyValue) => void;
+};
+export declare const Tags: (props: TagsProps) => JSX.Element;
+export declare const TagsInput: (props: TagsInputProps) => JSX.Element;
+export {};
+//# sourceMappingURL=Tags.d.ts.map

package/dist/widgets/custom/Tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAO7E,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,aAAK,cAAc,GAAG,SAAS,GAAG;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,SAAS,gBAQpC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,gBAmE9C,CAAC"}

package/dist/widgets/custom/Tags.js

@@ -0,0 +1,151 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagsInput = exports.Tags = void 0;
+var react_1 = __importStar(require("react"));
+var Field_1 = __importDefault(require("@/common/Field"));
+var use_deep_compare_effect_1 = __importDefault(require("use-deep-compare-effect"));
+var FormContext_1 = require("@/context/FormContext");
+var antd_1 = require("antd");
+var one2manyHelper_1 = require("@/helpers/one2manyHelper");
+var formHelper_1 = require("@/helpers/formHelper");
+var Tags = function (props) {
+    var ooui = props.ooui;
+    return (react_1.default.createElement(Field_1.default, __assign({ type: "array" }, props),
+        react_1.default.createElement(exports.TagsInput, { ooui: ooui })));
+};
+exports.Tags = Tags;
+var TagsInput = function (props) {
+    var value = props.value, ooui = props.ooui, onChange = props.onChange;
+    var _a = (value || {}).items, items = _a === void 0 ? [] : _a;
+    var _b = react_1.useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = react_1.useState(), error = _c[0], setError = _c[1];
+    var relation = ooui.relation, context = ooui.context, readOnly = ooui.readOnly, field = ooui.field;
+    var itemsToShow = items.filter(function (item) { return item.values && item.operation !== "pendingRemove"; });
+    var formContext = react_1.useContext(FormContext_1.FormContext);
+    var getContext = (formContext || {}).getContext;
+    use_deep_compare_effect_1.default(function () {
+        fetchData();
+    }, [items]);
+    var triggerChange = function (changedValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            items: changedValue,
+        });
+    };
+    function fetchData() {
+        return __awaiter(this, void 0, void 0, function () {
+            var itemsWithValues, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoading(true);
+                        setError(undefined);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, one2manyHelper_1.readObjectValues({
+                                treeFields: [ooui.field],
+                                formFields: [],
+                                model: relation,
+                                items: items,
+                                context: __assign(__assign({}, getContext === null || getContext === void 0 ? void 0 : getContext()), context),
+                            })];
+                    case 2:
+                        itemsWithValues = _a.sent();
+                        triggerChange(itemsWithValues);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        setError(err_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    if (error) {
+        return react_1.default.createElement(antd_1.Alert, { className: "mt-10", message: error, type: "error", banner: true });
+    }
+    if (isLoading) {
+        return react_1.default.createElement(antd_1.Spin, null);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { padding: "1rem" } }, itemsToShow.map(function (item, index) {
+            var _a;
+            var value = (_a = item.values) === null || _a === void 0 ? void 0 : _a[field];
+            return (react_1.default.createElement(antd_1.Tag, { key: index, color: formHelper_1.colorFromString(value) }, value));
+        }))));
+};
+exports.TagsInput = TagsInput;
+//# sourceMappingURL=Tags.js.map

package/dist/widgets/custom/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "0.9.3",
+  "version": "0.9.6",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@ant-design/charts": "^1.3.6",
-    "@gisce/ooui": "^0.7.1",
+    "@gisce/ooui": "^0.7.2",
     "@gisce/react-formiga-table": "^0.3.0",
     "fiber-diagram": "github:gisce/fiber-diagram",
     "file-type": "^16.5.0",

package/src/helpers/formHelper.ts

@@ -223,3 +223,17 @@ export const transformPlainMany2Ones = ({
 
   return reformattedValues;
 };
+
+
+export const colorFromString = (text: string) => {
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    hash = text.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let hexColour = '#';
+  for (let i = 0; i < 3; i++) {
+    var value = (hash >> (i * 8)) & 0xFF;
+    hexColour += ('00' + value.toString(16)).slice(-2);
+  }
+  return hexColour;
+}

package/src/index.ts

@@ -34,6 +34,7 @@ import { Email } from "@/widgets/base/Email";
 import { Image } from "@/widgets/base/Image";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import Dashboard from "@/widgets/views/Dashboard/Dashboard";
+import { Tags } from "@/widgets/custom/Tags";
 import {
   DashboardGridItem,
   DashboardGrid,
@@ -133,4 +134,5 @@ export {
   GraphIndicator,
   DashboardGridItem,
   DashboardGrid,
+  Tags,
 };

package/src/stories/custom/Tags.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { TagsInput } from "../../widgets/custom/Tags";
+import { Tags as TagsOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+import { One2manyInput } from "../../widgets/base/one2many/One2manyInput";
+
+export default {
+  title: "Components/Widgets/Custom/Tags",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TagsOoui({
+    name: "button_field",
+    string: "Lorem ipsum",
+    field: "name"
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <TagsInput ooui={ooui} value={{items: [
+          {id: 1, operation: "original", values: {name: "test"}},
+          {id: 2, operation: "original", values: {name: "foo"}},
+          {id: 3, operation: "pendingRemove", values: {name: "remove"}}
+        ]}}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/mocks/models/cups.ts

@@ -50,7 +50,7 @@ export default {
   },
   form: {
     arch:
-      '<form string="CUPS">\n                    <notebook colspan="4">\n                        <page string="General">\n                            <field name="name" select="1" size="25"/>\n                            <field name="active" select="1"/>\n                            <field name="distribuidora_id" domain="[(\'supplier\',\'=\',True)]" context="{\'task\': \'test\'}" required="1" select="1"/>\n                <field name="id_municipi" select="1"/>\n                            <field name="id_provincia"/>\n                            <field name="id_poblacio" select="1" domain="[(\'municipi_id.id\', \'=\', id_municipi)]"/>\n                            <field name="dp"/>\n                            <field name="direccio" select="1" colspan="4"/>\n                            <field name="polissa_polissa" select="1"/>\n                    <field name="polissa_comptador" select="1"/>\n                <field name="polissa_potencia"/>\n                <field name="potencia_adscrita" attrs="{\'readonly\':[(\'force_potencia_adscrita\',\'=\',0)]}"/>\n                    <field name="force_potencia_adscrita"/>\n                <group colspan="4" string="Adreces">\n                                <notebook colspan="4">\n                                    <page string="Principal">\n                                        <separator string="Zona urbana" colspan="4"/>\n                                        <field name="tv"/>\n                                        <field name="nv" select="1"/>\n                                        <field name="pnp" select="1"/>\n                                        <field name="bq" select="1"/>\n                                        <field name="es" select="1"/>\n                                        <field name="pt" select="1"/>\n                                        <field name="pu" select="1"/>\n                                        <field name="aclarador" colspan="4" select="1"/>\n                                        <separator string="Zona industrial" colspan="4"/>\n                                        <field name="cpo" select="1"/>\n                                        <field name="cpa" select="1"/>\n                                    </page>\n                                    <page string="Cadastre">\n                                        <separator string="Zona urbana" colspan="4"/>\n                                        <field name="catas_np"/>\n                                        <field name="catas_nm"/>\n                                        <field name="ref_catastral" select="1"/>\n                                        <button type="object" name="update_dir_from_ref" string="Obtenir del Cadastre"/>\n                                        <button type="object" name="delete_dir_ref" string="Eliminar dades del Cadastre" confirm="Està segur que vol eliminar les dades que s\'han obtingut del cadastre?"/>\n                                        <field name="catas_ldt" colspan="4"/>\n                                        <field name="catas_tv"/>\n                                        <field name="catas_nv"/>\n                                        <field name="catas_pnp"/>\n                                        <field name="catas_bq"/>\n                                        <field name="catas_es"/>\n                                        <field name="catas_pt"/>\n                                        <field name="catas_pu"/>\n                                        <field name="catas_dp"/>\n                                        <separator string="Zona industrial" colspan="4"/>\n                                        <field name="catas_cpo"/>\n                                        <field name="catas_cpa"/>\n                                        <separator string="Sincronització amb el cadastre" colspan="4"/>\n                                        <label colspan="2" string="Si disposa de la referencia cadastral pot copiar les dades del cadastre a l\'adreça principal mitjançant aquest botó"/>\n                                        <button type="object" name="copy_to_alternative" string="Copiar a la principal"/>\n                                    </page>\n                                    <page string="Notes">\n                                    <field name="notes" colspan="4" nolabel="1"/>\n                                    </page>\n                                </notebook>\n                            </group>\n                        </page>\n                    <page string="Autoconsum">\n                        <field name="autoconsum_id" readonly="1" colspan="4"/>\n                        <field name="coef_repartiment" readonly="1" colspan="4"/>\n                    </page>\n                <page string="Butlletins">\n                        <field name="butlletins" colspan="4" nolabel="1" context="{\'cups_id\': active_id}"/>\n                    </page>\n                <page string="Històric d\'autoconsums">\n                        <field name="hist_autoconsum" nolabel="1" context="{\'default_cups_id\': active_id}" readonly="1"/>\n                    </page>\n                <page string="Històric de pòlisses">\n                        <field name="polisses" nolabel="1" colspan="4">\n                            </field>\n                    </page>\n                </notebook>\n                </form>',
+      '<form string="CUPS">\n                    <notebook colspan="4">\n                       <page string="Corbes">                         <group colspan="4">                             <group string="Validada" colspan="2">                                 <field name="bq" string="Última corba"/>                                 <field name="bq" string="Format"/>                             </group>                             <group string="Facturada" colspan="2">                                 <field name="bq" string="Última corba"/>                                 <field name="bq" string="Format"/>                             </group>                             <group string="Autoconsumida" colspan="2">                                 <field name="bq" string="Última corba"/>                                 <field name="bq" string="Format"/>                             </group>                             <group string="Generada Neta" colspan="2">                                 <field name="bq" string="Última corba"/>                                 <field name="bq" string="Format"/>                             </group>                             <group string="Quart-Horària" colspan="2">                                 <field name="bq" string="Última corba"/>                                 <field name="bq" string="Format"/>                             </group>                        </group>                    </page> <page string="General">\n                            <field name="name" select="1" size="25"/>\n                            <field name="active" select="1"/>\n                            <field name="distribuidora_id" domain="[(\'supplier\',\'=\',True)]" context="{\'task\': \'test\'}" required="1" select="1"/>\n                <field name="id_municipi" select="1"/>\n                            <field name="id_provincia"/>\n                            <field name="id_poblacio" select="1" domain="[(\'municipi_id.id\', \'=\', id_municipi)]"/>\n                            <field name="dp"/>\n                            <field name="direccio" select="1" colspan="4"/>\n                            <field name="polissa_polissa" select="1"/>\n                    <field name="polissa_comptador" select="1"/>\n                <field name="polissa_potencia"/>\n                <field name="potencia_adscrita" attrs="{\'readonly\':[(\'force_potencia_adscrita\',\'=\',0)]}"/>\n                    <field name="force_potencia_adscrita"/>\n                <group colspan="4" string="Adreces">\n                                <notebook colspan="4">\n                                    <page string="Principal">\n                                        <separator string="Zona urbana" colspan="4"/>\n                                        <field name="tv"/>\n                                        <field name="nv" select="1"/>\n                                        <field name="pnp" select="1"/>\n                                        <field name="bq" select="1"/>\n                                        <field name="es" select="1"/>\n                                        <field name="pt" select="1"/>\n                                        <field name="pu" select="1"/>\n                                        <field name="aclarador" colspan="4" select="1"/>\n                                        <separator string="Zona industrial" colspan="4"/>\n                                        <field name="cpo" select="1"/>\n                                        <field name="cpa" select="1"/>\n                                    </page>\n                                    <page string="Cadastre">\n                                        <separator string="Zona urbana" colspan="4"/>\n                                        <field name="catas_np"/>\n                                        <field name="catas_nm"/>\n                                        <field name="ref_catastral" select="1"/>\n                                        <button type="object" name="update_dir_from_ref" string="Obtenir del Cadastre"/>\n                                        <button type="object" name="delete_dir_ref" string="Eliminar dades del Cadastre" confirm="Està segur que vol eliminar les dades que s\'han obtingut del cadastre?"/>\n                                        <field name="catas_ldt" colspan="4"/>\n                                        <field name="catas_tv"/>\n                                        <field name="catas_nv"/>\n                                        <field name="catas_pnp"/>\n                                        <field name="catas_bq"/>\n                                        <field name="catas_es"/>\n                                        <field name="catas_pt"/>\n                                        <field name="catas_pu"/>\n                                        <field name="catas_dp"/>\n                                        <separator string="Zona industrial" colspan="4"/>\n                                        <field name="catas_cpo"/>\n                                        <field name="catas_cpa"/>\n                                        <separator string="Sincronització amb el cadastre" colspan="4"/>\n                                        <label colspan="2" string="Si disposa de la referencia cadastral pot copiar les dades del cadastre a l\'adreça principal mitjançant aquest botó"/>\n                                        <button type="object" name="copy_to_alternative" string="Copiar a la principal"/>\n                                    </page>\n                                    <page string="Notes">\n                                    <field name="notes" colspan="4" nolabel="1"/>\n                                    </page>\n                                </notebook>\n                            </group>\n                        </page>\n                    <page string="Autoconsum">\n                        <field name="autoconsum_id" readonly="1" colspan="4"/>\n                        <field name="coef_repartiment" readonly="1" colspan="4"/>\n                    </page>\n                <page string="Butlletins">\n                        <field name="butlletins" colspan="4" nolabel="1" context="{\'cups_id\': active_id}"/>\n                    </page>\n                <page string="Històric d\'autoconsums">\n                        <field name="hist_autoconsum" nolabel="1" context="{\'default_cups_id\': active_id}" readonly="1"/>\n                    </page>\n                <page string="Històric de pòlisses">\n                        <field name="polisses" nolabel="1" colspan="4">\n                            </field>\n                    </page>\n                </notebook>\n                </form>',
     field_parent: false,
     fields: {
       aclarador: {

package/src/widgets/WidgetFactory.tsx

@@ -29,6 +29,7 @@ import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
 import { Timeline } from "./custom/Timeline";
 import { Indicator} from "./custom/Indicator";
+import { Tags } from "./custom/Tags";
 
 const getWidgetType = (type: string) => {
   switch (type) {
@@ -88,6 +89,8 @@ const getWidgetType = (type: string) => {
       return Timeline;
     case "indicator":
       return Indicator;
+    case "tags":
+      return Tags;
     default:
       return undefined;
   }

package/src/widgets/containers/Container.tsx

@@ -42,8 +42,11 @@ const Container = (props: Props): React.ReactElement => {
       numberOfColumns: columns,
     });
 
-    let rowWithEmptiesToFit;
-    if (i === 0) {
+    let rowWithEmptiesToFit = rowWithExpandedItems;
+    if (
+      i === 0 ||
+      !(row.length === 1 && row.some((widget) => widget.type === "group"))
+    ) {
       rowWithEmptiesToFit = fillRowWithEmptiesToFit({
         row: rowWithExpandedItems,
         numberOfColumns: columns,
@@ -53,33 +56,31 @@ const Container = (props: Props): React.ReactElement => {
       firstRow = firstRow.concat(rowWithEmptiesToFit);
     }
 
-    return (i === 0 ? rowWithEmptiesToFit : rowWithExpandedItems).map(
-      (item: Widget, j: number) => {
-        // We check if we have any label+field inside the container.
-        // In this scenario, we must format the grid accordingly
-        // Otherwise, the grid will divide uniformly
-        if (item instanceof Label && (item as Label).fieldForLabel) {
-          fieldInRows = true;
-        }
+    return rowWithEmptiesToFit.map((item: Widget, j: number) => {
+      // We check if we have any label+field inside the container.
+      // In this scenario, we must format the grid accordingly
+      // Otherwise, the grid will divide uniformly
+      if (item instanceof Label && (item as Label).fieldForLabel) {
+        fieldInRows = true;
+      }
 
-        const itemRowIndex = row.indexOf(item);
+      const itemRowIndex = row.indexOf(item);
 
-        return (
-          <div
-            key={`${i.toString()}-${itemRowIndex.toString()}`}
-            style={{
-              ...getSpanStyleForItem({ item, responsiveBehaviour }),
-              minWidth: 0,
-            }}
-          >
-            {createReactWidget({
-              ooui: item,
-              responsiveBehaviour,
-            })}
-          </div>
-        );
-      }
-    );
+      return (
+        <div
+          key={`${i.toString()}-${itemRowIndex.toString()}`}
+          style={{
+            ...getSpanStyleForItem({ item, responsiveBehaviour }),
+            minWidth: 0,
+          }}
+        >
+          {createReactWidget({
+            ooui: item,
+            responsiveBehaviour,
+          })}
+        </div>
+      );
+    });
   });
 
   const templateColumns =

package/src/widgets/custom/Tags.tsx

@@ -0,0 +1,97 @@
+import React, { useContext, useState } from "react";
+import { Tags as TagsOoui } from "@gisce/ooui";
+import Field from "@/common/Field";
+import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { FormContext, FormContextType } from "@/context/FormContext";
+import { Spin, Alert, Timeline as AntTimeline, Tag as AntTag } from "antd";
+import { readObjectValues } from "@/helpers/one2manyHelper";
+import { colorFromString } from "@/helpers/formHelper";
+
+type TagsProps = {
+  ooui: TagsOoui;
+};
+
+type TagsInputProps = TagsProps & {
+  value?: One2manyValue;
+  onChange?: (value: One2manyValue) => void;
+};
+
+export const Tags = (props: TagsProps) => {
+  const { ooui } = props;
+
+  return (
+    <Field type={"array"} {...props}>
+      <TagsInput ooui={ooui}  />
+    </Field>
+  );
+};
+
+export const TagsInput = (props: TagsInputProps) => {
+  const { value, ooui, onChange } = props;
+  const { items = [] } = value || {};
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const { relation, context, readOnly, field } = ooui;
+  const itemsToShow = items.filter(
+    (item) => item.values && item.operation !== "pendingRemove"
+  );
+
+  const formContext = useContext(FormContext) as FormContextType;
+  const { getContext } = formContext || {};
+
+  useDeepCompareEffect(() => {
+    fetchData();
+  }, [items]);
+
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
+    onChange?.({
+      items: changedValue,
+    });
+  };
+
+  async function fetchData() {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const itemsWithValues = await readObjectValues({
+        treeFields: [ooui.field],
+        formFields: [],
+        model: relation,
+        items,
+        context: { ...getContext?.(), ...context },
+      });
+
+      triggerChange(itemsWithValues);
+    } catch (err) {
+      setError(err as any);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
+  }
+
+  if (isLoading) {
+    return <Spin />;
+  }
+
+  return (
+    <>
+      <div style={{ padding: "1rem" }}>
+        
+        {itemsToShow.map((item, index) => {
+          const value = item.values?.[field];
+          return (
+            <AntTag key={index} color={colorFromString(value)}>{value}</AntTag>
+          );
+        })}
+      </div>
+     
+    </>
+  );
+};