@awes-io/ui 2.44.0 → 2.47.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.47.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.46.0...@awes-io/ui@2.47.0) (2022-03-31)
+
+
+### Features
+
+* **aw-tel:** placeholder replaced with mask ([e54e324](https://github.com/awes-io/client/commit/e54e324cb9ec576f583070a74a06349c23270685))
+
+
+
+
+
+# [2.46.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.45.0...@awes-io/ui@2.46.0) (2022-03-17)
+
+
+### Features
+
+* **store:** user name preformatting added ([36de390](https://github.com/awes-io/client/commit/36de3908308dde463a93198974cca2e79f5945a2))
+
+
+
+
+
+# [2.45.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.44.0...@awes-io/ui@2.45.0) (2022-03-17)
+
+
+### Features
+
+* birthday-picker updated ([4b7bedc](https://github.com/awes-io/client/commit/4b7bedc64c5358673540120fb8a7b647d8444e90))
+
+
+
+
+
 # [2.44.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.43.0...@awes-io/ui@2.44.0) (2022-03-10)
 
 

package/assets/css/components/animation.css

@@ -23,3 +23,37 @@
         transform: scale(1.3);
     }
 }
+
+@keyframes aw-shake {
+ 0%,
+ 100% {
+  transform:translateX(0)
+ }
+ 10% {
+  transform:translateX(-9px)
+ }
+ 20% {
+  transform:translateX(8px)
+ }
+ 30% {
+  transform:translateX(-7px)
+ }
+ 40% {
+  transform:translateX(6px)
+ }
+ 50% {
+  transform:translateX(-5px)
+ }
+ 60% {
+  transform:translateX(4px)
+ }
+ 70% {
+  transform:translateX(-3px)
+ }
+ 80% {
+  transform:translateX(2px)
+ }
+ 90% {
+  transform:translateX(-1px)
+ }
+}

package/assets/css/components/birthday-picker.css

@@ -4,86 +4,29 @@
         display: flex;
         align-items: center;
         text-align: center;
+        transition: 200ms border-color;
 
         &.has-error {
             @apply border-error;
-            animation: 700ms shake ease-out-quad;
+            animation: 700ms aw-shake ease-out-quad;
+        }
+
+        &:focus-within {
+            border-color: var(--c-info);
         }
     }
 
     &__input {
-        border: none;
+        @apply p-3;
+        text-align: center;
+        border-width: none;
         border-radius: 0;
-        flex: auto;
-        
-        input {
-            text-align: center;
-            border-radius: 0;
-        }
-
-        &--day {
-            &::before, &::after {
-                @apply left-0 top-0 absolute;
-                content: '';
-                z-index: 1;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 1px;
-                height: 100%;
-                background-color: rgba(var(--c-on-surface-rgb), 0.1);
-            }
+        flex: 1 1 auto;
 
-            &::after {
-                left: unset;
-                right: 0;
-            }
+        & + & {
+            @apply border-l;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
         }
     }
-
-    
-
-    /* &__day {
-        min-width: 6rem;
-        flex-basis: 20%;
-    } */
-
-    /* &__month,
-    &__year {
-        min-width: 5rem;
-        flex-basis: 40%;
-    } */
 }
-
-@keyframes shake {
-    0%,
-    100% {
-        transform:translateX(0)
-    }
-    10% {
-        transform:translateX(-9px)
-    }
-    20% {
-        transform:translateX(8px)
-    }
-    30% {
-        transform:translateX(-7px)
-    }
-    40% {
-        transform:translateX(6px)
-    }
-    50% {
-        transform:translateX(-5px)
-    }
-    60% {
-        transform:translateX(4px)
-    }
-    70% {
-        transform:translateX(-3px)
-    }
-    80% {
-        transform:translateX(2px)
-    }
-    90% {
-        transform:translateX(-1px)
-    }
-}

package/assets/css/components/bottom-bar.css

@@ -9,6 +9,7 @@
     position: sticky;
     bottom: 0;
     min-height: 4rem;
+    z-index: 20;
 
     & > * {
         flex-basis: theme('spacing.20', 5rem);

package/assets/css/components/tel.css

@@ -29,7 +29,10 @@
 
     &__dropdown {
         width: 100%;
-        max-height: 50vh;
+
+        &.aw-dropdown--desktop {
+            max-height: 50vh;
+        }
     }
 
     &__validity {

package/assets/css/components/text-field.css

@@ -158,7 +158,7 @@
      */
 
     &.has-error {
-        animation: 700ms shake ease-out-quad;
+        animation: 700ms aw-shake ease-out-quad;
     }
 
     &.has-error {
@@ -198,40 +198,6 @@
     }
 }
 
-@keyframes shake {
- 0%,
- 100% {
-  transform:translateX(0)
- }
- 10% {
-  transform:translateX(-9px)
- }
- 20% {
-  transform:translateX(8px)
- }
- 30% {
-  transform:translateX(-7px)
- }
- 40% {
-  transform:translateX(6px)
- }
- 50% {
-  transform:translateX(-5px)
- }
- 60% {
-  transform:translateX(4px)
- }
- 70% {
-  transform:translateX(-3px)
- }
- 80% {
-  transform:translateX(2px)
- }
- 90% {
-  transform:translateX(-1px)
- }
-}
-
 @keyframes autoFillStart {
     from {
         opacity: 1

package/assets/css/components/tooltip.css

@@ -10,7 +10,7 @@
 
     &[data-visible] {
         display: block;
-        z-index: 20;
+        z-index: 19;
     }
 
     &[data-popper-reference-hidden] {

package/components/3_organisms/AwBirthdayPicker.vue

@@ -1,66 +1,79 @@
 <template>
     <AwInfo :label="label" class="aw-birthday-picker">
-        <label
+        <div
             ref="element"
             v-tooltip.show.prepend="errorTooltip"
             :class="{ 'has-error': hasError && errorText }"
-            class="aw-birthday-picker__wrap"
+            class="aw-text-field aw-birthday-picker__wrap"
         >
-            <AwInput
-                v-model="displayMonth"
+            <input
+                v-for="{ key, ...attrs } in _inputs"
+                :key="key"
                 :required="required"
-                :name="_inputKeys.month"
-                :placeholder="$t('AwBirthdayPicker.month')"
-                pattern="##"
-                class="aw-birthday-picker__input"
+                :value="$data[key]"
+                v-bind="attrs"
                 inputmode="numeric"
+                class="aw-text-field__element aw-birthday-picker__input"
+                @keydown="onKeydown"
+                @input="onInput"
                 @focus="onInputFocus"
-                @blur="onMonthBlur"
             />
-
-            <AwInput
-                ref="dayInput"
-                v-model="displayDay"
-                :required="required"
-                :name="_inputKeys.day"
-                :placeholder="$t('AwBirthdayPicker.day')"
-                pattern="##"
-                inputmode="numeric"
-                class="aw-birthday-picker__input aw-birthday-picker__input--day"
-                @focus="onInputFocus"
-                @blur="onDayBlur"
-            />
-
-            <AwInput
-                ref="yearInput"
-                v-model="year"
-                :required="required"
-                :name="_inputKeys.year"
-                :placeholder="$t('AwBirthdayPicker.year')"
-                pattern="####"
-                class="aw-birthday-picker__input"
-                inputmode="numeric"
-                @input="onYearInput"
-                @focus="onInputFocus"
-            />
-        </label>
+        </div>
     </AwInfo>
 </template>
 
 <script>
 import birthdayMixin from '@AwMixins/birthday'
-import ErrorMixin from '@AwMixins/error'
+import errorMixin from '@AwMixins/error'
+import { AwBirthdayPicker as _config } from '@AwConfig'
+import { conf } from '@AwUtils/component'
+
+const KEY_ATTR = 'data-key'
+
+const ALLOWED_KEYS = [
+    'Delete',
+    'Backspace',
+    'Shift',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab'
+]
+
+const PLACEHOLDER_KEY_MAP = {
+    DD: 'day',
+    MM: 'month',
+    YYYY: 'year'
+}
 
-const DEFAULT_KEYS = {
+const PLACEHOLDER_MAP = {
+    day: 'DD',
+    month: 'MM',
+    year: 'YYYY'
+}
+
+const NAME_MAP = {
     day: 'birthday_day',
     month: 'birthday_month',
     year: 'birthday_year'
 }
 
+const MASK_MAP = {
+    day: '\\d{2}',
+    month: '\\d{2}',
+    year: '\\d{4}'
+}
+
+const PROCESSOR_MAP = {
+    day: '_processDay',
+    month: '_processMonth'
+}
+
 export default {
     name: 'AwBirthdayPicker',
 
-    mixins: [birthdayMixin, ErrorMixin],
+    mixins: [birthdayMixin, errorMixin],
+
+    _config,
 
     props: {
         value: {
@@ -73,14 +86,6 @@ export default {
             default: false
         },
 
-        /**
-         * If true show year select by default
-         */
-        showYear: {
-            type: Boolean,
-            default: false
-        },
-
         /**
          * Inputs names for native form submission,
          * Accepted values: day, month, year.
@@ -95,27 +100,77 @@ export default {
             default() {
                 return this.$t('AwBirthdayPicker.birthday')
             }
+        },
+
+        /**
+         * Custom parse format for string dates with year,
+         * for example `YYYY-MM-DD`.
+         */
+        fullParseFormat: {
+            type: String,
+            default() {
+                return conf(this, 'fullParseFormat')
+            }
+        },
+
+        /**
+         * Custom parse format for string dates without year,
+         * for example `MM-DD`.
+         */
+        shortParseFormat: {
+            type: String,
+            default() {
+                return conf(this, 'shortParseFormat')
+            }
+        },
+
+        /**
+         * Input fields order
+         */
+        fieldsOrder: {
+            type: String,
+            default() {
+                return conf(this, 'fieldsOrder')
+            }
         }
     },
 
     data() {
         return {
-            month: null,
             day: null,
+            month: null,
             year: null,
-            maxDay: 31,
-            displayDay: null,
-            displayMonth: null,
-            inputTimeout: null
+            maxDay: 31
         }
     },
 
     computed: {
-        _inputKeys() {
-            return {
-                ...DEFAULT_KEYS,
-                ...this.inputNames
-            }
+        _inputsOrder() {
+            return this.fieldsOrder
+                .split(/(\.|-)/)
+                .reduce((acc, placeholder) => {
+                    const key = PLACEHOLDER_KEY_MAP[placeholder]
+                    return key ? acc.concat(key) : acc
+                }, [])
+        },
+
+        _inputNames() {
+            return this._inputsOrder.map((key) => ({
+                name: this.inputNames[key] || NAME_MAP[key],
+                key
+            }))
+        },
+
+        _inputs() {
+            return this._inputsOrder.map((key, i) => ({
+                key,
+                [KEY_ATTR]: key,
+                name: this._inputNames[i].name,
+                placeholder: this.$t('AwBirthdayPicker.' + key),
+                pattern: MASK_MAP[key],
+                maxlength: PLACEHOLDER_MAP[key].length,
+                inputmode: 'numeric'
+            }))
         }
     },
 
@@ -124,37 +179,25 @@ export default {
             immediate: true,
             handler(val) {
                 const date = this.parseDate(val)
+
                 if (date) {
-                    this.month = date.month + 1
-                    this.day = date.day
-                    this.isYearHidden = !date.year
+                    const { day, month, year } = date
+
                     let d = this.$dayjs()
                         .year(2000)
-                        .month(date.month)
-                        .date(date.day)
+                        .month(month)
+                        .date(day)
                         .startOf('day')
 
-                    if (date.year) {
-                        this.year = date.year
-                        d = d.year(date.year)
+                    if (year) {
+                        d = d.year(year)
+                        this.year = d.format(PLACEHOLDER_MAP.year)
                     }
 
-                    this.displayDay = d.format('DD')
-                    this.displayMonth = d.format('MM')
+                    this.day = d.format(PLACEHOLDER_MAP.day)
+                    this.month = d.format(PLACEHOLDER_MAP.month)
                 }
             }
-        },
-
-        displayMonth(val) {
-            if (val && val.length == 2) {
-                this.$refs['dayInput'].$el.focus()
-            }
-        },
-
-        displayDay(val) {
-            if (val && val.length == 2) {
-                this.$refs['yearInput'].$el.focus()
-            }
         }
     },
 
@@ -169,72 +212,90 @@ export default {
 
                 this.maxDay = d.daysInMonth()
                 this.day = this.day > this.maxDay ? this.maxDay : this.day
+            }
+        },
 
-                this.displayDay = d
-                    .date(this.day)
-                    .startOf('day')
-                    .format('DD')
+        onKeydown($event) {
+            if (
+                isNaN(parseInt($event.key)) &&
+                !ALLOWED_KEYS.includes($event.key)
+            ) {
+                $event.preventDefault()
             }
 
-            this.emit()
-        },
+            const key = this._getKey($event.target)
 
-        onMonthBlur() {
-            const val = parseInt(this.displayMonth)
+            // arrow navigation
+            if ($event.key === 'ArrowRight' || $event.key === 'ArrowLeft') {
+                const length = $event.target.value.length
+                const { selectionStart, selectionEnd } = $event.target
 
-            if (isNaN(val)) {
-                this.month = null
-                this.displayMonth = null
-                this.checkMaxDay()
-                return
-            }
+                let offset = 0
+
+                if (
+                    $event.key === 'ArrowRight' &&
+                    selectionStart === length &&
+                    selectionEnd === length
+                ) {
+                    offset = 1
+                }
 
-            if (val !== this.month) {
-                if (val > 12) {
-                    this.month = 12
-                } else {
-                    this.month = val
+                if (
+                    $event.key === 'ArrowLeft' &&
+                    selectionStart === 0 &&
+                    selectionEnd === 0
+                ) {
+                    offset = -1
                 }
 
-                this.checkMaxDay()
+                if (offset) {
+                    $event.preventDefault()
+                    this._focusByOffset(key, offset)
+                }
             }
 
-            const d = this.$dayjs()
-                .year(this.year || 2000)
-                .month(this.month - 1)
-                .startOf('month')
-            this.displayMonth = d.format('MM')
+            // backspace navigation
+            if ($event.key === 'Backspace' && !$event.target.value) {
+                $event.preventDefault()
+                this._focusByOffset(this._getKey($event.target), -1)
+            }
         },
 
-        onDayBlur(e) {
-            const val = parseInt(e.target.value)
+        onInput($event) {
+            const key = this._getKey($event.target)
+            const processor = PROCESSOR_MAP[key]
 
-            if (isNaN(val)) {
-                this.day = null
-                this.displayDay = null
-                this.emit()
-                return
-            }
+            if (processor) {
+                const correctValue = this[processor]($event.target.value)
 
-            if (val === this.day) {
-                return
+                if (correctValue !== $event.target.value) {
+                    $event.target.value = correctValue
+                }
             }
 
-            this.day = val
+            this[key] = $event.target.value
+
             this.checkMaxDay()
-        },
 
-        onInputFocus(e) {
-            if (e.target.value) {
-                e.target.setSelectionRange(0, e.target.value.length)
-            }
+            this.$nextTick(() => {
+                if (this._isComplete(this[key], key)) {
+                    this._focusByOffset(key, 1)
+                    this.emit()
+                } else if (this[key] === '') {
+                    this.emit()
+                }
+            })
         },
 
-        onYearInput() {
-            clearTimeout(this.inputTimeout)
-            this.inputTimeout = setTimeout(() => {
-                this.checkMaxDay()
-            }, 200)
+        onInputFocus($event) {
+            if ($event.target.value) {
+                setTimeout(() => {
+                    $event.target.setSelectionRange(
+                        0,
+                        $event.target.value.length
+                    )
+                }, 10)
+            }
         },
 
         emit() {
@@ -257,6 +318,93 @@ export default {
                     formatVal ? d.format(formatVal) : d.format()
                 )
             }
+        },
+
+        _getKey(el) {
+            return el.getAttribute(KEY_ATTR)
+        },
+
+        _getKeyByOffset(key, offset) {
+            const index = this._inputsOrder.indexOf(key)
+
+            return index > -1 ? this._inputsOrder[index + offset] : undefined
+        },
+
+        _getKeyElement(key) {
+            return this.$refs.element.querySelector(`[${KEY_ATTR}="${key}"]`)
+        },
+
+        _isComplete(val = '', key) {
+            const numVal = parseInt(val)
+
+            // check if a number
+            if (isNaN(numVal)) {
+                return false
+            }
+
+            // check value length
+            if (
+                PLACEHOLDER_MAP[key] &&
+                val.length !== PLACEHOLDER_MAP[key].length
+            ) {
+                return false
+            }
+
+            // check range
+            switch (key) {
+                case 'day':
+                    return numVal > 1 && numVal <= this.maxDay
+                case 'month':
+                    return numVal > 1 && numVal <= 12
+                case 'year':
+                    return true
+                default:
+                    return false
+            }
+        },
+
+        _focusByOffset(key, offset) {
+            const el = this._getKeyElement(this._getKeyByOffset(key, offset))
+
+            if (el) {
+                el.focus()
+            }
+        },
+
+        _processDateVal(val, min = 0, max) {
+            if (!val) return ''
+
+            const numVal = parseInt(val)
+
+            if (isNaN(numVal)) {
+                return ''
+            }
+
+            if (numVal > max) {
+                return String(max)
+            }
+
+            if (numVal < min) {
+                return ''
+            }
+
+            if (val.length === 1) {
+                const maxFirstDigit = Math.floor(max / 10)
+
+                if (numVal > maxFirstDigit) {
+                    return '0' + String(numVal)
+                }
+            }
+
+            return val
+        },
+
+        _processDay(val) {
+            return this._processDateVal(val, 0, this.maxDay)
+        },
+
+        _processMonth(val) {
+            return this._processDateVal(val, 0, 12)
         }
     }
 }

package/components/3_organisms/AwTel.vue

@@ -3,8 +3,7 @@
         <AwInput
             ref="input"
             v-bind="$attrs"
-            :value="value"
-            :placeholder="placeholder"
+            :value="phoneValue"
             v-on="mergedListeners"
         >
             <template
@@ -16,11 +15,7 @@
                     v-tooltip.show.prepend="errorTooltip"
                     :aria-describedby="errorText ? errorId : null"
                     :class="cssClass"
-                    :value="
-                        phoneNumber.isValid()
-                            ? phoneNumber.format('INTERNATIONAL')
-                            : phoneNumber.number
-                    "
+                    :value="phoneValue"
                     type="tel"
                     v-on="mergedListeners"
                 />
@@ -32,7 +27,10 @@
                     @click="_openCountriesDropdown"
                 >
                     <span tabindex="-1" class="aw-tel__flag">
-                        <i class="flag" :class="country.toLowerCase()"></i>
+                        <i
+                            class="flag"
+                            :class="(country || '').toLowerCase()"
+                        ></i>
                     </span>
                 </button>
             </template>
@@ -41,15 +39,13 @@
                     v-show="!!value"
                     class="aw-tel__validity"
                     :class="
-                        phoneNumber.isValid()
+                        phoneNumber.valid
                             ? 'aw-tel__validity--valid'
                             : 'aw-tel__validity--invalid'
                     "
                 >
                     <AwIconSystemMono
-                        :name="
-                            phoneNumber.isValid() ? 'check-light' : 'ban-light'
-                        "
+                        :name="phoneNumber.valid ? 'check-light' : 'ban-light'"
                     />
                 </span>
             </template>
@@ -58,21 +54,24 @@
             ref="dropdown"
             class="aw-tel__dropdown"
             :show.sync="showCountries"
+            :close-on-action="false"
             @click.native="_onCountryClick"
             @keydown.native="_keyFocusItem($event)"
         >
-            <AwDropdownButton
-                v-for="{ name, iso } in countries"
-                :key="iso"
-                :active="country === iso"
-                :data-country="iso"
-                tabindex="-1"
-            >
-                <span class="aw-tel__flag mr-3">
-                    <i class="flag" :class="iso.toLowerCase()"></i>
-                </span>
-                {{ name }}
-            </AwDropdownButton>
+            <template v-if="showCountries">
+                <AwDropdownButton
+                    v-for="{ name, iso } in countries"
+                    :key="iso"
+                    :active="country === iso"
+                    :data-country="iso"
+                    tabindex="-1"
+                >
+                    <span class="aw-tel__flag mr-3">
+                        <i class="flag" :class="iso.toLowerCase()"></i>
+                    </span>
+                    {{ name }}
+                </AwDropdownButton>
+            </template>
         </AwDropdown>
     </div>
 </template>
@@ -153,19 +152,20 @@ export default {
     },
 
     data() {
-        let country = this.preselectCountry
-        const phoneNumber = this._parsePhoneNumber(this.value, country)
-
-        if (phoneNumber.isValid()) {
-            country = phoneNumber.country
-        }
-
-        const placeholder = this._getPlaceholder(country)
+        const phoneNumber = this._parsePhoneNumber(
+            this.value,
+            this.preselectCountry
+        )
+        const country = phoneNumber.country
+        const countries = this._getCountries(country)
+        const phoneValue = this._getPhoneValue(phoneNumber)
 
         return {
+            showCountries: false,
             country,
-            placeholder,
-            showCountries: false
+            countries,
+            phoneNumber,
+            phoneValue
         }
     },
 
@@ -174,29 +174,17 @@ export default {
             return {
                 ...this.$listeners,
                 input: this._onInput,
-                change: this._onInput
+                change: this._onInput,
+                paste: this._onPaste,
+                focus: this._onFocus,
+                click: this._onFocus
             }
         },
 
-        countries() {
-            return Array.isArray(this.filterCountries) &&
-                this.filterCountries.length
-                ? COUNTRIES.filter(
-                      (country) =>
-                          country.iso === this.country ||
-                          this.filterCountries.includes(country.iso)
-                  )
-                : COUNTRIES
-        },
-
         callingCode() {
             return this._getCallingCode(this.country)
         },
 
-        phoneNumber() {
-            return this._parsePhoneNumber(this.value, this.country)
-        },
-
         _arrowFocusSelector() {
             return '[data-country]'
         },
@@ -211,22 +199,53 @@ export default {
             handler(iso, oldIso) {
                 if (iso === oldIso) return
 
-                this.placeholder = this._getPlaceholder(iso)
-
-                if (oldIso) {
+                if (iso && oldIso) {
                     const value = this.value.replace(
                         '+' + this._getCallingCode(oldIso),
                         '+' + this.callingCode
                     )
                     const phoneNumber = this._parsePhoneNumber(value, iso)
 
+                    if (!this.phoneNumber.isEqual(phoneNumber)) {
+                        this.phoneNumber = phoneNumber
+                        this.phoneValue = this._getPhoneValue(phoneNumber)
+
+                        this._emitInput(phoneNumber)
+                    }
+                } else {
+                    const phoneNumber = this._parsePhoneNumber(this.value, iso)
+
+                    this.phoneNumber = phoneNumber
+                    this.phoneValue = this._getPhoneValue(phoneNumber)
+
                     this._emitInput(phoneNumber)
                 }
 
-                if (this.$refs.element) {
+                this.countries = this._getCountries(iso)
+
+                if (
+                    this.$refs.element &&
+                    this.$el.contains(document.activeElement)
+                ) {
                     this.$refs.element.focus()
+                    this.$nextTick(() => {
+                        this._setFocusToFirstDash(this.$refs.element)
+                    })
                 }
             }
+        },
+
+        value(value) {
+            const phoneNumber = this._parsePhoneNumber(value, this.country)
+
+            if (!this.phoneNumber.isEqual(phoneNumber)) {
+                this.phoneNumber = phoneNumber
+                this.phoneValue = this._getPhoneValue(phoneNumber)
+            }
+
+            if (phoneNumber.country && phoneNumber.country !== this.country) {
+                this.country = phoneNumber.country
+            }
         }
     },
 
@@ -234,20 +253,100 @@ export default {
         _onInput($event) {
             const value = $event.target.value
             const phoneNumber = this._parsePhoneNumber(value, this.country)
-
-            if (this.phoneNumber.isEqual(phoneNumber)) {
+            const phoneValue = this._getPhoneValue(phoneNumber)
+
+            // open dropdown on backspace
+            if (
+                phoneNumber.number === '' &&
+                phoneValue === this.phoneValue &&
+                $event.data === null
+            ) {
+                this.$nextTick(this._openCountriesDropdown)
                 return
             }
 
+            // save caret position
+            let pos = $event.target.selectionStart
+            let digit = pos > 0 ? value[pos - 1] : '_'
+            let adjustPosition = false
+
+            if (phoneValue !== this.phoneValue) {
+                adjustPosition = true
+
+                this.phoneNumber = phoneNumber
+                this.phoneValue = phoneValue
+
+                this._emitInput(phoneNumber)
+            }
+
+            if ($event.target.value !== this.phoneValue) {
+                adjustPosition = true
+
+                $event.target.value = this.phoneValue
+            }
+
+            if (phoneNumber.country && phoneNumber.country !== this.country) {
+                this.country = phoneNumber.country
+            }
+
             if (this.$refs.input.hasError) {
                 this.$refs.input.setError('')
             }
 
-            if (phoneNumber.isValid() && phoneNumber.country !== this.country) {
+            if ($event.data !== null && this.showCountries) {
+                this.showCountries = false
+            }
+
+            if (adjustPosition) {
+                this.$nextTick(() => {
+                    const newValue = $event.target.value
+                    const firstDashIndex = newValue.indexOf('_')
+                    const max =
+                        firstDashIndex > -1 ? firstDashIndex : newValue.length
+
+                    pos = Math.min(pos, max)
+
+                    while (
+                        newValue[pos - 1] !== digit &&
+                        pos < firstDashIndex
+                    ) {
+                        pos++
+                    }
+
+                    $event.target.setSelectionRange(pos, pos)
+                })
+            }
+        },
+
+        _onPaste($event) {
+            $event.preventDefault()
+
+            // replace all Data
+            const phone = $event.clipboardData.getData('text')
+
+            const phoneNumber = this._parsePhoneNumber(phone, this.country)
+
+            if (!this.phoneNumber.isEqual(phoneNumber)) {
+                this.phoneNumber = phoneNumber
+                this.phoneValue = this._getPhoneValue(phoneNumber)
+
+                this._emitInput(phoneNumber)
+            }
+
+            if (phoneNumber.country && phoneNumber.country !== this.country) {
                 this.country = phoneNumber.country
             }
 
-            this._emitInput(phoneNumber)
+            $event.target.focus()
+
+            this.$nextTick(() => {
+                this._onFocus({ target: $event.target })
+            })
+        },
+
+        _onFocus($event) {
+            this._setFocusToFirstDash($event.target)
+            this.showCountries = false
         },
 
         _onBlur($event) {
@@ -256,17 +355,22 @@ export default {
             }
         },
 
-        _getPlaceholder(iso) {
+        _getPlaceholder(iso, withCode = false) {
             const phoneNumber = getExampleNumber(iso, examples)
 
             if (phoneNumber) {
                 const number = phoneNumber.format('INTERNATIONAL')
-                const code = '+' + phoneNumber.countryCallingCode
 
-                return number
-                    .replace(code, '{code}')
-                    .replace(/\d/g, '_')
-                    .replace('{code}', code)
+                if (withCode) {
+                    const code = '+' + phoneNumber.countryCallingCode
+
+                    return number
+                        .replace(code, '{code}')
+                        .replace(/\d/g, '_')
+                        .replace('{code}', code)
+                } else {
+                    return number.replace(/\d/g, '_')
+                }
             } else {
                 return ''
             }
@@ -279,20 +383,45 @@ export default {
                 this.$el
             )
             this.showCountries = false
+
+            this.$refs.element.focus()
+            this.$nextTick(() => this._setFocusToFirstDash(this.$refs.element))
         },
 
-        _parsePhoneNumber(value, country) {
-            const number = typeof value === 'string' ? value : ''
-            const phoneNumber = parsePhoneNumberFromString(number, country)
+        _parsePhoneNumber(value = '', country) {
+            let number = typeof value === 'string' ? value : ''
+
+            number = number.replace(/\D/g, '')
+
+            number = number === this.callingCode ? '' : number
+
+            number = number && value.startsWith('+') ? '+' + number : number
+
+            let phoneNumber = parsePhoneNumberFromString(number, country)
 
             if (phoneNumber) {
-                return phoneNumber
+                return {
+                    number: phoneNumber.number,
+                    country: phoneNumber.country,
+                    countryCallingCode: phoneNumber.countryCallingCode,
+                    valid: phoneNumber.isValid(),
+                    format() {
+                        return phoneNumber.format.apply(phoneNumber, arguments)
+                    },
+                    isValid() {
+                        return phoneNumber.isValid.apply(phoneNumber, arguments)
+                    },
+                    isEqual() {
+                        return phoneNumber.isEqual.apply(phoneNumber, arguments)
+                    }
+                }
             } else {
                 // mock PhoneNumber class
                 return {
                     number,
                     country,
                     countryCallingCode: this.callingCode,
+                    valid: false,
                     format() {
                         return number
                     },
@@ -306,6 +435,30 @@ export default {
             }
         },
 
+        _getPhoneValue(phoneNumber) {
+            if (phoneNumber.number === '') {
+                return this._getPlaceholder(phoneNumber.country, true)
+            }
+
+            const placeholder = this._getPlaceholder(phoneNumber.country)
+
+            if (placeholder) {
+                const digits = phoneNumber.number.replace(/\D/g, '').split('')
+                const replaced = placeholder.replace(
+                    /_/g,
+                    () => digits.shift() || '_'
+                )
+
+                return digits.length
+                    ? replaced + digits.join('')
+                    : phoneNumber.valid
+                    ? replaced.replace(/_/g, '')
+                    : replaced
+            } else {
+                return phoneNumber.number
+            }
+        },
+
         _getCallingCode(iso) {
             return pathOr(
                 '',
@@ -314,11 +467,22 @@ export default {
             )
         },
 
+        _getCountries(includeIso) {
+            return Array.isArray(this.filterCountries) &&
+                this.filterCountries.length
+                ? COUNTRIES.filter(
+                      (country) =>
+                          country.iso === includeIso ||
+                          this.filterCountries.includes(country.iso)
+                  )
+                : COUNTRIES
+        },
+
         _emitInput(phoneNumber) {
             if (phoneNumber.number === this.value) return
 
             this.$emit('input', phoneNumber.number, {
-                isValid: phoneNumber.isValid(),
+                isValid: phoneNumber.valid,
                 country: phoneNumber.country,
                 number: {
                     national: phoneNumber.format('NATIONAL'),
@@ -341,6 +505,15 @@ export default {
                     el.focus()
                 }
             })
+        },
+
+        _setFocusToFirstDash(inputEl) {
+            const firstDashIndex = inputEl.value.indexOf('_')
+            const pos = inputEl.selectionStart
+
+            if (firstDashIndex > -1 && pos > firstDashIndex) {
+                inputEl.setSelectionRange(firstDashIndex, firstDashIndex)
+            }
         }
     }
 }

package/components/5_layouts/_AwNoty.vue

@@ -15,7 +15,14 @@
             class="aw-noty__icon"
             :class="`text-${props.type}`"
         />
-        <svg
+        <Component
+            :is="$options.components.AwIconSystemMono"
+            v-else-if="props.icon === true"
+            :name="$options.getDefaultIconName(props.type)"
+            class="aw-noty__icon"
+            :class="`text-${props.type}`"
+        />
+        <!-- <svg
             v-else-if="props.icon"
             width="20"
             height="20"
@@ -25,7 +32,7 @@
             <path
                 d="M10 1.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm4.1 6.5l-4.4 4.4a.7.7 0 01-1 0l-2.2-2.2a.7.7 0 111-1l1.7 1.8 4-4a.7.7 0 111 1zm0 0"
             />
-        </svg>
+        </svg> -->
 
         <!-- content -->
         <div class="aw-noty__content" :class="{ 'has-text': props.text }">
@@ -100,6 +107,17 @@ export default {
         }
     },
 
-    sanitize
+    sanitize,
+
+    getDefaultIconName(type) {
+        switch (type) {
+            case 'error':
+                return 'close-solid'
+            case 'warning':
+                return 'attention'
+            default:
+                return 'check-solid'
+        }
+    }
 }
 </script>

package/components/_config.js

@@ -13,6 +13,12 @@ export const AwAvatar = {
     colors: COLORS
 }
 
+export const AwBirthdayPicker = {
+    fullParseFormat: 'DD.MM.YYYY',
+    shortParseFormat: 'DD.MM',
+    fieldsOrder: 'DD.MM.YYYY'
+}
+
 export const AwButton = {
     routerComponent: 'router-link',
     size: 'md',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.44.0",
+    "version": "2.47.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "fce6417d348bb3e187df9c4ea498562055ee5c31"
+    "gitHead": "fe6bdb700f0209121131bf1e68c0f9251c793b9a"
 }

package/store/awesIo.js

@@ -19,6 +19,7 @@ export const state = () => ({
     screen: {},
 
     profileUrl: null,
+    userName: '',
 
     logo: {
         default: { src: '' },
@@ -55,12 +56,14 @@ export const getters = {
     user(state, getters, rootState) {
         const user = pathOr({}, 'auth.user', rootState)
         const src = pathOr('', 'avatar', user)
-        const name = [
-            pathOr('', 'profile.first_name', user),
-            pathOr('', 'profile.last_name', user)
-        ]
-            .filter(Boolean)
-            .join(' ')
+        const name =
+            state.userName ||
+            [
+                pathOr('', 'profile.first_name', user),
+                pathOr('', 'profile.last_name', user)
+            ]
+                .filter(Boolean)
+                .join(' ')
         const description = pathOr(
             pathOr('', 'profile.description', user),
             'profile.position',