@castlabs/ui 4.18.5 → 4.19.0

package/dist/castlabs-ui.common.js

@@ -2625,7 +2625,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   name: 'ClUI',
   computed: {
     version: function () {
-      return "4.18.5" ?? 0;
+      return "4.19.0" ?? 0;
     }
   }
 }));
@@ -2687,7 +2687,7 @@ template.install = Vue => {
   Vue.component(template.name ?? 'ClNoName', template);
 };
 /* harmony default export */ var ClAlert = (template);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/widget/ClBackCancelOk/template.vue?vue&type=template&id=0775da53&ts=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/widget/ClBackCancelOk/template.vue?vue&type=template&id=37ea6a9d&ts=true
 
 const _hoisted_1 = {
   key: 0
@@ -2696,7 +2696,7 @@ const _hoisted_2 = {
   key: 1
 };
 const _hoisted_3 = ["disabled"];
-function templatevue_type_template_id_0775da53_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+function templatevue_type_template_id_37ea6a9d_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_cl_modal = (0,external_vue_namespaceObject.resolveComponent)("cl-modal");
   const _component_cl_section_main = (0,external_vue_namespaceObject.resolveComponent)("cl-section-main");
   return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createBlock)(_component_cl_section_main, {
@@ -2730,18 +2730,18 @@ function templatevue_type_template_id_0775da53_ts_true_render(_ctx, _cache, $pro
         type: "button",
         class: "btn cl-btn-outline-text it-cancel",
         onClick: _cache[2] || (_cache[2] = $event => _ctx.emit('cancel', true))
-      }, "Discard changes")]),
+      }, " Discard changes ")]),
       "footer-right": (0,external_vue_namespaceObject.withCtx)(() => [(0,external_vue_namespaceObject.createElementVNode)("button", {
         type: "button",
         class: "btn cl-btn-outline-primary it-ok",
         onClick: _cache[3] || (_cache[3] = $event => _ctx.clModalHide())
-      }, "Continue editing")]),
+      }, " Continue editing ")]),
       _: 3
     }, 8, ["id"])]),
     _: 3
   });
 }
-;// ./src/components/widget/ClBackCancelOk/template.vue?vue&type=template&id=0775da53&ts=true
+;// ./src/components/widget/ClBackCancelOk/template.vue?vue&type=template&id=37ea6a9d&ts=true
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
@@ -3540,7 +3540,7 @@ const clRefHTMLElement = ref => ref;
 
 
 ;
-const ClBackCancelOk_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClBackCancelOk_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_0775da53_ts_true_render]])
+const ClBackCancelOk_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClBackCancelOk_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_37ea6a9d_ts_true_render]])
 
 /* harmony default export */ var ClBackCancelOk_template = (ClBackCancelOk_template_exports_);
 ;// ./src/components/widget/ClBackCancelOk/index.ts
@@ -4045,15 +4045,15 @@ ClDropzone_template.install = Vue => {
   Vue.component(ClDropzone_template.name ?? 'ClNoName', ClDropzone_template);
 };
 /* harmony default export */ var ClDropzone = (ClDropzone_template);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/form/ClField/template.vue?vue&type=template&id=747d9c1a&ts=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/form/ClField/template.vue?vue&type=template&id=18037b9c&ts=true
 
-const templatevue_type_template_id_747d9c1a_ts_true_hoisted_1 = ["for"];
-const templatevue_type_template_id_747d9c1a_ts_true_hoisted_2 = {
+const templatevue_type_template_id_18037b9c_ts_true_hoisted_1 = ["for"];
+const templatevue_type_template_id_18037b9c_ts_true_hoisted_2 = {
   key: 0,
   class: "required"
 };
-const templatevue_type_template_id_747d9c1a_ts_true_hoisted_3 = ["id", "disabled", "required", "autofocus", "placeholder"];
-const templatevue_type_template_id_747d9c1a_ts_true_hoisted_4 = ["id", "disabled", "required", "autofocus"];
+const templatevue_type_template_id_18037b9c_ts_true_hoisted_3 = ["id", "disabled", "required", "autofocus", "placeholder"];
+const templatevue_type_template_id_18037b9c_ts_true_hoisted_4 = ["id", "disabled", "required", "autofocus"];
 const _hoisted_5 = ["id", "type", "placeholder", "minlength", "maxlength", "pattern", "disabled", "required", "autofocus"];
 const _hoisted_6 = ["id", "for"];
 const _hoisted_7 = {
@@ -4063,14 +4063,14 @@ const _hoisted_8 = {
   key: 1,
   class: "valid-feedback valid-feedback-none"
 };
-function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+function templatevue_type_template_id_18037b9c_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.label ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("label", {
     key: 0,
     for: _ctx.$uid,
     class: (0,external_vue_namespaceObject.normalizeClass)(["form-label", {
       disabled: _ctx.disabled
     }])
-  }, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.label), 1), _ctx.required ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_747d9c1a_ts_true_hoisted_2, "*")) : (0,external_vue_namespaceObject.createCommentVNode)("", true)], 10, templatevue_type_template_id_747d9c1a_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), _ctx.type === 'textarea' ? (0,external_vue_namespaceObject.withDirectives)(((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("textarea", (0,external_vue_namespaceObject.mergeProps)({
+  }, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.label), 1), _ctx.required ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_18037b9c_ts_true_hoisted_2, "*")) : (0,external_vue_namespaceObject.createCommentVNode)("", true)], 10, templatevue_type_template_id_18037b9c_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), _ctx.type === 'textarea' ? (0,external_vue_namespaceObject.withDirectives)(((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("textarea", (0,external_vue_namespaceObject.mergeProps)({
     key: 1,
     id: _ctx.$uid
   }, _ctx.$attrs, {
@@ -4081,29 +4081,27 @@ function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $pro
     required: _ctx.required,
     autofocus: _ctx.autofocus,
     placeholder: _ctx.placeholder,
-    onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('update:modelValue', _ctx.modelValue)),
-    onBlur: _cache[2] || (_cache[2] =
-    //@ts-ignore
-    (...args) => _ctx.validate && _ctx.validate(...args))
-  }), null, 16, templatevue_type_template_id_747d9c1a_ts_true_hoisted_3)), [[external_vue_namespaceObject.vModelText, _ctx.modelValue]]) : _ctx.type === 'select' ? (0,external_vue_namespaceObject.withDirectives)(((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("select", (0,external_vue_namespaceObject.mergeProps)({
+    onInput: _cache[1] || (_cache[1] = $event => _ctx.validate()),
+    onChange: _cache[2] || (_cache[2] = $event => _ctx.validate()),
+    onBlur: _cache[3] || (_cache[3] = $event => _ctx.validate(true))
+  }), null, 16, templatevue_type_template_id_18037b9c_ts_true_hoisted_3)), [[external_vue_namespaceObject.vModelText, _ctx.modelValue]]) : _ctx.type === 'select' ? (0,external_vue_namespaceObject.withDirectives)(((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("select", (0,external_vue_namespaceObject.mergeProps)({
     key: 2,
     id: _ctx.$uid,
-    "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.modelValue = $event),
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.modelValue = $event),
     class: ["form-select", _ctx.clazz],
     disabled: _ctx.disabled,
     required: _ctx.required,
     autofocus: _ctx.autofocus
   }, _ctx.$attrs, {
-    onChange: _cache[4] || (_cache[4] = $event => _ctx.validate()),
-    onBlur: _cache[5] || (_cache[5] =
-    //@ts-ignore
-    (...args) => _ctx.validate && _ctx.validate(...args))
-  }), [(0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, templatevue_type_template_id_747d9c1a_ts_true_hoisted_4)), [[external_vue_namespaceObject.vModelSelect, _ctx.modelValue]]) : (0,external_vue_namespaceObject.withDirectives)(((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("input", (0,external_vue_namespaceObject.mergeProps)({
+    onInput: _cache[5] || (_cache[5] = $event => _ctx.validate()),
+    onChange: _cache[6] || (_cache[6] = $event => _ctx.validate()),
+    onBlur: _cache[7] || (_cache[7] = $event => _ctx.validate(true))
+  }), [(0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, templatevue_type_template_id_18037b9c_ts_true_hoisted_4)), [[external_vue_namespaceObject.vModelSelect, _ctx.modelValue]]) : (0,external_vue_namespaceObject.withDirectives)(((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("input", (0,external_vue_namespaceObject.mergeProps)({
     key: 3,
     id: _ctx.$uid
   }, _ctx.$attrs, {
     ref: "input",
-    "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.modelValue = $event),
+    "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => _ctx.modelValue = $event),
     type: _ctx.type,
     class: _ctx.clazz,
     placeholder: _ctx.placeholder,
@@ -4113,11 +4111,9 @@ function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $pro
     disabled: _ctx.disabled,
     required: _ctx.required,
     autofocus: _ctx.autofocus,
-    onInput: _cache[7] || (_cache[7] = $event => _ctx.$emit('update:modelValue', _ctx.modelValue)),
-    onChange: _cache[8] || (_cache[8] = $event => _ctx.changed(_ctx.modelValue)),
-    onBlur: _cache[9] || (_cache[9] =
-    //@ts-ignore
-    (...args) => _ctx.validate && _ctx.validate(...args))
+    onInput: _cache[9] || (_cache[9] = $event => _ctx.validate()),
+    onChange: _cache[10] || (_cache[10] = $event => _ctx.validate()),
+    onBlur: _cache[11] || (_cache[11] = $event => _ctx.validate(true))
   }), null, 16, _hoisted_5)), [[external_vue_namespaceObject.vModelDynamic, _ctx.modelValue]]), _ctx.type === 'file' ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("label", {
     key: 4,
     id: `${_ctx.$uid}-companion`,
@@ -4132,7 +4128,7 @@ function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $pro
     }])
   }, (0,external_vue_namespaceObject.toDisplayString)(_ctx.help), 3)) : ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("p", _hoisted_8))], 64)) : (0,external_vue_namespaceObject.createCommentVNode)("", true)], 64);
 }
-;// ./src/components/form/ClField/template.vue?vue&type=template&id=747d9c1a&ts=true
+;// ./src/components/form/ClField/template.vue?vue&type=template&id=18037b9c&ts=true
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/form/ClField/template.vue?vue&type=script&lang=ts
 
@@ -4205,13 +4201,13 @@ function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $pro
       default: undefined
     }
   },
-  emits: ['update:valid', 'update:modelValue'],
+  emits: ['valid', 'invalid', 'changed', 'update:modelValue'],
   data() {
     return {
       valid: true,
-      modelValue: this.value || '',
-      invalidMessage: this.error || 'Input invalid.',
-      filePlaceholder: this.placeholder || 'Please select ...'
+      modelValue: this.value ?? '',
+      invalidMessage: this.error ?? 'Input invalid.',
+      filePlaceholder: this.placeholder ?? 'Please select ...'
     };
   },
   computed: {
@@ -4234,72 +4230,69 @@ function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $pro
     if (this.prevalidate) this.validate();
   },
   methods: {
-    runAutotrim: function (value) {
+    runAutotrim: function () {
       if (this.autotrim) {
         const input = this.$refs.input;
-        input.value = (value ?? input.value).trim();
+        input.value = input.value.trim();
         this.modelValue = input.value;
-        this.$emit('update:modelValue', this.modelValue);
-      }
-    },
-    changed: function (value) {
-      this.runAutotrim(value);
-      if (this.type === 'file') {
-        this.filePlaceholder = value.replace(/.*[/\\]/, '');
-        this.validate();
       }
     },
     focus: function () {
       this.$nextTick(() => {
         ;
-        this.$refs.input.focus();
+        this.$refs.input?.focus();
       });
     },
-    validate: function () {
-      this.runAutotrim();
+    validate: function (trim = false) {
+      this.valid = true;
+      if (trim && this.autotrim) this.runAutotrim();
+      if (this.type === 'file') {
+        this.filePlaceholder = this.modelValue.replace(/.*[/\\]/, '');
+      }
       if (this.required && (this.modelValue?.length ?? 0) <= 0) {
-        this.invalidMessage = 'This field may not be blank.';
-        this.valid = false;
+        this.setInvalid('This field may not be blank.');
       } else {
         switch (this.type) {
           case 'email':
-            this.valid = this.validateEMail();
+            this.validateEMail();
             break;
           default:
-            this.valid = this.validateText();
+            this.validateText();
         }
       }
-      this.$emit('update:valid', this.valid);
-      this.$emit('update:modelValue', this.modelValue);
+      if (this.valid) this.setValid(this.modelValue);
     },
     validateText: function () {
-      if (this.minlength && (this.modelValue?.length ?? 0) < Number(this.minlength)) {
-        this.invalidMessage = this.error || `Please enter at least ${this.minlength} characters.`;
-        return false;
+      const minlength = Number(this.minlength);
+      const maxlength = Number(this.maxlength);
+      if (this.minlength && (this.modelValue?.length ?? 0) < minlength) {
+        this.setInvalid(this.error ?? `Please enter at least ${minlength} character` + (minlength > 1 ? 's.' : '.'));
       }
-      if (this.maxlength && (this.modelValue?.length ?? 0) > Number(this.maxlength)) {
-        this.invalidMessage = this.error || `Please enter at most ${this.minlength} characters.`;
-        return false;
+      if (this.maxlength && (this.modelValue?.length ?? 0) > maxlength) {
+        this.setInvalid(this.error ?? `Please enter at most ${maxlength} character` + (minlength > 1 ? 's.' : '.'));
       }
       if (this.pattern && !new RegExp(this.pattern, 'g').test(this.modelValue)) {
-        this.invalidMessage = this.error || 'Input invalid.';
-        return false;
+        this.setInvalid(this.error);
       }
-      return true;
     },
     validateEMail: function () {
-      this.invalidMessage = 'Please enter a valid email address.';
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+[^\s@.]$/.test(this.modelValue);
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+[^\s@.]$/.test(this.modelValue)) {
+        this.setInvalid('Please enter a valid email address.');
+      }
     },
     setValid: function (value = '') {
       this.valid = true;
       this.modelValue = value;
-      this.$emit('update:valid', this.valid);
+      this.$emit('update:modelValue', this.modelValue);
+      this.$emit('valid', this.help ?? '');
+      this.$emit('changed', this.modelValue);
     },
     setInvalid: function (message) {
       this.valid = false;
-      this.invalidMessage = message;
-      this.$emit('update:valid', this.valid);
+      this.invalidMessage = message ?? 'Input invalid.';
+      this.$emit('update:modelValue', this.modelValue);
+      this.$emit('invalid', this.invalidMessage);
+      this.$emit('changed', this.modelValue);
     }
   }
 }));
@@ -4311,7 +4304,7 @@ function templatevue_type_template_id_747d9c1a_ts_true_render(_ctx, _cache, $pro
 
 
 ;
-const ClField_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClField_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_747d9c1a_ts_true_render]])
+const ClField_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClField_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_18037b9c_ts_true_render]])
 
 /* harmony default export */ var ClField_template = (ClField_template_exports_);
 ;// ./src/components/form/ClField/index.ts
@@ -4424,31 +4417,31 @@ ClFieldCheck_template.install = Vue => {
   Vue.component(ClFieldCheck_template.name ?? 'ClNoName', ClFieldCheck_template);
 };
 /* harmony default export */ var ClFieldCheck = (ClFieldCheck_template);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/form/ClFieldGroup/template.vue?vue&type=template&id=9e079810&ts=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/form/ClFieldGroup/template.vue?vue&type=template&id=576088e6&ts=true
 
-const templatevue_type_template_id_9e079810_ts_true_hoisted_1 = {
+const templatevue_type_template_id_576088e6_ts_true_hoisted_1 = {
   key: 0,
   class: "form-label"
 };
-const templatevue_type_template_id_9e079810_ts_true_hoisted_2 = {
+const templatevue_type_template_id_576088e6_ts_true_hoisted_2 = {
   key: 0,
   class: "required"
 };
-const templatevue_type_template_id_9e079810_ts_true_hoisted_3 = {
+const templatevue_type_template_id_576088e6_ts_true_hoisted_3 = {
   class: "invalid-feedback"
 };
-const templatevue_type_template_id_9e079810_ts_true_hoisted_4 = {
+const templatevue_type_template_id_576088e6_ts_true_hoisted_4 = {
   key: 1,
   class: "valid-feedback"
 };
-function templatevue_type_template_id_9e079810_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.label ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("label", templatevue_type_template_id_9e079810_ts_true_hoisted_1, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.label), 1), _ctx.required ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_9e079810_ts_true_hoisted_2, "*")) : (0,external_vue_namespaceObject.createCommentVNode)("", true)])) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("div", {
+function templatevue_type_template_id_576088e6_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.label ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("label", templatevue_type_template_id_576088e6_ts_true_hoisted_1, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.label), 1), _ctx.required ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_576088e6_ts_true_hoisted_2, "*")) : (0,external_vue_namespaceObject.createCommentVNode)("", true)])) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_vue_namespaceObject.normalizeClass)(["input-group", {
       invalid: !_ctx.valid
     }])
-  }, [(0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2), (0,external_vue_namespaceObject.createElementVNode)("p", templatevue_type_template_id_9e079810_ts_true_hoisted_3, (0,external_vue_namespaceObject.toDisplayString)(_ctx.invalidMessage), 1), _ctx.help ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("p", templatevue_type_template_id_9e079810_ts_true_hoisted_4, (0,external_vue_namespaceObject.toDisplayString)(_ctx.help), 1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true)], 64);
+  }, [(0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2), (0,external_vue_namespaceObject.createElementVNode)("p", templatevue_type_template_id_576088e6_ts_true_hoisted_3, (0,external_vue_namespaceObject.toDisplayString)(_ctx.invalidMessage), 1), _ctx.help ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("p", templatevue_type_template_id_576088e6_ts_true_hoisted_4, (0,external_vue_namespaceObject.toDisplayString)(_ctx.help), 1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true)], 64);
 }
-;// ./src/components/form/ClFieldGroup/template.vue?vue&type=template&id=9e079810&ts=true
+;// ./src/components/form/ClFieldGroup/template.vue?vue&type=template&id=576088e6&ts=true
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/form/ClFieldGroup/template.vue?vue&type=script&lang=ts
 
@@ -4473,22 +4466,20 @@ function templatevue_type_template_id_9e079810_ts_true_render(_ctx, _cache, $pro
       default: false
     }
   },
-  emits: ['update:valid'],
   data() {
     return {
       valid: true,
-      invalidMessage: this.error || 'Input invalid.'
+      invalidMessage: this.error ?? 'Input invalid.'
     };
   },
   methods: {
     setValid: function () {
       this.valid = true;
-      this.$emit('update:valid', this.valid);
+      this.invalidMessage = 'Input invalid.';
     },
     setInvalid: function (message) {
       this.valid = false;
-      this.invalidMessage = message;
-      this.$emit('update:valid', this.valid);
+      this.invalidMessage = message ?? 'Input invalid.';
     }
   }
 }));
@@ -4500,7 +4491,7 @@ function templatevue_type_template_id_9e079810_ts_true_render(_ctx, _cache, $pro
 
 
 ;
-const ClFieldGroup_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClFieldGroup_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_9e079810_ts_true_render]])
+const ClFieldGroup_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClFieldGroup_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_576088e6_ts_true_render]])
 
 /* harmony default export */ var ClFieldGroup_template = (ClFieldGroup_template_exports_);
 ;// ./src/components/form/ClFieldGroup/index.ts
@@ -4509,16 +4500,22 @@ ClFieldGroup_template.install = Vue => {
   Vue.component(ClFieldGroup_template.name ?? 'ClNoName', ClFieldGroup_template);
 };
 /* harmony default export */ var ClFieldGroup = (ClFieldGroup_template);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClHashtag/template.vue?vue&type=template&id=1bb7c933&ts=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClHashtag/template.vue?vue&type=template&id=3afb32b8&ts=true
 
-function templatevue_type_template_id_1bb7c933_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", {
-    class: (0,external_vue_namespaceObject.normalizeClass)(["badge cl-hashtag", {
+const templatevue_type_template_id_3afb32b8_ts_true_hoisted_1 = {
+  key: 0,
+  class: "cl-hashtag-derived"
+};
+function templatevue_type_template_id_3afb32b8_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.derived ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_3afb32b8_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("span", {
+    class: (0,external_vue_namespaceObject.normalizeClass)({
+      'cl-hashtag-dark': !_ctx.primary && !_ctx.secondary,
+      'cl-hashtag-primary': _ctx.primary,
       'cl-hashtag-secondary': _ctx.secondary
-    }])
-  }, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.name), 1), (0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2);
+    })
+  }, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.name), 1), (0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)], 64);
 }
-;// ./src/components/text/ClHashtag/template.vue?vue&type=template&id=1bb7c933&ts=true
+;// ./src/components/text/ClHashtag/template.vue?vue&type=template&id=3afb32b8&ts=true
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClHashtag/template.vue?vue&type=script&lang=ts
 
@@ -4529,9 +4526,17 @@ function templatevue_type_template_id_1bb7c933_ts_true_render(_ctx, _cache, $pro
       type: String,
       default: ''
     },
+    primary: {
+      type: Boolean,
+      default: false
+    },
     secondary: {
       type: Boolean,
       default: false
+    },
+    derived: {
+      type: Boolean,
+      default: false
     }
   }
 }));
@@ -4543,7 +4548,7 @@ function templatevue_type_template_id_1bb7c933_ts_true_render(_ctx, _cache, $pro
 
 
 ;
-const ClHashtag_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClHashtag_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_1bb7c933_ts_true_render]])
+const ClHashtag_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClHashtag_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_3afb32b8_ts_true_render]])
 
 /* harmony default export */ var ClHashtag_template = (ClHashtag_template_exports_);
 ;// ./src/components/text/ClHashtag/index.ts
@@ -5711,19 +5716,22 @@ ClPagination_template.install = Vue => {
   Vue.component(ClPagination_template.name ?? 'ClNoName', ClPagination_template);
 };
 /* harmony default export */ var ClPagination = (ClPagination_template);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClPlan/template.vue?vue&type=template&id=2138e8a8&ts=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClPlan/template.vue?vue&type=template&id=ca6c1cb0&ts=true
 
-const templatevue_type_template_id_2138e8a8_ts_true_hoisted_1 = {
+const templatevue_type_template_id_ca6c1cb0_ts_true_hoisted_1 = {
   key: 0,
-  class: "badge cl-plan cl-badge-derived"
-};
-const templatevue_type_template_id_2138e8a8_ts_true_hoisted_2 = {
-  class: "badge cl-plan"
+  class: "cl-plan-derived"
 };
-function templatevue_type_template_id_2138e8a8_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.derived ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_2138e8a8_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("span", templatevue_type_template_id_2138e8a8_ts_true_hoisted_2, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.name), 1), (0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])], 64);
+function templatevue_type_template_id_ca6c1cb0_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.derived ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_ca6c1cb0_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("span", {
+    class: (0,external_vue_namespaceObject.normalizeClass)({
+      'cl-plan-dark': !_ctx.primary && !_ctx.secondary,
+      'cl-plan-primary': _ctx.primary,
+      'cl-plan-secondary': _ctx.secondary
+    })
+  }, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.name), 1), (0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)], 64);
 }
-;// ./src/components/text/ClPlan/template.vue?vue&type=template&id=2138e8a8&ts=true
+;// ./src/components/text/ClPlan/template.vue?vue&type=template&id=ca6c1cb0&ts=true
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClPlan/template.vue?vue&type=script&lang=ts
 
@@ -5734,6 +5742,14 @@ function templatevue_type_template_id_2138e8a8_ts_true_render(_ctx, _cache, $pro
       type: String,
       default: ''
     },
+    primary: {
+      type: Boolean,
+      default: false
+    },
+    secondary: {
+      type: Boolean,
+      default: false
+    },
     derived: {
       type: Boolean,
       default: false
@@ -5748,7 +5764,7 @@ function templatevue_type_template_id_2138e8a8_ts_true_render(_ctx, _cache, $pro
 
 
 ;
-const ClPlan_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClPlan_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_2138e8a8_ts_true_render]])
+const ClPlan_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClPlan_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_ca6c1cb0_ts_true_render]])
 
 /* harmony default export */ var ClPlan_template = (ClPlan_template_exports_);
 ;// ./src/components/text/ClPlan/index.ts
@@ -5757,20 +5773,22 @@ ClPlan_template.install = Vue => {
   Vue.component(ClPlan_template.name ?? 'ClNoName', ClPlan_template);
 };
 /* harmony default export */ var ClPlan = (ClPlan_template);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClRole/template.vue?vue&type=template&id=8fc28bb2&ts=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClRole/template.vue?vue&type=template&id=742447da&ts=true
 
-const templatevue_type_template_id_8fc28bb2_ts_true_hoisted_1 = {
+const templatevue_type_template_id_742447da_ts_true_hoisted_1 = {
   key: 0,
-  class: "badge cl-role cl-badge-derived"
+  class: "cl-role-derived"
 };
-function templatevue_type_template_id_8fc28bb2_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.derived ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_8fc28bb2_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("span", {
-    class: (0,external_vue_namespaceObject.normalizeClass)(["cl-role", {
-      'cl-role-primary': _ctx.primary
-    }])
+function templatevue_type_template_id_742447da_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)(external_vue_namespaceObject.Fragment, null, [_ctx.derived ? ((0,external_vue_namespaceObject.openBlock)(), (0,external_vue_namespaceObject.createElementBlock)("span", templatevue_type_template_id_742447da_ts_true_hoisted_1)) : (0,external_vue_namespaceObject.createCommentVNode)("", true), (0,external_vue_namespaceObject.createElementVNode)("span", {
+    class: (0,external_vue_namespaceObject.normalizeClass)({
+      'cl-role-dark': !_ctx.primary && !_ctx.secondary,
+      'cl-role-primary': _ctx.primary,
+      'cl-role-secondary': _ctx.secondary
+    })
   }, [(0,external_vue_namespaceObject.createTextVNode)((0,external_vue_namespaceObject.toDisplayString)(_ctx.name), 1), (0,external_vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)], 64);
 }
-;// ./src/components/text/ClRole/template.vue?vue&type=template&id=8fc28bb2&ts=true
+;// ./src/components/text/ClRole/template.vue?vue&type=template&id=742447da&ts=true
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/text/ClRole/template.vue?vue&type=script&lang=ts
 
@@ -5785,6 +5803,10 @@ function templatevue_type_template_id_8fc28bb2_ts_true_render(_ctx, _cache, $pro
       type: Boolean,
       default: false
     },
+    secondary: {
+      type: Boolean,
+      default: false
+    },
     derived: {
       type: Boolean,
       default: false
@@ -5799,7 +5821,7 @@ function templatevue_type_template_id_8fc28bb2_ts_true_render(_ctx, _cache, $pro
 
 
 ;
-const ClRole_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClRole_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_8fc28bb2_ts_true_render]])
+const ClRole_template_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ClRole_templatevue_type_script_lang_ts, [['render',templatevue_type_template_id_742447da_ts_true_render]])
 
 /* harmony default export */ var ClRole_template = (ClRole_template_exports_);
 ;// ./src/components/text/ClRole/index.ts