diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Chrome/password-field-initial.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Chrome/password-field-initial.png new file mode 100644 index 000000000..b8c65af3b Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Chrome/password-field-initial.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Chrome/password-field-value-update.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Chrome/password-field-value-update.png new file mode 100644 index 000000000..80a5a6a68 Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Chrome/password-field-value-update.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Safari/password-field-initial.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Safari/password-field-initial.png new file mode 100644 index 000000000..94f56dc88 Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Safari/password-field-initial.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Safari/password-field-value-update.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Safari/password-field-value-update.png new file mode 100644 index 000000000..c173c2f51 Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/Mobile-Safari/password-field-value-update.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/chromium/password-field-initial.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/chromium/password-field-initial.png new file mode 100644 index 000000000..bca4e292e Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/chromium/password-field-initial.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/chromium/password-field-value-update.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/chromium/password-field-value-update.png new file mode 100644 index 000000000..c7592df5a Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/chromium/password-field-value-update.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/firefox/password-field-initial.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/firefox/password-field-initial.png new file mode 100644 index 000000000..915a1cf0d Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/firefox/password-field-initial.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/firefox/password-field-value-update.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/firefox/password-field-value-update.png new file mode 100644 index 000000000..6ccaff41d Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/firefox/password-field-value-update.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/webkit/password-field-initial.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/webkit/password-field-initial.png new file mode 100644 index 000000000..1b8d2d992 Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/webkit/password-field-initial.png differ diff --git a/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/webkit/password-field-value-update.png b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/webkit/password-field-value-update.png new file mode 100644 index 000000000..871b8c165 Binary files /dev/null and b/.tooling/tests/screenshots/Password-Field---Behaviour/darwin/webkit/password-field-value-update.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-evaluate-invalid.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-evaluate-invalid.png new file mode 100644 index 000000000..65bdd40ec Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-evaluate-invalid.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-evaluate.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-evaluate.png new file mode 100644 index 000000000..5a3198c70 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-evaluate.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-hide.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-hide.png new file mode 100644 index 000000000..b8c65af3b Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-hide.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-initial.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-initial.png new file mode 100644 index 000000000..b8c65af3b Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-initial.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-invalid-value.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-invalid-value.png new file mode 100644 index 000000000..65bdd40ec Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-invalid-value.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-show.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-show.png new file mode 100644 index 000000000..4006be724 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Chrome/pin-field-show.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-evaluate-invalid.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-evaluate-invalid.png new file mode 100644 index 000000000..ca7762a4f Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-evaluate-invalid.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-evaluate.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-evaluate.png new file mode 100644 index 000000000..d4c4a5840 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-evaluate.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-hide.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-hide.png new file mode 100644 index 000000000..94f56dc88 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-hide.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-initial.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-initial.png new file mode 100644 index 000000000..94f56dc88 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-initial.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-invalid-value.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-invalid-value.png new file mode 100644 index 000000000..ca7762a4f Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-invalid-value.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-show.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-show.png new file mode 100644 index 000000000..36e47b64e Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/Mobile-Safari/pin-field-show.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-evaluate-invalid.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-evaluate-invalid.png new file mode 100644 index 000000000..78297d481 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-evaluate-invalid.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-evaluate.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-evaluate.png new file mode 100644 index 000000000..6db2db2f0 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-evaluate.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-hide.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-hide.png new file mode 100644 index 000000000..8e6687349 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-hide.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-initial.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-initial.png new file mode 100644 index 000000000..bca4e292e Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-initial.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-invalid-value.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-invalid-value.png new file mode 100644 index 000000000..78297d481 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-invalid-value.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-show.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-show.png new file mode 100644 index 000000000..da5ad513e Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/chromium/pin-field-show.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-evaluate-invalid.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-evaluate-invalid.png new file mode 100644 index 000000000..dba37050d Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-evaluate-invalid.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-evaluate.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-evaluate.png new file mode 100644 index 000000000..d19917950 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-evaluate.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-hide.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-hide.png new file mode 100644 index 000000000..36340e12b Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-hide.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-initial.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-initial.png new file mode 100644 index 000000000..fd064eea1 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-initial.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-invalid-value.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-invalid-value.png new file mode 100644 index 000000000..dba37050d Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-invalid-value.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-show.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-show.png new file mode 100644 index 000000000..15575928f Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/firefox/pin-field-show.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-evaluate-invalid.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-evaluate-invalid.png new file mode 100644 index 000000000..e702075a4 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-evaluate-invalid.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-evaluate.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-evaluate.png new file mode 100644 index 000000000..1cd5da476 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-evaluate.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-hide.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-hide.png new file mode 100644 index 000000000..fb7f93203 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-hide.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-initial.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-initial.png new file mode 100644 index 000000000..1b8d2d992 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-initial.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-invalid-value.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-invalid-value.png new file mode 100644 index 000000000..e702075a4 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-invalid-value.png differ diff --git a/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-show.png b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-show.png new file mode 100644 index 000000000..719a19112 Binary files /dev/null and b/.tooling/tests/screenshots/Pin-Field---Behaviour/darwin/webkit/pin-field-show.png differ diff --git a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/search-field.png b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/search-field.png index 0366487f3..e32bfe59e 100644 Binary files a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/search-field.png and b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/search-field.png differ diff --git a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-initial.png b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-initial.png index 96cf44b34..e2cb6c7b2 100644 Binary files a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-initial.png and b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-initial.png differ diff --git a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container-after.png b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container-after.png index b952ed629..126d7668a 100644 Binary files a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container-after.png and b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container-after.png differ diff --git a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container.png b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container.png index d7dc6ca67..21529340c 100644 Binary files a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container.png and b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/chromium/select-items-container.png differ diff --git a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/webkit/select-items-container.png b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/webkit/select-items-container.png index 7500b3def..9651ae096 100644 Binary files a/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/webkit/select-items-container.png and b/.tooling/tests/screenshots/Select---Custom-Search-Slot-Behaviour/darwin/webkit/select-items-container.png differ diff --git a/.tooling/tests/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-initial.png b/.tooling/tests/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-initial.png index 548ad74e3..570f82936 100644 Binary files a/.tooling/tests/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-initial.png and b/.tooling/tests/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-initial.png differ diff --git a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/search-field.png b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/search-field.png index e32bfe59e..0366487f3 100644 Binary files a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/search-field.png and b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/search-field.png differ diff --git a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-after.png b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-after.png index e6d1447a5..98c1de47a 100644 Binary files a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-after.png and b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-after.png differ diff --git a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-initial.png b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-initial.png index 1314f1133..824c44c8e 100644 Binary files a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-initial.png and b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-initial.png differ diff --git a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-items-container.png b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-items-container.png index 5a1e16a07..96ec48ccf 100644 Binary files a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-items-container.png and b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-items-container.png differ diff --git a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/webkit/select-items-container.png b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/webkit/select-items-container.png index 2814f0e28..c360452da 100644 Binary files a/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/webkit/select-items-container.png and b/.tooling/tests/screenshots/Select---Server-Side-Filtering-Behaviour/darwin/webkit/select-items-container.png differ diff --git a/src/core/OmniFormElement.ts b/src/core/OmniFormElement.ts index 4eb70008e..aa0c63c23 100644 --- a/src/core/OmniFormElement.ts +++ b/src/core/OmniFormElement.ts @@ -137,7 +137,6 @@ export class OmniFormElement extends OmniElement { } this.value = ''; - // Dispatch standard DOM event to cater for single clear. this.dispatchEvent( new Event('change', { @@ -241,44 +240,49 @@ export class OmniFormElement extends OmniElement { border-color: var(--omni-form-focussed-border-color, var(--omni-primary-active-color)); } - :host([value]:not([value=''])) .layout > .label, + :host([value]:not([value=''])) .container:not(.no-float-label) .layout > .label, + .container.float-label .layout > .label, .layout:focus-within > .label:not(.focused-static) { top: 0px; margin-left: var(--omni-form-focussed-label-margin-left, 10px); } - + .layout:focus-within > .label { color: var(--omni-form-focussed-label-color, var(--omni-primary-color)); } - - :host([value]:not([value=''])) .layout > .label.error, + + :host([value]:not([value=''])) .container:not(.no-float-label) .layout > .label.error, + .container.float-label .layout > .label.error, .layout:focus-within > .label.error { color: var(--omni-form-focussed-error-label-color, var(--omni-error-font-color)); } - - :host([value]:not([value=''])) .layout > .label > div::before, + + :host([value]:not([value=''])) .container:not(.no-float-label) .layout > .label > div::before, + .container.float-label .layout > .label > div::before, .layout:focus-within > .label:not(.focused-static) > div::before { content: ""; - display: block; - background-color: var(--omni-form-focussed-label-background-color, var(--omni-background-color)); - position: absolute; - left: calc(var(--omni-form-focussed-label-padding-left, 3px) * -1); - right: calc(var(--omni-form-focussed-label-padding-right, 3px) * -1); - height: 50%; - z-index: -1; + display: block; + background-color: var(--omni-form-focussed-label-background-color, var(--omni-background-color)); + position: absolute; + left: calc(var(--omni-form-focussed-label-padding-left, 3px) * -1); + right: calc(var(--omni-form-focussed-label-padding-right, 3px) * -1); + height: 50%; + z-index: -1; top:50%; width: calc(100% + var(--omni-form-focussed-label-padding-left, 3px) + var(--omni-form-focussed-label-padding-right, 3px)); } - - :host([value]:not([value=''])) .layout.disabled > .label > div::before, + + :host([value]:not([value=''])) .container:not(.no-float-label) .layout.disabled > .label > div::before, + .container.float-label .layout.disabled > .label > div::before, .layout.disabled:focus-within > .label > div::before { background-color: var(--omni-form-focussed-label-disabled-background-color, var(--omni-disabled-background-color)); } - - :host([value]:not([value=''])) .layout > .label > div, + + :host([value]:not([value=''])) .container:not(.no-float-label) .layout > .label > div, + .container.float-label .layout > .label > div, .layout:focus-within > .label > div { transform: scale(var(--omni-form-focussed-label-transform-scale), 0.9); transform-origin: center left; diff --git a/src/password-field/PasswordField.spec.ts b/src/password-field/PasswordField.spec.ts index da2c5ade7..9114295be 100644 --- a/src/password-field/PasswordField.spec.ts +++ b/src/password-field/PasswordField.spec.ts @@ -48,6 +48,30 @@ test(`Password Field - Visual and Behaviour`, async ({ page }) => { }); }); +test(`Password Field - Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/password-field/'); + await page.evaluate(() => document.fonts.ready); + + const passwordField = page.locator('[data-testid]').first(); + await expect(passwordField).toHaveScreenshot('password-field-initial.png'); + + const showSlotElement = passwordField.locator('slot[name=show]'); + await showSlotElement.click(); + + const hideSlotElement = passwordField.locator('slot[name=hide]'); + await hideSlotElement.click(); + + const inputField = passwordField.locator('#inputField'); + + const valueUpdate = 'Value Update'; + await passwordField.evaluate((p: PasswordField, valueUpdate) => (p.value = valueUpdate), valueUpdate); + + await expect(inputField).toHaveValue(valueUpdate); + await expect(passwordField).toHaveScreenshot('password-field-value-update.png'); + }); +}); + test('Password Field - Label Behaviour', testLabelBehaviour('omni-password-field')); test('Password Field - Hint Behaviour', testHintBehaviour('omni-password-field')); test('Password Field - Error Behaviour', testErrorBehaviour('omni-password-field')); diff --git a/src/password-field/PasswordField.ts b/src/password-field/PasswordField.ts index 98999d1a9..f3b48bb6b 100644 --- a/src/password-field/PasswordField.ts +++ b/src/password-field/PasswordField.ts @@ -1,7 +1,6 @@ import { css, html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { ClassInfo, classMap } from 'lit/directives/class-map.js'; -import { live } from 'lit/directives/live.js'; import { ifDefined, OmniFormElement } from '../core/OmniFormElement.js'; import '../icons/EyeHidden.icon.js'; @@ -60,6 +59,11 @@ export class PasswordField extends OmniFormElement { */ @state() protected type: 'password' | 'text' = 'password'; + /** + * Override for the value property inherited from the OmniFormElement component with reflect set to false. + */ + @property({ type: String, reflect: false }) override value?: string; + /** * Disables native on screen keyboards for the component. * @attr [no-native-keyboard] @@ -68,6 +72,9 @@ export class PasswordField extends OmniFormElement { @query('#inputField') private _inputElement?: HTMLInputElement; + @query('.container') + private container?: HTMLDivElement; + private _value? = ''; override connectedCallback() { super.connectedCallback(); @@ -79,6 +86,39 @@ export class PasswordField extends OmniFormElement { }); } + protected override async firstUpdated(): Promise { + this._setInputValue(); + } + + constructor() { + super(); + this._value = this.value ?? ''; + Object.defineProperty(this, 'value', { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v ?? ''; + this._setInputValue(); + if (this._value) { + this.container?.classList?.add('float-label'); + this.container?.classList?.remove('no-float-label'); + } else { + this.container?.classList?.remove('float-label'); + this.container?.classList?.add('no-float-label'); + } + this.requestUpdate(); + } + }); + } + + // Set the value of the input component. + _setInputValue() { + if (this._inputElement) { + this._inputElement.value = this.value as string; + } + } + _focusInput() { const input = this._inputElement; if (input) { @@ -207,7 +247,6 @@ export class PasswordField extends OmniFormElement { id="inputField" .type="${this.type}" inputmode="${ifDefined(this.noNativeKeyboard ? 'none' : undefined)}" - .value=${live(this.value as string)} ?readOnly=${this.disabled} tabindex="${this.disabled ? -1 : 0}" /> `; diff --git a/src/pin-field/PinField.spec.ts b/src/pin-field/PinField.spec.ts index 5c572d573..cd47432ee 100644 --- a/src/pin-field/PinField.spec.ts +++ b/src/pin-field/PinField.spec.ts @@ -48,6 +48,41 @@ test(`Pin Field - Visual and Behaviour`, async ({ page }) => { }); }); +test(`Pin Field - Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/pin-field/'); + await page.evaluate(() => document.fonts.ready); + + const pinField = page.locator('[data-testid]').first(); + await expect(pinField).toHaveScreenshot('pin-field-initial.png'); + + const showSlotElement = pinField.locator('slot[name=show]'); + await expect(showSlotElement).toHaveCount(1); + await showSlotElement.click(); + await expect(pinField).toHaveScreenshot('pin-field-show.png'); + + const hideSlotElement = pinField.locator('slot[name=hide]'); + await expect(hideSlotElement).toHaveCount(1); + await hideSlotElement.click(); + await expect(pinField).toHaveScreenshot('pin-field-hide.png'); + + const inputField = pinField.locator('#inputField'); + + const number = '1234'; + await pinField.evaluate((p: PinField, number) => (p.value = number), number); + await expect(inputField).toHaveValue(number); + await showSlotElement.click(); + await expect(pinField).toHaveScreenshot('pin-field-evaluate.png'); + + const invalidNumber = '56abc78'; + await pinField.evaluate((p: PinField, invalidNumber) => (p.value = invalidNumber), invalidNumber); + await expect(pinField).toHaveScreenshot('pin-field-evaluate-invalid.png'); + + await expect(inputField).toHaveValue('5678'); + await expect(pinField).toHaveScreenshot('pin-field-invalid-value.png'); + }); +}); + test(`Pin Field - Max Length Behaviour`, async ({ page }) => { await withCoverage(page, async () => { await page.goto('/components/pin-field/'); diff --git a/src/pin-field/PinField.ts b/src/pin-field/PinField.ts index 534ac7050..54f461c85 100644 --- a/src/pin-field/PinField.ts +++ b/src/pin-field/PinField.ts @@ -65,6 +65,11 @@ export class PinField extends OmniFormElement { */ @property({ type: Boolean, reflect: true, attribute: 'no-native-keyboard' }) noNativeKeyboard?: boolean; + /** + * Override for the value property inherited from the OmniFormElement component with reflect set to false. + */ + @property({ type: String, reflect: false }) override value?: string; + /** * Maximum character input length. * @attr [max-length] @@ -73,9 +78,12 @@ export class PinField extends OmniFormElement { @query('#inputField') private _inputElement?: HTMLInputElement; + @query('.container') + private container?: HTMLDivElement; private showPin?: boolean = false; // eslint-disable-next-line @typescript-eslint/no-explicit-any private isWebkit?: boolean; + private _value? = ''; override connectedCallback() { super.connectedCallback(); @@ -99,14 +107,7 @@ export class PinField extends OmniFormElement { this.type = 'password'; } - this._sanitiseValue(this.value as string); - } - - override async attributeChangedCallback(name: string, _old: string | null, value: string | null): Promise { - super.attributeChangedCallback(name, _old, value); - if (name === 'value') { - this._sanitiseValue(value as string); - } + this._sanitiseValue(); } override focus(options?: FocusOptions | undefined): void { @@ -117,16 +118,38 @@ export class PinField extends OmniFormElement { } } - // Checks if the value provided is numeric, if valid set the value property and input element value if not value remove the value attribute - _sanitiseValue(value: string) { - if (value) { - if (!this._isNumber(value as string)) { - this.removeAttribute('value'); - } else if (this.maxLength && (value as string).length > this.maxLength) { - this.value = value?.slice(0, this.maxLength) as string; + constructor() { + super(); + this._value = this.value ?? ''; + Object.defineProperty(this, 'value', { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v ?? ''; + this._sanitiseValue(); + if (this._value) { + this.container?.classList?.add('float-label'); + this.container?.classList?.remove('no-float-label'); + } else { + this.container?.classList?.remove('float-label'); + this.container?.classList?.add('no-float-label'); + } + this.requestUpdate(); + } + }); + } + + // Check if the value provided is valid and shorten according to the max length if provided, if there is invalid alpha characters they are removed. + _sanitiseValue() { + if (this.value) { + if (this.maxLength && (this.value as string).length > this.maxLength) { + this._value = this.value?.slice(0, this.maxLength) as string; } } + this._value = this.value?.toString()?.replace(/[^\d]/gi, ''); + if (this._inputElement) { this._inputElement.value = this.value as string; } @@ -266,6 +289,7 @@ export class PinField extends OmniFormElement { input[type='number'] { -moz-appearance: textfield; /* Firefox */ } + ` ]; } diff --git a/src/select/Select.spec.ts b/src/select/Select.spec.ts index 52aedb6c4..0ec911d11 100644 --- a/src/select/Select.spec.ts +++ b/src/select/Select.spec.ts @@ -87,6 +87,7 @@ test(`Select - Async Per Item Behaviour`, async ({ page, isMobile }) => { }, displayItems); await selectComponent.click(); + // Added for cases where the items do not load in time before taking a screenshot. await page.waitForTimeout(200); await expect(selectComponent).toHaveScreenshot('select-open.png'); @@ -195,6 +196,7 @@ test(`Select - Selection Render Behaviour`, async ({ page, isMobile }) => { const item = selectComponent.locator('.item').first(); await expect(item).toHaveCount(1); await item.click(); + // Added timeout to wait for items to render. await page.waitForTimeout(100); const selectionRender = selectComponent.locator('omni-render-element');