@ironsource/shared-ui 2.1.12-rc.47 → 2.1.12-rc.48

package/components/tagsField/TagsField.vue2.js

@@ -0,0 +1,90 @@
+ import "../../TagsField.vue_vue_type_style_index_0_scoped_9760426b_lang.css"; import { defineComponent as R, ref as m, computed as B, openBlock as s, createElementBlock as p, mergeProps as k, unref as d, createElementVNode as x, normalizeClass as C, Fragment as P, renderList as $, createBlock as V, withDirectives as E, withKeys as A, withModifiers as H, vModelText as D, createCommentVNode as h } from "vue";
+import { TagsFieldTestIdModifiers as r } from "../../testids/index.js";
+import { useTestIdAttrs as K } from "../../utils/testIds.js";
+import M from "./TagsFieldChip.vue.js";
+import { WIDTH_PER_CHAR as U } from "./consts.js";
+import W from "../shared/FieldHelpText.vue.js";
+const L = ["placeholder", "disabled", "onKeyup"], N = {
+  key: 0,
+  class: "footer"
+}, Q = /* @__PURE__ */ R({
+  __name: "TagsField",
+  props: {
+    modelValue: { default: () => [] },
+    placeholder: { default: "" },
+    testId: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    feedbackVariant: { default: null },
+    feedbackText: { default: "" },
+    showFeedbackTextIcon: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: c }) {
+    const u = e, f = m(!1), n = m(""), I = B(
+      () => n.value.length * U + "px"
+    ), v = m(null), g = () => {
+      v.value?.focus();
+    }, y = () => {
+      f.value = !1, T();
+    }, T = () => {
+      const o = (n.value || "").trim();
+      o && (n.value = "", c("update:modelValue", [...u.modelValue, { text: o }]));
+    }, F = (o) => {
+      const l = u.modelValue || [];
+      c(
+        "update:modelValue",
+        l.filter((a, t) => t !== o)
+      );
+    }, w = (o, l) => {
+      const a = u.modelValue || [];
+      c(
+        "update:modelValue",
+        a.map((t, i) => i === o ? { ...t, text: l } : t)
+      );
+    }, b = K(u.testId, r);
+    return (o, l) => (s(), p("div", k({
+      class: ["tags-field", [`tags-field--${e.feedbackVariant}`]]
+    }, d(b)[d(r).WRAPPER], { onClick: g }), [
+      x("div", {
+        class: C(["input-container", { "input-container--focused": f.value }])
+      }, [
+        (s(!0), p(P, null, $(e.modelValue, (a, t) => (s(), V(M, {
+          key: t,
+          label: a.text,
+          "is-invalid": a.isInvalid,
+          "test-id": `${e.testId}-${d(r).CHIP}-${t}`,
+          onRemove: (i) => F(t),
+          "onUpdate:label": (i) => w(t, i)
+        }, null, 8, ["label", "is-invalid", "test-id", "onRemove", "onUpdate:label"]))), 128)),
+        E(x("input", k({
+          ref_key: "inputRef",
+          ref: v,
+          "onUpdate:modelValue": l[0] || (l[0] = (a) => n.value = a),
+          class: "input",
+          type: "text",
+          style: { width: d(I) },
+          placeholder: e.placeholder,
+          disabled: e.disabled
+        }, d(b)[d(r).FIELD], {
+          onFocus: l[1] || (l[1] = (a) => f.value = !0),
+          onBlur: y,
+          onKeyup: A(H(T, ["prevent"]), ["enter"])
+        }), null, 16, L), [
+          [D, n.value]
+        ])
+      ], 2),
+      e.feedbackText ? (s(), p("div", N, [
+        e.feedbackText ? (s(), V(W, {
+          key: 0,
+          text: e.feedbackText,
+          variant: e.feedbackVariant,
+          "show-icon": e.showFeedbackTextIcon,
+          "test-id": e.testId
+        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : h("", !0)
+      ])) : h("", !0)
+    ], 16));
+  }
+});
+export {
+  Q as default
+};

package/components/tagsField/TagsFieldChip.vue.d.ts

@@ -0,0 +1,45 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    isInvalid?: boolean;
+    testId?: string;
+}>, {
+    isInvalid: boolean;
+    label: string;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:label": (value: string) => void;
+    remove: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    isInvalid?: boolean;
+    testId?: string;
+}>, {
+    isInvalid: boolean;
+    label: string;
+    testId: string;
+}>>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+}, {
+    label: string;
+    testId: string;
+    isInvalid: boolean;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/tagsField/TagsFieldChip.vue.js

@@ -0,0 +1,7 @@
+import e from "./TagsFieldChip.vue2.js";
+/* empty css                    */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; //*');
+const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-d186b7ef"]]);
+export {
+  t as default
+};

package/components/tagsField/TagsFieldChip.vue2.js

@@ -0,0 +1,81 @@
+ import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; import { defineComponent as k, ref as p, computed as x, openBlock as C, createBlock as I, unref as t, normalizeClass as c, withModifiers as s, withCtx as f, createElementVNode as v, createVNode as m, createTextVNode as w, toDisplayString as T, withDirectives as B, isRef as E, withKeys as h, vShow as V, vModelText as K, nextTick as N } from "vue";
+import R from "../typography/v4/Typography.vue.js";
+import z from "../icon/v4/IconV4.vue.js";
+import "../icon/v4/IconFlag.vue.js";
+import D from "../chip/v4/ChipV4.vue.js";
+const M = { class: "chip-content" }, S = ["onKeyup"], j = /* @__PURE__ */ k({
+  __name: "TagsFieldChip",
+  props: {
+    label: { default: "" },
+    isInvalid: { type: Boolean, default: !1 },
+    testId: { default: "" }
+  },
+  emits: ["update:label", "remove"],
+  setup(l, { emit: n }) {
+    const b = l, i = p(!1), e = x({
+      get: () => b.label,
+      set: (d) => {
+        n("update:label", d);
+      }
+    }), r = p(null), g = () => r.value?.focus(), y = async () => {
+      i.value = !0, await N(), g();
+    }, o = () => {
+      i.value = !1, e.value || n("remove");
+    };
+    return (d, a) => (C(), I(t(D), {
+      class: c(["tags-field-chip", {
+        "tags-field-chip--editing": i.value,
+        "tags-field-chip--invalid": l.isInvalid
+      }]),
+      label: t(e),
+      "test-id": l.testId,
+      color: l.isInvalid ? "error" : "default",
+      onClick: s(y, ["stop"])
+    }, {
+      default: f(() => [
+        v("div", M, [
+          m(t(R), {
+            variant: "chipLabel",
+            class: c(["chip-label", { "chip-label--hidden": i.value }])
+          }, {
+            default: f(() => [
+              w(T(t(e)), 1)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          B(v("input", {
+            ref_key: "inputRef",
+            ref: r,
+            "onUpdate:modelValue": a[0] || (a[0] = (u) => E(e) ? e.value = u : null),
+            class: "chip-input",
+            spellcheck: "false",
+            onBlur: o,
+            onKeyup: [
+              h(s(o, ["prevent"]), ["enter"]),
+              h(s(o, ["prevent"]), ["esc"])
+            ]
+          }, null, 40, S), [
+            [V, i.value],
+            [
+              K,
+              t(e),
+              void 0,
+              { trim: !0 }
+            ]
+          ])
+        ]),
+        m(t(z), {
+          class: c(["clear-button", { "clear-button--invalid": l.isInvalid }]),
+          name: "x-circle",
+          size: "16px",
+          type: "fill",
+          onClick: a[1] || (a[1] = s((u) => n("remove"), ["stop"]))
+        }, null, 8, ["class"])
+      ]),
+      _: 1
+    }, 8, ["class", "label", "test-id", "color", "onClick"]));
+  }
+});
+export {
+  j as default
+};

package/components/tagsField/consts.d.ts

@@ -0,0 +1 @@
+export declare const WIDTH_PER_CHAR = 10;

package/components/tagsField/consts.js

@@ -0,0 +1,4 @@
+const o = 10;
+export {
+  o as WIDTH_PER_CHAR
+};

package/components/tagsField/index.d.ts

@@ -0,0 +1,75 @@
+import TagsField from './TagsField.vue';
+declare const TagsFieldTypes: () => import("vue").DefineComponent<{
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./TagsField.types").Tag[]>;
+        required: true;
+        default: () => any[];
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    feedbackText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    feedbackVariant: {
+        type: import("vue").PropType<"success" | "warning" | "error">;
+        default: any;
+    };
+    showFeedbackTextIcon: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("./TagsField.types").Tag[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./TagsField.types").Tag[]>;
+        required: true;
+        default: () => any[];
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    feedbackText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    feedbackVariant: {
+        type: import("vue").PropType<"success" | "warning" | "error">;
+        default: any;
+    };
+    showFeedbackTextIcon: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: import("./TagsField.types").Tag[]) => any;
+}, {
+    testId: string;
+    disabled: boolean;
+    modelValue: import("./TagsField.types").Tag[];
+    placeholder: string;
+    feedbackText: string;
+    feedbackVariant: "success" | "warning" | "error";
+    showFeedbackTextIcon: boolean;
+}>[];
+export { TagsField, TagsFieldTypes };

package/components/tagsField/index.js

@@ -0,0 +1,6 @@
+import e from "./TagsField.vue.js";
+const s = () => [e];
+export {
+  e as TagsField,
+  s as TagsFieldTypes
+};

package/index.d.ts

@@ -18503,6 +18503,7 @@ declare const _default: {
             "option-end"?(_: {
                 option: any;
             }): any;
+            footer?(_: {}): any;
         };
     });
     DefaultDropdownTrigger: {
@@ -23356,6 +23357,7 @@ declare const _default: {
             "option-end"?(_: {
                 option: any;
             }): any;
+            footer?(_: {}): any;
         };
     })) | import("vue").DefineComponent<{
         label: {
@@ -27863,3 +27865,4 @@ export * from '@/components/link';
 export * from '@/components/autocomplete';
 export * from '@/components/chart';
 export * from '@/components/columnPicker';
+export * from '@/components/tagsField';

package/index.js

@@ -1,8 +1,8 @@
-import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_lang.css';
+import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";
-import { MenuTypes as fo } from "./components/menu/index.js";
+import { MenuTypes as io } from "./components/menu/index.js";
 import { AppIconTypes as so } from "./components/appIcon/index.js";
 import { FloatingToolbarTypes as lo } from "./components/floatingToolbar/index.js";
 import { IncludeExcludeTypes as $o } from "./components/includeExclude/index.js";
@@ -20,8 +20,8 @@ import * as t from "./components/chip/v4/index.js";
 import * as m from "./components/switch/v3/index.js";
 import * as p from "./components/switch/v4/index.js";
 import * as a from "./components/dropdown/v3/index.js";
-import * as i from "./components/dropdown/v4/index.js";
-import * as f from "./components/search/v3/index.js";
+import * as f from "./components/dropdown/v4/index.js";
+import * as i from "./components/search/v3/index.js";
 import * as d from "./components/search/v4/index.js";
 import * as x from "./components/filtersPanel/v3/index.js";
 import * as s from "./components/filtersPanel/v4/index.js";
@@ -76,37 +76,39 @@ import { LinkTypes as Qo } from "./components/link/index.js";
 import { AutocompleteTypes as Uo } from "./components/autocomplete/index.js";
 import { ChartTypes as Xo } from "./components/chart/index.js";
 import { ColumnPickerTypes as or } from "./components/columnPicker/index.js";
-import { default as er } from "./components/appTrigger/AppTrigger.vue.js";
-import { default as mr } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
-import { default as ar } from "./components/menuItem/MenuItem.vue.js";
-import { default as fr } from "./components/menu/Menu.vue.js";
-import { default as xr } from "./components/appIcon/AppIcon.vue.js";
-import { default as nr } from "./components/floatingToolbar/FloatingToolbar.vue.js";
-import { default as ur } from "./components/includeExclude/IncludeExclude.vue.js";
-import { default as Tr } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
-import { default as yr } from "./components/includeExclude/IncludeExcludeOption.vue.js";
-import { default as Fr } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
-import { default as Ar } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
-import { default as Cr } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
-import { default as hr } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
-import { default as Mr } from "./components/filterDropdown/FilterDropdown.vue.js";
-import { default as wr } from "./components/filterDropdown/AddFilterButton.vue.js";
-import { default as Or } from "./components/typography/Heading.vue.js";
-import { default as Sr } from "./components/typography/Text.vue.js";
-import { default as Hr } from "./components/typography/v4/Typography.vue.js";
-import { default as Nr } from "./components/multibar/MultiBar.vue.js";
-import { default as Jr } from "./components/layout/FoldableSection.vue.js";
-import { default as Rr } from "./components/forms/FormRow.vue.js";
-import { default as jr } from "./components/forms/FormCard.vue.js";
-import { default as zr } from "./components/forms/CardPanel.vue.js";
-import { default as Qr } from "./components/forms/FormField.vue.js";
-import { default as Ur } from "./components/banner/Banner.vue.js";
-import { default as Xr } from "./components/alert/Alert.vue.js";
-import { default as oe } from "./components/link/Link.vue.js";
-import { default as ee } from "./components/autocomplete/Autocomplete.vue.js";
-import { default as me } from "./components/chart/Chart.vue.js";
-import { ChartType as ae, TooltipOrder as ie, TrendDirection as fe } from "./components/chart/types.js";
-import { default as xe } from "./components/columnPicker/ColumnPicker.vue.js";
+import { TagsFieldTypes as er } from "./components/tagsField/index.js";
+import { default as mr } from "./components/appTrigger/AppTrigger.vue.js";
+import { default as ar } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
+import { default as ir } from "./components/menuItem/MenuItem.vue.js";
+import { default as xr } from "./components/menu/Menu.vue.js";
+import { default as nr } from "./components/appIcon/AppIcon.vue.js";
+import { default as ur } from "./components/floatingToolbar/FloatingToolbar.vue.js";
+import { default as Tr } from "./components/includeExclude/IncludeExclude.vue.js";
+import { default as yr } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
+import { default as Fr } from "./components/includeExclude/IncludeExcludeOption.vue.js";
+import { default as Ar } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
+import { default as Cr } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
+import { default as hr } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
+import { default as Mr } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
+import { default as wr } from "./components/filterDropdown/FilterDropdown.vue.js";
+import { default as Or } from "./components/filterDropdown/AddFilterButton.vue.js";
+import { default as Sr } from "./components/typography/Heading.vue.js";
+import { default as Hr } from "./components/typography/Text.vue.js";
+import { default as Nr } from "./components/typography/v4/Typography.vue.js";
+import { default as Jr } from "./components/multibar/MultiBar.vue.js";
+import { default as Rr } from "./components/layout/FoldableSection.vue.js";
+import { default as jr } from "./components/forms/FormRow.vue.js";
+import { default as zr } from "./components/forms/FormCard.vue.js";
+import { default as Qr } from "./components/forms/CardPanel.vue.js";
+import { default as Ur } from "./components/forms/FormField.vue.js";
+import { default as Xr } from "./components/banner/Banner.vue.js";
+import { default as oe } from "./components/alert/Alert.vue.js";
+import { default as ee } from "./components/link/Link.vue.js";
+import { default as me } from "./components/autocomplete/Autocomplete.vue.js";
+import { default as ae } from "./components/chart/Chart.vue.js";
+import { ChartType as ie, TooltipOrder as de, TrendDirection as xe } from "./components/chart/types.js";
+import { default as ne } from "./components/columnPicker/ColumnPicker.vue.js";
+import { default as ue } from "./components/tagsField/TagsField.vue.js";
 const Z = {
   ...e,
   ...t,
@@ -115,8 +117,8 @@ const Z = {
   ...o,
   ...r,
   ...a,
-  ...i,
   ...f,
+  ...i,
   ...d,
   ...x,
   ...s,
@@ -163,58 +165,60 @@ const Z = {
   ...X
 };
 export {
-  wr as AddFilterButton,
-  Xr as Alert,
+  Or as AddFilterButton,
+  oe as Alert,
   zo as AlertTypes,
-  xr as AppIcon,
+  nr as AppIcon,
   so as AppIconTypes,
-  er as AppTrigger,
+  mr as AppTrigger,
   eo as AppTriggerTypes,
-  ee as Autocomplete,
-  mr as AutocompleteDropdown,
+  me as Autocomplete,
+  ar as AutocompleteDropdown,
   mo as AutocompleteDropdownTypes,
   Uo as AutocompleteTypes,
-  Ur as Banner,
+  Xr as Banner,
   jo as BannerTypes,
-  zr as CardPanel,
-  me as Chart,
-  ae as ChartType,
+  Qr as CardPanel,
+  ae as Chart,
+  ie as ChartType,
   Xo as ChartTypes,
-  xe as ColumnPicker,
+  ne as ColumnPicker,
   or as ColumnPickerTypes,
-  Mr as FilterDropdown,
+  wr as FilterDropdown,
   Fo as FilterDropdownTypes,
-  nr as FloatingToolbar,
+  ur as FloatingToolbar,
   lo as FloatingToolbarTypes,
-  Jr as FoldableSection,
+  Rr as FoldableSection,
   Mo as FoldableSectionTypes,
-  jr as FormCard,
+  zr as FormCard,
   wo as FormCardTypes,
-  Qr as FormField,
+  Ur as FormField,
   ko as FormFieldTypes,
-  Rr as FormRow,
-  Or as Heading,
+  jr as FormRow,
+  Sr as Heading,
   co as ID_INJECTION_KEY,
-  ur as IncludeExclude,
-  Cr as IncludeExcludeAppHeader,
-  Ar as IncludeExcludeAppTrigger,
-  hr as IncludeExcludeChipFilter,
-  Tr as IncludeExcludeDragDrop,
-  yr as IncludeExcludeOption,
-  Fr as IncludeExcludeOptionDraggable,
+  Tr as IncludeExclude,
+  hr as IncludeExcludeAppHeader,
+  Cr as IncludeExcludeAppTrigger,
+  Mr as IncludeExcludeChipFilter,
+  yr as IncludeExcludeDragDrop,
+  Fr as IncludeExcludeOption,
+  Ar as IncludeExcludeOptionDraggable,
   $o as IncludeExcludeTypes,
-  oe as Link,
+  ee as Link,
   Qo as LinkTypes,
-  fr as Menu,
-  ar as MenuItem,
+  xr as Menu,
+  ir as MenuItem,
   ao as MenuItemTypes,
-  fo as MenuTypes,
-  Nr as MultiBar,
+  io as MenuTypes,
+  Jr as MultiBar,
   ho as MultiBarTypes,
-  Sr as Text,
-  ie as TooltipOrder,
-  fe as TrendDirection,
-  Hr as Typography,
+  ue as TagsField,
+  er as TagsFieldTypes,
+  Hr as Text,
+  de as TooltipOrder,
+  xe as TrendDirection,
+  Nr as Typography,
   Ao as TypographyTypes,
   Co as TypographyTypesV4,
   Z as default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.12-rc.47",
+  "version": "2.1.12-rc.48",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -153,6 +153,7 @@
     "./menuItem": "./components/menuItem/MenuItem.vue.js",
     "./menu": "./components/menu/Menu.vue.js",
     "./columnPicker": "./components/columnPicker/index.js",
+    "./tagsField": "./components/tagsField/index.js",
     ".": {
       "import": "./index.js"
     },
@@ -259,6 +260,9 @@
       "columnPicker": [
         "./components/columnPicker/index.d.ts"
       ],
+      "tagsField": [
+        "./components/tagsField/index.d.ts"
+      ],
       "editable": [
         "./components/table-cells/v3/Editable.vue.d.ts"
       ],

package/testids/index.d.ts

@@ -72,6 +72,11 @@ export declare enum InputTestIdModifiers {
     CLEAR_BUTTON = "input-clear-button",
     LOADING = "input-loading"
 }
+export declare enum TagsFieldTestIdModifiers {
+    WRAPPER = "tags-field-wrapper",
+    FIELD = "tags-field-field",
+    CHIP = "tags-field-chip"
+}
 export declare enum CheckboxTestIdModifiers {
     WRAPPER = "cb-wrapper",
     LABEL = "cb-label",