From 7c09b517ea8c121e2510e2f263513a24ebc35854 Mon Sep 17 00:00:00 2001 From: bmarcelino-fe Date: Tue, 12 Sep 2023 12:43:59 +0100 Subject: [PATCH 01/17] Fix issue on Datepicker that show the hidden datepicker input --- dist/OutSystemsUI.css | 18 +++++++++--------- .../Pattern/DatePicker/scss/_datepicker.scss | 4 ++-- .../Pattern/MonthPicker/scss/_monthpicker.scss | 4 ++-- .../Pattern/TimePicker/scss/_timepicker.scss | 4 ++-- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index b9118eeb7e..4ba660fd43 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -8544,10 +8544,10 @@ span.flatpickr-weekday{ color:var(--color-neutral-6); pointer-events:none; } -.osui-datepicker > span > input:first-of-type{ - display:none !important; +.osui-datepicker span > input.flatpickr-input:first-of-type{ + display:none; } -.osui-datepicker > span > input:first-of-type{ +.osui-datepicker span > input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .osui-datepicker-calendar-ss-preview{ @@ -9647,10 +9647,10 @@ body.vscomp-popup-active .vscomp-wrapper{ color:var(--color-neutral-6); pointer-events:none; } -.osui-monthpicker > span > input:first-of-type{ - display:none !important; +.osui-monthpicker span > input.flatpickr-input:first-of-type{ + display:none; } -.osui-monthpicker > span > input:first-of-type{ +.osui-monthpicker span > input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .form .osui-monthpicker-ss-preview{ @@ -10622,10 +10622,10 @@ body.vscomp-popup-active .vscomp-wrapper{ color:var(--color-neutral-6); pointer-events:none; } -.osui-timepicker > span > input:first-of-type{ - display:none !important; +.osui-timepicker span > input.flatpickr-input:first-of-type{ + display:none; } -.osui-timepicker > span > input:first-of-type{ +.osui-timepicker span > input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .osui-timepicker__dropdown-ss-preview{ diff --git a/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss b/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss index c2dd605cd4..b16d09c420 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss @@ -34,9 +34,9 @@ } // Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates. - & > span > input { + & span > input.flatpickr-input { &:first-of-type { - display: none !important; + display: none; // Make the platform input visible in Service Studio & { diff --git a/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss b/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss index 7808c6fac0..e04a291a0e 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss @@ -56,9 +56,9 @@ } // Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates. - & > span > input { + & span > input.flatpickr-input { &:first-of-type { - display: none !important; + display: none; // Make the platform input visible in Service Studio & { diff --git a/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss b/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss index f82e0446fb..cd8c3abfe4 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss @@ -34,9 +34,9 @@ } // Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates. - & > span > input { + & span > input.flatpickr-input { &:first-of-type { - display: none !important; + display: none; // Make the platform input visible in Service Studio & { From 8811cb650681d4b45b0fe11b39ab54e51f853129 Mon Sep 17 00:00:00 2001 From: bmarcelino-fe Date: Thu, 14 Sep 2023 10:02:08 +0100 Subject: [PATCH 02/17] Reduce CSS selector specificity to hide input on runtime --- dist/OutSystemsUI.css | 12 ++++++------ .../OSUI/Pattern/DatePicker/scss/_datepicker.scss | 12 +++++------- .../OSUI/Pattern/MonthPicker/scss/_monthpicker.scss | 12 +++++------- .../OSUI/Pattern/TimePicker/scss/_timepicker.scss | 12 +++++------- 4 files changed, 21 insertions(+), 27 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 4ba660fd43..888886e4ae 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -8544,10 +8544,10 @@ span.flatpickr-weekday{ color:var(--color-neutral-6); pointer-events:none; } -.osui-datepicker span > input.flatpickr-input:first-of-type{ +.osui-datepicker input.flatpickr-input:first-of-type{ display:none; } -.osui-datepicker span > input.flatpickr-input:first-of-type{ +.osui-datepicker input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .osui-datepicker-calendar-ss-preview{ @@ -9647,10 +9647,10 @@ body.vscomp-popup-active .vscomp-wrapper{ color:var(--color-neutral-6); pointer-events:none; } -.osui-monthpicker span > input.flatpickr-input:first-of-type{ +.osui-monthpicker input.flatpickr-input:first-of-type{ display:none; } -.osui-monthpicker span > input.flatpickr-input:first-of-type{ +.osui-monthpicker input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .form .osui-monthpicker-ss-preview{ @@ -10622,10 +10622,10 @@ body.vscomp-popup-active .vscomp-wrapper{ color:var(--color-neutral-6); pointer-events:none; } -.osui-timepicker span > input.flatpickr-input:first-of-type{ +.osui-timepicker input.flatpickr-input:first-of-type{ display:none; } -.osui-timepicker span > input.flatpickr-input:first-of-type{ +.osui-timepicker input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .osui-timepicker__dropdown-ss-preview{ diff --git a/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss b/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss index b16d09c420..572d7a8a47 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss @@ -34,14 +34,12 @@ } // Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates. - & span > input.flatpickr-input { - &:first-of-type { - display: none; + input.flatpickr-input:first-of-type { + display: none; - // Make the platform input visible in Service Studio - & { - -servicestudio-display: inline-flex !important; - } + // Make the platform input visible in Service Studio + & { + -servicestudio-display: inline-flex !important; } } diff --git a/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss b/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss index e04a291a0e..df314f2a57 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss @@ -56,14 +56,12 @@ } // Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates. - & span > input.flatpickr-input { - &:first-of-type { - display: none; + input.flatpickr-input:first-of-type { + display: none; - // Make the platform input visible in Service Studio - & { - -servicestudio-display: inline-flex !important; - } + // Make the platform input visible in Service Studio + & { + -servicestudio-display: inline-flex !important; } } } diff --git a/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss b/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss index cd8c3abfe4..37c8dc7f12 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss @@ -34,14 +34,12 @@ } // Hide the platform input which is set as hidden by the library and we're change it into the expected type, however we do not want it visible since library will add a clone to better deal with the selected dates. - & span > input.flatpickr-input { - &:first-of-type { - display: none; + input.flatpickr-input:first-of-type { + display: none; - // Make the platform input visible in Service Studio - & { - -servicestudio-display: inline-flex !important; - } + // Make the platform input visible in Service Studio + & { + -servicestudio-display: inline-flex !important; } } From 06af3fbfd28c2eb729142cacbad78a99511f60ff Mon Sep 17 00:00:00 2001 From: bmarcelino-fe Date: Tue, 19 Sep 2023 13:18:09 +0100 Subject: [PATCH 03/17] Add an API to add the id to link on SkipContent to fix the warnings on A11Y checkers --- dist/OutSystemsUI.d.ts | 12 +++++-- dist/OutSystemsUI.js | 29 ++++++++++++++++- src/scripts/OSFramework/OSUI/GlobalEnum.ts | 4 ++- .../Utils/LayoutPrivateSkipContentLink.ts | 31 +++++++++++++++++++ 4 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/scripts/OutSystems/OSUI/Utils/LayoutPrivateSkipContentLink.ts diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 4917b1dab2..a0a54ee38a 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -180,6 +180,7 @@ declare namespace OSFramework.OSUI.GlobalEnum { HeaderIsFixed = "fixed-header", HeaderIsVisible = "header-is--visible", HeaderTopContent = "header-top-content", + InputNotValid = "not-valid", IsTouch = "is--touch", Layout = "layout", LayoutNative = "layout-native", @@ -190,7 +191,7 @@ declare namespace OSFramework.OSUI.GlobalEnum { MainContent = "main-content", MenuLinks = "app-menu-links", Placeholder = "ph", - InputNotValid = "not-valid" + SkipContent = "skip-nav" } enum CSSSelectors { InputFormControl = "input.form-control", @@ -287,7 +288,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { Name = "name", StatusBar = "data-status-bar-height", Style = "style", - Type = "type" + Type = "type", + Href = "href" } enum HTMLElement { Body = "body", @@ -4620,6 +4622,12 @@ declare namespace OutSystems.OSUI.Utils.LayoutPrivate { static Unset(): void; } } +declare namespace OutSystems.OSUI.Utils.LayoutPrivate { + abstract class SkipContentLink { + private static _setLink; + static Set(): void; + } +} declare namespace OutSystems.OSUI.Utils { function LogMessage(message: string): void; } diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 17164b2526..947db5c89d 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -243,6 +243,7 @@ var OSFramework; CssClassElements["HeaderIsFixed"] = "fixed-header"; CssClassElements["HeaderIsVisible"] = "header-is--visible"; CssClassElements["HeaderTopContent"] = "header-top-content"; + CssClassElements["InputNotValid"] = "not-valid"; CssClassElements["IsTouch"] = "is--touch"; CssClassElements["Layout"] = "layout"; CssClassElements["LayoutNative"] = "layout-native"; @@ -253,7 +254,7 @@ var OSFramework; CssClassElements["MainContent"] = "main-content"; CssClassElements["MenuLinks"] = "app-menu-links"; CssClassElements["Placeholder"] = "ph"; - CssClassElements["InputNotValid"] = "not-valid"; + CssClassElements["SkipContent"] = "skip-nav"; })(CssClassElements = GlobalEnum.CssClassElements || (GlobalEnum.CssClassElements = {})); let CSSSelectors; (function (CSSSelectors) { @@ -362,6 +363,7 @@ var OSFramework; HTMLAttributes["StatusBar"] = "data-status-bar-height"; HTMLAttributes["Style"] = "style"; HTMLAttributes["Type"] = "type"; + HTMLAttributes["Href"] = "href"; })(HTMLAttributes = GlobalEnum.HTMLAttributes || (GlobalEnum.HTMLAttributes = {})); let HTMLElement; (function (HTMLElement) { @@ -16353,6 +16355,31 @@ var OutSystems; })(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {})); })(OutSystems || (OutSystems = {})); var OutSystems; +(function (OutSystems) { + var OSUI; + (function (OSUI) { + var Utils; + (function (Utils) { + var LayoutPrivate; + (function (LayoutPrivate) { + class SkipContentLink { + static _setLink() { + const mainContent = OSFramework.OSUI.Helper.Dom.ClassSelector(document, OSFramework.OSUI.GlobalEnum.CssClassElements.MainContent); + const skipContentLink = OSFramework.OSUI.Helper.Dom.ClassSelector(document, OSFramework.OSUI.GlobalEnum.CssClassElements.SkipContent); + if (mainContent && skipContentLink) { + skipContentLink.setAttribute(OSFramework.OSUI.GlobalEnum.HTMLAttributes.Href, mainContent.getAttribute(OSFramework.OSUI.GlobalEnum.HTMLAttributes.Id)); + } + } + static Set() { + this._setLink(); + } + } + LayoutPrivate.SkipContentLink = SkipContentLink; + })(LayoutPrivate = Utils.LayoutPrivate || (Utils.LayoutPrivate = {})); + })(Utils = OSUI.Utils || (OSUI.Utils = {})); + })(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {})); +})(OutSystems || (OutSystems = {})); +var OutSystems; (function (OutSystems) { var OSUI; (function (OSUI) { diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts index cdfe151d5e..fc02df85f3 100644 --- a/src/scripts/OSFramework/OSUI/GlobalEnum.ts +++ b/src/scripts/OSFramework/OSUI/GlobalEnum.ts @@ -23,6 +23,7 @@ namespace OSFramework.OSUI.GlobalEnum { HeaderIsFixed = 'fixed-header', HeaderIsVisible = 'header-is--visible', HeaderTopContent = 'header-top-content', + InputNotValid = 'not-valid', IsTouch = 'is--touch', Layout = 'layout', LayoutNative = 'layout-native', @@ -33,7 +34,7 @@ namespace OSFramework.OSUI.GlobalEnum { MainContent = 'main-content', MenuLinks = 'app-menu-links', Placeholder = 'ph', - InputNotValid = 'not-valid', + SkipContent = 'skip-nav', } /** @@ -169,6 +170,7 @@ namespace OSFramework.OSUI.GlobalEnum { StatusBar = 'data-status-bar-height', Style = 'style', Type = 'type', + Href = 'href', } /** diff --git a/src/scripts/OutSystems/OSUI/Utils/LayoutPrivateSkipContentLink.ts b/src/scripts/OutSystems/OSUI/Utils/LayoutPrivateSkipContentLink.ts new file mode 100644 index 0000000000..733ec76c8a --- /dev/null +++ b/src/scripts/OutSystems/OSUI/Utils/LayoutPrivateSkipContentLink.ts @@ -0,0 +1,31 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +namespace OutSystems.OSUI.Utils.LayoutPrivate { + export abstract class SkipContentLink { + // Function that will set the link on skip content to pass on A11Y checkers + private static _setLink(): void { + const mainContent = OSFramework.OSUI.Helper.Dom.ClassSelector( + document, + OSFramework.OSUI.GlobalEnum.CssClassElements.MainContent + ); + const skipContentLink = OSFramework.OSUI.Helper.Dom.ClassSelector( + document, + OSFramework.OSUI.GlobalEnum.CssClassElements.SkipContent + ); + + // Check if elements exists on DOM to prevent errors on custom layouts + if (mainContent && skipContentLink) { + skipContentLink.setAttribute( + OSFramework.OSUI.GlobalEnum.HTMLAttributes.Href, + mainContent.getAttribute(OSFramework.OSUI.GlobalEnum.HTMLAttributes.Id) + ); + } + } + + /** + * Function used to add link to skip content element + */ + public static Set(): void { + this._setLink(); + } + } +} From c055606730b3f92052339521f270abe462e35b31 Mon Sep 17 00:00:00 2001 From: Giuliana Silva <108938618+OS-giulianasilva@users.noreply.github.com> Date: Tue, 19 Sep 2023 17:16:51 +0100 Subject: [PATCH 04/17] ROU-4537: Accessibility improvements identified on team audit for the Overflow Menu (#823) * Add ArrowUp and ArrowDown keys functionality to Balloon feature * Add ArrowUp and ArrowDown keys functionality to the OverflowMenu * Include the open method to the Overflow Menu interface --- dist/OutSystemsUI.css | 170 ++---------------- dist/OutSystemsUI.d.ts | 11 +- dist/OutSystemsUI.js | 62 +++++-- .../OSUI/Feature/Balloon/Balloon.ts | 80 +++++++-- .../OSUI/Feature/Balloon/IBalloon.ts | 12 ++ .../Pattern/OverflowMenu/IOverflowMenu.ts | 12 ++ .../OSUI/Pattern/OverflowMenu/OverflowMenu.ts | 22 ++- 7 files changed, 190 insertions(+), 179 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 888886e4ae..9491ce8317 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -506,7 +506,6 @@ a{ a, a:visited{ color:var(--color-primary); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; } a:hover, a:focus{ @@ -1104,7 +1103,6 @@ body, position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; - -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:100vw; will-change:opacity; @@ -1117,7 +1115,6 @@ body, opacity:1; pointer-events:auto; -webkit-transition:opacity 330ms ease-out; - -o-transition:opacity 330ms ease-out; transition:opacity 330ms ease-out; } .layout .app-menu-content{ @@ -1175,7 +1172,6 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; - -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1188,7 +1184,6 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; - -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1229,7 +1224,6 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.6. Layout Native - Menu */ @@ -1312,7 +1306,6 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; - -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1324,7 +1317,6 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; - -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1355,7 +1347,6 @@ body, -ms-transform:none; transform:none; -webkit-transition:none; - -o-transition:none; transition:none; } .is-rtl.desktop .aside-expandable.menu-visible .main{ @@ -1365,7 +1356,6 @@ body, .is-rtl.tablet .app-menu-content, .is-rtl.phone .app-menu-content{ right:calc(-1 * var(--side-menu-size)); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .is-rtl:not(.portrait) .layout-side.layout-native.aside-visible .app-menu-content{ @@ -1379,7 +1369,6 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.8. Menu - Header Logo */ @@ -1802,7 +1791,6 @@ body .app-menu-content .app-menu-links{ color:var(--color-neutral-9); font-size:var(--font-size-s); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; } .form-control[data-input]:hover, .form-control[data-textarea]:hover{ @@ -1902,7 +1890,6 @@ body .app-menu-content .app-menu-links{ height:30px; opacity:1; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:48px; } @@ -1918,7 +1905,6 @@ body .app-menu-content .app-menu-links{ -webkit-transform:translateX(4px) translateZ(0); transform:translateX(4px) translateZ(0); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -1976,7 +1962,6 @@ body .app-menu-content .app-menu-links{ height:22px; opacity:1; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:22px; } @@ -2060,7 +2045,6 @@ body .app-menu-content .app-menu-links{ -ms-transform:rotate(-45deg) translateY(0) translateX(0); transform:rotate(-45deg) translateY(0) translateX(0); -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:8px; } @@ -2127,8 +2111,7 @@ body .app-menu-content .app-menu-links{ } .dropdown-container .dropdown-popup-row span{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .dropdown-container .scrollable-list-with-scroll{ @@ -2242,7 +2225,6 @@ select.dropdown-display[disabled]{ margin:0; padding:var(--space-none) var(--space-base); -webkit-transition:all 100ms linear; - -o-transition:all 100ms linear; transition:all 100ms linear; } .btn:hover:active{ @@ -3036,7 +3018,6 @@ div.feedback-message-warning{ height:24px; position:relative; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -3054,7 +3035,6 @@ div.feedback-message-warning{ display:flex; height:100%; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:100%; } @@ -3382,7 +3362,6 @@ div.feedback-message-warning{ .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path{ -webkit-transition:fill 0.1s; - -o-transition:fill 0.1s; transition:fill 0.1s; fill:inherit; } @@ -4105,7 +4084,6 @@ span.flatpickr-weekday{ -webkit-transition:transform 0.3s; -webkit-transition:-webkit-transform 0.3s; transition:-webkit-transform 0.3s; - -o-transition:transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; } @@ -4545,7 +4523,6 @@ span.flatpickr-weekday{ position:relative; -webkit-transition:-webkit-transform 0.2s linear; transition:-webkit-transform 0.2s linear; - -o-transition:transform 0.2s linear; transition:transform 0.2s linear; transition:transform 0.2s linear, -webkit-transform 0.2s linear; width:8px; @@ -4746,8 +4723,7 @@ span.flatpickr-weekday{ line-height:20px; max-width:100%; overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .vscomp-arrow{ @@ -4942,8 +4918,7 @@ span.flatpickr-weekday{ } .vscomp-option-text{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-user-select:none; -moz-user-select:none; @@ -4953,8 +4928,7 @@ span.flatpickr-weekday{ } .vscomp-option-description{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; color:#666; font-size:13px; @@ -5073,7 +5047,6 @@ span.flatpickr-weekday{ } .vscomp-wrapper .checkbox-icon::after{ -webkit-transition-duration:0.2s; - -o-transition-duration:0.2s; transition-duration:0.2s; border:2px solid #888; content:""; @@ -5225,7 +5198,6 @@ span.flatpickr-weekday{ } .vscomp-wrapper.keep-always-open .vscomp-dropbox{ -webkit-transition-duration:0s; - -o-transition-duration:0s; transition-duration:0s; border:1px solid #ddd; -webkit-box-shadow:none; @@ -5258,14 +5230,12 @@ span.flatpickr-weekday{ height:auto; min-height:28px; overflow:auto; - -o-text-overflow:unset; - text-overflow:unset; + text-overflow:unset; white-space:normal; } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-box-align:center; -ms-flex-align:center; @@ -5286,8 +5256,7 @@ span.flatpickr-weekday{ } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:calc(100% - 20px); } @@ -5794,7 +5763,6 @@ span.flatpickr-weekday{ -webkit-transform:translateX(100%) translateZ(0); transform:translateX(100%) translateZ(0); -webkit-transition:all 190ms ease-in; - -o-transition:all 190ms ease-in; transition:all 190ms ease-in; width:100%; will-change:transform; @@ -5804,7 +5772,6 @@ span.flatpickr-weekday{ -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .phone .split-screen-wrapper .split-right{ @@ -5930,7 +5897,6 @@ span.flatpickr-weekday{ border-color:var(--color-primary); opacity:1; -webkit-transition:opacity 300ms ease-in; - -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-accordion-item--is-disabled{ @@ -5958,8 +5924,7 @@ span.flatpickr-weekday{ width:100%; } .osui-accordion-item__title__placeholder{ - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; width:100%; } .osui-accordion-item__title--is-left{ @@ -5987,7 +5952,6 @@ span.flatpickr-weekday{ -ms-flex-pack:center; justify-content:center; -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:16px; } @@ -6000,7 +5964,6 @@ span.flatpickr-weekday{ height:100%; -webkit-transition:-webkit-transform 300ms ease-in-out; transition:-webkit-transform 300ms ease-in-out; - -o-transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; width:2px; @@ -6039,7 +6002,6 @@ span.flatpickr-weekday{ } .osui-accordion-item__content--is-animating{ -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .osui-accordion-item__content [data-block*=AnimatedLabel]:first-child .animated-label{ @@ -6224,7 +6186,6 @@ span.flatpickr-weekday{ } .card-background-color:after{ background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0))); - background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); content:""; height:100%; @@ -6273,8 +6234,7 @@ span.flatpickr-weekday{ .card-detail-text{ color:var(--color-neutral-7); overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; } .is-rtl .card-detail-left{ padding-left:var(--space-base); @@ -6468,7 +6428,6 @@ span.flatpickr-weekday{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); - -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); } .osui-flip-content__container--flip-self{ @@ -6726,8 +6685,7 @@ span.flatpickr-weekday{ } .list-item-content-title, .list-item-content-text{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .list-item-content-title{ @@ -6901,7 +6859,6 @@ span.flatpickr-weekday{ width:-moz-fit-content; width:fit-content; -webkit-transition:opacity 250ms; - -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper__balloon{ @@ -7223,32 +7180,26 @@ span.flatpickr-weekday{ } .osui-tooltip__balloon-wrapper--is-opening.left{ -webkit-transition:left 250ms; - -o-transition:left 250ms; transition:left 250ms; } .osui-tooltip__balloon-wrapper--is-opening.right{ -webkit-transition:right 250ms; - -o-transition:right 250ms; transition:right 250ms; } .osui-tooltip__balloon-wrapper--is-opening.center{ -webkit-transition:top 250ms; - -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.top, .osui-tooltip__balloon-wrapper--is-opening.top-left, .osui-tooltip__balloon-wrapper--is-opening.top-right{ -webkit-transition:top 250ms; - -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.bottom, .osui-tooltip__balloon-wrapper--is-opening.bottom-left, .osui-tooltip__balloon-wrapper--is-opening.bottom-right{ -webkit-transition:top 250ms; - -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening .osui-tooltip__balloon-wrapper__balloon{ -webkit-transition:opacity 250ms; - -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper--is-open{ @@ -7477,7 +7428,6 @@ span.flatpickr-weekday{ position:absolute; top:0; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); - -o-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); width:100%; will-change:opacity; @@ -7498,12 +7448,10 @@ span.flatpickr-weekday{ } .action-sheet-container--visible.action-sheet-container--animatable .action-sheet{ -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .action-sheet-container--animatable .action-sheet{ -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .action-sheet-buttons{ @@ -7553,7 +7501,6 @@ span.flatpickr-weekday{ animation-fill-mode:both; display:inline-block; -webkit-transition-timing-function:ease-out; - -o-transition-timing-function:ease-out; transition-timing-function:ease-out; visibility:hidden; width:100%; @@ -7646,7 +7593,6 @@ span.flatpickr-weekday{ position:absolute; top:8px; -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; z-index:var(--layer-global-screen); } @@ -7667,7 +7613,6 @@ span.flatpickr-weekday{ border-radius:var(--border-radius-none); padding:var(--space-none); -webkit-transition:all 100ms ease-in-out; - -o-transition:all 100ms ease-in-out; transition:all 100ms ease-in-out; } .animated-label-input .form-control[data-input]:focus, .animated-label-input .form-control[data-textarea]:focus{ @@ -7758,7 +7703,6 @@ span.flatpickr-weekday{ opacity:1; pointer-events:all; -webkit-transition:opacity 300ms ease-in; - -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-balloon:not(.osui-balloon--is-open) *{ @@ -7851,7 +7795,6 @@ span.flatpickr-weekday{ text-align:center; -webkit-transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); - -o-transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function), -webkit-transform 350ms var(--osui-bottom-sheet-transition-function); -webkit-transform:translateY(100%); @@ -7914,13 +7857,11 @@ span.flatpickr-weekday{ .osui-bottom-sheet:not(.osui-bottom-sheet--is-open){ -webkit-transition:-webkit-transform 200ms ease-out; transition:-webkit-transform 200ms ease-out; - -o-transition:transform 200ms ease-out; transition:transform 200ms ease-out; transition:transform 200ms ease-out, -webkit-transform 200ms ease-out; } .osui-bottom-sheet:not(.osui-bottom-sheet--is-open) + .osui-bottom-sheet-overlay{ -webkit-transition:opacity 200ms ease-out; - -o-transition:opacity 200ms ease-out; transition:opacity 200ms ease-out; } .osui-bottom-sheet-overlay{ @@ -7932,7 +7873,6 @@ span.flatpickr-weekday{ position:fixed; top:0; -webkit-transition:opacity 350ms ease-in; - -o-transition:opacity 350ms ease-in; transition:opacity 350ms ease-in; width:100vw; z-index:calc(var(--layer-below) + var(--osui-bottom-sheet-layer)); @@ -7967,7 +7907,6 @@ span.flatpickr-weekday{ transform:translateY(-2px); -webkit-transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); - -o-transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function), -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); top:0; @@ -8015,7 +7954,6 @@ span.flatpickr-weekday{ height:40px; opacity:1; -webkit-transition:opacity 150ms linear; - -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -8470,7 +8408,6 @@ span.flatpickr-weekday{ .safari input.flatpickr-input, .safari input.flatpickr-input + input{ -webkit-transition:none; - -o-transition:none; transition:none; } .phone .flatpickr-current-month .flatpickr-monthDropdown-months, @@ -8836,7 +8773,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b margin-right:var(--space-s); overflow:visible; -webkit-transition:background-color 0.25s ease; - -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; width:16px; } @@ -8847,7 +8783,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b height:85%; opacity:0; -webkit-transition:opacity 0.25s ease; - -o-transition:opacity 0.25s ease; transition:opacity 0.25s ease; width:40%; } @@ -8884,7 +8819,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-base); position:relative; -webkit-transition:height, border-color 0.25s ease; - -o-transition:height, border-color 0.25s ease; transition:height, border-color 0.25s ease; vertical-align:middle; width:100%; @@ -8903,7 +8837,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 0.25s ease; - -o-transition:all 0.25s ease; transition:all 0.25s ease; } .vscomp-toggle-button:hover{ @@ -9013,7 +8946,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b align-content:center; background-color:var(--color-neutral-0); -webkit-transition:background-color 0.25s ease; - -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; } .vscomp-option.focused, .vscomp-option.selected{ @@ -9229,10 +9161,8 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(0px) translateZ(0) scale(1); transform:translateY(0px) translateZ(0) scale(1); -webkit-transition:all 180ms ease-out; - -o-transition:all 180ms ease-out; transition:all 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); - -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); } .floating-actions-wrapper.is--open .floating-actions-item-button{ @@ -9287,7 +9217,6 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(--space-base) translateZ(0); transform:translateY(--space-base) translateZ(0); -webkit-transition:all 100ms ease-in; - -o-transition:all 100ms ease-in; transition:all 100ms ease-in; } .floating-actions-item{ @@ -9317,11 +9246,9 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:translateZ(0) scale(0.3); -webkit-transition:-webkit-transform 180ms ease-out; transition:-webkit-transform 180ms ease-out; - -o-transition:transform 180ms ease-out; transition:transform 180ms ease-out; transition:transform 180ms ease-out, -webkit-transform 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); - -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); width:40px; } @@ -9357,7 +9284,6 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform-origin:center center; transform-origin:center center; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:56px; } @@ -9375,7 +9301,6 @@ body.vscomp-popup-active .vscomp-wrapper{ right:0; top:0; -webkit-transition:opacity 180ms ease-out; - -o-transition:opacity 180ms ease-out; transition:opacity 180ms ease-out; width:100vw; z-index:var(--osui-floating-actions-layer); @@ -9672,7 +9597,6 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; -webkit-transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; - -o-transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out; -webkit-user-select:none; @@ -9859,7 +9783,6 @@ body.vscomp-popup-active .vscomp-wrapper{ height:var(--range-slider-handle-size); -webkit-transition:-webkit-transform 150ms ease-out; transition:-webkit-transform 150ms ease-out; - -o-transition:transform 150ms ease-out; transition:transform 150ms ease-out; transition:transform 150ms ease-out, -webkit-transform 150ms ease-out; width:var(--range-slider-handle-size); @@ -10194,7 +10117,6 @@ body.vscomp-popup-active .vscomp-wrapper{ right:13px; top:50%; -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; width:16px; } @@ -10209,7 +10131,6 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; width:3px; } @@ -10222,14 +10143,12 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:translate(0, calc(-100% - var(--os-safe-area-top))); transform:translate(0, calc(-100% - var(--os-safe-area-top))); -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; } .layout-native .header-right .search-input input[data-input], .layout-native .header-right .search-input input[data-input]:empty{ height:34px; padding-left:var(--space-xl); -webkit-transition:none; - -o-transition:none; transition:none; } .layout-native .header-right .search-input input[data-input]:focus{ @@ -10272,7 +10191,6 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:var(--sidebar-width); will-change:transform; @@ -10350,7 +10268,6 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; - -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:200vw; will-change:opacity; @@ -10373,7 +10290,6 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:none; -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; - -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; will-change:transform; @@ -10476,7 +10392,6 @@ body.vscomp-popup-active .vscomp-wrapper{ } .stackedcards--animatable{ -webkit-transition:all 400ms ease; - -o-transition:all 400ms ease; transition:all 400ms ease; } .stackedcards .init{ @@ -10786,8 +10701,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h .bottom-bar-item-text{ font-size:10px; overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; } @@ -11171,7 +11085,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon{ @@ -11183,7 +11096,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon:before{ @@ -11195,7 +11107,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h content:""; height:6px; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -11210,7 +11121,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h height:100%; position:relative; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; -servicestudio-min-width:100px; -servicestudio-margin-left:calc(var(--space-s) * -1); @@ -11252,7 +11162,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; - -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -11598,7 +11507,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h position:absolute; -webkit-transition:-webkit-transform 200ms linear; transition:-webkit-transform 200ms linear; - -o-transition:transform 200ms linear; transition:transform 200ms linear; transition:transform 200ms linear, -webkit-transform 200ms linear; -webkit-transform-origin:0 0; @@ -12158,12 +12066,10 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before{ -webkit-transition-delay:0.5s; - -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before, .osui-progress-bar__container.animate-progress-change .osui-progress-bar__value:before{ -webkit-transition-duration:0.35s; - -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-bar__value{ @@ -12272,17 +12178,14 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ stroke-dashoffset:var(--stroke-dashoffset); stroke-linecap:var(--shape); -webkit-transition:stroke-dashoffset 0; - -o-transition:stroke-dashoffset 0; transition:stroke-dashoffset 0; } .osui-progress-circle__container__progress-path.animate-entrance, .osui-progress-circle__container__progress-path.animate-progress-change{ -webkit-transition-duration:0.35s; - -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-circle__container__progress-path.animate-entrance{ -webkit-transition-delay:0.5s; - -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-circle__container__trail-path{ @@ -12362,7 +12265,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ position:absolute; top:0; -webkit-transition:opacity linear 150ms; - -o-transition:opacity linear 150ms; transition:opacity linear 150ms; } .rating-item-filled, .rating-item-half, .rating-item-empty{ @@ -12502,7 +12404,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ display:-ms-inline-flexbox; display:inline-flex; -webkit-transition:none; - -o-transition:none; transition:none; vertical-align:middle; white-space:nowrap; @@ -12635,14 +12536,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .pull-to-refresh .genericon{ -webkit-transition:all 0.25s ease; - -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .content, .ptr-loading .pull-to-refresh, .ptr-reset .content, .ptr-reset .pull-to-refresh{ -webkit-transition:all 0.25s ease; - -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .pull-to-refresh .genericon, .ptr-reset .pull-to-refresh .genericon{ @@ -12742,7 +12641,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ top:0; -webkit-transition:-webkit-transform 200ms ease-in-out; transition:-webkit-transform 200ms ease-in-out; - -o-transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; } @@ -12754,8 +12652,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-dropdown-serverside__selected-values > *:first-child{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -12776,7 +12673,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ padding:var(--space-none) var(--space-base); position:relative; -webkit-transition:border 250ms ease-in-out; - -o-transition:border 250ms ease-in-out; transition:border 250ms ease-in-out; width:100%; } @@ -12802,7 +12698,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ overflow:hidden; position:absolute; -webkit-transition:opacity 300ms ease; - -o-transition:opacity 300ms ease; transition:opacity 300ms ease; width:100%; z-index:var(--layer-global-elevated); @@ -12833,7 +12728,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ transform:translateY(calc(-1 * var(--osui-dropdown-ss-thresholdanimateval))); -webkit-transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; - -o-transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; } @@ -12933,7 +12827,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ -ms-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity 250ms ease; - -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-content{ @@ -13070,7 +12963,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown overflow:hidden; top:0; -webkit-transition:opacity 250ms ease; - -o-transition:opacity 250ms ease; transition:opacity 250ms ease; z-index:var(--layer-global-instant-interaction); } @@ -13121,7 +13013,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown padding:var(--space-s) var(--space-base); position:relative; -webkit-transition:background 250ms ease; - -o-transition:background 250ms ease; transition:background 250ms ease; width:100%; z-index:var(--layer-global-screen); @@ -13149,8 +13040,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .osui-dropdown-serverside-item__content > *:first-child{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -13219,7 +13109,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown font-size:24px; font-weight:400; -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-icon:after{ @@ -13245,7 +13134,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .section-expandable .section-expandable-content-animating, .section-expandable .section-expandable-content.is--animating{ -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-content.no-padding{ @@ -13347,7 +13235,6 @@ button.OSFillParent{ overflow:hidden; position:relative; -webkit-transition:all 400ms ease; - -o-transition:all 400ms ease; transition:all 400ms ease; will-change:transform; } @@ -13391,7 +13278,6 @@ button.OSFillParent{ } .carousel--animatable{ -webkit-transition:all 250ms linear; - -o-transition:all 250ms linear; transition:all 250ms linear; will-change:transform; } @@ -13477,7 +13363,6 @@ button.OSFillParent{ -ms-transform:translateY(-25px); transform:translateY(-25px); -webkit-transition:opacity 150ms linear; - -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -13518,7 +13403,6 @@ button.OSFillParent{ .carousel-is-moving .hide-on-drag{ opacity:0; -webkit-transition:opacity 250ms ease; - -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .carousel .list.list-group{ @@ -14031,7 +13915,6 @@ input.OSFillParent.calendar-input{ line-height:calc(var(--font-size-base) * 2); padding-left:var(--space-base); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; vertical-align:top; width:100%; @@ -14195,7 +14078,6 @@ input.OSFillParent.calendar-input{ height:40px; padding:var(--space-none) var(--space-base); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; } .section-expandable-content .choices__list--dropdown.is-active{ @@ -14280,7 +14162,6 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; } .choices[data-type*=select-one].is-open:after{ @@ -14322,8 +14203,7 @@ input.OSFillParent.calendar-input{ color:var(--color-neutral-10); overflow:hidden; padding-right:var(--space-base); - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:99%; } @@ -14483,7 +14363,6 @@ input.OSFillParent.calendar-input{ .flip-content-container{ position:relative; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); - -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; @@ -14633,12 +14512,10 @@ input.OSFillParent.calendar-input{ } .notification--visible.notification--animatable{ -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .notification--animatable{ -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .layout-native .notification{ @@ -14697,7 +14574,6 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:left; transform-origin:left; -webkit-transition:all 750ms ease-out; - -o-transition:all 750ms ease-out; transition:all 750ms ease-out; will-change:width; } @@ -14841,7 +14717,6 @@ input.OSFillParent.calendar-input{ -ms-transform:translateX(102%); transform:translateX(102%); -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:500px; will-change:transform; @@ -14878,7 +14753,6 @@ input.OSFillParent.calendar-input{ -ms-transform:none; transform:none; -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; will-change:transform; } @@ -14975,7 +14849,6 @@ input.OSFillParent.calendar-input{ display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon{ @@ -14987,7 +14860,6 @@ input.OSFillParent.calendar-input{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon:before{ @@ -14999,7 +14871,6 @@ input.OSFillParent.calendar-input{ content:""; height:6px; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -15014,7 +14885,6 @@ input.OSFillParent.calendar-input{ height:100%; position:relative; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-item a{ @@ -15051,7 +14921,6 @@ input.OSFillParent.calendar-input{ -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; - -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -15327,7 +15196,6 @@ input.OSFillParent.calendar-input{ margin-left:var(--space-l); padding:var(--space-base) var(--space-xs); -webkit-transition:border 150ms linear; - -o-transition:border 150ms linear; transition:border 150ms linear; white-space:nowrap; } @@ -15384,7 +15252,6 @@ input.OSFillParent.calendar-input{ .layout-native .tabs-content-wrapper{ -webkit-transition:-webkit-transform 230ms ease-in-out; transition:-webkit-transform 230ms ease-in-out; - -o-transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out, -webkit-transform 230ms ease-in-out; } @@ -16464,8 +16331,7 @@ input.OSFillParent.calendar-input{ } .text-ellipsis{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } /*! 7.9. Border Size */ @@ -17648,7 +17514,6 @@ img.thumbnail{ /*! 7.24. Miscellaneous */ .no-transition{ -webkit-transition:none !important; - -o-transition:none !important; transition:none !important; } .no-transform{ @@ -17706,7 +17571,6 @@ img.thumbnail{ .fade-leave.fade-leave-active{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; - -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17722,7 +17586,6 @@ img.thumbnail{ .fade-leave.fade-leave-active .content{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; - -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17799,7 +17662,6 @@ img.thumbnail{ .fade-enter.fade-enter-active .header{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; - -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17810,7 +17672,6 @@ img.thumbnail{ .fade-leave.fade-leave-active{ opacity:0; -webkit-transition:all 400ms ease-in-out; - -o-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out; } .fade-leave.fade-leave-active .header{ @@ -17818,7 +17679,6 @@ img.thumbnail{ -webkit-transform:translateY(-200px) translateZ(0); transform:translateY(-200px) translateZ(0); -webkit-transition:none; - -o-transition:none; transition:none; } .fade-leave.screen-container{ diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 4917b1dab2..cced0aea0a 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -879,18 +879,21 @@ declare namespace OSFramework.OSUI.Feature.Balloon { shape: GlobalEnum.ShapeTypes; }; class Balloon extends AbstractFeature implements IBalloon { + private _currentFocusedElementIndex; private _eventBodyClick; private _eventOnKeypress; private _floatingInstance; private _floatingOptions; private _focusManagerInstance; private _focusTrapInstance; + private _focusableBalloonElements; private _isOpenedByApi; private _onToggleEvent; isOpen: boolean; constructor(featurePattern: PT, featureElem: HTMLElement, options: BalloonOptions); private _bodyClickCallback; private _handleFocusBehavior; + private _manageFocusInsideBalloon; private _onkeypressCallback; private _removeEventListeners; private _setA11YProperties; @@ -901,7 +904,7 @@ declare namespace OSFramework.OSUI.Feature.Balloon { build(): void; close(): void; dispose(): void; - open(isOpenedByApi: boolean): void; + open(isOpenedByApi: boolean, arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void; setBalloonShape(shape?: GlobalEnum.ShapeTypes): void; setFloatingBehaviour(isUpdate?: boolean): void; setFloatingConfigs(): void; @@ -925,6 +928,7 @@ declare namespace OSFramework.OSUI.Feature.Balloon.Enum { } declare namespace OSFramework.OSUI.Feature.Balloon { interface IBalloon extends Feature.IFeature, Interface.IOpenable { + open(isOpenedByApi?: boolean, arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void; setBalloonShape(shape?: GlobalEnum.ShapeTypes): void; updatePositionOption(position: GlobalEnum.FloatingPosition): void; } @@ -2448,6 +2452,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu { interface IOverflowMenu extends Interface.IPattern, Interface.IOpenable { disable(): void; enable(): void; + open(isOpenedByApi?: boolean, arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void; } } declare namespace OSFramework.OSUI.Patterns.OverflowMenu { @@ -2457,6 +2462,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu { private _balloonFeature; private _eventBalloonOnToggle; private _eventOnClick; + private _eventOnKeydown; private _isDisabled; private _isOpenedByApi; private _platformEventOnToggle; @@ -2466,6 +2472,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu { constructor(uniqueId: string, configs: JSON); private _balloonOnToggleCallback; private _onClickCallback; + private _onKeydownCallback; private _setBalloonFeature; private _setOverflowMenuShape; private _togglePattern; @@ -2483,7 +2490,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu { disable(): void; dispose(): void; enable(): void; - open(isOpenedByApi: boolean): void; + open(isOpenedByApi: boolean, keyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void; registerCallback(eventName: string, callback: GlobalCallbacks.OSGeneric): void; setBalloonOptions(balloonOptions?: Feature.Balloon.BalloonOptions): void; setTriggerAriaLabel(ariaLabelText: string): void; diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 17164b2526..57df6d9175 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -1854,10 +1854,41 @@ var OSFramework; this._focusTrapInstance = new OSUI.Behaviors.FocusTrap(opts); this._focusManagerInstance = new OSUI.Behaviors.FocusManager(); } + _manageFocusInsideBalloon(arrowKeyPressed) { + if (this._focusableBalloonElements.length === 0 || arrowKeyPressed === undefined) { + this._currentFocusedElementIndex = undefined; + } + else if (arrowKeyPressed === OSUI.GlobalEnum.Keycodes.ArrowDown) { + if (this._currentFocusedElementIndex === undefined || + this._currentFocusedElementIndex >= this._focusableBalloonElements.length - 1) + this._currentFocusedElementIndex = 0; + else + this._currentFocusedElementIndex = this._currentFocusedElementIndex + 1; + } + else if (arrowKeyPressed === OSUI.GlobalEnum.Keycodes.ArrowUp) { + if (this._currentFocusedElementIndex === undefined || this._currentFocusedElementIndex === 0) + this._currentFocusedElementIndex = this._focusableBalloonElements.length - 1; + else + this._currentFocusedElementIndex = this._currentFocusedElementIndex - 1; + } + if (this._currentFocusedElementIndex === undefined) { + this.featureElem.focus(); + } + else { + this._focusableBalloonElements[this._currentFocusedElementIndex].focus(); + } + } _onkeypressCallback(e) { const isEscapedPressed = e.key === OSUI.GlobalEnum.Keycodes.Escape; - if (isEscapedPressed && this.isOpen) { - this.close(); + const isArrowDownPressed = e.key === OSUI.GlobalEnum.Keycodes.ArrowDown; + const isArrowUpPressed = e.key === OSUI.GlobalEnum.Keycodes.ArrowUp; + if (this.isOpen) { + if (isEscapedPressed) { + this.close(); + } + else if (isArrowDownPressed || isArrowUpPressed) { + this._manageFocusInsideBalloon(e.key); + } } e.stopPropagation(); } @@ -1891,7 +1922,7 @@ var OSFramework; OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._eventBodyClick); } } - _toggleBalloon(isOpen, isBodyClick = false) { + _toggleBalloon(isOpen, isBodyClick = false, arrowKeyPressed) { this.isOpen = isOpen; if (isOpen) { OSUI.Helper.Dom.Styles.AddClass(this.featureElem, Balloon_1.Enum.CssClasses.IsOpen); @@ -1906,9 +1937,8 @@ var OSFramework; this._focusManagerInstance.storeLastFocusedElement(); this._focusTrapInstance.enableForA11y(); this.setFloatingBehaviour(); - OSUI.Helper.AsyncInvocation(() => { - this.featureElem.focus(); - }); + this._focusableBalloonElements = this.featureElem.querySelectorAll(OSUI.Constants.FocusableElems); + this._manageFocusInsideBalloon(arrowKeyPressed); } else { this._focusTrapInstance.disableForA11y(); @@ -1919,6 +1949,8 @@ var OSFramework; this._focusManagerInstance.setFocusToStoredElement(); } }); + this._focusableBalloonElements = undefined; + this._currentFocusedElementIndex = undefined; } this._onToggleEvent(this.isOpen, this.featureElem); OSUI.Helper.AsyncInvocation(() => { @@ -1950,10 +1982,10 @@ var OSFramework; this._unsetCallbacks(); super.dispose(); } - open(isOpenedByApi) { + open(isOpenedByApi, arrowKeyPressed) { if (this.isOpen === false) { this._isOpenedByApi = isOpenedByApi; - this._toggleBalloon(true); + this._toggleBalloon(true, false, arrowKeyPressed); } } setBalloonShape(shape) { @@ -7244,6 +7276,13 @@ var OSFramework; this.open(this._isOpenedByApi); } } + _onKeydownCallback(event) { + if (!this._balloonFeature.isOpen && + (event.key === OSUI.GlobalEnum.Keycodes.ArrowDown || event.key === OSUI.GlobalEnum.Keycodes.ArrowUp)) { + this._isOpenedByApi = false; + this.open(this._isOpenedByApi, event.key); + } + } _setBalloonFeature() { this.setBalloonOptions(); this._balloonFeature = new OSFramework.OSUI.Feature.Balloon.Balloon(this, this._balloonElem, this.balloonOptions); @@ -7270,6 +7309,7 @@ var OSFramework; } removeEventListeners() { this._triggerElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick); + this._triggerElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnKeydown); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BalloonOnToggle, this._eventBalloonOnToggle); } setA11YProperties() { @@ -7284,9 +7324,11 @@ var OSFramework; setCallbacks() { this._eventBalloonOnToggle = this._balloonOnToggleCallback.bind(this); this._eventOnClick = this._onClickCallback.bind(this); + this._eventOnKeydown = this._onKeydownCallback.bind(this); } setEventListeners() { this._triggerElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick); + this._triggerElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnKeydown); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BalloonOnToggle, this._eventBalloonOnToggle); } setHtmlElements() { @@ -7348,10 +7390,10 @@ var OSFramework; this._isDisabled = false; OSUI.Helper.Dom.Attribute.Remove(this._triggerElem, OSUI.GlobalEnum.HTMLAttributes.Disabled); } - open(isOpenedByApi) { + open(isOpenedByApi, keyPressed) { if (this._balloonFeature.isOpen === false && this._isDisabled === false) { this._isOpenedByApi = isOpenedByApi; - this._balloonFeature.open(this._isOpenedByApi); + this._balloonFeature.open(this._isOpenedByApi, keyPressed); } } registerCallback(eventName, callback) { diff --git a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts index 27a504ca10..89adae80f8 100644 --- a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts +++ b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts @@ -19,6 +19,8 @@ namespace OSFramework.OSUI.Feature.Balloon { * @template PT */ export class Balloon extends AbstractFeature implements IBalloon { + // Store the current focused element's index + private _currentFocusedElementIndex: number; // Store the listener callbacks private _eventBodyClick: GlobalCallbacks.Generic; private _eventOnKeypress: GlobalCallbacks.Generic; @@ -30,6 +32,8 @@ namespace OSFramework.OSUI.Feature.Balloon { private _focusManagerInstance: Behaviors.FocusManager; // FocusTrap Properties private _focusTrapInstance: Behaviors.FocusTrap; + // Store the focusable elements inside the balloon + private _focusableBalloonElements: NodeListOf; // Flag used to deal with onBodyClick and open api concurrency methods! private _isOpenedByApi = false; // Store the onTogle custom event @@ -64,13 +68,58 @@ namespace OSFramework.OSUI.Feature.Balloon { this._focusManagerInstance = new Behaviors.FocusManager(); } + // Manage the focus of the elements inside the Balloon + private _manageFocusInsideBalloon( + arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp + ) { + if (this._focusableBalloonElements.length === 0 || arrowKeyPressed === undefined) { + this._currentFocusedElementIndex = undefined; + } + // When ArrowDown is pressed + else if (arrowKeyPressed === GlobalEnum.Keycodes.ArrowDown) { + // If the _currentFocusedElementIndex is undefined or is the last one + // Then move the focus to the first focusable element + if ( + this._currentFocusedElementIndex === undefined || + this._currentFocusedElementIndex >= this._focusableBalloonElements.length - 1 + ) + this._currentFocusedElementIndex = 0; + // Otherwise, move the focus to the next focusable element + else this._currentFocusedElementIndex = this._currentFocusedElementIndex + 1; + } + // When ArrowUp is pressed + else if (arrowKeyPressed === GlobalEnum.Keycodes.ArrowUp) { + // If the _currentFocusedElementIndex is undefined or is the first one + // Then move the focus to the last focusable element + if (this._currentFocusedElementIndex === undefined || this._currentFocusedElementIndex === 0) + this._currentFocusedElementIndex = this._focusableBalloonElements.length - 1; + // Otherwise, move the focus to the previous focusable element + else this._currentFocusedElementIndex = this._currentFocusedElementIndex - 1; + } + + // If the _currentFocusedElementIndex is undefined, focus on the balloon wrapper + if (this._currentFocusedElementIndex === undefined) { + this.featureElem.focus(); + // Otherwise, focus on the element corresponding ot the _currentFocusedElementIndex + } else { + (this._focusableBalloonElements[this._currentFocusedElementIndex] as HTMLElement).focus(); + } + } + // Call methods to open or close, based on e.key and behaviour applied private _onkeypressCallback(e: KeyboardEvent): void { const isEscapedPressed = e.key === GlobalEnum.Keycodes.Escape; + const isArrowDownPressed = e.key === GlobalEnum.Keycodes.ArrowDown; + const isArrowUpPressed = e.key === GlobalEnum.Keycodes.ArrowUp; - // Close the Balloon when pressing Esc - if (isEscapedPressed && this.isOpen) { - this.close(); + if (this.isOpen) { + // Close the Balloon when pressing Esc + if (isEscapedPressed) { + this.close(); + // Move the focus between the balloon's focusable elements when pressing ArrowDown or ArrowUp + } else if (isArrowDownPressed || isArrowUpPressed) { + this._manageFocusInsideBalloon(e.key); + } } e.stopPropagation(); @@ -137,7 +186,11 @@ namespace OSFramework.OSUI.Feature.Balloon { } // Method to toggle the open/close the Balloon - private _toggleBalloon(isOpen: boolean, isBodyClick = false): void { + private _toggleBalloon( + isOpen: boolean, + isBodyClick = false, + arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp + ): void { // Update property this.isOpen = isOpen; @@ -163,10 +216,10 @@ namespace OSFramework.OSUI.Feature.Balloon { // Set Floating Util this.setFloatingBehaviour(); - // Focus on element when pattern is open - Helper.AsyncInvocation(() => { - this.featureElem.focus(); - }); + // Store the focusable elements inside the Balloon + this._focusableBalloonElements = this.featureElem.querySelectorAll(Constants.FocusableElems); + // Manage the focus when opening the balloon + this._manageFocusInsideBalloon(arrowKeyPressed); } else { // Handle focus trap logic this._focusTrapInstance.disableForA11y(); @@ -179,6 +232,10 @@ namespace OSFramework.OSUI.Feature.Balloon { this._focusManagerInstance.setFocusToStoredElement(); } }); + + // Unset focus attributes + this._focusableBalloonElements = undefined; + this._currentFocusedElementIndex = undefined; } // Trigger the Custom Event BalloonOnToggle @@ -239,10 +296,13 @@ namespace OSFramework.OSUI.Feature.Balloon { * * @memberof Balloon */ - public open(isOpenedByApi: boolean): void { + public open( + isOpenedByApi: boolean, + arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp + ): void { if (this.isOpen === false) { this._isOpenedByApi = isOpenedByApi; - this._toggleBalloon(true); + this._toggleBalloon(true, false, arrowKeyPressed); } } diff --git a/src/scripts/OSFramework/OSUI/Feature/Balloon/IBalloon.ts b/src/scripts/OSFramework/OSUI/Feature/Balloon/IBalloon.ts index da160ad9fc..5e3b944d35 100644 --- a/src/scripts/OSFramework/OSUI/Feature/Balloon/IBalloon.ts +++ b/src/scripts/OSFramework/OSUI/Feature/Balloon/IBalloon.ts @@ -9,6 +9,18 @@ namespace OSFramework.OSUI.Feature.Balloon { * @extends {Interface.IOpenable} */ export interface IBalloon extends Feature.IFeature, Interface.IOpenable { + /** + * Overload the open method. + * + * @param {boolean} [isOpenedByApi] + * @param {boolean} [arrowKeyPressed] + * @memberof IBalloon + */ + open( + isOpenedByApi?: boolean, + arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp + ): void; + /** * Method to set the Balloon border shape * diff --git a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/IOverflowMenu.ts b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/IOverflowMenu.ts index 53c8406ec3..7d48e75bf4 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/IOverflowMenu.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/IOverflowMenu.ts @@ -6,5 +6,17 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { export interface IOverflowMenu extends Interface.IPattern, Interface.IOpenable { disable(): void; enable(): void; + + /** + * Overload the open method. + * + * @param {boolean} [isOpenedByApi] + * @param {boolean} [arrowKeyPressed] + * @memberof IOverflowMenu + */ + open( + isOpenedByApi?: boolean, + arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp + ): void; } } diff --git a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts index eb9e3f1380..d9d522fa18 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts @@ -18,6 +18,7 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { // Store the Event Callbacks private _eventBalloonOnToggle: GlobalCallbacks.Generic; private _eventOnClick: GlobalCallbacks.Generic; + private _eventOnKeydown: GlobalCallbacks.Generic; // Flag used to set the enable/disable state private _isDisabled = false; // Flag used to deal with onBodyClick and open api concurrency methods! @@ -54,6 +55,17 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { } } + // Method to handle the trigger Keydown callback + private _onKeydownCallback(event: KeyboardEvent): void { + if ( + !this._balloonFeature.isOpen && + (event.key === GlobalEnum.Keycodes.ArrowDown || event.key === GlobalEnum.Keycodes.ArrowUp) + ) { + this._isOpenedByApi = false; + this.open(this._isOpenedByApi, event.key); + } + } + // Method to call the Balloon Class private _setBalloonFeature(): void { this.setBalloonOptions(); @@ -106,6 +118,7 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { */ protected removeEventListeners(): void { this._triggerElem.removeEventListener(GlobalEnum.HTMLEvent.Click, this._eventOnClick); + this._triggerElem.removeEventListener(GlobalEnum.HTMLEvent.keyDown, this._eventOnKeydown); Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler( Event.DOMEvents.Listeners.Type.BalloonOnToggle, @@ -139,6 +152,7 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { protected setCallbacks(): void { this._eventBalloonOnToggle = this._balloonOnToggleCallback.bind(this); this._eventOnClick = this._onClickCallback.bind(this); + this._eventOnKeydown = this._onKeydownCallback.bind(this); } /** @@ -149,6 +163,7 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { */ protected setEventListeners(): void { this._triggerElem.addEventListener(GlobalEnum.HTMLEvent.Click, this._eventOnClick); + this._triggerElem.addEventListener(GlobalEnum.HTMLEvent.keyDown, this._eventOnKeydown); Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler( Event.DOMEvents.Listeners.Type.BalloonOnToggle, @@ -283,10 +298,13 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { * * @memberof OverflowMenu */ - public open(isOpenedByApi: boolean): void { + public open( + isOpenedByApi: boolean, + keyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp + ): void { if (this._balloonFeature.isOpen === false && this._isDisabled === false) { this._isOpenedByApi = isOpenedByApi; - this._balloonFeature.open(this._isOpenedByApi); + this._balloonFeature.open(this._isOpenedByApi, keyPressed); } } From 865ec3b6b3178c528133df543254d2975eb75641 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Tue, 19 Sep 2023 18:37:49 +0100 Subject: [PATCH 05/17] Rating: - add logic to manage ariaHidden and ariaChecked; - remove the logic that was adding wcaghideText to the first input label; - improve scss file; - add styles to prevent half to be visible when is not half rating; - add styles to guarantee the empty editable rating is visible; --- dist/OutSystemsUI.css | 66 +++++--- dist/OutSystemsUI.js | 37 +++-- .../OSFramework/OSUI/Pattern/Rating/Rating.ts | 31 +++- .../OSUI/Pattern/Rating/scss/_rating.scss | 142 +++++++++++------- 4 files changed, 186 insertions(+), 90 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 888886e4ae..41ce59c51b 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -12318,6 +12318,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } /*! 6.5.5. Rating */ .rating{ + position:relative; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; @@ -12339,6 +12340,9 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating.rating-medium{ --rating-size:24px; } +.rating.is-edit{ + pointer-events:initial; +} .rating.is-edit .rating-item{ cursor:pointer; pointer-events:auto; @@ -12380,41 +12384,49 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ opacity:0; z-index:var(--layer-global-screen); } -.rating .rating-item[class*=rating-]:last-of-type{ +.rating-item:last-of-type{ padding-right:0; } -.rating input:checked + label .rating-item-empty, -.rating input:checked ~ label .rating-item-filled{ - opacity:0; +.rating:hover input + .rating-item .rating-item-filled{ + opacity:1; } -.rating.is-half .rating-item-half{ - z-index:var(--layer-local-tier-1); +.rating input{ } -.rating.is-half input:checked + label .rating-item-half{ - opacity:1; +.rating input:first-of-type + .rating-item{ + background:transparent; + display:none; + height:100%; + left:0; + position:absolute; + top:0; + width:100%; + -webkit-box-shadow:0 0 0 3px var(--color-focus-outer); + box-shadow:0 0 0 3px var(--color-focus-outer); } -.rating.is-half input:checked + label .rating-item-filled{ +.rating input:first-of-type:focus:checked + .rating-item{ + display:block; +} +.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled, .rating input:focus + .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-filled{ opacity:0; } -.rating:hover input + label .rating-item-filled, .rating.is-half:hover input:checked + label .rating-item-filled{ +.rating input:hover ~ .rating-item .rating-item-empty, .rating input:hover + .rating-item .rating-item-filled, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty{ opacity:1; } -.rating input:focus + label .rating-item-empty, -.rating input:hover ~ label .rating-item-filled{ - opacity:0; +.rating.is-half .rating-item-half{ + z-index:var(--layer-local-tier-1); } -.rating input:checked ~ label .rating-item-empty, -.rating input:checked + label .rating-item-filled, -.rating input:checked + label .rating-item-half, -.rating input:hover ~ label .rating-item-empty, -.rating input:focus ~ label .rating-item-empty, -.rating input:focus + label .rating-item-filled{ +.rating.is-half input:checked + .rating-item .rating-item-half{ opacity:1; } -.rating input:hover ~ label .rating-item-filled, .rating.is-half input:hover ~ label.rating-item .rating-item-filled, .rating.is-half input:hover ~ label.rating-item .rating-item-half{ +.rating.is-half input:checked + .rating-item .rating-item-filled{ + opacity:0; +} +.rating.is-half input:hover ~ .rating-item .rating-item-filled, +.rating.is-half input:hover ~ .rating-item .rating-item-half{ opacity:0; } -.rating input:hover + label .rating-item-filled, .rating.is-half input:hover + label.rating-item .rating-item-filled{ +.rating.is-half:hover input:checked + .rating-item .rating-item-filled, +.rating.is-half input:hover + .rating-item .rating-item-filled{ opacity:1; } .rating .icon-states{ @@ -12437,7 +12449,17 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ -ms-transform:scaleX(-1); transform:scaleX(-1); } -.has-accessible-features input:focus + .rating-item > div{ +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-filled, +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-filled *, .has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-half, +.has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-half *, +.has-accessible-features .rating input:checked + .rating-item .rating-item-empty, +.has-accessible-features .rating input:checked + .rating-item .rating-item-empty *{ + -webkit-box-shadow:none; + box-shadow:none; +} +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-half, +.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-half *, .has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-filled, +.has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-filled *{ -webkit-box-shadow:0 0 0 3px var(--color-focus-outer); box-shadow:0 0 0 3px var(--color-focus-outer); } diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 17164b2526..d21df80ff9 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -4410,12 +4410,6 @@ var OSFramework; var BottomSheet; (function (BottomSheet_1) { class BottomSheet extends Patterns.AbstractPattern { - get gestureEventInstance() { - return this._gestureEventInstance; - } - get hasGestureEvents() { - return this._hasGestureEvents; - } constructor(uniqueId, configs) { super(uniqueId, new BottomSheet_1.BottomSheetConfig(configs)); this._isOpen = false; @@ -4428,6 +4422,12 @@ var OSFramework; }, }; } + get gestureEventInstance() { + return this._gestureEventInstance; + } + get hasGestureEvents() { + return this._hasGestureEvents; + } _handleFocusBehavior() { const opts = { focusTargetElement: this._parentSelf, @@ -8362,6 +8362,11 @@ var OSFramework; this._isHalfValue = false; const isInput = OSUI.Helper.Dom.Styles.ContainsClass(currentTarget, Rating_1.Enum.CssClass.RatingInput); if (isInput) { + const lastchosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue]; + if (lastchosen) { + lastchosen.ariaChecked = 'false'; + lastchosen.ariaHidden = 'true'; + } this.configs.RatingValue = this._getValue(); this._setValue(true); } @@ -8372,11 +8377,18 @@ var OSFramework; } } _renderItem(index) { - const hideLabelClass = index === 0 ? Rating_1.Enum.CssClass.WCAGHideText : ''; const labelHTML = index !== 0 ? this._clonedPlaceholders : ''; const ratingInputId = this.uniqueId + '-rating-' + index; - const input = ``; - const label = ``; + let input; + let label; + if (!this.configs.IsEdit) { + input = ``; + label = ``; + } + else { + input = ``; + label = ``; + } this._ratingFieldsetElem.innerHTML += input + label; } _setFieldsetDisabledStatus(isDisabled) { @@ -8437,11 +8449,14 @@ var OSFramework; } if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; + ratingItems[1].ariaChecked = 'true'; + ratingItems[1].ariaHidden = 'false'; return; } let newValue = this._isHalfValue || this._decimalValue > 0.7 ? Math.floor(this.configs.RatingValue) + 1 : Math.floor(this.configs.RatingValue); + const oldValue = Math.floor(this.configs.RatingValue); if (newValue < Rating_1.Enum.Properties.MinRatingScale) { newValue = Rating_1.Enum.Properties.MinRatingScale; console.warn(`The value of RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} can't be smaller than '${Rating_1.Enum.Properties.MinRatingScale}'.`); @@ -8450,7 +8465,11 @@ var OSFramework; newValue = this.configs.RatingScale; console.warn(`The value of the RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} exceeds the scale boundaries. To ensure its correct behaviour, set a value smaller or equal to '${this.configs.RatingScale}'.`); } + ratingItems[oldValue].ariaChecked = 'false'; + ratingItems[oldValue].ariaHidden = 'true'; ratingItems[newValue].checked = true; + ratingItems[newValue].ariaChecked = 'true'; + ratingItems[newValue].ariaHidden = 'false'; if (this._isHalfValue) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf); } diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts index 8c2818b2a6..c3f6184c46 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts @@ -142,6 +142,14 @@ namespace OSFramework.OSUI.Patterns.Rating { // Check if the e.target is a label with the Enum.RatingCssClass.RatingInput class const isInput = Helper.Dom.Styles.ContainsClass(currentTarget, Enum.CssClass.RatingInput); if (isInput) { + const lastchosen = this.selfElement.querySelectorAll(GlobalEnum.HTMLElement.Input)[ + this.configs.RatingValue + ]; + if (lastchosen) { + lastchosen.ariaChecked = 'false'; + lastchosen.ariaHidden = 'true'; + } + // If it is, then get the input:checked value this.configs.RatingValue = this._getValue(); // And use that value to set a new Rating Value @@ -169,16 +177,21 @@ namespace OSFramework.OSUI.Patterns.Rating { * @memberof Rating */ private _renderItem(index: number): void { - // If first input, whihc is hidden, than also hide the label - const hideLabelClass: string = index === 0 ? Enum.CssClass.WCAGHideText : ''; // if not first input, which is hidden, add the html stored form the placeholders const labelHTML = index !== 0 ? this._clonedPlaceholders : ''; // Create a unique rating input id, based on the index const ratingInputId: string = this.uniqueId + '-rating-' + index; - // Craete input and label html - const input = ``; - const label = ``; + // Create input and label html + let input; + let label; + if (!this.configs.IsEdit) { + input = ``; + label = ``; + } else { + input = ``; + label = ``; + } // Append new input + label to fieldset's html this._ratingFieldsetElem.innerHTML += input + label; @@ -329,6 +342,8 @@ namespace OSFramework.OSUI.Patterns.Rating { // If there's only one rating item, then there's no need for further checks, this one will be checked if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; + ratingItems[1].ariaChecked = 'true'; + ratingItems[1].ariaHidden = 'false'; return; } @@ -339,6 +354,7 @@ namespace OSFramework.OSUI.Patterns.Rating { this._isHalfValue || this._decimalValue > 0.7 ? Math.floor(this.configs.RatingValue) + 1 : Math.floor(this.configs.RatingValue); + const oldValue = Math.floor(this.configs.RatingValue); if (newValue < Enum.Properties.MinRatingScale) { // If negative value, set it as 0 by default @@ -356,8 +372,13 @@ namespace OSFramework.OSUI.Patterns.Rating { ); } + ratingItems[oldValue].ariaChecked = 'false'; + ratingItems[oldValue].ariaHidden = 'true'; + // Set the itemas as :checked ratingItems[newValue].checked = true; + ratingItems[newValue].ariaChecked = 'true'; + ratingItems[newValue].ariaHidden = 'false'; // If is-half add the appropriate class, otherwise just declare the this.isHalfValue, to complete the if statement if (this._isHalfValue) { diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss index 616615ff51..5a32f49bf7 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss @@ -5,6 +5,7 @@ /// .rating { + position: relative; display: inline-flex; flex-wrap: wrap; font-size: var(--rating-size); @@ -15,21 +16,20 @@ -servicestudio-display: inline-flex; } - &.rating { - &-small { - .rating-item { - padding-right: calc(var(--rating-size) + var(--space-xs)); - } + &.rating-small { + --rating-size: 8px; - --rating-size: 8px; + .rating-item { + padding-right: calc(var(--rating-size) + var(--space-xs)); } + } - &-medium { - --rating-size: 24px; - } + &.rating-medium { + --rating-size: 24px; } &.is-edit { + pointer-events: initial; .rating-item { cursor: pointer; pointer-events: auto; @@ -80,60 +80,79 @@ opacity: 0; z-index: var(--layer-global-screen); } - } - - .rating-item[class*='rating-']:last-of-type { - padding-right: 0; - } - - // These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended - /* Checked styles*/ - input:checked + label .rating-item-empty, - input:checked ~ label .rating-item-filled { - opacity: 0; - } - &.is-half .rating-item-half { - z-index: var(--layer-local-tier-1); + &:last-of-type { + padding-right: 0; + } } - &.is-half input:checked + label .rating-item-half { + /* Selected Styles*/ + &:hover input + .rating-item .rating-item-filled { opacity: 1; } - &.is-half input:checked + label .rating-item-filled { - opacity: 0; - } + input { + &:first-of-type { + + .rating-item { + background: transparent; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + box-shadow: 0 0 0 3px var(--color-focus-outer); + } + &:focus:checked + .rating-item { + display: block; + } + } - /* Selected Styles*/ - &:hover input + label .rating-item-filled, - &.is-half:hover input:checked + label .rating-item-filled { - opacity: 1; - } + // These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended + /* Checked styles*/ + &:checked + .rating-item .rating-item-empty, + &:checked ~ .rating-item .rating-item-filled, + &:focus + .rating-item .rating-item-empty, + &:hover ~ .rating-item .rating-item-filled { + opacity: 0; + } - input:focus + label .rating-item-empty, - input:hover ~ label .rating-item-filled { - opacity: 0; + &:hover ~ .rating-item .rating-item-empty, + &:hover + .rating-item .rating-item-filled, + &:focus ~ .rating-item .rating-item-empty, + &:focus + .rating-item .rating-item-filled, + &:checked + .rating-item .rating-item-filled, + &:checked + .rating-item .rating-item-half, + &:checked ~ .rating-item .rating-item-empty { + opacity: 1; + } } - input:checked ~ label .rating-item-empty, - input:checked + label .rating-item-filled, - input:checked + label .rating-item-half, - input:hover ~ label .rating-item-empty, - input:focus ~ label .rating-item-empty, - input:focus + label .rating-item-filled { - opacity: 1; - } + &.is-half { + .rating-item-half { + z-index: var(--layer-local-tier-1); + } - input:hover ~ label .rating-item-filled, - &.is-half input:hover ~ label.rating-item .rating-item-filled, - &.is-half input:hover ~ label.rating-item .rating-item-half { - opacity: 0; - } + input:checked + .rating-item { + .rating-item-half { + opacity: 1; + } + .rating-item-filled { + opacity: 0; + } + } - input:hover + label .rating-item-filled, - &.is-half input:hover + label.rating-item .rating-item-filled { - opacity: 1; + input:hover ~ .rating-item { + .rating-item-filled, + .rating-item-half { + opacity: 0; + } + } + + &:hover input:checked + .rating-item .rating-item-filled, + input:hover + .rating-item .rating-item-filled { + opacity: 1; + } } .icon-states { @@ -192,8 +211,23 @@ // Accessibility ----------------------------------------------------------------- /// .has-accessible-features { - input:focus + .rating-item > div { - box-shadow: 0 0 0 3px var(--color-focus-outer); + .rating { + &.is-half input:focus + .rating-item .rating-item-filled, + &:not(.is-half) input:focus + .rating-item .rating-item-half, + input:checked + .rating-item .rating-item-empty { + &, + * { + box-shadow: none; + } + } + + &.is-half input:focus + .rating-item .rating-item-half, + &:not(.is-half) input:focus + .rating-item .rating-item-filled { + &, + * { + box-shadow: 0 0 0 3px var(--color-focus-outer); + } + } } } @@ -207,4 +241,4 @@ } } } -} \ No newline at end of file +} From ca8eab7659c36a298faa7a0e91fb9854f5a1956b Mon Sep 17 00:00:00 2001 From: bmarcelino-fe Date: Tue, 19 Sep 2023 19:31:18 +0100 Subject: [PATCH 06/17] Enum sorted alphabetically --- src/scripts/OSFramework/OSUI/GlobalEnum.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts index fc02df85f3..499692e107 100644 --- a/src/scripts/OSFramework/OSUI/GlobalEnum.ts +++ b/src/scripts/OSFramework/OSUI/GlobalEnum.ts @@ -80,8 +80,8 @@ namespace OSFramework.OSUI.GlobalEnum { export enum FloatingPosition { Auto = 'auto', Bottom = 'bottom', - BottomStart = 'bottom-start', BottomEnd = 'bottom-end', + BottomStart = 'bottom-start', Center = 'center', Left = 'left', LeftEnd = 'left-end', @@ -90,8 +90,8 @@ namespace OSFramework.OSUI.GlobalEnum { RightEnd = 'right-end', RightStart = 'right-start', Top = 'top', - TopStart = 'top-start', TopEnd = 'top-end', + TopStart = 'top-start', } /** @@ -165,12 +165,12 @@ namespace OSFramework.OSUI.GlobalEnum { Class = 'class', DataInput = 'data-input', Disabled = 'disabled', + Href = 'href', Id = 'id', Name = 'name', StatusBar = 'data-status-bar-height', Style = 'style', Type = 'type', - Href = 'href', } /** @@ -325,8 +325,8 @@ namespace OSFramework.OSUI.GlobalEnum { Submenu = 'Submenu', SwipeEvents = 'SwipeEvents', Tabs = 'Tabs', - TabsHeaderItem = 'TabsHeaderItem', TabsContentItem = 'TabsContentItem', + TabsHeaderItem = 'TabsHeaderItem', Timepicker = 'Timepicker', Tooltip = 'Tooltip', TouchEvents = 'TouchEvents', From 750da77c8f9e613f6f53cb40d59274c803b34acf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Wed, 20 Sep 2023 10:52:35 +0100 Subject: [PATCH 07/17] - clean not needed code; - improve screen reader feedback by improve aria-hidden management; --- dist/OutSystemsUI.js | 26 +++++++++-------- .../OSFramework/OSUI/Pattern/Rating/Rating.ts | 29 ++++++++++--------- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index d21df80ff9..88463fedc5 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -8365,7 +8365,6 @@ var OSFramework; const lastchosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue]; if (lastchosen) { lastchosen.ariaChecked = 'false'; - lastchosen.ariaHidden = 'true'; } this.configs.RatingValue = this._getValue(); this._setValue(true); @@ -8379,14 +8378,12 @@ var OSFramework; _renderItem(index) { const labelHTML = index !== 0 ? this._clonedPlaceholders : ''; const ratingInputId = this.uniqueId + '-rating-' + index; - let input; + const input = ``; let label; if (!this.configs.IsEdit) { - input = ``; label = ``; } else { - input = ``; label = ``; } this._ratingFieldsetElem.innerHTML += input + label; @@ -8422,9 +8419,19 @@ var OSFramework; } _setIsEdit() { this._setIsDisabled(!this.configs.IsEdit); - this.configs.IsEdit - ? OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit) - : OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + const LabelList = this.selfElement.querySelectorAll(OSUI.Constants.Dot + Rating_1.Enum.CssClass.RatingItem); + if (this.configs.IsEdit) { + OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + LabelList.forEach((label) => { + label.removeAttribute('aria-hidden'); + }); + } + else { + OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + LabelList.forEach((label) => { + label.ariaHidden = 'true'; + }); + } this._manageRatingEvent(); } _setScale() { @@ -8450,13 +8457,11 @@ var OSFramework; if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; ratingItems[1].ariaChecked = 'true'; - ratingItems[1].ariaHidden = 'false'; return; } let newValue = this._isHalfValue || this._decimalValue > 0.7 ? Math.floor(this.configs.RatingValue) + 1 : Math.floor(this.configs.RatingValue); - const oldValue = Math.floor(this.configs.RatingValue); if (newValue < Rating_1.Enum.Properties.MinRatingScale) { newValue = Rating_1.Enum.Properties.MinRatingScale; console.warn(`The value of RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} can't be smaller than '${Rating_1.Enum.Properties.MinRatingScale}'.`); @@ -8465,11 +8470,8 @@ var OSFramework; newValue = this.configs.RatingScale; console.warn(`The value of the RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} exceeds the scale boundaries. To ensure its correct behaviour, set a value smaller or equal to '${this.configs.RatingScale}'.`); } - ratingItems[oldValue].ariaChecked = 'false'; - ratingItems[oldValue].ariaHidden = 'true'; ratingItems[newValue].checked = true; ratingItems[newValue].ariaChecked = 'true'; - ratingItems[newValue].ariaHidden = 'false'; if (this._isHalfValue) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf); } diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts index c3f6184c46..367b2e7d19 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts @@ -147,7 +147,6 @@ namespace OSFramework.OSUI.Patterns.Rating { ]; if (lastchosen) { lastchosen.ariaChecked = 'false'; - lastchosen.ariaHidden = 'true'; } // If it is, then get the input:checked value @@ -183,13 +182,12 @@ namespace OSFramework.OSUI.Patterns.Rating { const ratingInputId: string = this.uniqueId + '-rating-' + index; // Create input and label html - let input; + const input = ``; + let label; if (!this.configs.IsEdit) { - input = ``; label = ``; } else { - input = ``; label = ``; } @@ -274,11 +272,22 @@ namespace OSFramework.OSUI.Patterns.Rating { private _setIsEdit(): void { // Set the fieldset and input disabled attribute status this._setIsDisabled(!this.configs.IsEdit); + const LabelList = this.selfElement.querySelectorAll(Constants.Dot + Enum.CssClass.RatingItem); // Toggle the is-edit class - this.configs.IsEdit - ? Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit) - : Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit); + if (this.configs.IsEdit) { + Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit); + + LabelList.forEach((label) => { + label.removeAttribute('aria-hidden'); + }); + } else { + Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit); + + LabelList.forEach((label) => { + label.ariaHidden = 'true'; + }); + } // Review if there's a need to add/remove the click event, accordingly to the IsEdit value this._manageRatingEvent(); @@ -343,7 +352,6 @@ namespace OSFramework.OSUI.Patterns.Rating { if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; ratingItems[1].ariaChecked = 'true'; - ratingItems[1].ariaHidden = 'false'; return; } @@ -354,7 +362,6 @@ namespace OSFramework.OSUI.Patterns.Rating { this._isHalfValue || this._decimalValue > 0.7 ? Math.floor(this.configs.RatingValue) + 1 : Math.floor(this.configs.RatingValue); - const oldValue = Math.floor(this.configs.RatingValue); if (newValue < Enum.Properties.MinRatingScale) { // If negative value, set it as 0 by default @@ -372,13 +379,9 @@ namespace OSFramework.OSUI.Patterns.Rating { ); } - ratingItems[oldValue].ariaChecked = 'false'; - ratingItems[oldValue].ariaHidden = 'true'; - // Set the itemas as :checked ratingItems[newValue].checked = true; ratingItems[newValue].ariaChecked = 'true'; - ratingItems[newValue].ariaHidden = 'false'; // If is-half add the appropriate class, otherwise just declare the this.isHalfValue, to complete the if statement if (this._isHalfValue) { From 61454b0d50bcdecb3db5def3dad548d4b79fd144 Mon Sep 17 00:00:00 2001 From: Giuliana Silva <108938618+OS-giulianasilva@users.noreply.github.com> Date: Wed, 20 Sep 2023 11:52:38 +0100 Subject: [PATCH 08/17] Prevent scroll when using arrow up and down keys on OverflowMenu (#825) --- dist/OutSystemsUI.js | 2 ++ src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts | 1 + .../OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts | 1 + 3 files changed, 4 insertions(+) diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index b3c39eb596..723f9cf7f7 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -1890,6 +1890,7 @@ var OSFramework; } else if (isArrowDownPressed || isArrowUpPressed) { this._manageFocusInsideBalloon(e.key); + e.preventDefault(); } } e.stopPropagation(); @@ -7283,6 +7284,7 @@ var OSFramework; (event.key === OSUI.GlobalEnum.Keycodes.ArrowDown || event.key === OSUI.GlobalEnum.Keycodes.ArrowUp)) { this._isOpenedByApi = false; this.open(this._isOpenedByApi, event.key); + event.preventDefault(); } } _setBalloonFeature() { diff --git a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts index 89adae80f8..cafeb332f0 100644 --- a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts +++ b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts @@ -119,6 +119,7 @@ namespace OSFramework.OSUI.Feature.Balloon { // Move the focus between the balloon's focusable elements when pressing ArrowDown or ArrowUp } else if (isArrowDownPressed || isArrowUpPressed) { this._manageFocusInsideBalloon(e.key); + e.preventDefault(); // Prevent scroll } } diff --git a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts index d9d522fa18..76aa2cc5e3 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts @@ -63,6 +63,7 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu { ) { this._isOpenedByApi = false; this.open(this._isOpenedByApi, event.key); + event.preventDefault(); // Prevent scroll } } From 53d7e8de73f09b18777bd6079883b85a68e03daa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Wed, 20 Sep 2023 15:38:47 +0100 Subject: [PATCH 09/17] - reorganize css rules related with states of the rating items; --- dist/OutSystemsUI.css | 16 +++++--- .../OSUI/Pattern/Rating/scss/_rating.scss | 40 ++++++++++++------- 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 41ce59c51b..3e56635531 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -12387,6 +12387,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating-item:last-of-type{ padding-right:0; } +.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled{ + opacity:0; +} +.rating.is-half input:checked ~ .rating-item .rating-item-half{ + opacity:0; +} .rating:hover input + .rating-item .rating-item-filled{ opacity:1; } @@ -12406,10 +12412,13 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating input:first-of-type:focus:checked + .rating-item{ display:block; } -.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled, .rating input:focus + .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-filled{ +.rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-empty, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled{ + opacity:1; +} +.rating input:hover ~ .rating-item .rating-item-filled, .rating input:hover ~ .rating-item .rating-item-half{ opacity:0; } -.rating input:hover ~ .rating-item .rating-item-empty, .rating input:hover + .rating-item .rating-item-filled, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty{ +.rating input:hover + .rating-item .rating-item-filled{ opacity:1; } .rating.is-half .rating-item-half{ @@ -12418,9 +12427,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating.is-half input:checked + .rating-item .rating-item-half{ opacity:1; } -.rating.is-half input:checked + .rating-item .rating-item-filled{ - opacity:0; -} .rating.is-half input:hover ~ .rating-item .rating-item-filled, .rating.is-half input:hover ~ .rating-item .rating-item-half{ opacity:0; diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss index 5a32f49bf7..19e23639be 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss @@ -86,6 +86,19 @@ } } + input { + &:checked + .rating-item .rating-item-empty, + &:checked ~ .rating-item .rating-item-filled { + opacity: 0; + } + } + + &.is-half { + input:checked ~ .rating-item .rating-item-half { + opacity: 0; + } + } + /* Selected Styles*/ &:hover input + .rating-item .rating-item-filled { opacity: 1; @@ -110,20 +123,22 @@ // These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended /* Checked styles*/ - &:checked + .rating-item .rating-item-empty, - &:checked ~ .rating-item .rating-item-filled, - &:focus + .rating-item .rating-item-empty, - &:hover ~ .rating-item .rating-item-filled { + &:checked + .rating-item .rating-item-filled, + &:checked + .rating-item .rating-item-half, + &:checked ~ .rating-item .rating-item-empty, + &:hover ~ .rating-item .rating-item-empty, + &:focus ~ .rating-item .rating-item-empty, + &:focus + .rating-item .rating-item-filled { + opacity: 1; + } + + //&:focus + .rating-item .rating-item-empty, + &:hover ~ .rating-item .rating-item-filled, + &:hover ~ .rating-item .rating-item-half { opacity: 0; } - &:hover ~ .rating-item .rating-item-empty, - &:hover + .rating-item .rating-item-filled, - &:focus ~ .rating-item .rating-item-empty, - &:focus + .rating-item .rating-item-filled, - &:checked + .rating-item .rating-item-filled, - &:checked + .rating-item .rating-item-half, - &:checked ~ .rating-item .rating-item-empty { + &:hover + .rating-item .rating-item-filled { opacity: 1; } } @@ -137,9 +152,6 @@ .rating-item-half { opacity: 1; } - .rating-item-filled { - opacity: 0; - } } input:hover ~ .rating-item { From 8ece11c3c13834ccbf24f1eff2fd6c7263fe256e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Wed, 20 Sep 2023 19:14:06 +0100 Subject: [PATCH 10/17] - fix small issues related with specific interactions --- dist/OutSystemsUI.css | 179 ++++++++++++++++-- .../OSUI/Pattern/Rating/scss/_rating.scss | 12 ++ 2 files changed, 176 insertions(+), 15 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index e49720af63..bd577440d4 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -506,6 +506,7 @@ a{ a, a:visited{ color:var(--color-primary); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; } a:hover, a:focus{ @@ -1103,6 +1104,7 @@ body, position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; + -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:100vw; will-change:opacity; @@ -1115,6 +1117,7 @@ body, opacity:1; pointer-events:auto; -webkit-transition:opacity 330ms ease-out; + -o-transition:opacity 330ms ease-out; transition:opacity 330ms ease-out; } .layout .app-menu-content{ @@ -1172,6 +1175,7 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; + -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1184,6 +1188,7 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; + -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1224,6 +1229,7 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.6. Layout Native - Menu */ @@ -1306,6 +1312,7 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; + -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1317,6 +1324,7 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; + -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1347,6 +1355,7 @@ body, -ms-transform:none; transform:none; -webkit-transition:none; + -o-transition:none; transition:none; } .is-rtl.desktop .aside-expandable.menu-visible .main{ @@ -1356,6 +1365,7 @@ body, .is-rtl.tablet .app-menu-content, .is-rtl.phone .app-menu-content{ right:calc(-1 * var(--side-menu-size)); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .is-rtl:not(.portrait) .layout-side.layout-native.aside-visible .app-menu-content{ @@ -1369,6 +1379,7 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.8. Menu - Header Logo */ @@ -1791,6 +1802,7 @@ body .app-menu-content .app-menu-links{ color:var(--color-neutral-9); font-size:var(--font-size-s); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; } .form-control[data-input]:hover, .form-control[data-textarea]:hover{ @@ -1890,6 +1902,7 @@ body .app-menu-content .app-menu-links{ height:30px; opacity:1; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:48px; } @@ -1905,6 +1918,7 @@ body .app-menu-content .app-menu-links{ -webkit-transform:translateX(4px) translateZ(0); transform:translateX(4px) translateZ(0); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -1962,6 +1976,7 @@ body .app-menu-content .app-menu-links{ height:22px; opacity:1; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:22px; } @@ -2045,6 +2060,7 @@ body .app-menu-content .app-menu-links{ -ms-transform:rotate(-45deg) translateY(0) translateX(0); transform:rotate(-45deg) translateY(0) translateX(0); -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:8px; } @@ -2111,7 +2127,8 @@ body .app-menu-content .app-menu-links{ } .dropdown-container .dropdown-popup-row span{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .dropdown-container .scrollable-list-with-scroll{ @@ -2225,6 +2242,7 @@ select.dropdown-display[disabled]{ margin:0; padding:var(--space-none) var(--space-base); -webkit-transition:all 100ms linear; + -o-transition:all 100ms linear; transition:all 100ms linear; } .btn:hover:active{ @@ -3018,6 +3036,7 @@ div.feedback-message-warning{ height:24px; position:relative; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -3035,6 +3054,7 @@ div.feedback-message-warning{ display:flex; height:100%; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:100%; } @@ -3362,6 +3382,7 @@ div.feedback-message-warning{ .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path{ -webkit-transition:fill 0.1s; + -o-transition:fill 0.1s; transition:fill 0.1s; fill:inherit; } @@ -4084,6 +4105,7 @@ span.flatpickr-weekday{ -webkit-transition:transform 0.3s; -webkit-transition:-webkit-transform 0.3s; transition:-webkit-transform 0.3s; + -o-transition:transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; } @@ -4523,6 +4545,7 @@ span.flatpickr-weekday{ position:relative; -webkit-transition:-webkit-transform 0.2s linear; transition:-webkit-transform 0.2s linear; + -o-transition:transform 0.2s linear; transition:transform 0.2s linear; transition:transform 0.2s linear, -webkit-transform 0.2s linear; width:8px; @@ -4723,7 +4746,8 @@ span.flatpickr-weekday{ line-height:20px; max-width:100%; overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .vscomp-arrow{ @@ -4918,7 +4942,8 @@ span.flatpickr-weekday{ } .vscomp-option-text{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-user-select:none; -moz-user-select:none; @@ -4928,7 +4953,8 @@ span.flatpickr-weekday{ } .vscomp-option-description{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; color:#666; font-size:13px; @@ -5047,6 +5073,7 @@ span.flatpickr-weekday{ } .vscomp-wrapper .checkbox-icon::after{ -webkit-transition-duration:0.2s; + -o-transition-duration:0.2s; transition-duration:0.2s; border:2px solid #888; content:""; @@ -5198,6 +5225,7 @@ span.flatpickr-weekday{ } .vscomp-wrapper.keep-always-open .vscomp-dropbox{ -webkit-transition-duration:0s; + -o-transition-duration:0s; transition-duration:0s; border:1px solid #ddd; -webkit-box-shadow:none; @@ -5230,12 +5258,14 @@ span.flatpickr-weekday{ height:auto; min-height:28px; overflow:auto; - text-overflow:unset; + -o-text-overflow:unset; + text-overflow:unset; white-space:normal; } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-box-align:center; -ms-flex-align:center; @@ -5256,7 +5286,8 @@ span.flatpickr-weekday{ } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:calc(100% - 20px); } @@ -5763,6 +5794,7 @@ span.flatpickr-weekday{ -webkit-transform:translateX(100%) translateZ(0); transform:translateX(100%) translateZ(0); -webkit-transition:all 190ms ease-in; + -o-transition:all 190ms ease-in; transition:all 190ms ease-in; width:100%; will-change:transform; @@ -5772,6 +5804,7 @@ span.flatpickr-weekday{ -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .phone .split-screen-wrapper .split-right{ @@ -5897,6 +5930,7 @@ span.flatpickr-weekday{ border-color:var(--color-primary); opacity:1; -webkit-transition:opacity 300ms ease-in; + -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-accordion-item--is-disabled{ @@ -5924,7 +5958,8 @@ span.flatpickr-weekday{ width:100%; } .osui-accordion-item__title__placeholder{ - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; width:100%; } .osui-accordion-item__title--is-left{ @@ -5952,6 +5987,7 @@ span.flatpickr-weekday{ -ms-flex-pack:center; justify-content:center; -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:16px; } @@ -5964,6 +6000,7 @@ span.flatpickr-weekday{ height:100%; -webkit-transition:-webkit-transform 300ms ease-in-out; transition:-webkit-transform 300ms ease-in-out; + -o-transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; width:2px; @@ -6002,6 +6039,7 @@ span.flatpickr-weekday{ } .osui-accordion-item__content--is-animating{ -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .osui-accordion-item__content [data-block*=AnimatedLabel]:first-child .animated-label{ @@ -6186,6 +6224,7 @@ span.flatpickr-weekday{ } .card-background-color:after{ background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0))); + background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); content:""; height:100%; @@ -6234,7 +6273,8 @@ span.flatpickr-weekday{ .card-detail-text{ color:var(--color-neutral-7); overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; } .is-rtl .card-detail-left{ padding-left:var(--space-base); @@ -6428,6 +6468,7 @@ span.flatpickr-weekday{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); + -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); } .osui-flip-content__container--flip-self{ @@ -6685,7 +6726,8 @@ span.flatpickr-weekday{ } .list-item-content-title, .list-item-content-text{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .list-item-content-title{ @@ -6859,6 +6901,7 @@ span.flatpickr-weekday{ width:-moz-fit-content; width:fit-content; -webkit-transition:opacity 250ms; + -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper__balloon{ @@ -7180,26 +7223,32 @@ span.flatpickr-weekday{ } .osui-tooltip__balloon-wrapper--is-opening.left{ -webkit-transition:left 250ms; + -o-transition:left 250ms; transition:left 250ms; } .osui-tooltip__balloon-wrapper--is-opening.right{ -webkit-transition:right 250ms; + -o-transition:right 250ms; transition:right 250ms; } .osui-tooltip__balloon-wrapper--is-opening.center{ -webkit-transition:top 250ms; + -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.top, .osui-tooltip__balloon-wrapper--is-opening.top-left, .osui-tooltip__balloon-wrapper--is-opening.top-right{ -webkit-transition:top 250ms; + -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.bottom, .osui-tooltip__balloon-wrapper--is-opening.bottom-left, .osui-tooltip__balloon-wrapper--is-opening.bottom-right{ -webkit-transition:top 250ms; + -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening .osui-tooltip__balloon-wrapper__balloon{ -webkit-transition:opacity 250ms; + -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper--is-open{ @@ -7428,6 +7477,7 @@ span.flatpickr-weekday{ position:absolute; top:0; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); + -o-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); width:100%; will-change:opacity; @@ -7448,10 +7498,12 @@ span.flatpickr-weekday{ } .action-sheet-container--visible.action-sheet-container--animatable .action-sheet{ -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .action-sheet-container--animatable .action-sheet{ -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .action-sheet-buttons{ @@ -7501,6 +7553,7 @@ span.flatpickr-weekday{ animation-fill-mode:both; display:inline-block; -webkit-transition-timing-function:ease-out; + -o-transition-timing-function:ease-out; transition-timing-function:ease-out; visibility:hidden; width:100%; @@ -7593,6 +7646,7 @@ span.flatpickr-weekday{ position:absolute; top:8px; -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; z-index:var(--layer-global-screen); } @@ -7613,6 +7667,7 @@ span.flatpickr-weekday{ border-radius:var(--border-radius-none); padding:var(--space-none); -webkit-transition:all 100ms ease-in-out; + -o-transition:all 100ms ease-in-out; transition:all 100ms ease-in-out; } .animated-label-input .form-control[data-input]:focus, .animated-label-input .form-control[data-textarea]:focus{ @@ -7703,6 +7758,7 @@ span.flatpickr-weekday{ opacity:1; pointer-events:all; -webkit-transition:opacity 300ms ease-in; + -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-balloon:not(.osui-balloon--is-open) *{ @@ -7795,6 +7851,7 @@ span.flatpickr-weekday{ text-align:center; -webkit-transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); + -o-transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function), -webkit-transform 350ms var(--osui-bottom-sheet-transition-function); -webkit-transform:translateY(100%); @@ -7857,11 +7914,13 @@ span.flatpickr-weekday{ .osui-bottom-sheet:not(.osui-bottom-sheet--is-open){ -webkit-transition:-webkit-transform 200ms ease-out; transition:-webkit-transform 200ms ease-out; + -o-transition:transform 200ms ease-out; transition:transform 200ms ease-out; transition:transform 200ms ease-out, -webkit-transform 200ms ease-out; } .osui-bottom-sheet:not(.osui-bottom-sheet--is-open) + .osui-bottom-sheet-overlay{ -webkit-transition:opacity 200ms ease-out; + -o-transition:opacity 200ms ease-out; transition:opacity 200ms ease-out; } .osui-bottom-sheet-overlay{ @@ -7873,6 +7932,7 @@ span.flatpickr-weekday{ position:fixed; top:0; -webkit-transition:opacity 350ms ease-in; + -o-transition:opacity 350ms ease-in; transition:opacity 350ms ease-in; width:100vw; z-index:calc(var(--layer-below) + var(--osui-bottom-sheet-layer)); @@ -7907,6 +7967,7 @@ span.flatpickr-weekday{ transform:translateY(-2px); -webkit-transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); + -o-transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function), -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); top:0; @@ -7954,6 +8015,7 @@ span.flatpickr-weekday{ height:40px; opacity:1; -webkit-transition:opacity 150ms linear; + -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -8408,6 +8470,7 @@ span.flatpickr-weekday{ .safari input.flatpickr-input, .safari input.flatpickr-input + input{ -webkit-transition:none; + -o-transition:none; transition:none; } .phone .flatpickr-current-month .flatpickr-monthDropdown-months, @@ -8773,6 +8836,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b margin-right:var(--space-s); overflow:visible; -webkit-transition:background-color 0.25s ease; + -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; width:16px; } @@ -8783,6 +8847,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b height:85%; opacity:0; -webkit-transition:opacity 0.25s ease; + -o-transition:opacity 0.25s ease; transition:opacity 0.25s ease; width:40%; } @@ -8819,6 +8884,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-base); position:relative; -webkit-transition:height, border-color 0.25s ease; + -o-transition:height, border-color 0.25s ease; transition:height, border-color 0.25s ease; vertical-align:middle; width:100%; @@ -8837,6 +8903,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 0.25s ease; + -o-transition:all 0.25s ease; transition:all 0.25s ease; } .vscomp-toggle-button:hover{ @@ -8946,6 +9013,7 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b align-content:center; background-color:var(--color-neutral-0); -webkit-transition:background-color 0.25s ease; + -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; } .vscomp-option.focused, .vscomp-option.selected{ @@ -9161,8 +9229,10 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(0px) translateZ(0) scale(1); transform:translateY(0px) translateZ(0) scale(1); -webkit-transition:all 180ms ease-out; + -o-transition:all 180ms ease-out; transition:all 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); + -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); } .floating-actions-wrapper.is--open .floating-actions-item-button{ @@ -9217,6 +9287,7 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(--space-base) translateZ(0); transform:translateY(--space-base) translateZ(0); -webkit-transition:all 100ms ease-in; + -o-transition:all 100ms ease-in; transition:all 100ms ease-in; } .floating-actions-item{ @@ -9246,9 +9317,11 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:translateZ(0) scale(0.3); -webkit-transition:-webkit-transform 180ms ease-out; transition:-webkit-transform 180ms ease-out; + -o-transition:transform 180ms ease-out; transition:transform 180ms ease-out; transition:transform 180ms ease-out, -webkit-transform 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); + -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); width:40px; } @@ -9284,6 +9357,7 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform-origin:center center; transform-origin:center center; -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; width:56px; } @@ -9301,6 +9375,7 @@ body.vscomp-popup-active .vscomp-wrapper{ right:0; top:0; -webkit-transition:opacity 180ms ease-out; + -o-transition:opacity 180ms ease-out; transition:opacity 180ms ease-out; width:100vw; z-index:var(--osui-floating-actions-layer); @@ -9597,6 +9672,7 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; -webkit-transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; + -o-transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out; -webkit-user-select:none; @@ -9783,6 +9859,7 @@ body.vscomp-popup-active .vscomp-wrapper{ height:var(--range-slider-handle-size); -webkit-transition:-webkit-transform 150ms ease-out; transition:-webkit-transform 150ms ease-out; + -o-transition:transform 150ms ease-out; transition:transform 150ms ease-out; transition:transform 150ms ease-out, -webkit-transform 150ms ease-out; width:var(--range-slider-handle-size); @@ -10117,6 +10194,7 @@ body.vscomp-popup-active .vscomp-wrapper{ right:13px; top:50%; -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; width:16px; } @@ -10131,6 +10209,7 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; width:3px; } @@ -10143,12 +10222,14 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:translate(0, calc(-100% - var(--os-safe-area-top))); transform:translate(0, calc(-100% - var(--os-safe-area-top))); -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; } .layout-native .header-right .search-input input[data-input], .layout-native .header-right .search-input input[data-input]:empty{ height:34px; padding-left:var(--space-xl); -webkit-transition:none; + -o-transition:none; transition:none; } .layout-native .header-right .search-input input[data-input]:focus{ @@ -10191,6 +10272,7 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:var(--sidebar-width); will-change:transform; @@ -10268,6 +10350,7 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; + -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:200vw; will-change:opacity; @@ -10290,6 +10373,7 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:none; -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; + -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; will-change:transform; @@ -10392,6 +10476,7 @@ body.vscomp-popup-active .vscomp-wrapper{ } .stackedcards--animatable{ -webkit-transition:all 400ms ease; + -o-transition:all 400ms ease; transition:all 400ms ease; } .stackedcards .init{ @@ -10701,7 +10786,8 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h .bottom-bar-item-text{ font-size:10px; overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; } @@ -11085,6 +11171,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon{ @@ -11096,6 +11183,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon:before{ @@ -11107,6 +11195,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h content:""; height:6px; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -11121,6 +11210,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h height:100%; position:relative; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; -servicestudio-min-width:100px; -servicestudio-margin-left:calc(var(--space-s) * -1); @@ -11162,6 +11252,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; + -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -11507,6 +11598,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h position:absolute; -webkit-transition:-webkit-transform 200ms linear; transition:-webkit-transform 200ms linear; + -o-transition:transform 200ms linear; transition:transform 200ms linear; transition:transform 200ms linear, -webkit-transform 200ms linear; -webkit-transform-origin:0 0; @@ -12066,10 +12158,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before{ -webkit-transition-delay:0.5s; + -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before, .osui-progress-bar__container.animate-progress-change .osui-progress-bar__value:before{ -webkit-transition-duration:0.35s; + -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-bar__value{ @@ -12178,14 +12272,17 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ stroke-dashoffset:var(--stroke-dashoffset); stroke-linecap:var(--shape); -webkit-transition:stroke-dashoffset 0; + -o-transition:stroke-dashoffset 0; transition:stroke-dashoffset 0; } .osui-progress-circle__container__progress-path.animate-entrance, .osui-progress-circle__container__progress-path.animate-progress-change{ -webkit-transition-duration:0.35s; + -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-circle__container__progress-path.animate-entrance{ -webkit-transition-delay:0.5s; + -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-circle__container__trail-path{ @@ -12269,6 +12366,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ position:absolute; top:0; -webkit-transition:opacity linear 150ms; + -o-transition:opacity linear 150ms; transition:opacity linear 150ms; } .rating-item-filled, .rating-item-half, .rating-item-empty{ @@ -12329,6 +12427,9 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating.is-half input:checked + .rating-item .rating-item-half{ opacity:1; } +.rating.is-half input:checked + .rating-item .rating-item-filled{ + opacity:0; +} .rating.is-half input:hover ~ .rating-item .rating-item-filled, .rating.is-half input:hover ~ .rating-item .rating-item-half{ opacity:0; @@ -12337,6 +12438,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ .rating.is-half input:hover + .rating-item .rating-item-filled{ opacity:1; } +.rating.is-half:hover input:hover ~ .rating-item .rating-item-filled{ + opacity:0; +} +.rating.is-half:hover input:hover + .rating-item .rating-item-filled{ + opacity:1; +} .rating .icon-states{ -servicestudio-display:flex; } @@ -12432,6 +12539,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ display:-ms-inline-flexbox; display:inline-flex; -webkit-transition:none; + -o-transition:none; transition:none; vertical-align:middle; white-space:nowrap; @@ -12564,12 +12672,14 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .pull-to-refresh .genericon{ -webkit-transition:all 0.25s ease; + -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .content, .ptr-loading .pull-to-refresh, .ptr-reset .content, .ptr-reset .pull-to-refresh{ -webkit-transition:all 0.25s ease; + -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .pull-to-refresh .genericon, .ptr-reset .pull-to-refresh .genericon{ @@ -12669,6 +12779,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ top:0; -webkit-transition:-webkit-transform 200ms ease-in-out; transition:-webkit-transform 200ms ease-in-out; + -o-transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; } @@ -12680,7 +12791,8 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-dropdown-serverside__selected-values > *:first-child{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -12701,6 +12813,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ padding:var(--space-none) var(--space-base); position:relative; -webkit-transition:border 250ms ease-in-out; + -o-transition:border 250ms ease-in-out; transition:border 250ms ease-in-out; width:100%; } @@ -12726,6 +12839,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ overflow:hidden; position:absolute; -webkit-transition:opacity 300ms ease; + -o-transition:opacity 300ms ease; transition:opacity 300ms ease; width:100%; z-index:var(--layer-global-elevated); @@ -12756,6 +12870,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ transform:translateY(calc(-1 * var(--osui-dropdown-ss-thresholdanimateval))); -webkit-transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; + -o-transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; } @@ -12855,6 +12970,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ -ms-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity 250ms ease; + -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-content{ @@ -12991,6 +13107,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown overflow:hidden; top:0; -webkit-transition:opacity 250ms ease; + -o-transition:opacity 250ms ease; transition:opacity 250ms ease; z-index:var(--layer-global-instant-interaction); } @@ -13041,6 +13158,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown padding:var(--space-s) var(--space-base); position:relative; -webkit-transition:background 250ms ease; + -o-transition:background 250ms ease; transition:background 250ms ease; width:100%; z-index:var(--layer-global-screen); @@ -13068,7 +13186,8 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .osui-dropdown-serverside-item__content > *:first-child{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -13137,6 +13256,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown font-size:24px; font-weight:400; -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-icon:after{ @@ -13162,6 +13282,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .section-expandable .section-expandable-content-animating, .section-expandable .section-expandable-content.is--animating{ -webkit-transition:all 300ms ease-in-out; + -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-content.no-padding{ @@ -13263,6 +13384,7 @@ button.OSFillParent{ overflow:hidden; position:relative; -webkit-transition:all 400ms ease; + -o-transition:all 400ms ease; transition:all 400ms ease; will-change:transform; } @@ -13306,6 +13428,7 @@ button.OSFillParent{ } .carousel--animatable{ -webkit-transition:all 250ms linear; + -o-transition:all 250ms linear; transition:all 250ms linear; will-change:transform; } @@ -13391,6 +13514,7 @@ button.OSFillParent{ -ms-transform:translateY(-25px); transform:translateY(-25px); -webkit-transition:opacity 150ms linear; + -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -13431,6 +13555,7 @@ button.OSFillParent{ .carousel-is-moving .hide-on-drag{ opacity:0; -webkit-transition:opacity 250ms ease; + -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .carousel .list.list-group{ @@ -13943,6 +14068,7 @@ input.OSFillParent.calendar-input{ line-height:calc(var(--font-size-base) * 2); padding-left:var(--space-base); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; vertical-align:top; width:100%; @@ -14106,6 +14232,7 @@ input.OSFillParent.calendar-input{ height:40px; padding:var(--space-none) var(--space-base); -webkit-transition:all 180ms linear; + -o-transition:all 180ms linear; transition:all 180ms linear; } .section-expandable-content .choices__list--dropdown.is-active{ @@ -14190,6 +14317,7 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; transition:all 300ms ease; } .choices[data-type*=select-one].is-open:after{ @@ -14231,7 +14359,8 @@ input.OSFillParent.calendar-input{ color:var(--color-neutral-10); overflow:hidden; padding-right:var(--space-base); - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:99%; } @@ -14391,6 +14520,7 @@ input.OSFillParent.calendar-input{ .flip-content-container{ position:relative; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); + -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; @@ -14540,10 +14670,12 @@ input.OSFillParent.calendar-input{ } .notification--visible.notification--animatable{ -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .notification--animatable{ -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .layout-native .notification{ @@ -14602,6 +14734,7 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:left; transform-origin:left; -webkit-transition:all 750ms ease-out; + -o-transition:all 750ms ease-out; transition:all 750ms ease-out; will-change:width; } @@ -14745,6 +14878,7 @@ input.OSFillParent.calendar-input{ -ms-transform:translateX(102%); transform:translateX(102%); -webkit-transition:all 130ms ease-in; + -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:500px; will-change:transform; @@ -14781,6 +14915,7 @@ input.OSFillParent.calendar-input{ -ms-transform:none; transform:none; -webkit-transition:all 330ms ease-out; + -o-transition:all 330ms ease-out; transition:all 330ms ease-out; will-change:transform; } @@ -14877,6 +15012,7 @@ input.OSFillParent.calendar-input{ display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon{ @@ -14888,6 +15024,7 @@ input.OSFillParent.calendar-input{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon:before{ @@ -14899,6 +15036,7 @@ input.OSFillParent.calendar-input{ content:""; height:6px; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -14913,6 +15051,7 @@ input.OSFillParent.calendar-input{ height:100%; position:relative; -webkit-transition:all 150ms linear; + -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-item a{ @@ -14949,6 +15088,7 @@ input.OSFillParent.calendar-input{ -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; + -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -15224,6 +15364,7 @@ input.OSFillParent.calendar-input{ margin-left:var(--space-l); padding:var(--space-base) var(--space-xs); -webkit-transition:border 150ms linear; + -o-transition:border 150ms linear; transition:border 150ms linear; white-space:nowrap; } @@ -15280,6 +15421,7 @@ input.OSFillParent.calendar-input{ .layout-native .tabs-content-wrapper{ -webkit-transition:-webkit-transform 230ms ease-in-out; transition:-webkit-transform 230ms ease-in-out; + -o-transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out, -webkit-transform 230ms ease-in-out; } @@ -16359,7 +16501,8 @@ input.OSFillParent.calendar-input{ } .text-ellipsis{ overflow:hidden; - text-overflow:ellipsis; + -o-text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } /*! 7.9. Border Size */ @@ -17542,6 +17685,7 @@ img.thumbnail{ /*! 7.24. Miscellaneous */ .no-transition{ -webkit-transition:none !important; + -o-transition:none !important; transition:none !important; } .no-transform{ @@ -17599,6 +17743,7 @@ img.thumbnail{ .fade-leave.fade-leave-active{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; + -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17614,6 +17759,7 @@ img.thumbnail{ .fade-leave.fade-leave-active .content{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; + -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17690,6 +17836,7 @@ img.thumbnail{ .fade-enter.fade-enter-active .header{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; + -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17700,6 +17847,7 @@ img.thumbnail{ .fade-leave.fade-leave-active{ opacity:0; -webkit-transition:all 400ms ease-in-out; + -o-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out; } .fade-leave.fade-leave-active .header{ @@ -17707,6 +17855,7 @@ img.thumbnail{ -webkit-transform:translateY(-200px) translateZ(0); transform:translateY(-200px) translateZ(0); -webkit-transition:none; + -o-transition:none; transition:none; } .fade-leave.screen-container{ diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss index 19e23639be..da9fa5916b 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss @@ -152,6 +152,10 @@ .rating-item-half { opacity: 1; } + + .rating-item-filled { + opacity: 0; + } } input:hover ~ .rating-item { @@ -165,6 +169,14 @@ input:hover + .rating-item .rating-item-filled { opacity: 1; } + + &:hover input:hover ~ .rating-item .rating-item-filled { + opacity: 0; + } + + &:hover input:hover + .rating-item .rating-item-filled { + opacity: 1; + } } .icon-states { From 50f769b338c0273fe2a1159337f5fbf6bde2da44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Wed, 20 Sep 2023 19:48:32 +0100 Subject: [PATCH 11/17] - use constants or enum where was static text in the past. --- dist/OutSystemsUI.d.ts | 13 +++++---- dist/OutSystemsUI.js | 29 ++++++++++--------- src/scripts/OSFramework/OSUI/GlobalEnum.ts | 1 + .../OSFramework/OSUI/Pattern/Rating/Rating.ts | 26 ++++++++++------- 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 920da4ad25..2213c9ec69 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -223,8 +223,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { enum FloatingPosition { Auto = "auto", Bottom = "bottom", - BottomStart = "bottom-start", BottomEnd = "bottom-end", + BottomStart = "bottom-start", Center = "center", Left = "left", LeftEnd = "left-end", @@ -233,8 +233,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { RightEnd = "right-end", RightStart = "right-start", Top = "top", - TopStart = "top-start", - TopEnd = "top-end" + TopEnd = "top-end", + TopStart = "top-start" } enum CssProperties { Auto = "auto", @@ -284,12 +284,12 @@ declare namespace OSFramework.OSUI.GlobalEnum { Class = "class", DataInput = "data-input", Disabled = "disabled", + Href = "href", Id = "id", Name = "name", StatusBar = "data-status-bar-height", Style = "style", - Type = "type", - Href = "href" + Type = "type" } enum HTMLElement { Body = "body", @@ -298,6 +298,7 @@ declare namespace OSFramework.OSUI.GlobalEnum { FieldSet = "fieldset", Input = "input", Link = "a", + Radio = "radio", Span = "span" } enum HTMLEvent { @@ -402,8 +403,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { Submenu = "Submenu", SwipeEvents = "SwipeEvents", Tabs = "Tabs", - TabsHeaderItem = "TabsHeaderItem", TabsContentItem = "TabsContentItem", + TabsHeaderItem = "TabsHeaderItem", Timepicker = "Timepicker", Tooltip = "Tooltip", TouchEvents = "TouchEvents", diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 11ac0581cc..d28e1af188 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -291,8 +291,8 @@ var OSFramework; (function (FloatingPosition) { FloatingPosition["Auto"] = "auto"; FloatingPosition["Bottom"] = "bottom"; - FloatingPosition["BottomStart"] = "bottom-start"; FloatingPosition["BottomEnd"] = "bottom-end"; + FloatingPosition["BottomStart"] = "bottom-start"; FloatingPosition["Center"] = "center"; FloatingPosition["Left"] = "left"; FloatingPosition["LeftEnd"] = "left-end"; @@ -301,8 +301,8 @@ var OSFramework; FloatingPosition["RightEnd"] = "right-end"; FloatingPosition["RightStart"] = "right-start"; FloatingPosition["Top"] = "top"; - FloatingPosition["TopStart"] = "top-start"; FloatingPosition["TopEnd"] = "top-end"; + FloatingPosition["TopStart"] = "top-start"; })(FloatingPosition = GlobalEnum.FloatingPosition || (GlobalEnum.FloatingPosition = {})); let CssProperties; (function (CssProperties) { @@ -358,12 +358,12 @@ var OSFramework; HTMLAttributes["Class"] = "class"; HTMLAttributes["DataInput"] = "data-input"; HTMLAttributes["Disabled"] = "disabled"; + HTMLAttributes["Href"] = "href"; HTMLAttributes["Id"] = "id"; HTMLAttributes["Name"] = "name"; HTMLAttributes["StatusBar"] = "data-status-bar-height"; HTMLAttributes["Style"] = "style"; HTMLAttributes["Type"] = "type"; - HTMLAttributes["Href"] = "href"; })(HTMLAttributes = GlobalEnum.HTMLAttributes || (GlobalEnum.HTMLAttributes = {})); let HTMLElement; (function (HTMLElement) { @@ -373,6 +373,7 @@ var OSFramework; HTMLElement["FieldSet"] = "fieldset"; HTMLElement["Input"] = "input"; HTMLElement["Link"] = "a"; + HTMLElement["Radio"] = "radio"; HTMLElement["Span"] = "span"; })(HTMLElement = GlobalEnum.HTMLElement || (GlobalEnum.HTMLElement = {})); let HTMLEvent; @@ -485,8 +486,8 @@ var OSFramework; PatternName["Submenu"] = "Submenu"; PatternName["SwipeEvents"] = "SwipeEvents"; PatternName["Tabs"] = "Tabs"; - PatternName["TabsHeaderItem"] = "TabsHeaderItem"; PatternName["TabsContentItem"] = "TabsContentItem"; + PatternName["TabsHeaderItem"] = "TabsHeaderItem"; PatternName["Timepicker"] = "Timepicker"; PatternName["Tooltip"] = "Tooltip"; PatternName["TouchEvents"] = "TouchEvents"; @@ -8408,9 +8409,9 @@ var OSFramework; this._isHalfValue = false; const isInput = OSUI.Helper.Dom.Styles.ContainsClass(currentTarget, Rating_1.Enum.CssClass.RatingInput); if (isInput) { - const lastchosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue]; - if (lastchosen) { - lastchosen.ariaChecked = 'false'; + const _lastChosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue]; + if (_lastChosen) { + _lastChosen.ariaChecked = OSUI.Constants.A11YAttributes.States.False; } this.configs.RatingValue = this._getValue(); this._setValue(true); @@ -8424,10 +8425,10 @@ var OSFramework; _renderItem(index) { const labelHTML = index !== 0 ? this._clonedPlaceholders : ''; const ratingInputId = this.uniqueId + '-rating-' + index; - const input = ``; + const input = ``; let label; if (!this.configs.IsEdit) { - label = ``; + label = ``; } else { label = ``; @@ -8437,7 +8438,7 @@ var OSFramework; _setFieldsetDisabledStatus(isDisabled) { const isFieldsetDisabled = OSUI.Helper.Dom.Attribute.Get(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled); if (isDisabled) { - OSUI.Helper.Dom.Attribute.Set(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled, 'true'); + OSUI.Helper.Dom.Attribute.Set(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled, OSUI.Constants.A11YAttributes.States.True); } else if (!isDisabled && isFieldsetDisabled) { OSUI.Helper.Dom.Attribute.Remove(this._ratingFieldsetElem, OSUI.GlobalEnum.HTMLAttributes.Disabled); @@ -8469,13 +8470,13 @@ var OSFramework; if (this.configs.IsEdit) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); LabelList.forEach((label) => { - label.removeAttribute('aria-hidden'); + label.removeAttribute(OSUI.Constants.A11YAttributes.Aria.Hidden); }); } else { OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); LabelList.forEach((label) => { - label.ariaHidden = 'true'; + label.ariaHidden = OSUI.Constants.A11YAttributes.States.True; }); } this._manageRatingEvent(); @@ -8502,7 +8503,7 @@ var OSFramework; } if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; - ratingItems[1].ariaChecked = 'true'; + ratingItems[1].ariaChecked = OSUI.Constants.A11YAttributes.States.True; return; } let newValue = this._isHalfValue || this._decimalValue > 0.7 @@ -8517,7 +8518,7 @@ var OSFramework; console.warn(`The value of the RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} exceeds the scale boundaries. To ensure its correct behaviour, set a value smaller or equal to '${this.configs.RatingScale}'.`); } ratingItems[newValue].checked = true; - ratingItems[newValue].ariaChecked = 'true'; + ratingItems[newValue].ariaChecked = OSUI.Constants.A11YAttributes.States.True; if (this._isHalfValue) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf); } diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts index 499692e107..231dbbe6c3 100644 --- a/src/scripts/OSFramework/OSUI/GlobalEnum.ts +++ b/src/scripts/OSFramework/OSUI/GlobalEnum.ts @@ -183,6 +183,7 @@ namespace OSFramework.OSUI.GlobalEnum { FieldSet = 'fieldset', Input = 'input', Link = 'a', + Radio = 'radio', Span = 'span', } diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts index 367b2e7d19..174fa32642 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts @@ -131,7 +131,7 @@ namespace OSFramework.OSUI.Patterns.Rating { * Method that handles the click event and set the new value, by checking the input:checked * * @private - * @param {MouseEvent} e + * @param {MouseEvent} * @memberof Rating */ private _ratingOnClick(e: MouseEvent): void { @@ -142,11 +142,11 @@ namespace OSFramework.OSUI.Patterns.Rating { // Check if the e.target is a label with the Enum.RatingCssClass.RatingInput class const isInput = Helper.Dom.Styles.ContainsClass(currentTarget, Enum.CssClass.RatingInput); if (isInput) { - const lastchosen = this.selfElement.querySelectorAll(GlobalEnum.HTMLElement.Input)[ + const _lastChosen = this.selfElement.querySelectorAll(GlobalEnum.HTMLElement.Input)[ this.configs.RatingValue ]; - if (lastchosen) { - lastchosen.ariaChecked = 'false'; + if (_lastChosen) { + _lastChosen.ariaChecked = Constants.A11YAttributes.States.False; } // If it is, then get the input:checked value @@ -182,11 +182,11 @@ namespace OSFramework.OSUI.Patterns.Rating { const ratingInputId: string = this.uniqueId + '-rating-' + index; // Create input and label html - const input = ``; + const input = ``; let label; if (!this.configs.IsEdit) { - label = ``; + label = ``; } else { label = ``; } @@ -209,7 +209,11 @@ namespace OSFramework.OSUI.Patterns.Rating { ); if (isDisabled) { - Helper.Dom.Attribute.Set(this._ratingFieldsetElem, GlobalEnum.HTMLAttributes.Disabled, 'true'); + Helper.Dom.Attribute.Set( + this._ratingFieldsetElem, + GlobalEnum.HTMLAttributes.Disabled, + Constants.A11YAttributes.States.True + ); } else if (!isDisabled && isFieldsetDisabled) { Helper.Dom.Attribute.Remove(this._ratingFieldsetElem, GlobalEnum.HTMLAttributes.Disabled); } @@ -279,13 +283,13 @@ namespace OSFramework.OSUI.Patterns.Rating { Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit); LabelList.forEach((label) => { - label.removeAttribute('aria-hidden'); + label.removeAttribute(Constants.A11YAttributes.Aria.Hidden); }); } else { Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit); LabelList.forEach((label) => { - label.ariaHidden = 'true'; + label.ariaHidden = Constants.A11YAttributes.States.True; }); } @@ -351,7 +355,7 @@ namespace OSFramework.OSUI.Patterns.Rating { // If there's only one rating item, then there's no need for further checks, this one will be checked if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; - ratingItems[1].ariaChecked = 'true'; + ratingItems[1].ariaChecked = Constants.A11YAttributes.States.True; return; } @@ -381,7 +385,7 @@ namespace OSFramework.OSUI.Patterns.Rating { // Set the itemas as :checked ratingItems[newValue].checked = true; - ratingItems[newValue].ariaChecked = 'true'; + ratingItems[newValue].ariaChecked = Constants.A11YAttributes.States.True; // If is-half add the appropriate class, otherwise just declare the this.isHalfValue, to complete the if statement if (this._isHalfValue) { From b92a3f5d87e877fe4894e45113a473818486533b Mon Sep 17 00:00:00 2001 From: Giuliana Silva <108938618+OS-giulianasilva@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:23:04 +0100 Subject: [PATCH 12/17] Fix Overflow Menu issue inside Tabs (#828) --- dist/OutSystemsUI.d.ts | 12 ++++++------ dist/OutSystemsUI.js | 16 ++++++++++------ .../OSFramework/OSUI/Feature/Balloon/Balloon.ts | 8 ++++++-- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 920da4ad25..6af12ba66e 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -223,8 +223,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { enum FloatingPosition { Auto = "auto", Bottom = "bottom", - BottomStart = "bottom-start", BottomEnd = "bottom-end", + BottomStart = "bottom-start", Center = "center", Left = "left", LeftEnd = "left-end", @@ -233,8 +233,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { RightEnd = "right-end", RightStart = "right-start", Top = "top", - TopStart = "top-start", - TopEnd = "top-end" + TopEnd = "top-end", + TopStart = "top-start" } enum CssProperties { Auto = "auto", @@ -284,12 +284,12 @@ declare namespace OSFramework.OSUI.GlobalEnum { Class = "class", DataInput = "data-input", Disabled = "disabled", + Href = "href", Id = "id", Name = "name", StatusBar = "data-status-bar-height", Style = "style", - Type = "type", - Href = "href" + Type = "type" } enum HTMLElement { Body = "body", @@ -402,8 +402,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { Submenu = "Submenu", SwipeEvents = "SwipeEvents", Tabs = "Tabs", - TabsHeaderItem = "TabsHeaderItem", TabsContentItem = "TabsContentItem", + TabsHeaderItem = "TabsHeaderItem", Timepicker = "Timepicker", Tooltip = "Tooltip", TouchEvents = "TouchEvents", diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 723f9cf7f7..ec02024f5e 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -291,8 +291,8 @@ var OSFramework; (function (FloatingPosition) { FloatingPosition["Auto"] = "auto"; FloatingPosition["Bottom"] = "bottom"; - FloatingPosition["BottomStart"] = "bottom-start"; FloatingPosition["BottomEnd"] = "bottom-end"; + FloatingPosition["BottomStart"] = "bottom-start"; FloatingPosition["Center"] = "center"; FloatingPosition["Left"] = "left"; FloatingPosition["LeftEnd"] = "left-end"; @@ -301,8 +301,8 @@ var OSFramework; FloatingPosition["RightEnd"] = "right-end"; FloatingPosition["RightStart"] = "right-start"; FloatingPosition["Top"] = "top"; - FloatingPosition["TopStart"] = "top-start"; FloatingPosition["TopEnd"] = "top-end"; + FloatingPosition["TopStart"] = "top-start"; })(FloatingPosition = GlobalEnum.FloatingPosition || (GlobalEnum.FloatingPosition = {})); let CssProperties; (function (CssProperties) { @@ -358,12 +358,12 @@ var OSFramework; HTMLAttributes["Class"] = "class"; HTMLAttributes["DataInput"] = "data-input"; HTMLAttributes["Disabled"] = "disabled"; + HTMLAttributes["Href"] = "href"; HTMLAttributes["Id"] = "id"; HTMLAttributes["Name"] = "name"; HTMLAttributes["StatusBar"] = "data-status-bar-height"; HTMLAttributes["Style"] = "style"; HTMLAttributes["Type"] = "type"; - HTMLAttributes["Href"] = "href"; })(HTMLAttributes = GlobalEnum.HTMLAttributes || (GlobalEnum.HTMLAttributes = {})); let HTMLElement; (function (HTMLElement) { @@ -485,8 +485,8 @@ var OSFramework; PatternName["Submenu"] = "Submenu"; PatternName["SwipeEvents"] = "SwipeEvents"; PatternName["Tabs"] = "Tabs"; - PatternName["TabsHeaderItem"] = "TabsHeaderItem"; PatternName["TabsContentItem"] = "TabsContentItem"; + PatternName["TabsHeaderItem"] = "TabsHeaderItem"; PatternName["Timepicker"] = "Timepicker"; PatternName["Tooltip"] = "Tooltip"; PatternName["TouchEvents"] = "TouchEvents"; @@ -1874,10 +1874,14 @@ var OSFramework; this._currentFocusedElementIndex = this._currentFocusedElementIndex - 1; } if (this._currentFocusedElementIndex === undefined) { - this.featureElem.focus(); + OSUI.Helper.AsyncInvocation(() => { + this.featureElem.focus(); + }); } else { - this._focusableBalloonElements[this._currentFocusedElementIndex].focus(); + OSUI.Helper.AsyncInvocation(() => { + this._focusableBalloonElements[this._currentFocusedElementIndex].focus(); + }); } } _onkeypressCallback(e) { diff --git a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts index cafeb332f0..d386985a2b 100644 --- a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts +++ b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts @@ -99,10 +99,14 @@ namespace OSFramework.OSUI.Feature.Balloon { // If the _currentFocusedElementIndex is undefined, focus on the balloon wrapper if (this._currentFocusedElementIndex === undefined) { - this.featureElem.focus(); + OSUI.Helper.AsyncInvocation(() => { + this.featureElem.focus(); + }); // Otherwise, focus on the element corresponding ot the _currentFocusedElementIndex } else { - (this._focusableBalloonElements[this._currentFocusedElementIndex] as HTMLElement).focus(); + OSUI.Helper.AsyncInvocation(() => { + (this._focusableBalloonElements[this._currentFocusedElementIndex] as HTMLElement).focus(); + }); } } From c7dec45cda9806764a8fa892d0acd22bf4b21772 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Thu, 21 Sep 2023 18:27:05 +0100 Subject: [PATCH 13/17] Adde Accessibility improvements --- .../Datepicker/Flatpickr/AbstractFlatpickr.ts | 39 +++++++++++++++++-- .../Flatpickr/scss/_flatpickr.scss | 23 +++++++++++ 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts index 9d2052f6b6..4946da13f6 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts @@ -8,6 +8,9 @@ namespace Providers.OSUI.Datepicker.Flatpickr { private _a11yInfoContainerElem: HTMLElement; // Event OnBodyScroll common behaviour private _bodyScrollCommonBehaviour: SharedProviderResources.Flatpickr.UpdatePositionOnScroll; + private _providerFocusSpanTarget: HTMLElement; + // Store HtmlElement for the Today Button + private _todayButtonElem: HTMLElement; // Validation of ZIndex position common behavior private _zindexCommonBehavior: SharedProviderResources.Flatpickr.UpdateZindex; // Store pattern input HTML element reference @@ -75,6 +78,24 @@ namespace Providers.OSUI.Datepicker.Flatpickr { ); } + // Method to handle the keydows event for the Today Button + private _todayButtonKeydown(e: KeyboardEvent):void { + switch (e.key) { + case OSFramework.OSUI.GlobalEnum.Keycodes.Tab: + // Prevent the flatpickr default behaviour for tab + return; + + case OSFramework.OSUI.GlobalEnum.Keycodes.Enter: + case OSFramework.OSUI.GlobalEnum.Keycodes.Space: + e.preventDefault(); + // Set the currentDate at the Datepicker + this.provider.setDate(this.provider.now, true); + // Trigger the jumpIntoDate! + this.jumpIntoToday(); + break; + } + } + // Remove the clientHeight that has been assigned before the redraw process! private _unsetParentMinHeight(): void { OSFramework.OSUI.Helper.Dom.Styles.RemoveStyleAttribute( @@ -91,21 +112,29 @@ namespace Providers.OSUI.Datepicker.Flatpickr { */ protected addTodayBtn(): void { // Create the wrapper container - const todayBtnWrapper = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Div); - todayBtnWrapper.classList.add(Enum.CssClasses.TodayBtn); + this._todayButtonElem = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Div); + this._todayButtonElem.classList.add(Enum.CssClasses.TodayBtn); // Create the TodayBtn element const todayBtn = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Link); + OSFramework.OSUI.Helper.A11Y.TabIndexTrue(todayBtn); const langCode = l10ns.TodayBtn[this.configs.Lang] !== undefined ? this.configs.Lang : 'en'; todayBtn.innerHTML = l10ns.TodayBtn[langCode].title; OSFramework.OSUI.Helper.A11Y.AriaLabel(todayBtn, l10ns.TodayBtn[langCode].ariaLabel); todayBtn.addEventListener(OSFramework.OSUI.GlobalEnum.HTMLEvent.Click, this.todayBtnClick.bind(this)); + todayBtn.addEventListener(OSFramework.OSUI.GlobalEnum.HTMLEvent.keyDown, this._todayButtonKeydown.bind(this)); // Append elements to the proper containers - todayBtnWrapper.appendChild(todayBtn); - this.provider.calendarContainer.appendChild(todayBtnWrapper); + this._todayButtonElem.appendChild(todayBtn); + // Make sure to append this just before the focus trap span from flatpickr + this._providerFocusSpanTarget = this.provider.calendarContainer.querySelector('.focus-trap-bottom-element'); + + if(this._providerFocusSpanTarget) { + this.provider.calendarContainer.insertBefore(this._todayButtonElem, this._providerFocusSpanTarget); + } + } /** @@ -398,6 +427,7 @@ namespace Providers.OSUI.Datepicker.Flatpickr { public close(): void { if (this.provider.isOpen) { this.provider.close(); + OSFramework.OSUI.Helper.A11Y.TabIndexFalse(this._todayButtonElem); } } @@ -455,6 +485,7 @@ namespace Providers.OSUI.Datepicker.Flatpickr { const isInputDisable = this.datePickerPlatformInputElem.disabled; if (this.provider.isOpen === false && isInputDisable === false) { this.provider.open(); + OSFramework.OSUI.Helper.A11Y.TabIndexTrue(this._todayButtonElem); } } diff --git a/src/scripts/Providers/OSUI/SharedProviderResources/Flatpickr/scss/_flatpickr.scss b/src/scripts/Providers/OSUI/SharedProviderResources/Flatpickr/scss/_flatpickr.scss index aa7ca43556..9f529b87ea 100644 --- a/src/scripts/Providers/OSUI/SharedProviderResources/Flatpickr/scss/_flatpickr.scss +++ b/src/scripts/Providers/OSUI/SharedProviderResources/Flatpickr/scss/_flatpickr.scss @@ -553,3 +553,26 @@ span.flatpickr-weekday { --osui-flatpickr-layer: calc(var(--osui-menu-layer) + var(--layer-local-tier-1)); } } + +// Accessibility ------------------------------------------------------------------ +// cannot use has-accessible-features class, as the pickder is detached from its context on layout +.osui-datepicker-calendar { + .flatpickr-months .flatpickr-month:focus-within { + overflow: visible; + } + + .numInputWrapper input, + .flatpickr-monthDropdown-months, + .flatpickr-prev-month, + .flatpickr-next-month, + .flatpickr-am-pm, + .flatpickr-today-button a { + &:focus-visible { + box-shadow: 0 0 0 3px var(--color-focus-outer); + } + } + + .flatpickr-day:focus-visible{ + border-color: var(--color-focus-outer); + } +} \ No newline at end of file From c62e195e06dbf082cbde175ff6ac980a2b61dced Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Fri, 22 Sep 2023 09:59:04 +0100 Subject: [PATCH 14/17] Fix today button tests --- .../OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts index 4946da13f6..60a21079fc 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts @@ -427,7 +427,9 @@ namespace Providers.OSUI.Datepicker.Flatpickr { public close(): void { if (this.provider.isOpen) { this.provider.close(); - OSFramework.OSUI.Helper.A11Y.TabIndexFalse(this._todayButtonElem); + if(this.configs.ShowTodayButton) { + OSFramework.OSUI.Helper.A11Y.TabIndexFalse(this._todayButtonElem); + } } } @@ -485,7 +487,9 @@ namespace Providers.OSUI.Datepicker.Flatpickr { const isInputDisable = this.datePickerPlatformInputElem.disabled; if (this.provider.isOpen === false && isInputDisable === false) { this.provider.open(); - OSFramework.OSUI.Helper.A11Y.TabIndexTrue(this._todayButtonElem); + if(this.configs.ShowTodayButton) { + OSFramework.OSUI.Helper.A11Y.TabIndexTrue(this._todayButtonElem); + } } } From 3ef02dd4702d676d73818ea5212b2fa499eed8c8 Mon Sep 17 00:00:00 2001 From: Giuliana Silva <108938618+OS-giulianasilva@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:41:25 +0100 Subject: [PATCH 15/17] ROU-4518: Accessibility improvements identified on team audit for the Button Loading (#827) * Improve Button Loading accessibility * Disable button loading when loading --- dist/OutSystemsUI.css | 170 ++---------------- dist/OutSystemsUI.d.ts | 3 + dist/OutSystemsUI.js | 16 +- src/scripts/OSFramework/OSUI/Constants.ts | 3 +- .../OSUI/Helper/ManageAccessibility.ts | 28 ++- .../Pattern/ButtonLoading/ButtonLoading.ts | 7 +- 6 files changed, 65 insertions(+), 162 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index bd577440d4..92c62b5ef9 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -506,7 +506,6 @@ a{ a, a:visited{ color:var(--color-primary); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; } a:hover, a:focus{ @@ -1104,7 +1103,6 @@ body, position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; - -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:100vw; will-change:opacity; @@ -1117,7 +1115,6 @@ body, opacity:1; pointer-events:auto; -webkit-transition:opacity 330ms ease-out; - -o-transition:opacity 330ms ease-out; transition:opacity 330ms ease-out; } .layout .app-menu-content{ @@ -1175,7 +1172,6 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; - -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1188,7 +1184,6 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; - -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1229,7 +1224,6 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.6. Layout Native - Menu */ @@ -1312,7 +1306,6 @@ body, transform:translateX(0) translateZ(0); -webkit-transition:-webkit-transform 130ms ease-in; transition:-webkit-transform 130ms ease-in; - -o-transition:transform 130ms ease-in; transition:transform 130ms ease-in; transition:transform 130ms ease-in, -webkit-transform 130ms ease-in; width:var(--side-menu-size); @@ -1324,7 +1317,6 @@ body, transform:translateX(var(--side-menu-size)) translateZ(0); -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; - -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; } @@ -1355,7 +1347,6 @@ body, -ms-transform:none; transform:none; -webkit-transition:none; - -o-transition:none; transition:none; } .is-rtl.desktop .aside-expandable.menu-visible .main{ @@ -1365,7 +1356,6 @@ body, .is-rtl.tablet .app-menu-content, .is-rtl.phone .app-menu-content{ right:calc(-1 * var(--side-menu-size)); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .is-rtl:not(.portrait) .layout-side.layout-native.aside-visible .app-menu-content{ @@ -1379,7 +1369,6 @@ body, -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } /*! 3.8. Menu - Header Logo */ @@ -1802,7 +1791,6 @@ body .app-menu-content .app-menu-links{ color:var(--color-neutral-9); font-size:var(--font-size-s); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; } .form-control[data-input]:hover, .form-control[data-textarea]:hover{ @@ -1902,7 +1890,6 @@ body .app-menu-content .app-menu-links{ height:30px; opacity:1; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:48px; } @@ -1918,7 +1905,6 @@ body .app-menu-content .app-menu-links{ -webkit-transform:translateX(4px) translateZ(0); transform:translateX(4px) translateZ(0); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -1976,7 +1962,6 @@ body .app-menu-content .app-menu-links{ height:22px; opacity:1; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:22px; } @@ -2060,7 +2045,6 @@ body .app-menu-content .app-menu-links{ -ms-transform:rotate(-45deg) translateY(0) translateX(0); transform:rotate(-45deg) translateY(0) translateX(0); -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:8px; } @@ -2127,8 +2111,7 @@ body .app-menu-content .app-menu-links{ } .dropdown-container .dropdown-popup-row span{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .dropdown-container .scrollable-list-with-scroll{ @@ -2242,7 +2225,6 @@ select.dropdown-display[disabled]{ margin:0; padding:var(--space-none) var(--space-base); -webkit-transition:all 100ms linear; - -o-transition:all 100ms linear; transition:all 100ms linear; } .btn:hover:active{ @@ -3036,7 +3018,6 @@ div.feedback-message-warning{ height:24px; position:relative; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:24px; } @@ -3054,7 +3035,6 @@ div.feedback-message-warning{ display:flex; height:100%; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:100%; } @@ -3382,7 +3362,6 @@ div.feedback-message-warning{ .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path{ -webkit-transition:fill 0.1s; - -o-transition:fill 0.1s; transition:fill 0.1s; fill:inherit; } @@ -4105,7 +4084,6 @@ span.flatpickr-weekday{ -webkit-transition:transform 0.3s; -webkit-transition:-webkit-transform 0.3s; transition:-webkit-transform 0.3s; - -o-transition:transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; } @@ -4545,7 +4523,6 @@ span.flatpickr-weekday{ position:relative; -webkit-transition:-webkit-transform 0.2s linear; transition:-webkit-transform 0.2s linear; - -o-transition:transform 0.2s linear; transition:transform 0.2s linear; transition:transform 0.2s linear, -webkit-transform 0.2s linear; width:8px; @@ -4746,8 +4723,7 @@ span.flatpickr-weekday{ line-height:20px; max-width:100%; overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .vscomp-arrow{ @@ -4942,8 +4918,7 @@ span.flatpickr-weekday{ } .vscomp-option-text{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-user-select:none; -moz-user-select:none; @@ -4953,8 +4928,7 @@ span.flatpickr-weekday{ } .vscomp-option-description{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; color:#666; font-size:13px; @@ -5073,7 +5047,6 @@ span.flatpickr-weekday{ } .vscomp-wrapper .checkbox-icon::after{ -webkit-transition-duration:0.2s; - -o-transition-duration:0.2s; transition-duration:0.2s; border:2px solid #888; content:""; @@ -5225,7 +5198,6 @@ span.flatpickr-weekday{ } .vscomp-wrapper.keep-always-open .vscomp-dropbox{ -webkit-transition-duration:0s; - -o-transition-duration:0s; transition-duration:0s; border:1px solid #ddd; -webkit-box-shadow:none; @@ -5258,14 +5230,12 @@ span.flatpickr-weekday{ height:auto; min-height:28px; overflow:auto; - -o-text-overflow:unset; - text-overflow:unset; + text-overflow:unset; white-space:normal; } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; -webkit-box-align:center; -ms-flex-align:center; @@ -5286,8 +5256,7 @@ span.flatpickr-weekday{ } .vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:calc(100% - 20px); } @@ -5794,7 +5763,6 @@ span.flatpickr-weekday{ -webkit-transform:translateX(100%) translateZ(0); transform:translateX(100%) translateZ(0); -webkit-transition:all 190ms ease-in; - -o-transition:all 190ms ease-in; transition:all 190ms ease-in; width:100%; will-change:transform; @@ -5804,7 +5772,6 @@ span.flatpickr-weekday{ -webkit-transform:translateX(0) translateZ(0); transform:translateX(0) translateZ(0); -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .phone .split-screen-wrapper .split-right{ @@ -5930,7 +5897,6 @@ span.flatpickr-weekday{ border-color:var(--color-primary); opacity:1; -webkit-transition:opacity 300ms ease-in; - -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-accordion-item--is-disabled{ @@ -5958,8 +5924,7 @@ span.flatpickr-weekday{ width:100%; } .osui-accordion-item__title__placeholder{ - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; width:100%; } .osui-accordion-item__title--is-left{ @@ -5987,7 +5952,6 @@ span.flatpickr-weekday{ -ms-flex-pack:center; justify-content:center; -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; width:16px; } @@ -6000,7 +5964,6 @@ span.flatpickr-weekday{ height:100%; -webkit-transition:-webkit-transform 300ms ease-in-out; transition:-webkit-transform 300ms ease-in-out; - -o-transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out; transition:transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; width:2px; @@ -6039,7 +6002,6 @@ span.flatpickr-weekday{ } .osui-accordion-item__content--is-animating{ -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .osui-accordion-item__content [data-block*=AnimatedLabel]:first-child .animated-label{ @@ -6224,7 +6186,6 @@ span.flatpickr-weekday{ } .card-background-color:after{ background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0))); - background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); content:""; height:100%; @@ -6273,8 +6234,7 @@ span.flatpickr-weekday{ .card-detail-text{ color:var(--color-neutral-7); overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; } .is-rtl .card-detail-left{ padding-left:var(--space-base); @@ -6468,7 +6428,6 @@ span.flatpickr-weekday{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); - -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); } .osui-flip-content__container--flip-self{ @@ -6726,8 +6685,7 @@ span.flatpickr-weekday{ } .list-item-content-title, .list-item-content-text{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } .list-item-content-title{ @@ -6901,7 +6859,6 @@ span.flatpickr-weekday{ width:-moz-fit-content; width:fit-content; -webkit-transition:opacity 250ms; - -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper__balloon{ @@ -7223,32 +7180,26 @@ span.flatpickr-weekday{ } .osui-tooltip__balloon-wrapper--is-opening.left{ -webkit-transition:left 250ms; - -o-transition:left 250ms; transition:left 250ms; } .osui-tooltip__balloon-wrapper--is-opening.right{ -webkit-transition:right 250ms; - -o-transition:right 250ms; transition:right 250ms; } .osui-tooltip__balloon-wrapper--is-opening.center{ -webkit-transition:top 250ms; - -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.top, .osui-tooltip__balloon-wrapper--is-opening.top-left, .osui-tooltip__balloon-wrapper--is-opening.top-right{ -webkit-transition:top 250ms; - -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening.bottom, .osui-tooltip__balloon-wrapper--is-opening.bottom-left, .osui-tooltip__balloon-wrapper--is-opening.bottom-right{ -webkit-transition:top 250ms; - -o-transition:top 250ms; transition:top 250ms; } .osui-tooltip__balloon-wrapper--is-opening .osui-tooltip__balloon-wrapper__balloon{ -webkit-transition:opacity 250ms; - -o-transition:opacity 250ms; transition:opacity 250ms; } .osui-tooltip__balloon-wrapper--is-open{ @@ -7477,7 +7428,6 @@ span.flatpickr-weekday{ position:absolute; top:0; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); - -o-transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); transition:opacity 0.3s cubic-bezier(0, 0, 0.3, 1); width:100%; will-change:opacity; @@ -7498,12 +7448,10 @@ span.flatpickr-weekday{ } .action-sheet-container--visible.action-sheet-container--animatable .action-sheet{ -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .action-sheet-container--animatable .action-sheet{ -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .action-sheet-buttons{ @@ -7553,7 +7501,6 @@ span.flatpickr-weekday{ animation-fill-mode:both; display:inline-block; -webkit-transition-timing-function:ease-out; - -o-transition-timing-function:ease-out; transition-timing-function:ease-out; visibility:hidden; width:100%; @@ -7646,7 +7593,6 @@ span.flatpickr-weekday{ position:absolute; top:8px; -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; z-index:var(--layer-global-screen); } @@ -7667,7 +7613,6 @@ span.flatpickr-weekday{ border-radius:var(--border-radius-none); padding:var(--space-none); -webkit-transition:all 100ms ease-in-out; - -o-transition:all 100ms ease-in-out; transition:all 100ms ease-in-out; } .animated-label-input .form-control[data-input]:focus, .animated-label-input .form-control[data-textarea]:focus{ @@ -7758,7 +7703,6 @@ span.flatpickr-weekday{ opacity:1; pointer-events:all; -webkit-transition:opacity 300ms ease-in; - -o-transition:opacity 300ms ease-in; transition:opacity 300ms ease-in; } .osui-balloon:not(.osui-balloon--is-open) *{ @@ -7851,7 +7795,6 @@ span.flatpickr-weekday{ text-align:center; -webkit-transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); transition:-webkit-transform 350ms var(--osui-bottom-sheet-transition-function); - -o-transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function); transition:transform 350ms var(--osui-bottom-sheet-transition-function), -webkit-transform 350ms var(--osui-bottom-sheet-transition-function); -webkit-transform:translateY(100%); @@ -7914,13 +7857,11 @@ span.flatpickr-weekday{ .osui-bottom-sheet:not(.osui-bottom-sheet--is-open){ -webkit-transition:-webkit-transform 200ms ease-out; transition:-webkit-transform 200ms ease-out; - -o-transition:transform 200ms ease-out; transition:transform 200ms ease-out; transition:transform 200ms ease-out, -webkit-transform 200ms ease-out; } .osui-bottom-sheet:not(.osui-bottom-sheet--is-open) + .osui-bottom-sheet-overlay{ -webkit-transition:opacity 200ms ease-out; - -o-transition:opacity 200ms ease-out; transition:opacity 200ms ease-out; } .osui-bottom-sheet-overlay{ @@ -7932,7 +7873,6 @@ span.flatpickr-weekday{ position:fixed; top:0; -webkit-transition:opacity 350ms ease-in; - -o-transition:opacity 350ms ease-in; transition:opacity 350ms ease-in; width:100vw; z-index:calc(var(--layer-below) + var(--osui-bottom-sheet-layer)); @@ -7967,7 +7907,6 @@ span.flatpickr-weekday{ transform:translateY(-2px); -webkit-transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); - -o-transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); transition:opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function), -webkit-transform 200ms var(--osui-bottom-sheet-transition-function); top:0; @@ -8015,7 +7954,6 @@ span.flatpickr-weekday{ height:40px; opacity:1; -webkit-transition:opacity 150ms linear; - -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -8470,7 +8408,6 @@ span.flatpickr-weekday{ .safari input.flatpickr-input, .safari input.flatpickr-input + input{ -webkit-transition:none; - -o-transition:none; transition:none; } .phone .flatpickr-current-month .flatpickr-monthDropdown-months, @@ -8836,7 +8773,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b margin-right:var(--space-s); overflow:visible; -webkit-transition:background-color 0.25s ease; - -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; width:16px; } @@ -8847,7 +8783,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b height:85%; opacity:0; -webkit-transition:opacity 0.25s ease; - -o-transition:opacity 0.25s ease; transition:opacity 0.25s ease; width:40%; } @@ -8884,7 +8819,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-base); position:relative; -webkit-transition:height, border-color 0.25s ease; - -o-transition:height, border-color 0.25s ease; transition:height, border-color 0.25s ease; vertical-align:middle; width:100%; @@ -8903,7 +8837,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 0.25s ease; - -o-transition:all 0.25s ease; transition:all 0.25s ease; } .vscomp-toggle-button:hover{ @@ -9013,7 +8946,6 @@ html[data-uieditorversion^="1"] .osui-datepicker-calendar-ss-preview.has-today-b align-content:center; background-color:var(--color-neutral-0); -webkit-transition:background-color 0.25s ease; - -o-transition:background-color 0.25s ease; transition:background-color 0.25s ease; } .vscomp-option.focused, .vscomp-option.selected{ @@ -9229,10 +9161,8 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(0px) translateZ(0) scale(1); transform:translateY(0px) translateZ(0) scale(1); -webkit-transition:all 180ms ease-out; - -o-transition:all 180ms ease-out; transition:all 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); - -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); } .floating-actions-wrapper.is--open .floating-actions-item-button{ @@ -9287,7 +9217,6 @@ body.vscomp-popup-active .vscomp-wrapper{ -webkit-transform:translateY(--space-base) translateZ(0); transform:translateY(--space-base) translateZ(0); -webkit-transition:all 100ms ease-in; - -o-transition:all 100ms ease-in; transition:all 100ms ease-in; } .floating-actions-item{ @@ -9317,11 +9246,9 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:translateZ(0) scale(0.3); -webkit-transition:-webkit-transform 180ms ease-out; transition:-webkit-transform 180ms ease-out; - -o-transition:transform 180ms ease-out; transition:transform 180ms ease-out; transition:transform 180ms ease-out, -webkit-transform 180ms ease-out; -webkit-transition-delay:calc(var(--delay) * 40ms); - -o-transition-delay:calc(var(--delay) * 40ms); transition-delay:calc(var(--delay) * 40ms); width:40px; } @@ -9357,7 +9284,6 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform-origin:center center; transform-origin:center center; -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; width:56px; } @@ -9375,7 +9301,6 @@ body.vscomp-popup-active .vscomp-wrapper{ right:0; top:0; -webkit-transition:opacity 180ms ease-out; - -o-transition:opacity 180ms ease-out; transition:opacity 180ms ease-out; width:100vw; z-index:var(--osui-floating-actions-layer); @@ -9672,7 +9597,6 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; -webkit-transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition:opacity 300ms ease-out, -webkit-transform 300ms ease-out; - -o-transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out; transition:transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out; -webkit-user-select:none; @@ -9859,7 +9783,6 @@ body.vscomp-popup-active .vscomp-wrapper{ height:var(--range-slider-handle-size); -webkit-transition:-webkit-transform 150ms ease-out; transition:-webkit-transform 150ms ease-out; - -o-transition:transform 150ms ease-out; transition:transform 150ms ease-out; transition:transform 150ms ease-out, -webkit-transform 150ms ease-out; width:var(--range-slider-handle-size); @@ -10194,7 +10117,6 @@ body.vscomp-popup-active .vscomp-wrapper{ right:13px; top:50%; -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; width:16px; } @@ -10209,7 +10131,6 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; width:3px; } @@ -10222,14 +10143,12 @@ body.vscomp-popup-active .vscomp-wrapper{ -ms-transform:translate(0, calc(-100% - var(--os-safe-area-top))); transform:translate(0, calc(-100% - var(--os-safe-area-top))); -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; } .layout-native .header-right .search-input input[data-input], .layout-native .header-right .search-input input[data-input]:empty{ height:34px; padding-left:var(--space-xl); -webkit-transition:none; - -o-transition:none; transition:none; } .layout-native .header-right .search-input input[data-input]:focus{ @@ -10272,7 +10191,6 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:var(--sidebar-width); will-change:transform; @@ -10350,7 +10268,6 @@ body.vscomp-popup-active .vscomp-wrapper{ position:fixed; top:0; -webkit-transition:opacity 130ms ease-in; - -o-transition:opacity 130ms ease-in; transition:opacity 130ms ease-in; width:200vw; will-change:opacity; @@ -10373,7 +10290,6 @@ body.vscomp-popup-active .vscomp-wrapper{ transform:none; -webkit-transition:-webkit-transform 330ms ease-out; transition:-webkit-transform 330ms ease-out; - -o-transition:transform 330ms ease-out; transition:transform 330ms ease-out; transition:transform 330ms ease-out, -webkit-transform 330ms ease-out; will-change:transform; @@ -10476,7 +10392,6 @@ body.vscomp-popup-active .vscomp-wrapper{ } .stackedcards--animatable{ -webkit-transition:all 400ms ease; - -o-transition:all 400ms ease; transition:all 400ms ease; } .stackedcards .init{ @@ -10786,8 +10701,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h .bottom-bar-item-text{ font-size:10px; overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; } @@ -11171,7 +11085,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon{ @@ -11183,7 +11096,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .osui-submenu__header__icon:before{ @@ -11195,7 +11107,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h content:""; height:6px; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -11210,7 +11121,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h height:100%; position:relative; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; -servicestudio-min-width:100px; -servicestudio-margin-left:calc(var(--space-s) * -1); @@ -11252,7 +11162,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; - -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -11598,7 +11507,6 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h position:absolute; -webkit-transition:-webkit-transform 200ms linear; transition:-webkit-transform 200ms linear; - -o-transition:transform 200ms linear; transition:transform 200ms linear; transition:transform 200ms linear, -webkit-transform 200ms linear; -webkit-transform-origin:0 0; @@ -12158,12 +12066,10 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before{ -webkit-transition-delay:0.5s; - -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-bar__container.animate-entrance .osui-progress-bar__value:before, .osui-progress-bar__container.animate-progress-change .osui-progress-bar__value:before{ -webkit-transition-duration:0.35s; - -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-bar__value{ @@ -12272,17 +12178,14 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ stroke-dashoffset:var(--stroke-dashoffset); stroke-linecap:var(--shape); -webkit-transition:stroke-dashoffset 0; - -o-transition:stroke-dashoffset 0; transition:stroke-dashoffset 0; } .osui-progress-circle__container__progress-path.animate-entrance, .osui-progress-circle__container__progress-path.animate-progress-change{ -webkit-transition-duration:0.35s; - -o-transition-duration:0.35s; transition-duration:0.35s; } .osui-progress-circle__container__progress-path.animate-entrance{ -webkit-transition-delay:0.5s; - -o-transition-delay:0.5s; transition-delay:0.5s; } .osui-progress-circle__container__trail-path{ @@ -12366,7 +12269,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ position:absolute; top:0; -webkit-transition:opacity linear 150ms; - -o-transition:opacity linear 150ms; transition:opacity linear 150ms; } .rating-item-filled, .rating-item-half, .rating-item-empty{ @@ -12539,7 +12441,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ display:-ms-inline-flexbox; display:inline-flex; -webkit-transition:none; - -o-transition:none; transition:none; vertical-align:middle; white-space:nowrap; @@ -12672,14 +12573,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .pull-to-refresh .genericon{ -webkit-transition:all 0.25s ease; - -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .content, .ptr-loading .pull-to-refresh, .ptr-reset .content, .ptr-reset .pull-to-refresh{ -webkit-transition:all 0.25s ease; - -o-transition:all 0.25s ease; transition:all 0.25s ease; } .ptr-loading .pull-to-refresh .genericon, .ptr-reset .pull-to-refresh .genericon{ @@ -12779,7 +12678,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ top:0; -webkit-transition:-webkit-transform 200ms ease-in-out; transition:-webkit-transform 200ms ease-in-out; - -o-transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out; transition:transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; } @@ -12791,8 +12689,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ } .osui-dropdown-serverside__selected-values > *:first-child{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -12813,7 +12710,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ padding:var(--space-none) var(--space-base); position:relative; -webkit-transition:border 250ms ease-in-out; - -o-transition:border 250ms ease-in-out; transition:border 250ms ease-in-out; width:100%; } @@ -12839,7 +12735,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ overflow:hidden; position:absolute; -webkit-transition:opacity 300ms ease; - -o-transition:opacity 300ms ease; transition:opacity 300ms ease; width:100%; z-index:var(--layer-global-elevated); @@ -12870,7 +12765,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ transform:translateY(calc(-1 * var(--osui-dropdown-ss-thresholdanimateval))); -webkit-transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; transition:opacity 250ms ease, -webkit-transform 300ms ease-in-out; - -o-transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out; transition:opacity 250ms ease, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; } @@ -12970,7 +12864,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ -ms-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity 250ms ease; - -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-content{ @@ -13107,7 +13000,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown overflow:hidden; top:0; -webkit-transition:opacity 250ms ease; - -o-transition:opacity 250ms ease; transition:opacity 250ms ease; z-index:var(--layer-global-instant-interaction); } @@ -13158,7 +13050,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown padding:var(--space-s) var(--space-base); position:relative; -webkit-transition:background 250ms ease; - -o-transition:background 250ms ease; transition:background 250ms ease; width:100%; z-index:var(--layer-global-screen); @@ -13186,8 +13077,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .osui-dropdown-serverside-item__content > *:first-child{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:100%; } @@ -13256,7 +13146,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown font-size:24px; font-weight:400; -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-icon:after{ @@ -13282,7 +13171,6 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown } .section-expandable .section-expandable-content-animating, .section-expandable .section-expandable-content.is--animating{ -webkit-transition:all 300ms ease-in-out; - -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .section-expandable .section-expandable-content.no-padding{ @@ -13384,7 +13272,6 @@ button.OSFillParent{ overflow:hidden; position:relative; -webkit-transition:all 400ms ease; - -o-transition:all 400ms ease; transition:all 400ms ease; will-change:transform; } @@ -13428,7 +13315,6 @@ button.OSFillParent{ } .carousel--animatable{ -webkit-transition:all 250ms linear; - -o-transition:all 250ms linear; transition:all 250ms linear; will-change:transform; } @@ -13514,7 +13400,6 @@ button.OSFillParent{ -ms-transform:translateY(-25px); transform:translateY(-25px); -webkit-transition:opacity 150ms linear; - -o-transition:opacity 150ms linear; transition:opacity 150ms linear; width:40px; will-change:opacity; @@ -13555,7 +13440,6 @@ button.OSFillParent{ .carousel-is-moving .hide-on-drag{ opacity:0; -webkit-transition:opacity 250ms ease; - -o-transition:opacity 250ms ease; transition:opacity 250ms ease; } .carousel .list.list-group{ @@ -14068,7 +13952,6 @@ input.OSFillParent.calendar-input{ line-height:calc(var(--font-size-base) * 2); padding-left:var(--space-base); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; vertical-align:top; width:100%; @@ -14232,7 +14115,6 @@ input.OSFillParent.calendar-input{ height:40px; padding:var(--space-none) var(--space-base); -webkit-transition:all 180ms linear; - -o-transition:all 180ms linear; transition:all 180ms linear; } .section-expandable-content .choices__list--dropdown.is-active{ @@ -14317,7 +14199,6 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:center; transform-origin:center; -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; transition:all 300ms ease; } .choices[data-type*=select-one].is-open:after{ @@ -14359,8 +14240,7 @@ input.OSFillParent.calendar-input{ color:var(--color-neutral-10); overflow:hidden; padding-right:var(--space-base); - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; width:99%; } @@ -14520,7 +14400,6 @@ input.OSFillParent.calendar-input{ .flip-content-container{ position:relative; -webkit-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); - -o-transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); transition:all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; @@ -14670,12 +14549,10 @@ input.OSFillParent.calendar-input{ } .notification--visible.notification--animatable{ -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; } .notification--animatable{ -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; } .layout-native .notification{ @@ -14734,7 +14611,6 @@ input.OSFillParent.calendar-input{ -ms-transform-origin:left; transform-origin:left; -webkit-transition:all 750ms ease-out; - -o-transition:all 750ms ease-out; transition:all 750ms ease-out; will-change:width; } @@ -14878,7 +14754,6 @@ input.OSFillParent.calendar-input{ -ms-transform:translateX(102%); transform:translateX(102%); -webkit-transition:all 130ms ease-in; - -o-transition:all 130ms ease-in; transition:all 130ms ease-in; width:500px; will-change:transform; @@ -14915,7 +14790,6 @@ input.OSFillParent.calendar-input{ -ms-transform:none; transform:none; -webkit-transition:all 330ms ease-out; - -o-transition:all 330ms ease-out; transition:all 330ms ease-out; will-change:transform; } @@ -15012,7 +14886,6 @@ input.OSFillParent.calendar-input{ display:flex; padding:var(--space-none) var(--space-s); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon{ @@ -15024,7 +14897,6 @@ input.OSFillParent.calendar-input{ -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-icon:before{ @@ -15036,7 +14908,6 @@ input.OSFillParent.calendar-input{ content:""; height:6px; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; width:6px; } @@ -15051,7 +14922,6 @@ input.OSFillParent.calendar-input{ height:100%; position:relative; -webkit-transition:all 150ms linear; - -o-transition:all 150ms linear; transition:all 150ms linear; } .submenu-item a{ @@ -15088,7 +14958,6 @@ input.OSFillParent.calendar-input{ -ms-transform:translateY(-8px); transform:translateY(-8px); -webkit-transition:all 130ms ease-out; - -o-transition:all 130ms ease-out; transition:all 130ms ease-out; z-index:var(--layer-global-elevated); } @@ -15364,7 +15233,6 @@ input.OSFillParent.calendar-input{ margin-left:var(--space-l); padding:var(--space-base) var(--space-xs); -webkit-transition:border 150ms linear; - -o-transition:border 150ms linear; transition:border 150ms linear; white-space:nowrap; } @@ -15421,7 +15289,6 @@ input.OSFillParent.calendar-input{ .layout-native .tabs-content-wrapper{ -webkit-transition:-webkit-transform 230ms ease-in-out; transition:-webkit-transform 230ms ease-in-out; - -o-transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out; transition:transform 230ms ease-in-out, -webkit-transform 230ms ease-in-out; } @@ -16501,8 +16368,7 @@ input.OSFillParent.calendar-input{ } .text-ellipsis{ overflow:hidden; - -o-text-overflow:ellipsis; - text-overflow:ellipsis; + text-overflow:ellipsis; white-space:nowrap; } /*! 7.9. Border Size */ @@ -17685,7 +17551,6 @@ img.thumbnail{ /*! 7.24. Miscellaneous */ .no-transition{ -webkit-transition:none !important; - -o-transition:none !important; transition:none !important; } .no-transform{ @@ -17743,7 +17608,6 @@ img.thumbnail{ .fade-leave.fade-leave-active{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; - -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17759,7 +17623,6 @@ img.thumbnail{ .fade-leave.fade-leave-active .content{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; - -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17836,7 +17699,6 @@ img.thumbnail{ .fade-enter.fade-enter-active .header{ -webkit-transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; transition:opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; - -o-transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out; transition:transform 400ms ease-in-out, opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } @@ -17847,7 +17709,6 @@ img.thumbnail{ .fade-leave.fade-leave-active{ opacity:0; -webkit-transition:all 400ms ease-in-out; - -o-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out; } .fade-leave.fade-leave-active .header{ @@ -17855,7 +17716,6 @@ img.thumbnail{ -webkit-transform:translateY(-200px) translateZ(0); transform:translateY(-200px) translateZ(0); -webkit-transition:none; - -o-transition:none; transition:none; } .fade-leave.screen-container{ diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 2213c9ec69..3ae0db236d 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -10,6 +10,7 @@ declare namespace OSFramework.OSUI.Constants { const A11YAttributes: { Aria: { Atomic: string; + Busy: string; Controls: string; Describedby: string; Disabled: string; @@ -1061,6 +1062,8 @@ declare namespace OSFramework.OSUI.Helper { abstract class A11Y { static AriaAtomicFalse(element: HTMLElement): void; static AriaAtomicTrue(element: HTMLElement): void; + static AriaBusyFalse(element: HTMLElement): void; + static AriaBusyTrue(element: HTMLElement): void; static AriaControls(element: HTMLElement, targetId: string): void; static AriaDescribedBy(element: HTMLElement, targetId: string): void; static AriaDisabled(element: HTMLElement, isDisabled: boolean): void; diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 139e12741c..d83a591c7d 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -51,7 +51,8 @@ var OSFramework; (function (Constants) { Constants.A11YAttributes = { Aria: { - Atomic: 'atomic', + Atomic: 'aria-atomic', + Busy: 'aria-busy', Controls: 'aria-controls', Describedby: 'aria-describedby', Disabled: 'aria-disabled', @@ -2936,6 +2937,12 @@ var OSFramework; static AriaAtomicTrue(element) { Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Aria.Atomic, OSUI.Constants.A11YAttributes.States.True); } + static AriaBusyFalse(element) { + Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Aria.Busy, OSUI.Constants.A11YAttributes.States.False); + } + static AriaBusyTrue(element) { + Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Aria.Busy, OSUI.Constants.A11YAttributes.States.True); + } static AriaControls(element, targetId) { Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Aria.Controls, targetId); } @@ -4762,12 +4769,15 @@ var OSFramework; _setIsLoading(isLoading) { if (isLoading) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, ButtonLoading_1.Enum.CssClass.IsLoading); - this.isBuilt && OSUI.Helper.A11Y.TabIndexFalse(this._buttonElement); + OSUI.Helper.A11Y.AriaBusyTrue(this.selfElement); + this.isBuilt && + OSUI.Helper.Dom.Attribute.Set(this._buttonElement, OSUI.GlobalEnum.HTMLAttributes.Disabled, 'true'); this._buttonElement.blur(); } else { OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, ButtonLoading_1.Enum.CssClass.IsLoading); - this.isBuilt && OSUI.Helper.A11Y.TabIndexTrue(this._buttonElement); + OSUI.Helper.A11Y.AriaBusyFalse(this.selfElement); + this.isBuilt && OSUI.Helper.Dom.Attribute.Remove(this._buttonElement, OSUI.GlobalEnum.HTMLAttributes.Disabled); } } _setLoadingLabel(showSpinnerOnly) { diff --git a/src/scripts/OSFramework/OSUI/Constants.ts b/src/scripts/OSFramework/OSUI/Constants.ts index bc74444bad..c239723ed5 100644 --- a/src/scripts/OSFramework/OSUI/Constants.ts +++ b/src/scripts/OSFramework/OSUI/Constants.ts @@ -5,7 +5,8 @@ namespace OSFramework.OSUI.Constants { */ export const A11YAttributes = { Aria: { - Atomic: 'atomic', + Atomic: 'aria-atomic', + Busy: 'aria-busy', Controls: 'aria-controls', Describedby: 'aria-describedby', Disabled: 'aria-disabled', diff --git a/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts b/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts index cb04243796..c88877567a 100644 --- a/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts +++ b/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts @@ -23,6 +23,28 @@ namespace OSFramework.OSUI.Helper { Dom.Attribute.Set(element, Constants.A11YAttributes.Aria.Atomic, Constants.A11YAttributes.States.True); } + /** + * Method that will disable the aria-busy + * + * @param {HTMLElement} element Target element to receive the value atributte + * @returns + * @memberof OSFramework.Helper.A11Y + */ + public static AriaBusyFalse(element: HTMLElement): void { + Dom.Attribute.Set(element, Constants.A11YAttributes.Aria.Busy, Constants.A11YAttributes.States.False); + } + + /** + * Method that will enable the aria-busy + * + * @param {HTMLElement} element Target element to receive the value atributte + * @returns + * @memberof OSFramework.Helper.A11Y + */ + public static AriaBusyTrue(element: HTMLElement): void { + Dom.Attribute.Set(element, Constants.A11YAttributes.Aria.Busy, Constants.A11YAttributes.States.True); + } + /** * Method that will define the aria-controls * @@ -403,7 +425,11 @@ namespace OSFramework.OSUI.Helper { * @memberof A11Y */ public static RolePresentation(element: HTMLElement): void { - Dom.Attribute.Set(element, Constants.A11YAttributes.Role.AttrName, Constants.A11YAttributes.Role.Presentation); + Dom.Attribute.Set( + element, + Constants.A11YAttributes.Role.AttrName, + Constants.A11YAttributes.Role.Presentation + ); } /** diff --git a/src/scripts/OSFramework/OSUI/Pattern/ButtonLoading/ButtonLoading.ts b/src/scripts/OSFramework/OSUI/Pattern/ButtonLoading/ButtonLoading.ts index 2b31acee1c..6f318a0db3 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/ButtonLoading/ButtonLoading.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/ButtonLoading/ButtonLoading.ts @@ -32,11 +32,14 @@ namespace OSFramework.OSUI.Patterns.ButtonLoading { private _setIsLoading(isLoading: boolean): void { if (isLoading) { Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsLoading); - this.isBuilt && Helper.A11Y.TabIndexFalse(this._buttonElement); + Helper.A11Y.AriaBusyTrue(this.selfElement); + this.isBuilt && + Helper.Dom.Attribute.Set(this._buttonElement, GlobalEnum.HTMLAttributes.Disabled, 'true'); this._buttonElement.blur(); } else { Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsLoading); - this.isBuilt && Helper.A11Y.TabIndexTrue(this._buttonElement); + Helper.A11Y.AriaBusyFalse(this.selfElement); + this.isBuilt && Helper.Dom.Attribute.Remove(this._buttonElement, GlobalEnum.HTMLAttributes.Disabled); } } From 41ebb0d0483bd61d15f124e0769f83346e58ccc2 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Mon, 25 Sep 2023 10:48:55 +0100 Subject: [PATCH 16/17] Fixed use case for inline DatePicker --- .../Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts index 60a21079fc..321bd319f8 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts @@ -133,6 +133,8 @@ namespace Providers.OSUI.Datepicker.Flatpickr { if(this._providerFocusSpanTarget) { this.provider.calendarContainer.insertBefore(this._todayButtonElem, this._providerFocusSpanTarget); + } else { + this.provider.calendarContainer.appendChild(this._todayButtonElem); } } From 9d883a616a066b018b05428a7f5a83590b96a346 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Mon, 25 Sep 2023 15:41:13 +0100 Subject: [PATCH 17/17] Fix overlowMenu display property --- .../OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss index 77c1d3fa5d..fc9c84fdd8 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss @@ -4,6 +4,7 @@ /// Patterns - Navigation - OverflowMenu .osui-overflow-menu { + display: inline-block; --osui-overflow-menu-min-width: 170px; --border-radius-rounded: 16px;