feat(db-input): added counter (#2500)

* refactor: updated DB UI Core

* feat: added counter

* refactor: updating DB UI Core

* refactor: introducing CSS Anchor positioning

* refactor: prevent TS errors

* refactor: update DB UI Core

* refactor: overwrite styling

as we have a grouping HTML tag here

Author: mfranzke

package-lock.json

@@ -45,7 +45,7 @@
     "puppeteer": "^22.6.2"
   },
   "dependencies": {
-    "@db-ui/core": "^2.18.2"
+    "@db-ui/core": "^2.19.2"
   },
   "license": "Apache-2.0",
   "publishConfig": {

packages/db-ui-elements-stencil/package.json

@@ -33,7 +33,7 @@ describe('db-input', () => {
     expect(page.root).toEqualHtml(`
       <db-input ariainvalid="_ariainvalid_" ariarequired="true" autocomplete="on" autofocus dirname="_dirname_" disabled input_id="_input_id_" label="_label_" list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" type='text' value="_value_" variant='semitransparent'>
         <input aria-invalid="_ariainvalid_" aria-required="true" type="text" class="elm-input" id="_input_id_" autocomplete="on" autofocus data-dirname="_dirname_" disabled list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" value="_value_" aria-labelledby="_input_id_-label" data-variant='semitransparent' />
-        <label class="elm-label" htmlFor="_input_id_" aria-hidden="true" id="_input_id_-label">_label_</label>
+        <label class="elm-label" htmlFor="_input_id_" aria-hidden="true" id="_input_id_-label">_label_</label><output htmlfor="_input_id_" id="_input_id_-result">0 / 2</output>
         <datalist id="_list_">
           <option>_option1_</option>
           <option>_option2_</option>

packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx

@@ -5,3 +5,17 @@
   // Overwriting the referenced SVG icon as this is going to get inlined and the path would be relative to the pages URL instead of the CSS, which would break
   --db-ic-search-24: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAV9JREFUSEu1le0xBEEURc9GgAjIABkQATIgAyEIQQaIABkQARlYESAC6qjXVV1T3f22dme7an5Nzzv3vq9ZsOWz2HJ8RoBL4Aw4AXaBb+AFeAIeVhXWAhwAj8DRIMg7cAEsM9AUYPC3UPwDXAMG89HFOXAD7Iej03jX5UwBBjoEXiOYaZkeQfeRPu8fj1zUAHN+B6hcJ63gJZYQg+vkKoBNTg2weBZ1+EEVpQh6DrcpQMU7YVl12dHFV1zqdmP94je73CCm39SA4mAvyX/h2MZ23GfULE3RujWw4xzGFFCK5vDYelkXfcRsrNxFKihz4EpwUntz4KSreqjegK1JFmI36cSptQ0FmXOH8DaUF0FOc9dtbxdZD4P1jsptU+8oqAvJtqm7x+Hz2C26ck34CDCVQ8im/4MUsilAZ0PIHIAhZC7AFGJtLPzwl5ktu9b7ki7b9n+653SQrop1FKff/AH2BVIZMfA02AAAAABJRU5ErkJggg==');
 }
+
+.elm-input:is(
+    [type='email'],
+    [type='password'],
+    [type='search'],
+    [type='tel'],
+    [type='text'],
+    [type='url']
+  )
+  + label
+  + output:not(:has(+ .description)) {
+  float: right;
+  position: initial;
+}

packages/db-ui-elements-stencil/src/components/db-input/db-input.scss

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { Component, Event, h, Host, Prop, State } from '@stencil/core';
 import { uuid } from '../../utils/utils';
 
 @Component({
@@ -7,6 +7,8 @@ import { uuid } from '../../utils/utils';
   scoped: true
 })
 export class DbInput {
+  @State() valueSize = 0;
+
   /**
    * The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.
    */
@@ -178,6 +180,9 @@ export class DbInput {
           aria-labelledby={this.input_id + '-label'}
           data-variant={this.variant}
           onChange={(event) => this.handleChange(event)}
+          onInput={(event) => {
+            this.valueSize = event.target.value.length;
+          }}
         />
 
         <label
@@ -189,6 +194,11 @@ export class DbInput {
         >
           {this.label}
         </label>
+        {this.maxlength && (
+          <output htmlFor={this.input_id} id={`${this.input_id}-result`}>
+            {`${this.valueSize} / ${this.maxlength}`}
+          </output>
+        )}
         {this.description && (
           <p id={this.input_id + '-hint'} class="description">
             {this.description}

packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx

@@ -117,4 +117,12 @@ You could set the attribute `label-hidden="true"` for the rare case that you wou
   <db-input label="Semitransparent" label-hidden="true"></db-input>
 </Canvas>
 
+<db-headline variant="2">maxlength with counter</db-headline>
+
+On providing the maxlength attribute, a counter will be shown below the input field.
+
+<Canvas>
+  <db-input label="maxlength example" maxlength="100"></db-input>
+</Canvas>
+
 <Markdown>{Readme}</Markdown>

packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx

@@ -1,2 +1,7 @@
 @import '../general';
 @import 'textarea';
+
+.elm-textarea + output:not(:has(+ .description)) {
+  float: right;
+  position: initial;
+}